@open-mercato/documents 0.6.8-develop.7016.1.4ed7b1e49d

package/src/modules/documents/backend/documents/[id]/CommentsRail.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from 'react'
+import type { Editor } from '@tiptap/core'
+import { MessageSquare } from 'lucide-react'
+import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { useDialogKeyHandler } from '@open-mercato/ui/hooks/useDialogKeyHandler'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { CommentAnchor } from './CommentAnchorNavigation'
+import { CommentComposer } from './CommentComposer'
+import { CommentThreadList } from './CommentThreadList'
+import { resolveCommentsCapability, type DocumentTier } from './componentCapabilities'
+import { useDocumentComments } from './useDocumentComments'
+
+type CommentFocusRequest = { anchor: CommentAnchor; requestId: number }
+export type { DocumentTier } from './componentCapabilities'
+export { resolveCommentsCapability } from './componentCapabilities'
+
+type CommentsRailProps = {
+  documentId: string
+  editor: Editor | null
+  commentFocusRequest?: CommentFocusRequest | null
+  /** Legacy compatibility; an explicit capability projection takes precedence. */
+  tier?: DocumentTier
+  canComment?: boolean
+  canShare?: boolean
+}
+
+export function CommentsRail({
+  documentId,
+  editor,
+  commentFocusRequest,
+  tier,
+  canComment,
+  canShare = false,
+}: CommentsRailProps) {
+  const t = useT()
+  const mayComment = resolveCommentsCapability(canComment, tier)
+  const composerRef = React.useRef<HTMLFormElement | null>(null)
+  const comments = useDocumentComments({ documentId, editor, canComment: mayComment, canShare })
+
+  React.useEffect(() => {
+    if (!commentFocusRequest || !mayComment) return
+    comments.setPendingAnchor(commentFocusRequest.anchor)
+    window.setTimeout(() => composerRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }), 0)
+  }, [commentFocusRequest, comments.setPendingAnchor, mayComment])
+
+  const grantPromptKeyDown = useDialogKeyHandler({
+    onConfirm: () => comments.chooseGrantAccess(true),
+    onCancel: () => comments.chooseGrantAccess(false),
+  })
+
+  return (
+    <>
+      <section className="rounded-lg border border-border bg-card p-3 sm:p-4">
+        <div className="mb-4 flex items-center gap-2">
+          <MessageSquare className="size-4 text-muted-foreground" aria-hidden="true" />
+          <h2 className="text-sm font-semibold">{t('documents.comments.title')}</h2>
+        </div>
+        <div className="space-y-4">
+          {comments.state.status === 'loading' ? <LoadingMessage label={t('documents.comments.loading')} /> : null}
+          {comments.state.status === 'error' ? (
+            <ErrorMessage
+              label={comments.state.message}
+              action={<Button type="button" size="sm" variant="outline" onClick={() => void comments.reload()}>{t('documents.actions.retry')}</Button>}
+            />
+          ) : null}
+          {comments.state.status === 'ready' && comments.comments.length === 0 ? (
+            <EmptyState size="sm" variant="subtle" title={t('documents.comments.empty')} icon={<MessageSquare className="size-5" />} />
+          ) : null}
+          {comments.state.status === 'ready' && comments.comments.length > 0 ? (
+            <CommentThreadList
+              comments={comments.comments}
+              canComment={mayComment}
+              resolvingCommentId={comments.resolvingCommentId}
+              labelFor={comments.labelFor}
+              onJump={(comment) => {
+                void (async () => {
+                  if (!editor || comment.anchor === null || comment.anchor === 'changed') {
+                    flash(t('documents.comments.anchor.changed'), 'info')
+                    return
+                  }
+                  const { jumpToCommentAnchor } = await import('./CommentAnchorNavigation')
+                  if (!jumpToCommentAnchor(editor, comment.anchor)) {
+                    flash(t('documents.comments.anchor.changed'), 'info')
+                  }
+                })()
+              }}
+              onReply={comments.startReply}
+              onResolve={(comment) => void comments.resolveComment(comment)}
+              t={t}
+            />
+          ) : null}
+          {mayComment ? (
+            <CommentComposer
+              ref={composerRef}
+              documentId={documentId}
+              body={comments.body}
+              pendingMentions={comments.pendingMentions}
+              replyToName={comments.replyToName}
+              isSubmitting={comments.isSubmitting}
+              onBodyChange={comments.setBody}
+              onMentionsChange={comments.setPendingMentions}
+              onSubmit={() => void comments.submit()}
+              onCancel={comments.resetComposer}
+              focusSignal={commentFocusRequest?.requestId ?? comments.parentCommentId ?? undefined}
+            />
+          ) : null}
+        </div>
+      </section>
+      <Dialog open={comments.grantAccessNames !== null} onOpenChange={(open) => { if (!open) comments.chooseGrantAccess(false) }}>
+        <DialogContent onKeyDown={grantPromptKeyDown}>
+          <DialogHeader>
+            <DialogTitle>{t('documents.comments.grant.title')}</DialogTitle>
+            <DialogDescription>{t('documents.comments.grant.body', { names: comments.grantAccessNames?.join(', ') ?? '' })}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => comments.chooseGrantAccess(false)}>{t('documents.comments.grant.skip')}</Button>
+            <Button type="button" onClick={() => comments.chooseGrantAccess(true)}>{t('documents.comments.grant.share')}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+export default CommentsRail

