@tessera-editor/react 0.1.0

package/src/TableNodeViews.tsx

@@ -0,0 +1,276 @@
+import { useContext, useState } from 'react'
+import { NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer } from '@tiptap/react'
+import type { NodeViewProps } from '@tiptap/react'
+import {
+  AiTableCell,
+  AiTableHeader,
+  TABLE_COLUMN_KINDS,
+  tableToCsvAt,
+} from '@tessera-editor/core'
+import type { TableColumnKind } from '@tessera-editor/core'
+import { TesseraContext } from './context'
+
+/**
+ * Table NodeViews (v1.1):
+ * - header cell: label + ⋮ column menu (type / sort / insert / delete / table ops)
+ * - body cell: typed controls for non-text columns, plain content for text
+ */
+
+function useT() {
+  const { t } = useContext(TesseraContext)!
+  return t
+}
+void useT
+
+function kindLabel(t: ReturnType<typeof useT>, kind: TableColumnKind): string {
+  switch (kind) {
+    case 'checkbox':
+      return t('colTypeCheckbox')
+    case 'select':
+      return t('colTypeSelect')
+    case 'multiSelect':
+      return t('colTypeMultiSelect')
+    case 'number':
+      return t('colTypeNumber')
+    case 'date':
+      return t('colTypeDate')
+    case 'link':
+      return t('colTypeLink')
+    default:
+      return t('colTypeText')
+  }
+}
+
+function columnIndex(props: NodeViewProps): number {
+  const pos = props.getPos()
+  if (typeof pos !== 'number') {
+    return 0
+  }
+  const $pos = props.editor.state.doc.resolve(pos)
+  return $pos.index($pos.depth)
+}
+
+/** Header cell with the column menu. */
+function AiTableHeaderView(props: NodeViewProps) {
+  const { editor, t } = useContext(TesseraContext)!
+  const [open, setOpen] = useState(false)
+  const index = columnIndex(props)
+
+  const run = (fn: () => unknown) => {
+    setOpen(false)
+    // re-select into this cell so table commands locate the table
+    const pos = props.getPos()
+    if (typeof pos === 'number') {
+      editor.commands.setTextSelection(pos + 2)
+    }
+    void fn()
+  }
+
+  return (
+    <NodeViewWrapper as="th" className="tessera-th" data-index={index}>
+      <NodeViewContent className="tessera-th-content" />
+      <button
+        type="button"
+        className="tessera-col-menu-btn"
+        contentEditable={false}
+        title={t('colMenuTitle')}
+        onMouseDown={e => e.preventDefault()}
+        onClick={() => setOpen(v => !v)}
+      >
+        ⌄
+      </button>
+      {open ? (
+        <div className="tessera-popover tessera-col-menu" contentEditable={false} onMouseDown={e => e.preventDefault()}>
+          <div className="tessera-menu-section">
+            {TABLE_COLUMN_KINDS.map(kind => (
+              <button key={kind} type="button" onClick={() => run(() => editor.commands.setColumnType(index, kind))}>
+                {kindLabel(t, kind)}
+              </button>
+            ))}
+          </div>
+          <div className="tessera-menu-sep" />
+          <button type="button" onClick={() => run(() => editor.commands.sortTableByColumn(index, 'asc'))}>
+            {t('colMenuSortAsc')}
+          </button>
+          <button type="button" onClick={() => run(() => editor.commands.sortTableByColumn(index, 'desc'))}>
+            {t('colMenuSortDesc')}
+          </button>
+          <div className="tessera-menu-sep" />
+          <button type="button" onClick={() => run(() => editor.commands.addColumnBefore())}>
+            {t('colMenuInsertLeft')}
+          </button>
+          <button type="button" onClick={() => run(() => editor.commands.addColumnAfter())}>
+            {t('colMenuInsertRight')}
+          </button>
+          <button type="button" className="tessera-danger" onClick={() => run(() => editor.commands.deleteColumn())}>
+            {t('colMenuDelete')}
+          </button>
+          <div className="tessera-menu-sep" />
+          <button type="button" onClick={() => run(() => editor.commands.toggleHeaderRow())}>
+            {t('tableToggleHeader')}
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              run(() => {
+                const csv = tableToCsvAt(editor)
+                if (csv) {
+                  void navigator.clipboard.writeText(csv)
+                }
+              })
+            }
+          >
+            {t('tableCopyCsv')}
+          </button>
+          <button type="button" className="tessera-danger" onClick={() => run(() => editor.commands.deleteTable())}>
+            {t('tableDelete')}
+          </button>
+        </div>
+      ) : null}
+    </NodeViewWrapper>
+  )
+}
+
+function AiTableCellView(props: NodeViewProps) {
+  const { editor } = useContext(TesseraContext)!
+  const value = props.node.attrs.value as unknown
+
+  // find this column's kind: walk up to the table attrs via position math
+  const kind: TableColumnKind = (() => {
+    const pos = props.getPos()
+    if (typeof pos !== 'number') {
+      return 'text'
+    }
+    const $pos = editor.state.doc.resolve(pos)
+    let tableDepth = -1
+    for (let d = $pos.depth; d >= 1; d--) {
+      if ($pos.node(d).type.name === 'table') {
+        tableDepth = d
+        break
+      }
+    }
+    if (tableDepth < 1) {
+      return 'text'
+    }
+    const table = $pos.node(tableDepth)
+    const rowDepth = tableDepth + 1
+    const cellIndex = $pos.index(rowDepth)
+    const types = Array.isArray(table.attrs.types) ? (table.attrs.types as TableColumnKind[]) : []
+    return types[cellIndex] ?? 'text'
+  })()
+
+  if (kind === 'text') {
+    return (
+      <NodeViewWrapper as="td" className="tessera-td">
+        <NodeViewContent />
+      </NodeViewWrapper>
+    )
+  }
+
+  const setValue = (next: unknown) => props.updateAttributes({ value: next })
+
+  return (
+    <NodeViewWrapper as="td" className={`tessera-td tessera-td--${kind}`}>
+      <NodeViewContent className="tessera-td-hidden" />
+      {kind === 'checkbox' ? (
+        <input
+          type="checkbox"
+          className="tessera-cell-checkbox"
+          checked={value === true || value === 'true'}
+          onChange={e => setValue(e.target.checked)}
+          contentEditable={false}
+        />
+      ) : null}
+      {kind === 'number' ? (
+        <input
+          type="number"
+          className="tessera-cell-input"
+          value={typeof value === 'number' ? value : ''}
+          placeholder="—"
+          onChange={e => setValue(e.target.value === '' ? null : Number(e.target.value))}
+          contentEditable={false}
+        />
+      ) : null}
+      {kind === 'date' ? (
+        <input
+          type="date"
+          className="tessera-cell-input"
+          value={typeof value === 'string' ? value : ''}
+          onChange={e => setValue(e.target.value || null)}
+          contentEditable={false}
+        />
+      ) : null}
+      {kind === 'select' || kind === 'multiSelect' ? (
+        <TagEditor
+          multi={kind === 'multiSelect'}
+          value={Array.isArray(value) ? (value as string[]) : value ? [String(value)] : []}
+          onChange={tags => setValue(kind === 'multiSelect' ? tags : (tags[0] ?? null))}
+        />
+      ) : null}
+      {kind === 'link' ? (
+        <input
+          type="url"
+          className="tessera-cell-input"
+          placeholder="https://…"
+          value={typeof value === 'string' ? value : ''}
+          onChange={e => setValue(e.target.value || null)}
+          contentEditable={false}
+        />
+      ) : null}
+    </NodeViewWrapper>
+  )
+}
+
+function TagEditor({ multi, value, onChange }: { multi: boolean; value: string[]; onChange: (tags: string[]) => void }) {
+  const [input, setInput] = useState('')
+  const commit = () => {
+    const tag = input.trim()
+    if (!tag) {
+      return
+    }
+    const next = multi ? Array.from(new Set([...value, tag])) : [tag]
+    onChange(next)
+    setInput('')
+  }
+  return (
+    <div className="tessera-cell-tags" contentEditable={false}>
+      {value.map(tag => (
+        <span key={tag} className="tessera-tag">
+          {tag}
+          <button
+            type="button"
+            className="tessera-tag-x"
+            onClick={() => onChange(value.filter(v => v !== tag))}
+          >
+            ×
+          </button>
+        </span>
+      ))}
+      <input
+        className="tessera-cell-input tessera-cell-taginput"
+        value={input}
+        placeholder={multi ? '+ 标签' : '+ 标签'}
+        onChange={e => setInput(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            commit()
+          }
+        }}
+        onBlur={commit}
+      />
+    </div>
+  )
+}
+
+export const AiTableCellViewExtension = AiTableCell.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(AiTableCellView)
+  },
+})
+
+export const AiTableHeaderViewExtension = AiTableHeader.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(AiTableHeaderView)
+  },
+})

