@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1

package/src/components/print-design/index.ts

@@ -0,0 +1,9 @@
+export {
+  PrintDesignPanel,
+  PrintDesignPopover,
+  type PrintDesignMode,
+  type PrintDesignPanelAction,
+  type PrintDesignPanelProps,
+  type PrintDesignThemePreset,
+  type PrintDesignPopoverProps,
+} from './PrintDesignPanel.js'

package/src/components/proofing/PagedProofDialog.tsx

@@ -0,0 +1,453 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Camera } from 'lucide-react'
+import { styled } from 'styled-components'
+import {
+  ScreenAnnotationAgentDialog,
+  type ScreenAnnotationAgentPayload,
+} from '../agent-feedback/index.js'
+import {
+  callAgentRunModel,
+  createAgentSession,
+  startAgentRun,
+} from '../../bridge/agents.js'
+import { Button } from '../common/buttons/Button.js'
+import { CleanButton } from '../common/buttons/CleanButton.js'
+import { InlineBanner } from '../common/feedback/InlineBanner.js'
+import { Modal } from '../common/overlays/Modal.js'
+import { Text } from '../common/typography/Text.js'
+
+export interface PagedProofDialogProps {
+  open: boolean
+  title?: string
+  html: string
+  pageCount?: number
+  status?: string | null
+  busy?: boolean
+  appSlug: string
+  annotationContextLabel?: string
+  annotationContext?: string
+  onClose: () => void
+  onRefresh: () => void
+  onExportPdf: () => void
+  /** Open the screen-annotation camera scoped to DESIGN (print styles). */
+  onAnnotateDesign?: () => void
+}
+
+const MAX_MODEL_STEPS = 3
+
+interface QueuedProofIssue extends ScreenAnnotationAgentPayload {
+  id: string
+}
+
+const StyledBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  min-height: 0;
+`
+
+const StyledToolbar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledToolbarActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledIssueQueue = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm);
+  padding: 8px 10px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--platform-colors-surface);
+`
+
+const StyledIssueList = styled.div`
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+`
+
+const StyledIssuePill = styled(CleanButton)`
+  max-width: 24ch;
+  overflow: hidden;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-pill);
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  padding: 3px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    border-color: var(--platform-colors-border-strong);
+    color: var(--platform-colors-text);
+  }
+`
+
+const StyledFrameWrap = styled.div`
+  position: relative;
+  width: 100%;
+  height: min(72vh, 820px);
+  border: 1px solid var(--platform-colors-border);
+  background: white;
+  overflow: hidden;
+`
+
+const StyledFrameLayer = styled.iframe`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: white;
+  transition: opacity 280ms ease;
+`
+
+const FRAME_SANDBOX = 'allow-same-origin allow-scripts'
+
+/** Read the vertical scroll of a same-origin (srcDoc) iframe, best-effort. */
+function readFrameScroll(frame: HTMLIFrameElement | null): number {
+  try {
+    return frame?.contentWindow?.scrollY ?? 0
+  } catch {
+    return 0
+  }
+}
+
+interface FrameLayer {
+  id: number
+  html: string
+}
+
+/**
+ * Renders preview HTML with a natural cross-fade on update: each render gets its
+ * own keyed iframe (never remounted, so its scroll survives), the newest fades
+ * in over the previous one carrying the scroll position across, then the older
+ * layers are dropped — no blank flash, no scroll reset.
+ */
+function CrossfadeFrame({
+  title,
+  html,
+}: {
+  title: string
+  html: string
+}): React.ReactElement {
+  const [layers, setLayers] = useState<FrameLayer[]>(() =>
+    html ? [{ id: 0, html }] : [],
+  )
+  const [topVisible, setTopVisible] = useState(true)
+  const nextId = useRef(1)
+  const targetScroll = useRef(0)
+  const frames = useRef(new Map<number, HTMLIFrameElement>())
+
+  // A new render arrived → capture the current scroll, then add a layer on top.
+  useEffect(() => {
+    const top = layers[layers.length - 1]
+    if (!html || top?.html === html) return
+    targetScroll.current = readFrameScroll(top ? frames.current.get(top.id) ?? null : null)
+    setTopVisible(false)
+    setLayers(prev => [...prev, { id: nextId.current++, html }])
+  }, [html, layers])
+
+  const handleLayerLoad = useCallback(
+    (layer: FrameLayer, isTop: boolean, isOnlyLayer: boolean) => {
+      const win = frames.current.get(layer.id)?.contentWindow ?? null
+      if (!isTop || isOnlyLayer) return
+      const y = targetScroll.current
+      const apply = (): void => {
+        try {
+          win?.scrollTo(0, y)
+        } catch {
+          // ignore
+        }
+      }
+      apply()
+      // Re-pin briefly in case layout settles just after load.
+      let ticks = 0
+      const id = window.setInterval(() => {
+        apply()
+        if ((ticks += 1) >= 8) window.clearInterval(id)
+      }, 50)
+      requestAnimationFrame(() => setTopVisible(true))
+    },
+    [],
+  )
+
+  const handleLayerTransitionEnd = useCallback(
+    (event: React.TransitionEvent, isTop: boolean) => {
+      if (event.propertyName !== 'opacity' || !isTop || !topVisible) return
+      // Keep only the now-visible top layer.
+      setLayers(prev => (prev.length > 1 ? prev.slice(prev.length - 1) : prev))
+    },
+    [topVisible],
+  )
+
+  return (
+    <StyledFrameWrap>
+      {layers.map((layer, index) => {
+        const isTop = index === layers.length - 1
+        const isOnlyLayer = layers.length === 1
+        const hidden = isTop && !isOnlyLayer && !topVisible
+        return (
+          <StyledFrameLayer
+            key={layer.id}
+            ref={el => {
+              if (el) frames.current.set(layer.id, el)
+              else frames.current.delete(layer.id)
+            }}
+            title={isTop ? title : `${title} (previous)`}
+            sandbox={FRAME_SANDBOX}
+            srcDoc={layer.html}
+            style={{
+              opacity: hidden ? 0 : 1,
+              zIndex: index,
+              pointerEvents: hidden ? 'none' : 'auto',
+            }}
+            onLoad={() => handleLayerLoad(layer, isTop, isOnlyLayer)}
+            onTransitionEnd={event => handleLayerTransitionEnd(event, isTop)}
+          />
+        )
+      })}
+    </StyledFrameWrap>
+  )
+}
+
+function annotationMessage({ note, imageDataUrl }: ScreenAnnotationAgentPayload): string {
+  return [
+    'Please use this paged proof annotation to adjust the print/typesetting CSS, then explain what changed and ask the user to preview again.',
+    '',
+    note.trim() ? `Proof note:\n${note.trim()}` : 'No extra proof note.',
+    '',
+    'Annotated proof screenshot:',
+    '',
+    `![Annotated proof screenshot](${imageDataUrl})`,
+  ].join('\n')
+}
+
+function queuedIssuesMessage(issues: QueuedProofIssue[]): string {
+  return [
+    `Please work through these ${issues.length} paged proof annotations as one typesetting pass.`,
+    'Adjust the print/typesetting CSS where appropriate, then explain what changed and ask the user to preview again.',
+    '',
+    ...issues.flatMap((issue, index) => [
+      `Issue ${index + 1}${issue.note.trim() ? `: ${issue.note.trim()}` : ''}`,
+      '',
+      `![Paged proof issue ${index + 1}](${issue.imageDataUrl})`,
+      '',
+    ]),
+  ].join('\n')
+}
+
+function issueLabel(issue: QueuedProofIssue, index: number): string {
+  const note = issue.note.trim()
+  return note ? `${index + 1}. ${note}` : `Issue ${index + 1}`
+}
+
+export function PagedProofDialog({
+  open,
+  title = 'Preview',
+  html,
+  pageCount,
+  status,
+  busy = false,
+  appSlug,
+  annotationContextLabel = 'paged proof',
+  annotationContext,
+  onClose,
+  onRefresh,
+  onExportPdf,
+  onAnnotateDesign,
+}: PagedProofDialogProps): React.ReactElement {
+  const [annotating, setAnnotating] = useState(false)
+  const [issues, setIssues] = useState<QueuedProofIssue[]>([])
+  const [submittingIssues, setSubmittingIssues] = useState(false)
+  const [issueStatus, setIssueStatus] = useState<string | null>(null)
+  const [issueError, setIssueError] = useState<string | null>(null)
+
+  const handleAddIssue = (payload: ScreenAnnotationAgentPayload): void => {
+    setIssues(current => [
+      ...current,
+      {
+        ...payload,
+        id: `proof-issue-${Date.now()}-${Math.random()
+          .toString(36)
+          .slice(2, 8)}`,
+      },
+    ])
+    setIssueStatus('Issue added. Add another, or press Go.')
+    setIssueError(null)
+  }
+
+  const handleRemoveIssue = (id: string): void => {
+    setIssues(current => current.filter(issue => issue.id !== id))
+  }
+
+  const handleGo = async (): Promise<void> => {
+    if (issues.length === 0) return
+    setSubmittingIssues(true)
+    setIssueError(null)
+    setIssueStatus('Sending proof issues…')
+    try {
+      const message = [
+        queuedIssuesMessage(issues),
+        annotationContext
+          ? `\n\nContext (${annotationContextLabel}):\n${annotationContext}`
+          : `\n\nContext: ${annotationContextLabel}.`,
+      ].join('')
+      const record = await createAgentSession({
+        scope: 'app',
+        appSlug,
+        title: `Paged proof issues · ${annotationContextLabel}`,
+      })
+      const session = {
+        scope: 'app' as const,
+        appSlug,
+        sessionId: record.sessionId,
+      }
+      let snapshot = await startAgentRun({ session, message })
+      for (let step = 0; step < MAX_MODEL_STEPS; step += 1) {
+        if (snapshot.state !== 'ready') break
+        snapshot = await callAgentRunModel({
+          runId: snapshot.runId,
+          sessionId: record.sessionId,
+        })
+      }
+      setIssues([])
+      setIssueStatus('Proof issues sent.')
+    } catch (cause) {
+      setIssueError(cause instanceof Error ? cause.message : String(cause))
+      setIssueStatus(null)
+    } finally {
+      setSubmittingIssues(false)
+    }
+  }
+
+  return (
+    <>
+      <Modal open={open} onClose={onClose} title={title} size="fullscreen" chrome>
+        <StyledBody>
+          <StyledToolbar>
+            <Text as="p" size="sm" tone="secondary">
+              {pageCount ? `${pageCount} pages` : 'Paged preview'}
+            </Text>
+            <StyledToolbarActions>
+              {onAnnotateDesign ? (
+                <Button
+                  type="button"
+                  variant="text"
+                  size="sm"
+                  disabled={busy}
+                  onClick={onAnnotateDesign}
+                >
+                  <Camera size={16} strokeWidth={1.8} aria-hidden="true" />
+                  Edit
+                </Button>
+              ) : null}
+              <Button
+                type="button"
+                variant="text"
+                size="sm"
+                disabled={busy}
+                onClick={() => setAnnotating(true)}
+              >
+                Annotate
+              </Button>
+              <Button
+                type="button"
+                variant="primary"
+                size="sm"
+                loading={submittingIssues}
+                disabled={busy || submittingIssues || issues.length === 0}
+                onClick={() => void handleGo()}
+              >
+                Go{issues.length ? ` · ${issues.length}` : ''}
+              </Button>
+              <Button
+                type="button"
+                variant="text"
+                size="sm"
+                loading={busy}
+                disabled={busy}
+                onClick={onRefresh}
+              >
+                Preview again
+              </Button>
+              <Button
+                type="button"
+                variant="primary"
+                size="md"
+                loading={busy}
+                disabled={busy}
+                onClick={onExportPdf}
+              >
+                Create PDF
+              </Button>
+            </StyledToolbarActions>
+          </StyledToolbar>
+          {status ? <InlineBanner>{status}</InlineBanner> : null}
+          {issues.length > 0 || issueStatus || issueError ? (
+            <StyledIssueQueue>
+              <StyledIssueList>
+                <Text as="p" size="sm" tone="secondary">
+                  {issues.length
+                    ? `${issues.length} issue${issues.length === 1 ? '' : 's'} ready`
+                    : issueStatus}
+                </Text>
+                {issues.map((issue, index) => (
+                  <StyledIssuePill
+                    key={issue.id}
+                    type="button"
+                    title="Remove issue"
+                    onClick={() => handleRemoveIssue(issue.id)}
+                  >
+                    {issueLabel(issue, index)}
+                  </StyledIssuePill>
+                ))}
+              </StyledIssueList>
+              {issues.length > 0 ? (
+                <Button
+                  type="button"
+                  variant="text"
+                  size="sm"
+                  disabled={submittingIssues}
+                  onClick={() => setIssues([])}
+                >
+                  Clear
+                </Button>
+              ) : null}
+              {issueError ? (
+                <InlineBanner variant="danger">{issueError}</InlineBanner>
+              ) : null}
+            </StyledIssueQueue>
+          ) : null}
+          <CrossfadeFrame title={title} html={html} />
+        </StyledBody>
+      </Modal>
+      <ScreenAnnotationAgentDialog
+        open={annotating}
+        appSlug={appSlug}
+        contextLabel={annotationContextLabel}
+        context={annotationContext}
+        title="Annotate proof"
+        buildMessage={annotationMessage}
+        submitLabel="Add issue"
+        onCapture={handleAddIssue}
+        onClose={() => setAnnotating(false)}
+      />
+    </>
+  )
+}

