@dimina-kit/inspect 0.3.0-dev.20260711141929

package/src/connected-panel.test.tsx

@@ -0,0 +1,224 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { ConnectedWxmlPanel } from './connected-panel.js'
+import type { WxmlPanelSource } from './panel-source.js'
+import type { WxmlNode } from './types.js'
+
+const TREE_A: WxmlNode = { tagName: 'view', attrs: {}, children: [], sid: 'sid-a' }
+const TREE_B: WxmlNode = { tagName: 'text', attrs: {}, children: [], sid: 'sid-b' }
+
+function createDeferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((res) => {
+    resolve = res
+  })
+  return { promise, resolve }
+}
+
+/**
+ * A programmable WxmlPanelSource: getSnapshot() consumes one queued promise
+ * per call (defaulting to `null`), subscribe() records the latest push
+ * callback so tests can simulate a live tree, and every method is a spy so
+ * call count / order / arguments can be asserted.
+ */
+function createFakeSource() {
+  const unsubscribe = vi.fn()
+  const getSnapshotQueue: Array<Promise<WxmlNode | null>> = []
+  let latestOnTree: ((tree: WxmlNode | null) => void) | null = null
+  const source: WxmlPanelSource = {
+    getSnapshot: vi.fn(() => getSnapshotQueue.shift() ?? Promise.resolve(null)),
+    subscribe: vi.fn((onTree: (tree: WxmlNode | null) => void) => {
+      latestOnTree = onTree
+      return unsubscribe
+    }),
+    setActive: vi.fn(),
+    inspect: vi.fn(async () => null),
+    clearInspection: vi.fn(),
+  }
+  return {
+    source,
+    unsubscribe,
+    getSnapshotQueue,
+    pushTree: (tree: WxmlNode | null) => latestOnTree?.(tree),
+  }
+}
+
+/** Flushes the microtask queue inside `act` so promise-driven setState calls settle. */
+async function flush() {
+  await act(async () => {
+    await Promise.resolve()
+    await Promise.resolve()
+  })
+}
+
+afterEach(() => {
+  cleanup()
+  vi.unstubAllGlobals()
+})
+
+describe('ConnectedWxmlPanel', () => {
+  it('seeds the tree via getSnapshot once when enabled and active are true from mount', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve(TREE_A))
+    render(<ConnectedWxmlPanel source={source} />)
+    await flush()
+    expect(source.getSnapshot).toHaveBeenCalledTimes(1)
+    expect(source.subscribe).toHaveBeenCalledTimes(1)
+    expect(document.querySelector('[data-wxml-sid="sid-a"]')).not.toBeNull()
+  })
+
+  it('never calls getSnapshot, subscribe, or setActive while disabled', async () => {
+    const { source } = createFakeSource()
+    render(<ConnectedWxmlPanel source={source} enabled={false} />)
+    await flush()
+    expect(source.getSnapshot).not.toHaveBeenCalled()
+    expect(source.subscribe).not.toHaveBeenCalled()
+    expect(source.setActive).not.toHaveBeenCalled()
+  })
+
+  it('forwards isRuntimeRunning to the empty state while no tree has arrived yet', () => {
+    const { source } = createFakeSource()
+    render(<ConnectedWxmlPanel source={source} enabled={false} isRuntimeRunning={false} />)
+    expect(screen.getByTestId('wxml-panel').textContent).toContain('小程序未运行')
+  })
+
+  it('renders live tree pushes from subscribe without issuing another getSnapshot call', async () => {
+    const { source, getSnapshotQueue, pushTree } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve(TREE_A))
+    render(<ConnectedWxmlPanel source={source} />)
+    await flush()
+
+    act(() => {
+      pushTree(TREE_B)
+    })
+
+    expect(document.querySelector('[data-wxml-sid="sid-b"]')).not.toBeNull()
+    expect(document.querySelector('[data-wxml-sid="sid-a"]')).toBeNull()
+    expect(source.getSnapshot).toHaveBeenCalledTimes(1)
+  })
+
+  it('unsubscribes but keeps the last rendered tree when enabled flips to false', async () => {
+    const { source, unsubscribe, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve(TREE_A))
+    const { rerender } = render(<ConnectedWxmlPanel source={source} />)
+    await flush()
+
+    rerender(<ConnectedWxmlPanel source={source} enabled={false} />)
+    await flush()
+
+    expect(unsubscribe).toHaveBeenCalledTimes(1)
+    expect(document.querySelector('[data-wxml-sid="sid-a"]')).not.toBeNull()
+  })
+
+  it('forwards setActive on both directions of an active flip while enabled', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve(TREE_A))
+    const { rerender } = render(<ConnectedWxmlPanel source={source} active />)
+    await flush()
+
+    rerender(<ConnectedWxmlPanel source={source} active={false} />)
+    await flush()
+    expect(source.setActive).toHaveBeenLastCalledWith(false)
+
+    rerender(<ConnectedWxmlPanel source={source} active />)
+    await flush()
+    expect(source.setActive).toHaveBeenLastCalledWith(true)
+  })
+
+  it('re-seeds via getSnapshot on the active false-to-true rising edge', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve(TREE_A))
+    const { rerender } = render(<ConnectedWxmlPanel source={source} active />)
+    await flush()
+    expect(source.getSnapshot).toHaveBeenCalledTimes(1)
+
+    rerender(<ConnectedWxmlPanel source={source} active={false} />)
+    await flush()
+    expect(source.getSnapshot).toHaveBeenCalledTimes(1)
+
+    getSnapshotQueue.push(Promise.resolve(TREE_B))
+    rerender(<ConnectedWxmlPanel source={source} active />)
+    await flush()
+
+    expect(source.getSnapshot).toHaveBeenCalledTimes(2)
+    expect(document.querySelector('[data-wxml-sid="sid-b"]')).not.toBeNull()
+  })
+
+  it('calls setActive(false) and unsubscribes on unmount', async () => {
+    const { source, unsubscribe, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve(TREE_A))
+    const { unmount } = render(<ConnectedWxmlPanel source={source} />)
+    await flush()
+
+    unmount()
+
+    expect(unsubscribe).toHaveBeenCalledTimes(1)
+    expect(source.setActive).toHaveBeenLastCalledWith(false)
+  })
+
+  it('forwards hover inspect(sid) calls to the source', async () => {
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      cb(0)
+      return 0
+    })
+    vi.stubGlobal('cancelAnimationFrame', () => {})
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve(TREE_A))
+    render(<ConnectedWxmlPanel source={source} />)
+    await flush()
+
+    const row = document.querySelector('[data-wxml-sid="sid-a"]') as HTMLElement
+    fireEvent.mouseEnter(row)
+    await flush()
+
+    expect(source.inspect).toHaveBeenCalledWith('sid-a')
+  })
+
+  it('clears the inspection when the mouse leaves the panel root', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve(TREE_A))
+    render(<ConnectedWxmlPanel source={source} />)
+    await flush()
+
+    fireEvent.mouseLeave(screen.getByTestId('wxml-panel'))
+
+    expect(source.clearInspection).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not warn or throw when getSnapshot resolves after the component has unmounted', async () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const { source, getSnapshotQueue } = createFakeSource()
+    const deferred = createDeferred<WxmlNode | null>()
+    getSnapshotQueue.push(deferred.promise)
+    const { unmount } = render(<ConnectedWxmlPanel source={source} />)
+
+    unmount()
+
+    await act(async () => {
+      deferred.resolve(TREE_A)
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    expect(errorSpy).not.toHaveBeenCalled()
+    errorSpy.mockRestore()
+  })
+
+  it('tears down the old source and re-seeds/re-subscribes the new one when source changes', async () => {
+    const first = createFakeSource()
+    first.getSnapshotQueue.push(Promise.resolve(TREE_A))
+    const { rerender } = render(<ConnectedWxmlPanel source={first.source} />)
+    await flush()
+
+    const second = createFakeSource()
+    second.getSnapshotQueue.push(Promise.resolve(TREE_B))
+    rerender(<ConnectedWxmlPanel source={second.source} />)
+    await flush()
+
+    expect(first.unsubscribe).toHaveBeenCalledTimes(1)
+    expect(first.source.setActive).toHaveBeenLastCalledWith(false)
+    expect(second.source.getSnapshot).toHaveBeenCalledTimes(1)
+    expect(second.source.subscribe).toHaveBeenCalledTimes(1)
+    expect(document.querySelector('[data-wxml-sid="sid-b"]')).not.toBeNull()
+  })
+})