package/src/modules/documents/backend/documents/[id]/DocumentCanvas.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from 'react'
+import type { Editor } from '@tiptap/core'
+import { EditorContent, useEditorState } from '@tiptap/react'
+import { BubbleMenu } from '@tiptap/react/menus'
+import { Bold, Italic, Link2, MessageSquare, Underline } from 'lucide-react'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { OutlinePane } from './OutlinePane'
+import { captureCommentAnchor, type CommentAnchor } from './CommentAnchorNavigation'
+import { DOCUMENT_EDITOR_CONTENT_CLASS } from './editorTypes'
+import { DOCUMENT_PAGINATION_STYLES } from './documentPagination'
+
+type TitleModel = {
+  value: string
+  setValue: (value: string) => void
+  saving: boolean
+  commit: () => Promise<void>
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
+}
+
+const EMPTY_BUBBLE_MENU_STATE = {
+  bold: false,
+  italic: false,
+  underline: false,
+  link: false,
+}
+
+export function DocumentCanvas({
+  editor,
+  title,
+  readOnly,
+  outlineOpen,
+  notice,
+  onOpenLink,
+  onComment,
+}: {
+  editor: Editor | null
+  title: TitleModel
+  readOnly: boolean
+  outlineOpen: boolean
+  notice: string | null
+  onOpenLink: () => void
+  onComment?: (anchor: CommentAnchor) => void
+}) {
+  const t = useT()
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: current }) => current ? {
+      bold: current.isActive('bold'),
+      italic: current.isActive('italic'),
+      underline: current.isActive('underline'),
+      link: current.isActive('link'),
+    } : EMPTY_BUBBLE_MENU_STATE,
+  }) ?? EMPTY_BUBBLE_MENU_STATE
+  const keepSelection = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => event.preventDefault(), [])
+  const comment = React.useCallback(() => {
+    if (!editor || !onComment) return
+    const anchor = captureCommentAnchor(editor)
+    if (anchor) onComment(anchor)
+  }, [editor, onComment])
+  const shouldShow = React.useCallback(
+    ({ from, to }: { from: number; to: number }) => from !== to && (!readOnly || Boolean(onComment)),
+    [onComment, readOnly],
+  )
+
+  return (
+    <div className="om-doc-canvas max-h-[calc(100dvh-var(--topbar-height,0px)-12rem)] min-h-96 overflow-auto bg-muted p-0 sm:px-4 sm:py-8 md:px-8 md:py-10">
+      <style>{DOCUMENT_PAGINATION_STYLES}</style>
+      {notice ? <Alert status="information" style="lighter" className="mx-auto mb-4 max-w-3xl"><AlertDescription>{notice}</AlertDescription></Alert> : null}
+      <div className="mx-auto flex w-fit min-w-full flex-col gap-4 lg:flex-row lg:items-start">
+        {outlineOpen ? <OutlinePane editor={editor} /> : null}
+        <article className="om-doc-paper mx-auto flex-none bg-card sm:rounded-sm sm:shadow-lg">
+          {readOnly ? (
+            <h1 className="mb-6 text-xl font-semibold leading-tight text-foreground sm:mb-8 sm:text-3xl">{title.value}</h1>
+          ) : (
+            <Input
+              value={title.value}
+              onChange={(event) => title.setValue(event.target.value)}
+              onBlur={() => void title.commit()}
+              onKeyDown={title.onKeyDown}
+              maxLength={512}
+              disabled={title.saving}
+              aria-label={t('documents.editor.title.ariaLabel')}
+              className="mb-6 h-auto border-0 bg-transparent px-0 py-0 text-xl font-semibold leading-tight text-foreground shadow-none focus-visible:shadow-focus sm:mb-8 sm:text-3xl"
+            />
+          )}
+          {editor ? (
+            <BubbleMenu editor={editor} shouldShow={shouldShow} className="z-popover flex items-center gap-1 rounded-md border border-border bg-card p-1 shadow-md">
+              {!readOnly ? (
+                <>
+                  <IconButton type="button" size="sm" variant={editorState.bold ? 'outline' : 'ghost'} aria-label={t('documents.editor.toolbar.bold')} aria-pressed={editorState.bold} onMouseDown={keepSelection} onClick={() => editor.chain().focus().toggleBold().run()}><Bold /></IconButton>
+                  <IconButton type="button" size="sm" variant={editorState.italic ? 'outline' : 'ghost'} aria-label={t('documents.editor.toolbar.italic')} aria-pressed={editorState.italic} onMouseDown={keepSelection} onClick={() => editor.chain().focus().toggleItalic().run()}><Italic /></IconButton>
+                  <IconButton type="button" size="sm" variant={editorState.underline ? 'outline' : 'ghost'} aria-label={t('documents.editor.toolbar.underline')} aria-pressed={editorState.underline} onMouseDown={keepSelection} onClick={() => editor.chain().focus().toggleMark('underline').run()}><Underline /></IconButton>
+                  <IconButton type="button" size="sm" variant={editorState.link ? 'outline' : 'ghost'} aria-label={t('documents.editor.toolbar.link')} aria-pressed={editorState.link} onMouseDown={keepSelection} onClick={onOpenLink}><Link2 /></IconButton>
+                </>
+              ) : null}
+              {onComment ? <Button type="button" size="sm" variant="ghost" onMouseDown={keepSelection} onClick={comment}><MessageSquare />{t('documents.editor.toolbar.comment')}</Button> : null}
+            </BubbleMenu>
+          ) : null}
+          <EditorContent className={cn(DOCUMENT_EDITOR_CONTENT_CLASS, readOnly && 'select-text')} editor={editor} />
+        </article>
+      </div>
+    </div>
+  )
+}