package/src/components/proofing/index.ts

@@ -0,0 +1,4 @@
+export {
+  PagedProofDialog,
+  type PagedProofDialogProps,
+} from './PagedProofDialog.js'

package/src/editor/DocumentEditor.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react'
+import {
+  DocumentEditor as BaseDocumentEditor,
+  type DocumentEditorHandle,
+  type DocumentEditorProps as BaseDocumentEditorProps,
+} from '@purescience/platform-editor'
+import { defaultEditorToolbarOverlays } from './toolbarOverlays.js'
+
+export type DocumentEditorProps = BaseDocumentEditorProps
+
+export type { DocumentEditorHandle }
+
+/** Suite DocumentEditor — wires platform-ui toolbar overlays (link / comment prompts). */
+export const DocumentEditor = forwardRef<
+  DocumentEditorHandle,
+  DocumentEditorProps
+>(function DocumentEditor(
+  { toolbarOverlays = defaultEditorToolbarOverlays, ...props },
+  ref,
+): React.ReactElement {
+  return (
+    <BaseDocumentEditor
+      ref={ref}
+      {...props}
+      toolbarOverlays={toolbarOverlays}
+    />
+  )
+})

package/src/editor/EditorViewModeToggle.tsx

@@ -0,0 +1,35 @@
+import { Button } from '../components/common/buttons/Button.js'
+
+export type EditorViewMode = 'boxed' | 'page'
+
+export interface EditorViewModeToggleProps {
+  mode: EditorViewMode
+  onChange: (mode: EditorViewMode) => void
+  disabled?: boolean
+  className?: string
+  variant?: 'subtle' | 'text'
+}
+
+export function EditorViewModeToggle({
+  mode,
+  onChange,
+  disabled = false,
+  className,
+  variant = 'subtle',
+}: EditorViewModeToggleProps): React.ReactElement {
+  const nextMode: EditorViewMode = mode === 'page' ? 'boxed' : 'page'
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size="sm"
+      className={className}
+      disabled={disabled}
+      aria-pressed={mode === 'page'}
+      title={mode === 'page' ? 'Show book tools' : 'Write on the page'}
+      onClick={() => onChange(nextMode)}
+    >
+      {mode === 'page' ? 'Application view' : 'Page view'}
+    </Button>
+  )
+}