package/src/Tessera.tsx

@@ -0,0 +1,315 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+import { EditorContent, useEditor } from '@tiptap/react'
+import type { Editor } from '@tiptap/react'
+import type { Content, EditorOptions } from '@tiptap/core'
+import { DragHandle } from '@tiptap/extension-drag-handle-react'
+import {
+  createTesseraExtensions,
+  createTesseraT,
+} from '@tessera-editor/core'
+import type {
+  TesseraLocale,
+  UploadService,
+  StorageService,
+  CommentStore,
+  IdentityService,
+} from '@tessera-editor/core'
+import { createAiController, aiSlashItems } from '@tessera-editor/ai'
+import type { AIRuntime, SuggestionSession } from '@tessera-editor/ai'
+import { ImageBlockView } from './ImageNodeView'
+import { AiTableCellViewExtension, AiTableHeaderViewExtension } from './TableNodeViews'
+import { EmbedBlockView, TocBlockView } from './EmbedTocViews'
+import { createSlashRenderer } from './SlashMenu'
+import { createEmojiRenderer } from './EmojiMenu'
+import { EmptyLineToolbar } from './EmptyLineToolbar'
+import { SelectionToolbar } from './SelectionToolbar'
+import { FindReplacePanel, AskPanel, SuggestionBar } from './Panels'
+import { HistoryPanel } from './HistoryPanel'
+import { CommentPanel } from './CommentPanel'
+import { BlockContextMenuUI } from './BlockMenu'
+import { TesseraContext } from './context'
+import '@tessera-editor/core/styles.css'
+
+export interface TesseraProps {
+  /** Initial document (JSON / HTML / markdown string). Host owns persistence. */
+  content?: Content
+  locale?: TesseraLocale
+  /** Injected image upload capability (ADR-0001 family). */
+  upload?: UploadService
+  /** v1.1: version-history snapshot storage. */
+  storage?: StorageService
+  /** v1.1: inline comment persistence. */
+  comments?: CommentStore
+  /** v1.1: current user (comment authorship). */
+  identity?: IdentityService
+  /** Injected model runtime; presence enables all AI surfaces. */
+  ai?: AIRuntime
+  /** v1.1: idle window for history auto-capture (playground uses short ones) */
+  historyIdleMs?: number
+  /** v1.1: document column max-width in px (Slite-style centered column). */
+  docWidth?: number
+  onUpdate?: (editor: Editor) => void
+  onCreate?: (editor: Editor) => void
+}
+
+/**
+ * Batteries-included editor (M1+M2 scope). Slite-style: empty-line toolbar,
+ * slash menu, selection toolbar, drag handle — deliberately NOT Notion's
+ * floating "+".
+ */
+
+/** Stable reference is required: see the DragHandle usage comment below. */
+const DRAG_HANDLE_POSITION_CONFIG = { placement: 'left', strategy: 'absolute' } as const
+// NOTE: DragHandle `nested` mode (per-item list dragging) was evaluated and
+// deferred — with nested rules active the handle stopped appearing on plain
+// hover in smoke checks. Revisit with:
+//   nested={{ edgeDetection: 'left', allowedContainers: ['bulletList', 'orderedList', 'taskList'] }}
+export function Tessera({
+  content,
+  locale = 'zh-CN',
+  upload,
+  storage,
+  comments,
+  identity,
+  ai: runtime,
+  historyIdleMs,
+  docWidth,
+  onUpdate,
+  onCreate,
+}: TesseraProps) {
+  const t = useMemo(() => createTesseraT(locale), [locale])
+  const [session, setSession] = useState<SuggestionSession | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  type DragNodeData = {
+    node: { attrs: Record<string, unknown>; type: { name: string } } | null
+    pos: number
+  }
+  const dragNodeRef = useRef<DragNodeData | null>(null)
+  const handleDragNodeChange = useCallback((data: DragNodeData) => {
+    dragNodeRef.current = data.node ? data : null
+  }, [])
+
+  // Everything handed to useEditor must be referentially stable: an unstable
+  // option (any inline callback) makes @tiptap/react call editor.setOptions
+  // on every render, and TipTap's setOptions runs view.updateState, which
+  // destroys and recreates ALL plugin views. A recreated suggestion view
+  // starts from an already-active state with no "started" transition, so
+  // renderer.onStart never fires and the slash menu UI never mounts.
+  // Latest prop values are therefore read through refs instead.
+  const onUpdateRef = useRef(onUpdate)
+  onUpdateRef.current = onUpdate
+  const onCreateRef = useRef(onCreate)
+  onCreateRef.current = onCreate
+  const runtimeRef = useRef(runtime)
+  runtimeRef.current = runtime
+  const initialContentRef = useRef(content)
+  const editorRef = useRef<Editor | null>(null)
+
+  const extensions = useMemo(
+    () =>
+      createTesseraExtensions({ locale, historyIdleMs }).map(ext => {
+        if (ext.name === 'tesseraSlashMenu') {
+          return ext.configure({
+            render: createSlashRenderer(t),
+            extraItems: (ctx: Parameters<NonNullable<import('@tessera-editor/core').SlashMenuOptions['extraItems']>>[0]) => {
+              const rt = runtimeRef.current
+              return rt ? aiSlashItems({ editor: ctx.editor, runtime: rt, t: ctx.t }) : []
+            },
+          })
+        }
+        if (ext.name === 'tesseraEmojiMenu') {
+          return ext.configure({ render: createEmojiRenderer() })
+        }
+        if (ext.name === 'imageBlock') {
+          return ImageBlockView
+        }
+        if (ext.name === 'tableCell') {
+          return AiTableCellViewExtension
+        }
+        if (ext.name === 'tableHeader') {
+          return AiTableHeaderViewExtension
+        }
+        if (ext.name === 'embedBlock') {
+          return EmbedBlockView
+        }
+        if (ext.name === 'tocBlock') {
+          return TocBlockView
+        }
+        return ext
+      }),
+    // runtime is read through runtimeRef on purpose: rebuilding the extension
+    // list after mount cannot apply anyway (extensions are only read when the
+    // editor is created) and would only trigger the setOptions churn above
+    [locale, t, historyIdleMs],
+  )
+
+  async function uploadAndInsert(file: File) {
+    const ed = editorRef.current
+    if (!ed) {
+      return
+    }
+    const storage = ed.storage as unknown as Record<string, { upload?: UploadService }>
+    const svc = storage.tesseraServices?.upload
+    if (!svc) {
+      return
+    }
+    try {
+      const asset = await svc.uploadImage(file)
+      ed.chain().focus().setImage({ src: asset.url, alt: asset.name }).run()
+    } catch (err) {
+      console.error('[Tessera] image upload failed:', err)
+    }
+  }
+  const uploadAndInsertRef = useRef(uploadAndInsert)
+  uploadAndInsertRef.current = uploadAndInsert
+
+  const editorProps: EditorOptions['editorProps'] = useMemo(
+    () => ({
+      attributes: {
+        class: 'tessera-doc',
+        spellcheck: 'false',
+      },
+      handlePaste: (_view, event) => {
+        const file = Array.from(event.clipboardData?.files ?? []).find(f => f.type.startsWith('image/'))
+        if (file) {
+          void uploadAndInsertRef.current(file)
+          return true
+        }
+        return false
+      },
+      handleDrop: (_view, event, _slice, moved) => {
+        if (moved) {
+          return false
+        }
+        const file = Array.from(event.dataTransfer?.files ?? []).find(f => f.type.startsWith('image/'))
+        if (file) {
+          event.preventDefault()
+          void uploadAndInsertRef.current(file)
+          return true
+        }
+        return false
+      },
+    }),
+    [],
+  )
+
+  const handleUpdate = useCallback(({ editor: e }: { editor: Editor }) => onUpdateRef.current?.(e), [])
+  const handleCreate = useCallback(({ editor: e }: { editor: Editor }) => onCreateRef.current?.(e), [])
+
+  const editor = useEditor({
+    extensions,
+    content: initialContentRef.current,
+    onUpdate: handleUpdate,
+    onCreate: handleCreate,
+    editorProps,
+  })
+
+  editorRef.current = editor ?? null
+
+  // injected services stay current
+  useEffect(() => {
+    if (editor) {
+      const bag = (editor.storage as unknown as Record<string, Record<string, unknown>>).tesseraServices ?? {}
+      ;(editor.storage as unknown as Record<string, Record<string, unknown>>).tesseraServices = {
+        ...bag,
+        upload,
+        storage,
+        comments,
+        identity,
+      }
+    }
+  }, [editor, upload, storage, comments, identity])
+
+  // editor events → UI (image picker, sessions from slash AI items)
+  useEffect(() => {
+    if (!editor) {
+      return
+    }
+    const pickImage = () => fileInputRef.current?.click()
+    const onSession = (payload: { session: SuggestionSession | null }) => setSession(payload.session)
+    editor.on('tessera:insertImage', pickImage)
+    editor.on('tessera:session', onSession as never)
+    return () => {
+      editor.off('tessera:insertImage', pickImage)
+      editor.off('tessera:session', onSession as never)
+    }
+  }, [editor])
+
+  const ai = useMemo(
+    () => (editor && runtime ? createAiController(editor, runtime, locale) : null),
+    [editor, runtime, locale],
+  )
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <TesseraContext.Provider value={{ editor, locale, t, ai }}>
+      <div
+        className="tessera-root"
+        style={{ '--te-doc-max-width': docWidth ? `${docWidth}px` : undefined } as CSSProperties}
+      >
+        <EditorContent editor={editor} />
+        {/* 'left' (vertical center) instead of the default 'left-start': the
+            handle must sit mid-row like Slite, not above multi-line blocks.
+            The config object must be referentially stable — DragHandle
+            re-registers its plugin whenever its props change identity, and
+            that re-registration recreates every PM plugin view (killing any
+            active slash-menu UI). */}
+        <DragHandle
+          editor={editor}
+          pluginKey="tesseraDragHandle"
+          computePositionConfig={DRAG_HANDLE_POSITION_CONFIG}
+          onNodeChange={handleDragNodeChange}
+        >
+          <div
+            className="tessera-drag-handle"
+            onClick={event => {
+              // handle click opens the block menu (drag still reorders);
+              // context menu UI selects the block and positions at pointer
+              const data = dragNodeRef.current
+              if (!data?.node) {
+                return
+              }
+              const id = (data.node.attrs as { id?: string }).id
+              if (!id) {
+                return
+              }
+              editor.emit('tessera:blockMenu', {
+                blockId: id,
+                blockType: data.node.type.name,
+                clientX: event.clientX,
+                clientY: event.clientY,
+              } as never)
+            }}
+          >
+            ⠿
+          </div>
+        </DragHandle>
+        <EmptyLineToolbar />
+        <SelectionToolbar onSession={setSession} />
+        <FindReplacePanel />
+        <AskPanel />
+        <HistoryPanel />
+        <CommentPanel />
+        <BlockContextMenuUI />
+        <SuggestionBar session={session} onClear={() => setSession(null)} />
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          hidden
+          onChange={e => {
+            const file = e.target.files?.[0]
+            if (file) {
+              void uploadAndInsert(file)
+            }
+            e.target.value = ''
+          }}
+        />
+      </div>
+    </TesseraContext.Provider>
+  )
+}