package/src/connected-panel.tsx

@@ -0,0 +1,53 @@
+// The WXML panel's data wiring, written once against WxmlPanelSource: seed on
+// the (enabled && active) rising edge, stay live through the push
+// subscription, forward the visibility gate, and route hover inspection.
+// Hosts render this with their transport implementation (Electron IPC,
+// preview-iframe postMessage, …) and the pure WxmlPanel view underneath never
+// needs host-specific code.
+import { useState } from 'react'
+import { WxmlPanel } from './panel-view.js'
+import { useSourceWiring } from './use-source-wiring.js'
+import type { WxmlPanelSource } from './panel-source.js'
+import type { WxmlNode } from './types.js'
+
+export interface ConnectedWxmlPanelProps {
+  source: WxmlPanelSource
+  /** Panel visibility (the host's tab-active state). Defaults to true. */
+  active?: boolean
+  /** Data availability gate (e.g. compile ready). While false the panel makes
+   * no source calls at all and keeps the last rendered tree. Defaults to true. */
+  enabled?: boolean
+  isRuntimeRunning?: boolean
+}
+
+export function ConnectedWxmlPanel({
+  source,
+  active = true,
+  enabled = true,
+  isRuntimeRunning = true,
+}: ConnectedWxmlPanelProps) {
+  const [tree, setTree] = useState<WxmlNode | null>(null)
+
+  useSourceWiring({
+    source,
+    enabled,
+    active,
+    subscribe: s => s.subscribe(setTree),
+    seed: (s, isDisposed) => {
+      void s.getSnapshot().then((next) => {
+        if (!isDisposed()) setTree(next)
+      })
+    },
+  })
+
+  return (
+    <WxmlPanel
+      tree={tree}
+      onInspectElement={sid => source.inspect(sid)}
+      onClearInspection={async () => {
+        await source.clearInspection()
+      }}
+      isRuntimeRunning={isRuntimeRunning}
+    />
+  )
+}