package/src/editor/index.ts

@@ -0,0 +1,97 @@
+export {
+  DocumentEditor,
+  type DocumentEditorHandle,
+  type DocumentEditorProps,
+} from './DocumentEditor.js'
+export { defaultEditorToolbarOverlays } from './toolbarOverlays.js'
+export {
+  EditorViewModeToggle,
+  type EditorViewMode,
+  type EditorViewModeToggleProps,
+} from './EditorViewModeToggle.js'
+export {
+  buildExtensions,
+  useEditorExtensions,
+  resolveEditorContent,
+  toHtml,
+  toMd,
+  insertInlineAssetKind,
+  insertEditableInlineMath,
+  insertEditableBlockMath,
+  openMathEditor,
+  CollectionImage,
+  createCollectionImagePasteExtension,
+  copyAutoReviewPromptsToClipboard,
+  EDITORIAL_FRAMEWORK,
+  enabledEditorialTypesForProcess,
+  insertCollectionImage,
+  insertCollectionImageFromBinaryResult,
+  COLLECTION_ASSET_SRC_ATTR,
+  CommentMark,
+  DocumentAssetIdentity,
+  Figure,
+  Footnote,
+  IndexMarker,
+  MermaidBlock,
+  SmartTypography,
+  SlashCommands,
+  COMMENT_TYPES,
+  COMMENT_REVIEW_STATUSES,
+  COMMENT_SEVERITIES,
+  COMMENT_STATUS_LABELS,
+  COMMENT_TYPE_DEFINITIONS,
+  COMMENT_TYPE_LABELS,
+  defaultCommentReviewStatusForType,
+  defaultCommentSeverityForType,
+  normalizeCommentReviewStatus,
+  normalizeCommentSeverity,
+  normalizeCommentType,
+  parseCommentReplies,
+  serializeCommentReplies,
+  createDefaultSlashCommands,
+  DocumentDiffView,
+  buildAlignedLineDiff,
+  buildAutoReviewPrompt,
+  buildAutoReviewPromptBundle,
+  collectAutoReviewParagraphs,
+  collectScopedAutoReviewParagraphs,
+  parseAutoReviewFindingResponse,
+  runAutoReview,
+  validateAutoReviewFindings,
+} from '@purescience/platform-editor'
+export type {
+  AppliedAutoReviewFinding,
+  AutoReviewFindingInput,
+  AutoReviewFindingsProvider,
+  AutoReviewFindingsProviderRequest,
+  AutoReviewParagraph,
+  AutoReviewPromptKind,
+  BuildExtensionsOptions,
+  CopyAutoReviewPromptsResult,
+  EditorialAnnotationType,
+  EditorialDensity,
+  EditorialFrameworkEntry,
+  EditorialGenreMode,
+  EditorialProcess,
+  EditorialScope,
+  EditorialStrictness,
+  RunAutoReviewOptions,
+  RunAutoReviewResult,
+  EditorFeatures,
+  EditorInputFormat,
+  InlineAssetInsertKind,
+  EditorCommentPromptProps,
+  EditorLinkPromptProps,
+  EditorToolbarOverlays,
+  SlashCommandItem,
+  SlashCommandRange,
+  SlashCommandRunOptions,
+  CommentReply,
+  CommentReviewStatus,
+  CommentSeverity,
+  CommentType,
+  CollectionImagePasteExtensionOptions,
+  DocumentDiffViewProps,
+  AlignedDiffLine,
+  AlignedLineDiffResult,
+} from '@purescience/platform-editor'

package/src/editor/toolbarOverlays.ts

@@ -0,0 +1,8 @@
+import type { EditorToolbarOverlays } from '@purescience/platform-editor'
+import { EditorCommentPromptDialog } from '../components/editor/EditorCommentPromptDialog.js'
+import { EditorLinkPromptDialog } from '../components/editor/EditorLinkPromptDialog.js'
+
+export const defaultEditorToolbarOverlays: EditorToolbarOverlays = {
+  LinkPrompt: EditorLinkPromptDialog,
+  CommentPrompt: EditorCommentPromptDialog,
+}