package/src/__tests__/tessera.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest'
+import { render, act, waitFor } from '@testing-library/react'
+import { Tessera } from '../Tessera'
+import type { Editor } from '@tiptap/core'
+
+/**
+ * Regression tests for the React binding. The most important one guards the
+ * slash-menu fix: any option handed to useEditor with an unstable identity
+ * (inline callbacks / config objects) makes @tiptap/react call
+ * editor.setOptions on every render, and TipTap's setOptions recreates all
+ * plugin views — which silently killed the slash menu UI after the first
+ * document change.
+ */
+
+const demoDoc = {
+  type: 'doc',
+  content: [
+    { type: 'paragraph', content: [{ type: 'text', text: 'Hello Tessera' }] },
+  ],
+}
+
+function mountTessera() {
+  let editor: Editor | null = null
+  const utils = render(
+    <Tessera locale="zh-CN" content={demoDoc} onCreate={ed => { editor = ed }} />,
+  )
+  return { utils, getEditor: () => editor }
+}
+
+describe('Tessera (react binding)', () => {
+  it('mounts an editor with the document content', async () => {
+    const { getEditor } = mountTessera()
+    await waitFor(() => expect(getEditor()).not.toBeNull())
+    const ed = getEditor()!
+    expect(ed)
+    expect(ed.state.doc.textContent).toContain('Hello Tessera')
+  })
+
+  it('re-renders do not churn plugin views (unregisterPlugin must not fire)', async () => {
+    const { utils, getEditor } = mountTessera()
+    await waitFor(() => expect(getEditor()).not.toBeNull())
+    const ed = getEditor()!
+    const unregisterSpy = vi.spyOn(ed, 'unregisterPlugin')
+
+    for (let i = 0; i < 3; i++) {
+      utils.rerender(<Tessera locale="zh-CN" content={demoDoc} onCreate={() => {}} />)
+      await act(async () => {})
+    }
+    expect(unregisterSpy).not.toHaveBeenCalled()
+  })
+
+  it('slash menu activates on insert and survives re-renders', async () => {
+    const { utils, getEditor } = mountTessera()
+    await act(async () => {})
+    const ed = getEditor()!
+
+    const slashPlugin = () =>
+      ed!.state.plugins.find(p => (p as unknown as { key: string }).key.startsWith('tesseraSlashMenu'))
+
+    // activate the suggestion by inserting the trigger character
+    await act(async () => {
+      ed!.commands.insertContentAt(ed!.state.doc.content.size, '/')
+    })
+    const pluginAfterInsert = slashPlugin()
+    const pluginKey = (pluginAfterInsert as unknown as { key: string }).key
+    const stateAfterInsert = pluginAfterInsert
+      ? JSON.parse(JSON.stringify((ed!.state as unknown as Record<string, unknown>)[pluginKey]))
+      : null
+    expect(stateAfterInsert?.active).toBe(true)
+
+    // re-renders must not destroy the suggestion (the historic bug: the
+    // started wrapper was removed by a plugin-view destroy on next render)
+    const unregisterSpy = vi.spyOn(ed!, 'unregisterPlugin')
+    for (let i = 0; i < 3; i++) {
+      utils.rerender(<Tessera locale="zh-CN" content={demoDoc} onCreate={() => {}} />)
+      await act(async () => {})
+    }
+    expect(unregisterSpy).not.toHaveBeenCalled()
+    expect(slashPlugin()).toBe(pluginAfterInsert)
+    const stateAfterRerenders = JSON.parse(JSON.stringify((ed!.state as unknown as Record<string, unknown>)[pluginKey]))
+    expect(stateAfterRerenders.active).toBe(true)
+  })
+})

package/src/context.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react'
+import type { Editor } from '@tiptap/react'
+import type { TesseraLocale, TesseraTranslator } from '@tessera-editor/core'
+import type { AiController } from '@tessera-editor/ai'
+
+export interface TesseraContextValue {
+  editor: Editor
+  locale: TesseraLocale
+  t: TesseraTranslator
+  ai: AiController | null
+}
+
+export const TesseraContext = createContext<TesseraContextValue | null>(null)
+
+export function useTesseraContext(): TesseraContextValue {
+  const ctx = useContext(TesseraContext)
+  if (!ctx) {
+    throw new Error('Tessera: useTesseraContext outside provider')
+  }
+  return ctx
+}