dsh-tiddlywiki 0.1.0

package/src/client/settings-page.ts

@@ -0,0 +1,397 @@
+/**
+ * Settings-page half (design doc §13, config panel): a pure-DOM page mounted
+ * inside a `settings.section` React wrapper. Everything talks to the host
+ * admin routes — same-origin JSON, no client services beyond `slots`:
+ *
+ *   GET  /dsh-tiddlywiki/admin/state    current info + catalog + config
+ *   POST /dsh-tiddlywiki/admin/info     { plugins?, themes? } → restart TW
+ *   POST /dsh-tiddlywiki/admin/config   { ...patch }           → persist
+ *   POST /dsh-tiddlywiki/admin/restart  restart the TW child
+ *
+ * Sections:
+ *   1. 状态/重启      TW 运行状态 + git 概览 + 重启按钮
+ *   2. 常规配置       note.tag / git.* / uiLanguage（改了什么保存什么）
+ *   3. 插件管理       自带官方插件勾选（可搜索）→ 应用并重启 TW
+ *   4. 主题管理       自带主题单选 → 应用并重启 TW
+ *
+ * @module dsh-tiddlywiki/client/settings-page
+ */
+import * as React from 'react'
+import { toast } from './toast.ts'
+
+const STATE_ENDPOINT = '/dsh-tiddlywiki/admin/state'
+const INFO_ENDPOINT = '/dsh-tiddlywiki/admin/info'
+const CONFIG_ENDPOINT = '/dsh-tiddlywiki/admin/config'
+const RESTART_ENDPOINT = '/dsh-tiddlywiki/admin/restart'
+
+interface CatalogEntry {
+  name: string
+  title: string
+  label: string
+  description: string
+}
+
+interface AdminState {
+  ok?: boolean
+  server?: { status?: string; url?: string; wikiPath?: string; error?: string }
+  info?: { plugins?: string[]; themes?: string[]; languages?: string[] }
+  catalog?: { plugins?: CatalogEntry[]; themes?: CatalogEntry[]; languages?: CatalogEntry[] }
+  config?: Record<string, unknown>
+  git?: { exists?: boolean; branch?: string; dirty?: boolean; lastCommit?: string; remote?: string } | null
+  error?: string
+}
+
+function make<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag)
+  if (className !== undefined) node.className = className
+  if (text !== undefined) node.textContent = text
+  return node
+}
+
+async function fetchJson<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(url, { ...init, signal: AbortSignal.timeout(15_000) })
+  const data = (await res.json().catch(() => ({}))) as T
+  if (!res.ok) {
+    const err = (data as { error?: string }).error ?? `HTTP ${res.status}`
+    throw new Error(err)
+  }
+  return data
+}
+
+/** Form controls registry for the config section (changed-only patch). */
+interface ConfigField {
+  key: string
+  input: HTMLInputElement
+  initial: string | boolean | number
+  read: () => string | boolean | number
+  changed: () => boolean
+}
+
+export function mountSettingsPage(container: HTMLElement): () => void {
+  let disposed = false
+  container.classList.add('dsh-tw-settings')
+
+  const statusRow = make('div', 'dsh-tw-settings-row dsh-tw-settings-status')
+  const body = make('div', 'dsh-tw-settings-body')
+  container.append(statusRow, body)
+
+  const disposers: Array<() => void> = []
+
+  const refresh = async (): Promise<void> => {
+    try {
+      const state = await fetchJson<AdminState>(STATE_ENDPOINT)
+      if (disposed) return
+      renderStatus(statusRow, state, refresh)
+      renderMain(body, state, refresh)
+    } catch (err) {
+      if (disposed) return
+      body.replaceChildren()
+      statusRow.replaceChildren()
+      const msg = make('div', 'dsh-tw-settings-error', `加载配置失败：${err instanceof Error ? err.message : String(err)}`)
+      const retry = make('button', 'dsh-tw-settings-btn', '重试')
+      retry.type = 'button'
+      retry.addEventListener('click', () => { void refresh() })
+      body.append(msg, retry)
+    }
+  }
+
+  void refresh()
+  disposers.push(() => {
+    disposed = true
+    container.replaceChildren()
+    container.classList.remove('dsh-tw-settings')
+  })
+  return () => {
+    for (const dispose of disposers.splice(0)) dispose()
+  }
+}
+
+function renderStatus(row: HTMLElement, state: AdminState, refresh: () => Promise<void>): void {
+  row.replaceChildren()
+  const server = state.server ?? {}
+  const status = server.status ?? 'unknown'
+  const chip = make('span', `dsh-tw-settings-chip`, status)
+  chip.dataset.state = status
+  const info = [
+    server.url !== undefined ? `TW ${server.url}` : '',
+    state.git?.branch !== undefined ? `git ${state.git.branch}` : '',
+    state.git?.lastCommit !== undefined ? state.git.lastCommit : '',
+    state.git?.dirty === true ? '有未提交改动' : '',
+  ].filter(Boolean).join(' · ')
+  const label = make('span', 'dsh-tw-settings-muted', info)
+  const restart = make('button', 'dsh-tw-settings-btn', '重启 TW')
+  restart.type = 'button'
+  restart.addEventListener('click', () => {
+    restart.disabled = true
+    restart.textContent = '重启中…'
+    void (async () => {
+      try {
+        await fetchJson(RESTART_ENDPOINT, { method: 'POST' })
+        toast('TW 已重启')
+      } catch (err) {
+        toast(`重启失败：${err instanceof Error ? err.message : String(err)}`)
+      } finally {
+        restart.disabled = false
+        restart.textContent = '重启 TW'
+        void refresh()
+      }
+    })()
+  })
+  row.append(chip, label, restart)
+}
+
+/** Config section: fields bound to effective config, changed-only save. */
+function renderConfigSection(body: HTMLElement, config: Record<string, unknown>, refresh: () => Promise<void>): void {
+  const section = make('section', 'dsh-tw-settings-section')
+  section.append(make('h3', 'dsh-tw-settings-h', '常规配置'))
+  const note = (config.note ?? {}) as Record<string, unknown>
+  const git = (config.git ?? {}) as Record<string, unknown>
+  const fields: ConfigField[] = []
+
+  const textField = (key: string, label: string, initial: string): void => {
+    const input = make('input', 'dsh-tw-settings-input')
+    input.value = initial
+    const wrap = make('label', 'dsh-tw-settings-field')
+    wrap.append(make('span', 'dsh-tw-settings-label', label), input)
+    fields.push({ key, input, initial, read: () => input.value.trim(), changed: () => input.value.trim() !== initial })
+    section.append(wrap)
+  }
+  const checkField = (key: string, label: string, initial: boolean): void => {
+    const input = make('input', 'dsh-tw-settings-check')
+    input.type = 'checkbox'
+    input.checked = initial
+    const wrap = make('label', 'dsh-tw-settings-field dsh-tw-settings-field-check')
+    wrap.append(input, make('span', 'dsh-tw-settings-label', label))
+    fields.push({ key, input, initial, read: () => input.checked, changed: () => input.checked !== initial })
+    section.append(wrap)
+  }
+  const numField = (key: string, label: string, initial: number): void => {
+    const input = make('input', 'dsh-tw-settings-input')
+    input.type = 'number'
+    input.value = String(initial)
+    const wrap = make('label', 'dsh-tw-settings-field')
+    wrap.append(make('span', 'dsh-tw-settings-label', label), input)
+    fields.push({ key, input, initial, read: () => Number(input.value) || initial, changed: () => (Number(input.value) || initial) !== initial })
+    section.append(wrap)
+  }
+
+  textField('note.tag', '快速笔记默认 tag', typeof note.tag === 'string' ? note.tag : 'inbox')
+  checkField('git.autoCommit', '自动 commit（防抖）', git.autoCommit !== false)
+  numField('git.debounceMs', '自动 commit 防抖(ms)', typeof git.debounceMs === 'number' ? git.debounceMs : 60_000)
+  textField('git.remote', 'git 远端（空=仅本地）', typeof git.remote === 'string' ? git.remote : '')
+  textField('git.branch', 'git 分支', typeof git.branch === 'string' ? git.branch : 'main')
+  // 界面语言在下方「语言管理」区块设置（config 的 uiLanguage 仅供启动时自动应用）。
+
+  const save = make('button', 'dsh-tw-settings-btn dsh-tw-settings-primary', '保存配置')
+  save.type = 'button'
+  save.addEventListener('click', () => {
+    save.disabled = true
+    void (async () => {
+      const patch: Record<string, unknown> = {}
+      for (const field of fields) {
+        if (!field.changed()) continue
+        const parts = field.key.split('.')
+        if (parts.length === 1) {
+          const key = parts[0]
+          if (key !== undefined) patch[key] = field.read()
+        } else {
+          const [top, rest] = parts as [string, string]
+          const obj = (patch[top] ?? {}) as Record<string, unknown>
+          obj[rest] = field.read()
+          patch[top] = obj
+        }
+      }
+      try {
+        await fetchJson(CONFIG_ENDPOINT, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(patch) })
+        toast('配置已保存')
+        void refresh()
+      } catch (err) {
+        toast(`保存失败：${err instanceof Error ? err.message : String(err)}`)
+      } finally {
+        save.disabled = false
+      }
+    })()
+  })
+  section.append(save)
+  body.append(section)
+}
+
+/** Plugin/theme manager: checkboxes/radios + apply (writes info, restarts). */
+function renderCatalogSection(
+  body: HTMLElement,
+  info: AdminState['info'],
+  catalog: AdminState['catalog'],
+  refresh: () => Promise<void>,
+): void {
+  const plugins = catalog?.plugins ?? []
+  const themes = catalog?.themes ?? []
+  const languages = catalog?.languages ?? []
+  const activePlugins = new Set(info?.plugins ?? [])
+  const loadedThemes = new Set(info?.themes ?? [])
+  const activeLanguages = new Set(info?.languages ?? [])
+
+  // ── plugins ──────────────────────────────────────────────────────────────
+  const pluginSection = make('section', 'dsh-tw-settings-section')
+  pluginSection.append(make('h3', 'dsh-tw-settings-h', '插件管理（自带官方插件）'))
+  const search = make('input', 'dsh-tw-settings-input dsh-tw-settings-search')
+  search.placeholder = '搜索插件…'
+  const listWrap = make('div', 'dsh-tw-settings-list')
+  const applyPlugins = make('button', 'dsh-tw-settings-btn dsh-tw-settings-primary', '应用插件（重启 TW）')
+  applyPlugins.type = 'button'
+
+  const renderPluginList = (needle: string): void => {
+    listWrap.replaceChildren()
+    const q = needle.toLowerCase()
+    for (const plugin of plugins) {
+      if (q.length > 0 && !`${plugin.label} ${plugin.name} ${plugin.description}`.toLowerCase().includes(q)) continue
+      const input = make('input', 'dsh-tw-settings-check')
+      input.type = 'checkbox'
+      input.checked = activePlugins.has(plugin.name)
+      input.addEventListener('change', () => {
+        if (input.checked) activePlugins.add(plugin.name)
+        else activePlugins.delete(plugin.name)
+      })
+      const label = make('label', 'dsh-tw-settings-row dsh-tw-settings-plugin')
+      const name = make('span', 'dsh-tw-settings-name', plugin.label)
+      name.title = plugin.name
+      const desc = make('span', 'dsh-tw-settings-muted', plugin.description || plugin.name)
+      label.append(input, name, desc)
+      listWrap.append(label)
+    }
+  }
+  search.addEventListener('input', () => renderPluginList(search.value))
+  applyPlugins.addEventListener('click', () => {
+    applyPlugins.disabled = true
+    void (async () => {
+      try {
+        await fetchJson(INFO_ENDPOINT, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ plugins: [...activePlugins] }) })
+        toast('插件已应用，TW 已重启')
+        void refresh()
+      } catch (err) {
+        toast(`应用失败：${err instanceof Error ? err.message : String(err)}`)
+        applyPlugins.disabled = false
+      }
+    })()
+  })
+  renderPluginList('')
+  pluginSection.append(search, listWrap, applyPlugins)
+  body.append(pluginSection)
+
+  // ── themes ───────────────────────────────────────────────────────────────
+  // `info.themes` = WHICH theme plugins are LOADED (multi-select; TW's own
+  // default is [vanilla, snowwhite]); `$:/theme` = the ACTIVE one (single).
+  // Two controls per theme: ☑ 加载 (multi) + ◉ 活动 (single, auto-added to the
+  // loaded set on apply). The host computes the dependency closure (heavier →
+  // vanilla+snowwhite+heavier) and writes $:/theme.
+  const themeSection = make('section', 'dsh-tw-settings-section')
+  themeSection.append(make('h3', 'dsh-tw-settings-h', '主题管理（自带主题）'))
+  const themeHint = make('div', 'dsh-tw-settings-muted', '「加载」= TW 里可用的主题（可多选，依赖链自动带上，如 heavier 会带 snowwhite+vanilla）；「活动」= 当前视觉主题（单选，自动加入加载集）。应用后重启 TW。')
+  const themeHead = make('div', 'dsh-tw-settings-row dsh-tw-settings-head')
+  themeHead.append(
+    make('span', 'dsh-tw-settings-col', '加载'),
+    make('span', 'dsh-tw-settings-col', '活动'),
+    make('span', 'dsh-tw-settings-name', '主题'),
+  )
+  const themeList = info?.themes ?? []
+  let activeThemeName = themeList.length > 0 ? themeList[themeList.length - 1] : 'tiddlywiki/vanilla'
+  const themeWrap = make('div', 'dsh-tw-settings-list')
+  for (const theme of themes) {
+    const load = make('input', 'dsh-tw-settings-check')
+    load.type = 'checkbox'
+    load.checked = loadedThemes.has(theme.name)
+    load.title = '加载该主题'
+    load.addEventListener('change', () => {
+      if (load.checked) loadedThemes.add(theme.name)
+      else loadedThemes.delete(theme.name)
+    })
+    const act = make('input', 'dsh-tw-settings-check')
+    act.type = 'radio'
+    act.name = 'dsh-tw-active-theme'
+    act.checked = theme.name === activeThemeName
+    act.title = '设为活动主题'
+    act.addEventListener('change', () => {
+      if (act.checked) activeThemeName = theme.name
+    })
+    const name = make('span', 'dsh-tw-settings-name', theme.label)
+    name.title = theme.name
+    const desc = make('span', 'dsh-tw-settings-muted', theme.description || theme.name)
+    const row = make('div', 'dsh-tw-settings-row dsh-tw-settings-plugin')
+    row.append(load, act, name, desc)
+    themeWrap.append(row)
+  }
+  const applyThemes = make('button', 'dsh-tw-settings-btn dsh-tw-settings-primary', '应用主题（重启 TW）')
+  applyThemes.type = 'button'
+  applyThemes.addEventListener('click', () => {
+    applyThemes.disabled = true
+    void (async () => {
+      try {
+        await fetchJson(INFO_ENDPOINT, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ themes: [...loadedThemes], themeActive: activeThemeName }),
+        })
+        toast('主题已应用，TW 已重启')
+        void refresh()
+      } catch (err) {
+        toast(`应用失败：${err instanceof Error ? err.message : String(err)}`)
+        applyThemes.disabled = false
+      }
+    })()
+  })
+  themeSection.append(themeHint, themeHead, themeWrap, applyThemes)
+  body.append(themeSection)
+
+  // ── languages (bundled, offline — enable → restart TW) ──────────────────
+  const langSection = make('section', 'dsh-tw-settings-section')
+  langSection.append(make('h3', 'dsh-tw-settings-h', '语言管理（自带官方语言包）'))
+  const langHint = make('div', 'dsh-tw-settings-muted', '勾选启用语言插件并重启 TW；如中文请选 zh-Hans（简体）或 zh-CN。')
+  const langWrap = make('div', 'dsh-tw-settings-list')
+  for (const lang of languages) {
+    const input = make('input', 'dsh-tw-settings-check')
+    input.type = 'checkbox'
+    input.checked = activeLanguages.has(lang.name)
+    input.addEventListener('change', () => {
+      if (input.checked) activeLanguages.add(lang.name)
+      else activeLanguages.delete(lang.name)
+    })
+    const label = make('label', 'dsh-tw-settings-row dsh-tw-settings-plugin')
+    const name = make('span', 'dsh-tw-settings-name', lang.label)
+    name.title = lang.name
+    const desc = make('span', 'dsh-tw-settings-muted', lang.description || lang.name)
+    label.append(input, name, desc)
+    langWrap.append(label)
+  }
+  const applyLangs = make('button', 'dsh-tw-settings-btn dsh-tw-settings-primary', '应用语言（重启 TW）')
+  applyLangs.type = 'button'
+  applyLangs.addEventListener('click', () => {
+    applyLangs.disabled = true
+    void (async () => {
+      try {
+        await fetchJson(INFO_ENDPOINT, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ languages: [...activeLanguages] }) })
+        toast('语言已应用，TW 已重启')
+        void refresh()
+      } catch (err) {
+        toast(`应用失败：${err instanceof Error ? err.message : String(err)}`)
+        applyLangs.disabled = false
+      }
+    })()
+  })
+  langSection.append(langHint, langWrap, applyLangs)
+  body.append(langSection)
+}
+
+function renderMain(body: HTMLElement, state: AdminState, refresh: () => Promise<void>): void {
+  body.replaceChildren()
+  renderConfigSection(body, state.config ?? {}, refresh)
+  renderCatalogSection(body, state.info, state.catalog, refresh)
+}
+
+/** React wrapper consumed by the shell's settings.section slot. */
+export function SettingsSection(): React.ReactElement {
+  const ref = React.useRef<HTMLDivElement | null>(null)
+  React.useEffect(() => {
+    const el = ref.current
+    return el === null ? undefined : mountSettingsPage(el)
+  }, [])
+  return React.createElement('div', { ref })
+}

