All files / web/src/components/toys/euclid AdminExportBar.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { MutableRefObject } from 'react'
import type { PropositionDef, SerializedElement, SerializedEqualityFact } from './types'
import type { PostCompletionAction } from './engine/replayConstruction'

interface AdminExportBarProps {
  propositionIdInput: number
  setPropositionIdInput: (v: number) => void
  handleExportTypeScript: () => void
  handleExportClaudePrompt: () => void
  exportCopied: 'ts' | 'claude' | null
  dynamicPropositionRef: MutableRefObject<PropositionDef | null>
  handleActivateGivenSetup: (els?: SerializedElement[], facts?: SerializedEqualityFact[]) => void
  postCompletionActionsRef: MutableRefObject<PostCompletionAction[]>
}

export function AdminExportBar({
  propositionIdInput,
  setPropositionIdInput,
  handleExportTypeScript,
  handleExportClaudePrompt,
  exportCopied,
  dynamicPropositionRef,
  handleActivateGivenSetup,
  postCompletionActionsRef,
}: AdminExportBarProps) {
  return (
    <div
      data-element="admin-export-bar"
      style={{
        position: 'absolute',
        top: 52,
        right: 12,
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        zIndex: 12,
        fontFamily: 'system-ui, sans-serif',
        fontSize: 11,
      }}
    >
      <span style={{ color: '#9ca3af' }}>Prop ID:</span>
      <input
        type="number"
        value={propositionIdInput}
        onChange={(e) => setPropositionIdInput(Number(e.target.value) || 0)}
        style={{
          width: 40,
          padding: '2px 4px',
          fontSize: 11,
          borderRadius: 4,
          border: '1px solid #d1d5db',
          textAlign: 'center',
        }}
      />
      <span style={{ color: '#9ca3af' }}>Export:</span>
      <button
        onClick={handleExportTypeScript}
        style={{
          background: 'none',
          border: 'none',
          color: exportCopied === 'ts' ? '#10b981' : '#4E79A7',
          cursor: 'pointer',
          fontSize: 11,
          fontWeight: exportCopied === 'ts' ? 600 : 400,
          fontFamily: 'system-ui, sans-serif',
          textDecoration: exportCopied === 'ts' ? 'none' : 'underline',
          padding: 0,
          transition: 'color 0.15s',
        }}
      >
        {exportCopied === 'ts' ? 'Copied!' : 'TypeScript'}
      </button>
      <button
        onClick={handleExportClaudePrompt}
        style={{
          background: 'none',
          border: 'none',
          color: exportCopied === 'claude' ? '#10b981' : '#4E79A7',
          cursor: 'pointer',
          fontSize: 11,
          fontWeight: exportCopied === 'claude' ? 600 : 400,
          fontFamily: 'system-ui, sans-serif',
          textDecoration: exportCopied === 'claude' ? 'none' : 'underline',
          padding: 0,
          transition: 'color 0.15s',
        }}
      >
        {exportCopied === 'claude' ? 'Copied!' : 'Claude Prompt'}
      </button>
      {dynamicPropositionRef.current && (
        <button
          onClick={() => {
            const dynProp = dynamicPropositionRef.current
            if (!dynProp) return
            // Warn if there are actions that will be lost
            if (
              postCompletionActionsRef.current.length > 0 &&
              !window.confirm('Editing givens will discard your construction actions. Continue?')
            ) {
              return
            }
            // Re-enter given-setup with existing elements/facts
            const serializedElements = dynProp.givenElements.map(
              (el): SerializedElement => ({
                kind: el.kind,
                id: el.id,
                label: el.kind === 'point' ? el.label : undefined,
                x: el.kind === 'point' ? el.x : undefined,
                y: el.kind === 'point' ? el.y : undefined,
                fromId: el.kind === 'segment' ? el.fromId : undefined,
                toId: el.kind === 'segment' ? el.toId : undefined,
                centerId: el.kind === 'circle' ? el.centerId : undefined,
                radiusPointId: el.kind === 'circle' ? el.radiusPointId : undefined,
                color: el.color,
                origin: el.origin,
              })
            )
            handleActivateGivenSetup(serializedElements, dynProp.givenFacts)
          }}
          style={{
            background: 'none',
            border: 'none',
            color: '#4E79A7',
            cursor: 'pointer',
            fontSize: 11,
            fontWeight: 400,
            fontFamily: 'system-ui, sans-serif',
            textDecoration: 'underline',
            padding: 0,
          }}
        >
          Edit Givens
        </button>
      )}
    </div>
  )
}