package/src/connected-storage-panel.test.tsx

@@ -0,0 +1,289 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { ConnectedStoragePanel } from './connected-storage-panel.js'
+import type { StoragePanelSource } from './storage-source.js'
+import type { StorageEvent, StorageItem, StorageWriteResult } from './storage-types.js'
+
+const OK: StorageWriteResult = { ok: true }
+
+function createDeferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((res) => {
+    resolve = res
+  })
+  return { promise, resolve }
+}
+
+/**
+ * A programmable StoragePanelSource: getSnapshot() consumes one queued
+ * promise per call (defaulting to an empty list), subscribe() records the
+ * latest push callback so tests can simulate live StorageEvents, and every
+ * method is a spy so call count / order / arguments can be asserted.
+ * clearAll is intentionally omitted by default — tests that need it attach
+ * it explicitly to exercise the optional-capability contract.
+ */
+function createFakeSource() {
+  const unsubscribe = vi.fn()
+  const getSnapshotQueue: Array<Promise<StorageItem[]>> = []
+  let latestOnEvent: ((evt: StorageEvent) => void) | null = null
+  const source: StoragePanelSource = {
+    getSnapshot: vi.fn(() => getSnapshotQueue.shift() ?? Promise.resolve([])),
+    subscribe: vi.fn((onEvent: (evt: StorageEvent) => void) => {
+      latestOnEvent = onEvent
+      return unsubscribe
+    }),
+    setActive: vi.fn(),
+    setItem: vi.fn(async () => OK),
+    removeItem: vi.fn(async () => OK),
+    clear: vi.fn(async () => OK),
+    getPrefix: vi.fn(async () => 'appid_'),
+  }
+  return {
+    source,
+    unsubscribe,
+    getSnapshotQueue,
+    pushEvent: (evt: StorageEvent) => latestOnEvent?.(evt),
+  }
+}
+
+/** Flushes the microtask queue inside `act` so promise-driven setState calls settle. */
+async function flush() {
+  await act(async () => {
+    await Promise.resolve()
+    await Promise.resolve()
+  })
+}
+
+afterEach(() => {
+  cleanup()
+  vi.unstubAllGlobals()
+})
+
+describe('ConnectedStoragePanel: seeding', () => {
+  it('seeds items via getSnapshot exactly once when enabled and active are true from mount', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([{ key: 'foo', value: 'bar' }]))
+    render(<ConnectedStoragePanel source={source} />)
+    await flush()
+
+    expect(source.getSnapshot).toHaveBeenCalledTimes(1)
+    await screen.findByText('foo')
+  })
+
+  it('does not call getSnapshot while inactive, then seeds on the active rising edge', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([{ key: 'a', value: '1' }]))
+    const { rerender } = render(<ConnectedStoragePanel source={source} active={false} />)
+    await flush()
+    expect(source.getSnapshot).not.toHaveBeenCalled()
+
+    rerender(<ConnectedStoragePanel source={source} active />)
+    await flush()
+
+    expect(source.getSnapshot).toHaveBeenCalledTimes(1)
+    await screen.findByText('a')
+  })
+
+  it('re-seeds via getSnapshot on the second active false-to-true rising edge', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([{ key: 'a', value: '1' }]))
+    const { rerender } = render(<ConnectedStoragePanel source={source} active />)
+    await flush()
+    expect(source.getSnapshot).toHaveBeenCalledTimes(1)
+
+    rerender(<ConnectedStoragePanel source={source} active={false} />)
+    await flush()
+    expect(source.getSnapshot).toHaveBeenCalledTimes(1)
+
+    getSnapshotQueue.push(Promise.resolve([{ key: 'b', value: '2' }]))
+    rerender(<ConnectedStoragePanel source={source} active />)
+    await flush()
+
+    expect(source.getSnapshot).toHaveBeenCalledTimes(2)
+    await screen.findByText('b')
+  })
+
+  it('makes zero source calls while disabled', async () => {
+    const { source } = createFakeSource()
+    render(<ConnectedStoragePanel source={source} enabled={false} />)
+    await flush()
+
+    expect(source.getSnapshot).not.toHaveBeenCalled()
+    expect(source.subscribe).not.toHaveBeenCalled()
+    expect(source.setActive).not.toHaveBeenCalled()
+  })
+})
+
+describe('ConnectedStoragePanel: live events', () => {
+  it('applies pushed added/updated/removed/cleared events to the rendered list', async () => {
+    const { source, getSnapshotQueue, pushEvent } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([{ key: 'a', value: '1' }]))
+    render(<ConnectedStoragePanel source={source} />)
+    await flush()
+    await screen.findByText('a')
+
+    act(() => {
+      pushEvent({ type: 'added', key: 'b', newValue: '2' })
+    })
+    await screen.findByText('b')
+
+    act(() => {
+      pushEvent({ type: 'updated', key: 'a', oldValue: '1', newValue: '99' })
+    })
+    await screen.findByText('99')
+
+    act(() => {
+      pushEvent({ type: 'removed', key: 'b' })
+    })
+    await waitFor(() => expect(screen.queryByText('b')).toBeNull())
+
+    act(() => {
+      pushEvent({ type: 'cleared' })
+    })
+    await screen.findByText('暂无 Storage 数据')
+  })
+})
+
+describe('ConnectedStoragePanel: visibility and lifecycle', () => {
+  it('forwards active prop changes to source.setActive in both directions', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([]))
+    const { rerender } = render(<ConnectedStoragePanel source={source} active />)
+    await flush()
+
+    rerender(<ConnectedStoragePanel source={source} active={false} />)
+    await flush()
+    expect(source.setActive).toHaveBeenLastCalledWith(false)
+
+    rerender(<ConnectedStoragePanel source={source} active />)
+    await flush()
+    expect(source.setActive).toHaveBeenLastCalledWith(true)
+  })
+
+  it('calls setActive(false) and unsubscribes on unmount', async () => {
+    const { source, unsubscribe, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([]))
+    const { unmount } = render(<ConnectedStoragePanel source={source} />)
+    await flush()
+
+    unmount()
+
+    expect(unsubscribe).toHaveBeenCalledTimes(1)
+    expect(source.setActive).toHaveBeenLastCalledWith(false)
+  })
+
+  it('tears down the old source and reseeds/resubscribes the new one on a source swap', async () => {
+    const first = createFakeSource()
+    first.getSnapshotQueue.push(Promise.resolve([{ key: 'a', value: '1' }]))
+    const { rerender } = render(<ConnectedStoragePanel source={first.source} />)
+    await flush()
+
+    const second = createFakeSource()
+    second.getSnapshotQueue.push(Promise.resolve([{ key: 'b', value: '2' }]))
+    rerender(<ConnectedStoragePanel source={second.source} />)
+    await flush()
+
+    expect(first.unsubscribe).toHaveBeenCalledTimes(1)
+    expect(first.source.setActive).toHaveBeenLastCalledWith(false)
+    expect(second.source.getSnapshot).toHaveBeenCalledTimes(1)
+    expect(second.source.subscribe).toHaveBeenCalledTimes(1)
+    await screen.findByText('b')
+  })
+})
+
+describe('ConnectedStoragePanel: stale resolutions', () => {
+  it('drops a late getSnapshot resolution after unmount without throwing', async () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const { source, getSnapshotQueue } = createFakeSource()
+    const deferred = createDeferred<StorageItem[]>()
+    getSnapshotQueue.push(deferred.promise)
+    const { unmount } = render(<ConnectedStoragePanel source={source} />)
+
+    unmount()
+
+    await act(async () => {
+      deferred.resolve([{ key: 'late', value: 'x' }])
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    expect(errorSpy).not.toHaveBeenCalled()
+    errorSpy.mockRestore()
+  })
+
+  it('drops a late getSnapshot resolution after a source swap without rendering stale data', async () => {
+    const first = createFakeSource()
+    const deferred = createDeferred<StorageItem[]>()
+    first.getSnapshotQueue.push(deferred.promise)
+    const { rerender } = render(<ConnectedStoragePanel source={first.source} />)
+    await flush()
+
+    const second = createFakeSource()
+    second.getSnapshotQueue.push(Promise.resolve([{ key: 'fresh', value: '1' }]))
+    rerender(<ConnectedStoragePanel source={second.source} />)
+    await flush()
+    await screen.findByText('fresh')
+
+    await act(async () => {
+      deferred.resolve([{ key: 'stale', value: 'x' }])
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    expect(screen.queryByText('stale')).toBeNull()
+  })
+})
+
+describe('ConnectedStoragePanel: write operations', () => {
+  it('calls source.removeItem with the row key when its delete control is clicked', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([{ key: 'doomed', value: 'x' }]))
+    render(<ConnectedStoragePanel source={source} />)
+    await screen.findByText('doomed')
+
+    const deleteBtn = screen.getByTitle('删除')
+    fireEvent.click(deleteBtn)
+
+    await waitFor(() => expect(source.removeItem).toHaveBeenCalledWith('doomed'))
+  })
+})
+
+describe('ConnectedStoragePanel: clearAll optionality', () => {
+  it('does not render a "清空所有" button when the source has no clearAll', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([{ key: 'a', value: '1' }]))
+    render(<ConnectedStoragePanel source={source} />)
+    await screen.findByText('a')
+
+    expect(screen.queryByText('清空所有')).toBeNull()
+  })
+
+  it('renders and wires a "清空所有" button when the source provides clearAll', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([{ key: 'a', value: '1' }]))
+    const clearAll = vi.fn(async () => OK)
+    source.clearAll = clearAll
+    vi.stubGlobal('confirm', vi.fn(() => true))
+    render(<ConnectedStoragePanel source={source} />)
+    await screen.findByText('a')
+
+    const btn = screen.getByText('清空所有')
+    fireEvent.click(btn)
+
+    await waitFor(() => expect(clearAll).toHaveBeenCalledTimes(1))
+  })
+})
+
+describe('ConnectedStoragePanel: disabled retains last render', () => {
+  it('keeps the last rendered items visible when enabled flips to false', async () => {
+    const { source, getSnapshotQueue } = createFakeSource()
+    getSnapshotQueue.push(Promise.resolve([{ key: 'kept', value: '1' }]))
+    const { rerender } = render(<ConnectedStoragePanel source={source} />)
+    await screen.findByText('kept')
+
+    rerender(<ConnectedStoragePanel source={source} enabled={false} />)
+    await flush()
+
+    expect(screen.getByText('kept')).not.toBeNull()
+  })
+})