package/src/client/sidebar-entry.ts

@@ -0,0 +1,148 @@
+/**
+ * Sidebar entry injection — structure ported from dsh-taskboard's
+ * sidebar-entry.ts (verified live in this shell): scope to the sidebar root,
+ * find the New Session button, and insert the entry as a direct child of that
+ * root next to the family block. A body-level MutationObserver self-heals
+ * React re-renders; a slow timer covers shells that mount late without
+ * further mutations. The row is plain DOM so it never disturbs the shell's
+ * reconciliation.
+ *
+ * @module dsh-tiddlywiki/client/sidebar-entry
+ */
+import type { PanelState } from './state.ts'
+
+/** Stable data attribute identifying this entry row. */
+export const ENTRY_SELECTOR = '[data-dsh-tw-entry]'
+
+/** Inline icon: a wiki page with a TiddlyWiki-style "T" (nav-icon look). */
+const ICON = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 2.5h8a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z"/><path d="M6 6h4M6 8.5h2.5"/></svg>'
+
+/** Family entries from sibling plugins, kept in a stable relative order. */
+const FAMILY_SELECTOR = '[data-dsh-tw-entry], [data-dsh-atb-entry], [data-dsh-taskboard-entry], [data-dsh-ssh-entry]'
+
+/** Find the sidebar shell root element, or undefined while not yet mounted. */
+function sidebarRoot(): HTMLElement | undefined {
+  const column = document.querySelector<HTMLElement>(
+    '[data-pane="sidebar"], [class*="sidebarCol"], .dshDesktopUpstreamSidebar, .dshDesktopSidebarSurface',
+  )
+  if (column === null) return undefined
+  const logoOwner = column.querySelector<HTMLElement>('[class*="logoRow"]')?.parentElement
+  return logoOwner ?? (column.firstElementChild as HTMLElement | undefined)
+}
+
+/** The New Session button inside the sidebar root. */
+function newSessionButton(root: HTMLElement): HTMLButtonElement | undefined {
+  const nested = root.querySelector<HTMLButtonElement>('button[class*="newSession"]')
+  if (nested !== null) return nested
+  for (const child of root.children) {
+    if (child instanceof HTMLButtonElement && !child.matches(ENTRY_SELECTOR)) return child
+  }
+  const byAria = root.querySelector<HTMLButtonElement>(
+    'button[aria-label="新建会话"], button[aria-label="New Session"], button[aria-label*="新会话"], button[aria-label*="new session" i]',
+  )
+  if (byAria !== null) return byAria
+  const buttons = Array.from(root.querySelectorAll<HTMLButtonElement>('button'))
+  return buttons.find(button => !button.matches(ENTRY_SELECTOR) && /新会话|新建会话|new session/i.test(button.textContent ?? ''))
+}
+
+/** Build the entry row (a detached button; insert once the shell is up). */
+function createEntry(state: PanelState): HTMLButtonElement {
+  const entry = document.createElement('button')
+  entry.type = 'button'
+  entry.dataset.dshTwEntry = ''
+  entry.className = 'dsh-tw-entry'
+  entry.setAttribute('aria-label', 'TiddlyWiki 知识库')
+  entry.innerHTML = `<span class="dsh-tw-entry-icon">${ICON}</span><span class="dsh-tw-entry-label">TiddlyWiki</span>`
+  entry.addEventListener('click', () => { state.toggle() })
+  return entry
+}
+
+/** Re-insert the entry before the whole family block (stable ordering). */
+function placeEntry(root: HTMLElement, entry: HTMLButtonElement): boolean {
+  const button = newSessionButton(root)
+  if (button === undefined) return false
+  if (entry.parentElement !== root) {
+    const row = button.closest('[class*="logoRow"]')
+    const base = (row !== null && row.parentElement === root) ? row : button
+    const family = Array.from(root.children).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement && el.matches(FAMILY_SELECTOR),
+    )
+    const anchor = family.length > 0 ? (family[0] ?? null) : (base.nextElementSibling ?? null)
+    root.insertBefore(entry, anchor)
+  }
+  return true
+}
+
+/** Debug counters (window.__twDebug) — evidence if the entry fails to appear. */
+interface TwDebug { attempts: number; found: boolean; placed: boolean }
+
+/**
+ * Mount the sidebar entry, waiting for the shell and self-healing on later
+ * re-renders.
+ * @param state - the shared panel state the entry toggles.
+ * @returns disposer removing the entry and its observers.
+ */
+export function mountSidebarEntry(state: PanelState): () => void {
+  const entry = createEntry(state)
+  const debug: TwDebug = { attempts: 0, found: false, placed: false }
+  const host = globalThis.location?.hostname
+  if (host === 'localhost' || host === '127.0.0.1') {
+    ;(window as unknown as { __twDebug?: TwDebug }).__twDebug = debug
+  }
+  let root: HTMLElement | undefined
+  let placed = false
+
+  const tryPlace = (): void => {
+    debug.attempts++
+    if (root !== undefined && !root.isConnected) {
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    if (placed) {
+      if (document.body.contains(entry)) return
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    root ??= sidebarRoot()
+    if (root === undefined) return
+    debug.found = newSessionButton(root) !== undefined
+    placed = placeEntry(root, entry)
+    debug.placed = placed
+    if (placed) rootObserver.observe(root, { childList: true, subtree: true })
+  }
+
+  // Body-level watcher as the whole-rebuild fallback.
+  const waitObserver = new MutationObserver(() => { tryPlace() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  // Self-heal: re-insert in the same frame when a re-render displaces the row.
+  const rootObserver = new MutationObserver(() => {
+    if (root === undefined || !root.isConnected) {
+      placed = false
+      tryPlace()
+      return
+    }
+    if (!root.contains(entry)) placed = placeEntry(root, entry)
+  })
+
+  // Belt-and-braces: a late shell mount with no further mutations still heals.
+  const retry = setInterval(() => { tryPlace() }, 2_000)
+
+  const syncActive = (): void => {
+    if (state.isOpen()) entry.dataset.active = 'true'
+    else delete entry.dataset.active
+  }
+  const unsubscribe = state.subscribe(syncActive)
+  syncActive()
+  tryPlace()
+
+  return () => {
+    clearInterval(retry)
+    waitObserver.disconnect()
+    rootObserver.disconnect()
+    unsubscribe()
+    entry.remove()
+  }
+}

package/src/client/state.ts

@@ -0,0 +1,39 @@
+/**
+ * Tiny pub/sub panel state shared by the sidebar entry and the center panel.
+ *
+ * @module dsh-tiddlywiki/client/state
+ */
+
+export type PanelListener = (open: boolean) => void
+
+export class PanelState {
+  private open = false
+  private readonly listeners = new Set<PanelListener>()
+
+  isOpen(): boolean {
+    return this.open
+  }
+
+  toggle(): void {
+    this.set(!this.open)
+  }
+
+  openPanel(): void {
+    this.set(true)
+  }
+
+  closePanel(): void {
+    this.set(false)
+  }
+
+  set(value: boolean): void {
+    if (this.open === value) return
+    this.open = value
+    for (const listener of [...this.listeners]) listener(value)
+  }
+
+  subscribe(listener: PanelListener): () => void {
+    this.listeners.add(listener)
+    return () => { this.listeners.delete(listener) }
+  }
+}