package/src/modules/documents/backend/documents/[id]/DocumentEditorErrorBoundary.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from 'react'
+
+type DocumentEditorErrorBoundaryProps = {
+  children: React.ReactNode
+  fallback: (retry: () => void) => React.ReactNode
+  onRetry: () => void
+  resetKey: string
+}
+type DocumentEditorErrorBoundaryState = {
+  failed: boolean
+}
+
+export class DocumentEditorErrorBoundary extends React.Component<
+  DocumentEditorErrorBoundaryProps,
+  DocumentEditorErrorBoundaryState
+> {
+  state: DocumentEditorErrorBoundaryState = { failed: false }
+
+  static getDerivedStateFromError(): DocumentEditorErrorBoundaryState {
+    return { failed: true }
+  }
+
+  componentDidUpdate(previous: DocumentEditorErrorBoundaryProps) {
+    if (this.state.failed && previous.resetKey !== this.props.resetKey) {
+      this.setState({ failed: false })
+    }
+  }
+
+  private retry = () => {
+    this.setState({ failed: false })
+    this.props.onRetry()
+  }
+
+  render() {
+    return this.state.failed ? this.props.fallback(this.retry) : this.props.children
+  }
+}

package/src/modules/documents/backend/documents/[id]/DocumentEditorIsland.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { LoadingMessage } from '@open-mercato/ui/backend/detail'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DocumentEditorSurface } from './DocumentEditorSurface'
+import { resolveEditorMode, type DocumentEditorIslandProps, type EditorMode } from './editorTypes'
+import { useDocumentCollaboration } from './useDocumentCollaboration'
+
+export default function DocumentEditorIsland(props: DocumentEditorIslandProps) {
+  const t = useT()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const collaboration = useDocumentCollaboration(props.documentId)
+  const requestedMode: EditorMode = searchParams.get('mode') === 'preview' ? 'preview' : 'edit'
+  const serverReadOnly = collaboration.mode === 'collab'
+    ? collaboration.serverReadOnly
+    : collaboration.mode === 'fallback'
+      ? collaboration.readOnly
+      : false
+  const forcedReadOnly = props.readOnly || serverReadOnly
+  const mode = resolveEditorMode(props.readOnly, serverReadOnly, requestedMode)
+  const changeMode = React.useCallback((nextMode: EditorMode) => {
+    if (forcedReadOnly) return
+    const next = new URLSearchParams(searchParams.toString())
+    if (nextMode === 'preview') next.set('mode', 'preview')
+    else next.delete('mode')
+    const query = next.toString()
+    router.replace(query ? `?${query}` : '?', { scroll: false })
+  }, [forcedReadOnly, router, searchParams])
+
+  if (collaboration.mode === 'connecting') return <LoadingMessage label={t('documents.editor.loading')} />
+  if (collaboration.mode === 'fallback') {
+    return <DocumentEditorSurface {...props} readOnly={forcedReadOnly} key={`fallback:${props.documentId}`} transport="fallback" connectionStatus="offline" presenceUsers={[]} mode={mode} onModeChange={changeMode} />
+  }
+  return (
+    <DocumentEditorSurface
+      {...props}
+      readOnly={forcedReadOnly}
+      key={`collab:${props.documentId}`}
+      transport="collab"
+      collabResources={collaboration.resources}
+      connectionStatus={collaboration.connectionStatus}
+      presenceUsers={collaboration.presenceUsers}
+      mode={mode}
+      onModeChange={changeMode}
+    />
+  )
+}