package/src/connected-storage-panel.tsx

@@ -0,0 +1,62 @@
+// The Storage panel's data wiring, written once against StoragePanelSource:
+// seed on the (enabled && active) rising edge, stay live by reducing the
+// push subscription's StorageEvents into the item list, forward the
+// visibility gate, and route the panel's writes. Hosts render this with
+// their transport implementation (Electron IPC, same-origin localStorage +
+// `storage` events, …) and the pure StoragePanel view underneath never
+// needs host-specific code.
+import { useState } from 'react'
+import { StoragePanel } from './storage-panel-view.js'
+import { applyStorageEvent } from './storage-reducer.js'
+import { useSourceWiring } from './use-source-wiring.js'
+import type { StoragePanelSource } from './storage-source.js'
+import type { StorageItem } from './storage-types.js'
+
+export interface ConnectedStoragePanelProps {
+  source: StoragePanelSource
+  /** Panel visibility (the host's tab-active state). Defaults to true. */
+  active?: boolean
+  /** Data availability gate (e.g. compile ready). While false the panel makes
+   * no source calls at all and keeps the last rendered items. Defaults to true. */
+  enabled?: boolean
+  isRuntimeRunning?: boolean
+}
+
+export function ConnectedStoragePanel({
+  source,
+  active = true,
+  enabled = true,
+  isRuntimeRunning = true,
+}: ConnectedStoragePanelProps) {
+  const [items, setItems] = useState<StorageItem[]>([])
+
+  useSourceWiring({
+    source,
+    enabled,
+    active,
+    subscribe: s => s.subscribe((evt) => {
+      setItems(prev => applyStorageEvent(prev, evt))
+    }),
+    seed: (s, isDisposed) => {
+      void s.getSnapshot().then((next) => {
+        if (!isDisposed()) setItems(next)
+      })
+    },
+  })
+
+  // clearAll is re-bound per source: passing it through only when the source
+  // has the capability is what makes the view hide the origin-wide wipe.
+  const clearAll = source.clearAll?.bind(source)
+
+  return (
+    <StoragePanel
+      items={items}
+      onSet={(key, value) => source.setItem(key, value)}
+      onRemove={key => source.removeItem(key)}
+      onClear={() => source.clear()}
+      onClearAll={clearAll}
+      getPrefix={() => source.getPrefix()}
+      isRuntimeRunning={isRuntimeRunning}
+    />
+  )
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export type { WxmlNode, ElementInspection } from './types.js'
+export {
+  SYNTHETIC_SID_PREFIX,
+  registerSyntheticSid,
+  findElementBySid,
+} from './sid-registry.js'
+export { walkInstance, type ComponentInstance } from './wxml-extract.js'
+export {
+  createWxmlInspector,
+  type WxmlInspector,
+  type WxmlInspectorOptions,
+} from './inspector.js'
+export type { WxmlPanelSource } from './panel-source.js'
+export type { StorageItem, StorageEvent, StorageWriteResult } from './storage-types.js'
+export type { StoragePanelSource } from './storage-source.js'
+export { applyStorageEvent } from './storage-reducer.js'