package/src/modules/documents/backend/documents/[id]/DocumentEditorSurface.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from 'react'
+import { Link2, Unlink } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { EntityPicker } from '../components/EntityPicker'
+import { DocumentCanvas } from './DocumentCanvas'
+import { EditorStatusPresence } from './EditorStatusPresence'
+import { EditorToolbar } from './EditorToolbar'
+import { RecordFieldsDialog } from './RecordFieldsDialog'
+import { EDITOR_PRESENCE_STYLES } from './editorPresenceStyles'
+import { canCreateSelectionComment, type CollabResources, type ConnectionStatus, type DocumentEditorIslandProps, type EditorMode, type PresenceUser } from './editorTypes'
+import { useDocumentEditor } from './useDocumentEditor'
+import { useFallbackContentPersistence } from './useFallbackContentPersistence'
+import { useDocumentTitle } from './useDocumentTitle'
+import { useEditorInsertions } from './useEditorInsertions'
+
+type Props = DocumentEditorIslandProps & {
+  transport: 'collab' | 'fallback'
+  collabResources?: CollabResources
+  connectionStatus: ConnectionStatus
+  presenceUsers: PresenceUser[]
+  mode: EditorMode
+  onModeChange: (mode: EditorMode) => void
+}
+
+export function DocumentEditorSurface(input: Props) {
+  const t = useT()
+  const [outlineOpen, setOutlineOpen] = React.useState(false)
+  const [suggestionRange, setSuggestionRange] = React.useState<{ from: number; to: number } | null>(null)
+  const modeChangeInFlightRef = React.useRef(false)
+  const effectiveReadOnly = input.readOnly || input.mode === 'preview'
+  const openSuggestion = React.useCallback((range: { from: number; to: number }) => setSuggestionRange(range), [])
+  const closeSuggestion = React.useCallback(() => setSuggestionRange(null), [])
+  const fallbackPersistence = useFallbackContentPersistence({
+    documentId: input.documentId,
+    initialUpdatedAt: input.contentUpdatedAt ?? null,
+    enabled: input.transport === 'fallback' && !input.readOnly,
+    onConflictRefresh: input.onContentConflict,
+  })
+  const editorModel = useDocumentEditor({
+    documentId: input.documentId,
+    initialContentHtml: input.initialContentHtml,
+    editorMode: input.transport,
+    collabResources: input.collabResources,
+    readOnly: effectiveReadOnly,
+    onEditorReady: input.onEditorReady,
+    onUpdate: fallbackPersistence.onEditorUpdate,
+    onEntitySuggestion: openSuggestion,
+    onSuggestionClose: closeSuggestion,
+  })
+  const title = useDocumentTitle({
+    documentId: input.documentId,
+    title: input.title,
+    updatedAt: input.documentUpdatedAt ?? null,
+    readOnly: effectiveReadOnly,
+    onTitleChange: input.onTitleChange,
+  })
+  const insertions = useEditorInsertions({
+    documentId: input.documentId,
+    editorRef: editorModel.editorRef,
+    disabled: effectiveReadOnly,
+    suggestionRange,
+    setSuggestionRange,
+  })
+  React.useEffect(() => {
+    if (suggestionRange && !effectiveReadOnly) insertions.setPickerOpen(true)
+  }, [effectiveReadOnly, insertions.setPickerOpen, suggestionRange])
+
+  const status = input.transport === 'fallback' ? 'offline' : input.connectionStatus
+  const notice = input.transport === 'fallback'
+    ? t(input.readOnly ? 'documents.editor.realtime.readOnlyFallback' : 'documents.editor.realtime.singleUserFallback')
+    : input.readOnly
+      ? t('documents.editor.readOnly')
+      : input.mode === 'preview'
+        ? t('documents.editor.mode.previewNotice')
+        : null
+  const selectionCommentHandler = canCreateSelectionComment({
+    permissionReadOnly: input.readOnly,
+    mode: input.mode,
+    transport: input.transport,
+    hasCommentHandler: Boolean(input.onComment),
+  }) ? input.onComment : undefined
+  const handleModeChange = React.useCallback(async (nextMode: EditorMode) => {
+    if (nextMode === input.mode || modeChangeInFlightRef.current) return
+    if (input.transport !== 'fallback' || nextMode !== 'preview') {
+      input.onModeChange(nextMode)
+      return
+    }
+
+    modeChangeInFlightRef.current = true
+    try {
+      if (await fallbackPersistence.saveNow()) input.onModeChange(nextMode)
+    } finally {
+      modeChangeInFlightRef.current = false
+    }
+  }, [fallbackPersistence.saveNow, input.mode, input.onModeChange, input.transport])
+
+  return (
+    <div className={cn('space-y-3', input.transport === 'collab' && 'om-doc-collab', input.mode === 'preview' && 'om-doc-preview')}>
+      <style>{EDITOR_PRESENCE_STYLES}</style>
+      <div className="overflow-hidden rounded-lg border border-border bg-muted shadow-sm">
+        <div className="sticky top-0 z-sticky border-b border-border bg-card/95">
+          <div className="flex flex-wrap items-center justify-between gap-2 px-3 py-2">
+            <EditorStatusPresence
+              status={status}
+              users={input.presenceUsers}
+              counts={editorModel.counts}
+              mode={input.mode}
+              canEdit={!input.readOnly}
+              onModeChange={(nextMode) => { void handleModeChange(nextMode) }}
+              fallbackSave={input.transport === 'fallback' && !input.readOnly ? {
+                status: fallbackPersistence.status,
+                onSave: fallbackPersistence.saveNow,
+              } : undefined}
+            />
+          </div>
+          {input.mode === 'edit' ? (
+            <EditorToolbar
+              editor={editorModel.editor}
+              disabled={effectiveReadOnly || !editorModel.editor}
+              outlineOpen={outlineOpen}
+              uploading={insertions.uploading}
+              onToggleOutline={() => setOutlineOpen((value) => !value)}
+              onOpenEntityPicker={insertions.openEntityPicker}
+              onOpenLink={insertions.openLink}
+              onImage={() => insertions.fileInputRef.current?.click()}
+            />
+          ) : null}
+          {insertions.linkOpen && !effectiveReadOnly ? (
+            <div className="flex flex-col gap-3 border-t border-border bg-muted/30 p-3 md:flex-row md:items-end" onKeyDown={(event) => {
+              if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { event.preventDefault(); insertions.applyLink() }
+              if (event.key === 'Escape') { event.preventDefault(); insertions.setLinkOpen(false) }
+            }}>
+              <div className="min-w-0 flex-1 space-y-2">
+                <Label htmlFor={`document-link-${input.documentId}`}>{t('documents.editor.link.url')}</Label>
+                <Input id={`document-link-${input.documentId}`} type="url" value={insertions.linkHref} onChange={(event) => insertions.setLinkHref(event.target.value)} placeholder={t('documents.editor.link.placeholder')} />
+              </div>
+              <Button type="button" onClick={insertions.applyLink}><Link2 />{t('documents.editor.link.apply')}</Button>
+              <Button type="button" variant="outline" onClick={insertions.removeLink}><Unlink />{t('documents.editor.link.remove')}</Button>
+              <Button type="button" variant="ghost" onClick={() => insertions.setLinkOpen(false)}>{t('documents.actions.cancel')}</Button>
+            </div>
+          ) : null}
+        </div>
+        <DocumentCanvas editor={editorModel.editor} title={title} readOnly={effectiveReadOnly} outlineOpen={outlineOpen} notice={notice} onOpenLink={insertions.openLink} onComment={selectionCommentHandler} />
+      </div>
+      <EntityPicker open={insertions.entityPickerOpen} onOpenChange={insertions.setPickerOpen} onPick={(pick) => { void insertions.handleEntityPick(pick) }} />
+      <RecordFieldsDialog
+        documentId={input.documentId}
+        linkId={insertions.recordFieldsLinkId}
+        editor={editorModel.editor}
+        canInsert={!effectiveReadOnly && Boolean(editorModel.editor)}
+        onOpenChange={(open) => { if (!open) insertions.closeRecordFields() }}
+      />
+      <input ref={insertions.fileInputRef} type="file" accept="image/*" className="hidden" aria-label={t('documents.editor.imageInput')} onChange={(event) => { void insertions.handleFiles(event.target.files) }} />
+    </div>
+  )
+}

package/src/modules/documents/backend/documents/[id]/DocumentNavigator.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from 'react'
+import type { Editor } from '@tiptap/core'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Progress } from '@open-mercato/ui/primitives/progress'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type PagePosition = { currentPage: number; totalPages: number }
+
+export function pageAtOffset(pageTops: number[], offset: number): PagePosition {
+  if (pageTops.length === 0) return { currentPage: 1, totalPages: 1 }
+  let low = 0
+  let high = pageTops.length
+  while (low < high) {
+    const middle = Math.floor((low + high) / 2)
+    if ((pageTops[middle] ?? Number.POSITIVE_INFINITY) <= offset) low = middle + 1
+    else high = middle
+  }
+  return { currentPage: Math.max(1, low), totalPages: pageTops.length }
+}
+
+function documentScroller(editor: Editor): HTMLElement | null {
+  return editor.view.dom.closest<HTMLElement>('.om-doc-canvas')
+}
+
+function collectPageTops(editor: Editor, scroller: HTMLElement): number[] {
+  const paper = editor.view.dom.closest<HTMLElement>('.om-doc-paper')
+  if (!paper) return []
+  const scrollerTop = scroller.getBoundingClientRect().top
+  const tops = [paper.getBoundingClientRect().top - scrollerTop + scroller.scrollTop]
+  paper.querySelectorAll<HTMLElement>('[data-document-page-start]').forEach((pageStart) => {
+    tops.push(pageStart.getBoundingClientRect().top - scrollerTop + scroller.scrollTop)
+  })
+  return tops
+}
+
+export function DocumentNavigator({ editor }: { editor: Editor | null }) {
+  const t = useT()
+  const pageTopsRef = React.useRef<number[]>([])
+  const pageStartsRef = React.useRef<HTMLElement[]>([])
+  const frameRef = React.useRef<number | null>(null)
+  const [position, setPosition] = React.useState<PagePosition>({ currentPage: 1, totalPages: 1 })
+  const [targetPage, setTargetPage] = React.useState('')
+
+  React.useEffect(() => {
+    if (!editor || editor.isDestroyed) return
+    const scroller = documentScroller(editor)
+    if (!scroller) return
+    const readCurrentPage = () => {
+      frameRef.current = null
+      const anchor = scroller.scrollTop + Math.min(160, scroller.clientHeight * 0.25)
+      const next = pageAtOffset(pageTopsRef.current, anchor)
+      setPosition((current) => current.currentPage === next.currentPage && current.totalPages === next.totalPages ? current : next)
+    }
+    const scheduleCurrentPage = () => {
+      if (frameRef.current === null) frameRef.current = window.requestAnimationFrame(readCurrentPage)
+    }
+    const refreshPageTops = () => {
+      pageTopsRef.current = collectPageTops(editor, scroller)
+      pageStartsRef.current = Array.from(editor.view.dom.closest<HTMLElement>('.om-doc-paper')?.querySelectorAll<HTMLElement>('[data-document-page-start]') ?? [])
+      scheduleCurrentPage()
+    }
+    const mutationObserver = new MutationObserver(refreshPageTops)
+    mutationObserver.observe(editor.view.dom, { childList: true, subtree: true })
+    const paper = editor.view.dom.closest<HTMLElement>('.om-doc-paper')
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(refreshPageTops)
+    if (paper) resizeObserver?.observe(paper)
+    scroller.addEventListener('scroll', scheduleCurrentPage, { passive: true })
+    window.addEventListener('resize', refreshPageTops)
+    refreshPageTops()
+    return () => {
+      if (frameRef.current !== null) window.cancelAnimationFrame(frameRef.current)
+      mutationObserver.disconnect()
+      resizeObserver?.disconnect()
+      scroller.removeEventListener('scroll', scheduleCurrentPage)
+      window.removeEventListener('resize', refreshPageTops)
+    }
+  }, [editor])
+
+  const jumpToPage = React.useCallback(() => {
+    const requested = Number.parseInt(targetPage, 10)
+    if (!Number.isFinite(requested)) return
+    const page = Math.min(position.totalPages, Math.max(1, requested))
+    const scroller = editor && !editor.isDestroyed ? documentScroller(editor) : null
+    const top = pageTopsRef.current[page - 1]
+    if (!scroller || top === undefined || (page > 1 && !pageStartsRef.current[page - 2])) return
+    scroller.scrollTo({ top: Math.max(0, top - 24), behavior: 'auto' })
+    setTargetPage('')
+  }, [editor, position.totalPages, targetPage])
+  const progress = Math.round((position.currentPage / position.totalPages) * 100)
+
+  return (
+    <section className="space-y-4 rounded-lg border border-border bg-card p-4" aria-label={t('documents.editor.navigation.title')}>
+      <div>
+        <h2 className="text-sm font-semibold">{t('documents.editor.navigation.title')}</h2>
+        <p className="mt-1 text-sm text-muted-foreground">{t('documents.editor.navigation.pageStatus', position)}</p>
+      </div>
+      <Progress
+        value={progress}
+        label={t('documents.editor.navigation.progress')}
+        showValue
+        aria-label={t('documents.editor.navigation.progress')}
+      />
+      <form className="space-y-2" onSubmit={(event) => { event.preventDefault(); jumpToPage() }}>
+        <Label htmlFor="documents-page-target">{t('documents.editor.navigation.goToPage')}</Label>
+        <div className="flex items-center gap-2">
+          <Input
+            id="documents-page-target"
+            type="number"
+            inputMode="numeric"
+            min={1}
+            max={position.totalPages}
+            value={targetPage}
+            onChange={(event) => setTargetPage(event.target.value)}
+            placeholder={String(position.currentPage)}
+            aria-describedby="documents-page-range"
+          />
+          <Button type="submit" disabled={!targetPage.trim()}>{t('documents.editor.navigation.go')}</Button>
+        </div>
+        <p id="documents-page-range" className="text-xs text-muted-foreground">
+          {t('documents.editor.navigation.pageRange', { totalPages: position.totalPages })}
+        </p>
+      </form>
+    </section>
+  )
+}