@taskp3/react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/README.md +258 -0
  2. package/dist/changelog-hooks.d.ts +46 -0
  3. package/dist/changelog-hooks.d.ts.map +1 -0
  4. package/dist/changelog-hooks.js +163 -0
  5. package/dist/changelog-hooks.js.map +1 -0
  6. package/dist/changelog.d.ts +17 -0
  7. package/dist/changelog.d.ts.map +1 -0
  8. package/dist/changelog.js +86 -0
  9. package/dist/changelog.js.map +1 -0
  10. package/dist/context.d.ts +33 -0
  11. package/dist/context.d.ts.map +1 -0
  12. package/dist/context.js +62 -0
  13. package/dist/context.js.map +1 -0
  14. package/dist/fetch.d.ts +3 -0
  15. package/dist/fetch.d.ts.map +1 -0
  16. package/dist/fetch.js +19 -0
  17. package/dist/fetch.js.map +1 -0
  18. package/dist/hooks.d.ts +50 -0
  19. package/dist/hooks.d.ts.map +1 -0
  20. package/dist/hooks.js +140 -0
  21. package/dist/hooks.js.map +1 -0
  22. package/dist/icons.d.ts +52 -0
  23. package/dist/icons.d.ts.map +1 -0
  24. package/dist/icons.js +40 -0
  25. package/dist/icons.js.map +1 -0
  26. package/dist/index.d.ts +33 -0
  27. package/dist/index.d.ts.map +1 -0
  28. package/dist/index.js +43 -0
  29. package/dist/index.js.map +1 -0
  30. package/dist/loom-recorder.d.ts +9 -0
  31. package/dist/loom-recorder.d.ts.map +1 -0
  32. package/dist/loom-recorder.js +92 -0
  33. package/dist/loom-recorder.js.map +1 -0
  34. package/dist/past-submissions.d.ts +10 -0
  35. package/dist/past-submissions.d.ts.map +1 -0
  36. package/dist/past-submissions.js +198 -0
  37. package/dist/past-submissions.js.map +1 -0
  38. package/dist/recorder/audio.d.ts +6 -0
  39. package/dist/recorder/audio.d.ts.map +1 -0
  40. package/dist/recorder/audio.js +30 -0
  41. package/dist/recorder/audio.js.map +1 -0
  42. package/dist/recorder/capture.d.ts +6 -0
  43. package/dist/recorder/capture.d.ts.map +1 -0
  44. package/dist/recorder/capture.js +32 -0
  45. package/dist/recorder/capture.js.map +1 -0
  46. package/dist/recorder/finalize-recording-worker-source.d.ts +2 -0
  47. package/dist/recorder/finalize-recording-worker-source.d.ts.map +1 -0
  48. package/dist/recorder/finalize-recording-worker-source.js +6 -0
  49. package/dist/recorder/finalize-recording-worker-source.js.map +1 -0
  50. package/dist/recorder/finalize-recording-worker.d.ts +2 -0
  51. package/dist/recorder/finalize-recording-worker.d.ts.map +1 -0
  52. package/dist/recorder/finalize-recording-worker.js +16 -0
  53. package/dist/recorder/finalize-recording-worker.js.map +1 -0
  54. package/dist/recorder/finalizeRecording.d.ts +12 -0
  55. package/dist/recorder/finalizeRecording.d.ts.map +1 -0
  56. package/dist/recorder/finalizeRecording.js +92 -0
  57. package/dist/recorder/finalizeRecording.js.map +1 -0
  58. package/dist/recorder/finalizeRecordingInWorker.d.ts +3 -0
  59. package/dist/recorder/finalizeRecordingInWorker.d.ts.map +1 -0
  60. package/dist/recorder/finalizeRecordingInWorker.js +49 -0
  61. package/dist/recorder/finalizeRecordingInWorker.js.map +1 -0
  62. package/dist/recorder/index.d.ts +7 -0
  63. package/dist/recorder/index.d.ts.map +1 -0
  64. package/dist/recorder/index.js +14 -0
  65. package/dist/recorder/index.js.map +1 -0
  66. package/dist/recorder/session.d.ts +19 -0
  67. package/dist/recorder/session.d.ts.map +1 -0
  68. package/dist/recorder/session.js +237 -0
  69. package/dist/recorder/session.js.map +1 -0
  70. package/dist/recorder/support.d.ts +8 -0
  71. package/dist/recorder/support.d.ts.map +1 -0
  72. package/dist/recorder/support.js +41 -0
  73. package/dist/recorder/support.js.map +1 -0
  74. package/dist/recorder/timer-worker.d.ts +5 -0
  75. package/dist/recorder/timer-worker.d.ts.map +1 -0
  76. package/dist/recorder/timer-worker.js +28 -0
  77. package/dist/recorder/timer-worker.js.map +1 -0
  78. package/dist/recorder/types.d.ts +26 -0
  79. package/dist/recorder/types.d.ts.map +1 -0
  80. package/dist/recorder/types.js +3 -0
  81. package/dist/recorder/types.js.map +1 -0
  82. package/dist/recorder-preview-player.d.ts +9 -0
  83. package/dist/recorder-preview-player.d.ts.map +1 -0
  84. package/dist/recorder-preview-player.js +136 -0
  85. package/dist/recorder-preview-player.js.map +1 -0
  86. package/dist/screen-recorder-context.d.ts +16 -0
  87. package/dist/screen-recorder-context.d.ts.map +1 -0
  88. package/dist/screen-recorder-context.js +124 -0
  89. package/dist/screen-recorder-context.js.map +1 -0
  90. package/dist/screen-recorder.d.ts +16 -0
  91. package/dist/screen-recorder.d.ts.map +1 -0
  92. package/dist/screen-recorder.js +126 -0
  93. package/dist/screen-recorder.js.map +1 -0
  94. package/dist/styles.d.ts +3 -0
  95. package/dist/styles.d.ts.map +1 -0
  96. package/dist/styles.js +841 -0
  97. package/dist/styles.js.map +1 -0
  98. package/dist/triage-attachments.d.ts +5 -0
  99. package/dist/triage-attachments.d.ts.map +1 -0
  100. package/dist/triage-attachments.js +44 -0
  101. package/dist/triage-attachments.js.map +1 -0
  102. package/dist/triage-button.d.ts +26 -0
  103. package/dist/triage-button.d.ts.map +1 -0
  104. package/dist/triage-button.js +228 -0
  105. package/dist/triage-button.js.map +1 -0
  106. package/dist/triage-rich-content.d.ts +6 -0
  107. package/dist/triage-rich-content.d.ts.map +1 -0
  108. package/dist/triage-rich-content.js +121 -0
  109. package/dist/triage-rich-content.js.map +1 -0
  110. package/dist/triage-slate-editor.d.ts +8 -0
  111. package/dist/triage-slate-editor.d.ts.map +1 -0
  112. package/dist/triage-slate-editor.js +112 -0
  113. package/dist/triage-slate-editor.js.map +1 -0
  114. package/dist/triage-slate.d.ts +20 -0
  115. package/dist/triage-slate.d.ts.map +1 -0
  116. package/dist/triage-slate.js +64 -0
  117. package/dist/triage-slate.js.map +1 -0
  118. package/dist/triage-ui-controller.d.ts +52 -0
  119. package/dist/triage-ui-controller.d.ts.map +1 -0
  120. package/dist/triage-ui-controller.js +146 -0
  121. package/dist/triage-ui-controller.js.map +1 -0
  122. package/dist/triage-ui-notifications.d.ts +5 -0
  123. package/dist/triage-ui-notifications.d.ts.map +1 -0
  124. package/dist/triage-ui-notifications.js +10 -0
  125. package/dist/triage-ui-notifications.js.map +1 -0
  126. package/dist/use-past-submissions.d.ts +43 -0
  127. package/dist/use-past-submissions.d.ts.map +1 -0
  128. package/dist/use-past-submissions.js +240 -0
  129. package/dist/use-past-submissions.js.map +1 -0
  130. package/dist/use-recorder-controller.d.ts +33 -0
  131. package/dist/use-recorder-controller.d.ts.map +1 -0
  132. package/dist/use-recorder-controller.js +309 -0
  133. package/dist/use-recorder-controller.js.map +1 -0
  134. package/dist/use-screen-recorder.d.ts +25 -0
  135. package/dist/use-screen-recorder.d.ts.map +1 -0
  136. package/dist/use-screen-recorder.js +34 -0
  137. package/dist/use-screen-recorder.js.map +1 -0
  138. package/dist/whats-new.d.ts +16 -0
  139. package/dist/whats-new.d.ts.map +1 -0
  140. package/dist/whats-new.js +72 -0
  141. package/dist/whats-new.js.map +1 -0
  142. package/package.json +58 -0
package/dist/styles.js ADDED
@@ -0,0 +1,841 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.TRIAGE_CSS = TRIAGE_CSS;
4
+ function TRIAGE_CSS(t) {
5
+ return `
6
+ /* ---- TaskP3 Triage SDK ---- */
7
+
8
+ .p3-trigger {
9
+ position: fixed;
10
+ bottom: 16px;
11
+ right: 16px;
12
+ z-index: ${t.zIndex};
13
+ display: inline-flex;
14
+ align-items: center;
15
+ gap: 6px;
16
+ padding: 8px 16px;
17
+ border: none;
18
+ border-radius: 9999px;
19
+ background: ${t.primaryColor};
20
+ color: ${t.textOnPrimary};
21
+ font-family: ${t.fontFamily};
22
+ font-size: 14px;
23
+ font-weight: 600;
24
+ cursor: pointer;
25
+ box-shadow: 0 2px 8px rgba(0,0,0,0.18);
26
+ transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
27
+ line-height: 1;
28
+ }
29
+ .p3-trigger:hover {
30
+ background: ${t.primaryHoverColor};
31
+ transform: translateY(-1px);
32
+ box-shadow: 0 4px 12px rgba(0,0,0,0.22);
33
+ }
34
+ .p3-trigger--left { right: auto; left: 16px; }
35
+
36
+ .p3-panel {
37
+ position: fixed;
38
+ bottom: 64px;
39
+ right: 16px;
40
+ z-index: ${t.zIndex + 1};
41
+ width: ${t.panelWidth}px;
42
+ max-height: calc(100vh - 90px);
43
+ background: #fff;
44
+ border-radius: ${t.borderRadius}px;
45
+ box-shadow: 0 8px 30px rgba(0,0,0,0.16);
46
+ font-family: ${t.fontFamily};
47
+ display: flex;
48
+ flex-direction: column;
49
+ overflow: hidden;
50
+ animation: p3-slide-up 0.2s ease-out;
51
+ }
52
+ .p3-panel--left { right: auto; left: 16px; }
53
+
54
+ @keyframes p3-slide-up {
55
+ from { opacity: 0; transform: translateY(8px); }
56
+ to { opacity: 1; transform: translateY(0); }
57
+ }
58
+
59
+ .p3-header {
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: space-between;
63
+ padding: 10px 16px;
64
+ background: ${t.primaryColor}0F;
65
+ border-bottom: 1px solid #e5e7eb;
66
+ }
67
+ .p3-header-title {
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 6px;
71
+ font-size: 14px;
72
+ font-weight: 600;
73
+ color: #1a1a1a;
74
+ }
75
+ .p3-header-actions { display: flex; gap: 2px; }
76
+ .p3-icon-btn {
77
+ display: inline-flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ width: 28px;
81
+ height: 28px;
82
+ border: none;
83
+ background: transparent;
84
+ border-radius: 6px;
85
+ cursor: pointer;
86
+ color: #6b7280;
87
+ transition: background 0.12s;
88
+ }
89
+ .p3-icon-btn:hover { background: #f3f4f6; }
90
+
91
+ .p3-body {
92
+ padding: 16px;
93
+ display: flex;
94
+ flex-direction: column;
95
+ gap: 14px;
96
+ overflow-y: auto;
97
+ }
98
+
99
+ .p3-tabs {
100
+ display: flex;
101
+ gap: 4px;
102
+ padding: 4px;
103
+ border-radius: ${t.borderRadius}px;
104
+ border: 1px solid #e5e7eb;
105
+ background: #fafafa;
106
+ }
107
+ .p3-tab {
108
+ flex: 1;
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ gap: 5px;
113
+ padding: 7px 8px;
114
+ border: none;
115
+ border-radius: ${t.borderRadius - 2}px;
116
+ background: transparent;
117
+ font-family: ${t.fontFamily};
118
+ font-size: 13px;
119
+ font-weight: 500;
120
+ color: #6b7280;
121
+ cursor: pointer;
122
+ transition: background 0.12s, color 0.12s;
123
+ }
124
+ .p3-tab:hover { background: #f3f4f6; }
125
+ .p3-tab[data-active="true"] {
126
+ background: ${t.primaryColor}1F;
127
+ color: ${t.primaryColor};
128
+ font-weight: 600;
129
+ }
130
+
131
+ .p3-hint { font-size: 13px; color: #6b7280; line-height: 1.45; margin: 0; }
132
+
133
+ .p3-textarea {
134
+ width: 100%;
135
+ min-height: 140px;
136
+ padding: 10px 12px;
137
+ border: 1px solid #d1d5db;
138
+ border-radius: ${t.borderRadius}px;
139
+ font-family: ${t.fontFamily};
140
+ font-size: 14px;
141
+ line-height: 1.5;
142
+ color: #1a1a1a;
143
+ resize: vertical;
144
+ outline: none;
145
+ transition: border-color 0.15s;
146
+ box-sizing: border-box;
147
+ }
148
+ .p3-textarea::placeholder { color: #9ca3af; }
149
+ .p3-textarea:focus { border-color: ${t.primaryColor}; }
150
+
151
+ .p3-files {
152
+ display: flex;
153
+ flex-direction: column;
154
+ border: 1px solid #e5e7eb;
155
+ border-radius: ${t.borderRadius}px;
156
+ overflow: hidden;
157
+ }
158
+ .p3-file {
159
+ display: flex;
160
+ align-items: center;
161
+ justify-content: space-between;
162
+ padding: 6px 10px;
163
+ font-size: 13px;
164
+ color: #374151;
165
+ background: #f9fafb;
166
+ }
167
+ .p3-file + .p3-file { border-top: 1px solid #e5e7eb; }
168
+ .p3-file-name {
169
+ display: flex;
170
+ align-items: center;
171
+ gap: 6px;
172
+ overflow: hidden;
173
+ text-overflow: ellipsis;
174
+ white-space: nowrap;
175
+ }
176
+
177
+ .p3-footer {
178
+ display: flex;
179
+ align-items: center;
180
+ justify-content: space-between;
181
+ padding: 10px 16px;
182
+ border-top: 1px solid #e5e7eb;
183
+ }
184
+ .p3-footer-left { display: flex; align-items: center; gap: 6px; }
185
+ .p3-footer-right { display: flex; align-items: center; gap: 8px; }
186
+
187
+ .p3-btn {
188
+ display: inline-flex;
189
+ align-items: center;
190
+ justify-content: center;
191
+ gap: 6px;
192
+ padding: 7px 16px;
193
+ border-radius: ${t.borderRadius}px;
194
+ font-family: ${t.fontFamily};
195
+ font-size: 13px;
196
+ font-weight: 500;
197
+ cursor: pointer;
198
+ transition: background 0.12s, opacity 0.12s;
199
+ border: none;
200
+ line-height: 1;
201
+ }
202
+ .p3-btn:disabled { opacity: 0.5; cursor: not-allowed; }
203
+ .p3-btn--primary { background: ${t.primaryColor}; color: ${t.textOnPrimary}; }
204
+ .p3-btn--primary:hover:not(:disabled) { background: ${t.primaryHoverColor}; }
205
+ .p3-btn--outline { background: transparent; color: #374151; border: 1px solid #d1d5db; }
206
+ .p3-btn--outline:hover:not(:disabled) { background: #f3f4f6; }
207
+ .p3-btn--ghost { background: transparent; color: #6b7280; padding: 6px 8px; }
208
+ .p3-btn--ghost:hover:not(:disabled) { background: #f3f4f6; }
209
+
210
+ .p3-success {
211
+ display: flex;
212
+ flex-direction: column;
213
+ align-items: center;
214
+ justify-content: center;
215
+ padding: 32px 16px;
216
+ gap: 12px;
217
+ text-align: center;
218
+ }
219
+ .p3-success-icon {
220
+ width: 48px; height: 48px; border-radius: 50%;
221
+ background: #ecfdf5;
222
+ display: flex; align-items: center; justify-content: center;
223
+ color: #10b981;
224
+ }
225
+ .p3-success-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
226
+ .p3-success-text { font-size: 13px; color: #6b7280; }
227
+
228
+ .p3-toast-stack {
229
+ position: fixed;
230
+ right: 16px;
231
+ bottom: 84px;
232
+ z-index: ${t.zIndex + 3};
233
+ display: flex;
234
+ flex-direction: column;
235
+ gap: 8px;
236
+ max-width: min(360px, calc(100vw - 32px));
237
+ }
238
+ .p3-toast {
239
+ display: flex;
240
+ align-items: flex-start;
241
+ justify-content: space-between;
242
+ gap: 12px;
243
+ padding: 12px 14px;
244
+ border-radius: ${t.borderRadius}px;
245
+ border: 1px solid #d1d5db;
246
+ background: #ffffff;
247
+ box-shadow: 0 10px 26px rgba(0,0,0,0.14);
248
+ color: #1f2937;
249
+ }
250
+ .p3-toast[data-kind="success"] {
251
+ border-color: #86efac;
252
+ background: #f0fdf4;
253
+ }
254
+ .p3-toast[data-kind="error"] {
255
+ border-color: #fecaca;
256
+ background: #fef2f2;
257
+ }
258
+ .p3-toast-message {
259
+ font-size: 13px;
260
+ line-height: 1.45;
261
+ }
262
+ .p3-toast-close {
263
+ border: none;
264
+ background: transparent;
265
+ color: #6b7280;
266
+ cursor: pointer;
267
+ font-size: 12px;
268
+ line-height: 1;
269
+ padding: 2px;
270
+ }
271
+
272
+ /* ---- Changelog ---- */
273
+
274
+ @keyframes p3-spin { to { transform: rotate(360deg); } }
275
+
276
+ .p3-cl { font-family: ${t.fontFamily}; display: flex; flex-direction: column; gap: 20px; }
277
+ .p3-cl-loading { display: flex; align-items: center; justify-content: center; padding: 32px; color: #9ca3af; }
278
+ .p3-cl-empty { text-align: center; padding: 32px; color: #6b7280; font-size: 14px; margin: 0; }
279
+ .p3-cl-load-more { align-self: center; }
280
+
281
+ .p3-cl-entry { border: 1px solid #e5e7eb; border-radius: ${t.borderRadius}px; background: #fff; overflow: visible; }
282
+ .p3-cl-entry-header {
283
+ position: sticky; top: -1px; z-index: 10;
284
+ background: #fff;
285
+ padding: 20px;
286
+ border-bottom: 1px solid #e5e7eb;
287
+ border-top-left-radius: ${t.borderRadius}px;
288
+ border-top-right-radius: ${t.borderRadius}px;
289
+ }
290
+ .p3-cl-entry-date { font-size: 18px; font-weight: 600; color: #1a1a1a; margin: 0 0 8px; line-height: 1.3; }
291
+ .p3-cl-entry-desc { font-size: 14px; color: #374151; line-height: 1.6; margin: 0; white-space: pre-wrap; }
292
+
293
+ .p3-cl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
294
+ .p3-cl-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
295
+
296
+ .p3-cl-changes { padding: 16px 20px 20px; }
297
+ .p3-cl-changes-title { font-size: 13px; font-weight: 600; color: #1a1a1a; margin: 0 0 12px; }
298
+ .p3-cl-changes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
299
+ .p3-cl-change { display: flex; align-items: flex-start; gap: 10px; }
300
+ .p3-cl-change-chip { flex-shrink: 0; min-width: 96px; }
301
+ .p3-cl-change-chip .p3-cl-chip { width: 100%; justify-content: center; }
302
+ .p3-cl-change-desc { font-size: 13px; color: #6b7280; line-height: 1.6; }
303
+
304
+ /* ---- What's New modal ---- */
305
+
306
+ @keyframes p3-fade-in { from { opacity: 0; } to { opacity: 1; } }
307
+ @keyframes p3-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
308
+
309
+ .p3-wn-backdrop {
310
+ position: fixed; inset: 0; z-index: ${t.zIndex + 10};
311
+ display: flex; align-items: center; justify-content: center;
312
+ background: rgba(0,0,0,0.4);
313
+ animation: p3-fade-in 0.15s ease-out;
314
+ }
315
+ .p3-wn-modal {
316
+ width: 90%; max-width: 640px; max-height: 80vh;
317
+ background: #fff; border-radius: ${t.borderRadius + 4}px;
318
+ box-shadow: 0 20px 60px rgba(0,0,0,0.2);
319
+ display: flex; flex-direction: column; overflow: hidden;
320
+ font-family: ${t.fontFamily};
321
+ animation: p3-modal-in 0.2s ease-out;
322
+ }
323
+ .p3-wn-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; flex-shrink: 0; }
324
+ .p3-wn-title { font-size: 22px; font-weight: 600; color: #1a1a1a; margin: 0; }
325
+ .p3-wn-body { flex: 1; overflow-y: auto; padding: 0 24px 16px; }
326
+ .p3-wn-entry-header { margin-bottom: 4px; }
327
+ .p3-wn-changes { border-top: 1px solid #e5e7eb; padding-top: 14px; margin-top: 8px; }
328
+ .p3-wn-footer { display: flex; align-items: center; justify-content: flex-end; padding: 12px 24px; border-top: 1px solid #e5e7eb; flex-shrink: 0; }
329
+
330
+ /* ---- Screen Recorder ---- */
331
+
332
+ @keyframes p3-pulse {
333
+ 0%, 100% { opacity: 1; }
334
+ 50% { opacity: 0.4; }
335
+ }
336
+
337
+ .p3-rec { display: flex; flex-direction: column; gap: 8px; }
338
+
339
+ .p3-rec-bar {
340
+ display: flex;
341
+ align-items: center;
342
+ gap: 8px;
343
+ padding: 8px 12px;
344
+ border-radius: ${t.borderRadius}px;
345
+ background: #fef2f2;
346
+ border: 1px solid #fecaca;
347
+ }
348
+ .p3-rec-dot {
349
+ width: 10px; height: 10px;
350
+ border-radius: 50%;
351
+ background: #ef4444;
352
+ animation: p3-pulse 1.2s ease-in-out infinite;
353
+ flex-shrink: 0;
354
+ }
355
+ .p3-rec-timer { font-size: 13px; font-weight: 600; color: #991b1b; font-variant-numeric: tabular-nums; flex: 1; }
356
+ .p3-rec-controls { display: inline-flex; align-items: center; gap: 2px; }
357
+ .p3-rec-ctrl {
358
+ position: relative;
359
+ display: inline-flex; align-items: center; justify-content: center;
360
+ width: 28px; height: 28px;
361
+ padding: 0; border: none; border-radius: 6px;
362
+ background: transparent; color: #991b1b;
363
+ cursor: pointer; transition: background 0.12s, color 0.12s;
364
+ }
365
+ .p3-rec-ctrl:hover { background: #fecaca; }
366
+ .p3-rec-ctrl--danger { color: #b91c1c; }
367
+ .p3-rec-ctrl--danger:hover { background: #fee2e2; }
368
+ .p3-rec-ctrl[data-tooltip]::before,
369
+ .p3-rec-ctrl[data-tooltip]::after {
370
+ position: absolute;
371
+ left: 50%;
372
+ opacity: 0;
373
+ pointer-events: none;
374
+ transform: translate(-50%, 4px);
375
+ transition: opacity 0.12s ease, transform 0.12s ease;
376
+ z-index: ${t.zIndex + 2};
377
+ }
378
+ .p3-rec-ctrl[data-tooltip]::before {
379
+ content: attr(data-tooltip);
380
+ bottom: calc(100% + 8px);
381
+ padding: 5px 8px;
382
+ border-radius: 6px;
383
+ background: #111827;
384
+ color: #fff;
385
+ font-size: 11px;
386
+ font-weight: 600;
387
+ white-space: nowrap;
388
+ }
389
+ .p3-rec-ctrl[data-tooltip]::after {
390
+ content: "";
391
+ bottom: calc(100% + 3px);
392
+ border-left: 5px solid transparent;
393
+ border-right: 5px solid transparent;
394
+ border-top: 5px solid #111827;
395
+ }
396
+ .p3-rec-ctrl[data-tooltip]:hover::before,
397
+ .p3-rec-ctrl[data-tooltip]:hover::after,
398
+ .p3-rec-ctrl[data-tooltip]:focus-visible::before,
399
+ .p3-rec-ctrl[data-tooltip]:focus-visible::after {
400
+ opacity: 1;
401
+ transform: translate(-50%, 0);
402
+ }
403
+ .p3-rec-stop {
404
+ display: inline-flex; align-items: center; gap: 4px;
405
+ padding: 4px 10px;
406
+ border: none; border-radius: 6px;
407
+ background: #ef4444; color: #fff;
408
+ font-family: ${t.fontFamily}; font-size: 12px; font-weight: 600;
409
+ cursor: pointer; transition: background 0.12s;
410
+ }
411
+ .p3-rec-stop:hover { background: #dc2626; }
412
+
413
+ .p3-rec-preview {
414
+ position: relative;
415
+ border-radius: ${t.borderRadius}px;
416
+ overflow: hidden;
417
+ border: 1px solid #e5e7eb;
418
+ background: #000;
419
+ }
420
+ .p3-rec-preview video {
421
+ display: block;
422
+ width: 100%;
423
+ max-height: 200px;
424
+ object-fit: contain;
425
+ }
426
+ .p3-rec-player {
427
+ display: flex;
428
+ flex-direction: column;
429
+ background: #000;
430
+ }
431
+ .p3-rec-player-stage {
432
+ position: relative;
433
+ display: flex;
434
+ align-items: center;
435
+ justify-content: center;
436
+ min-height: 180px;
437
+ background: #000;
438
+ }
439
+ .p3-rec-player-video {
440
+ display: block;
441
+ width: 100%;
442
+ max-height: 200px;
443
+ object-fit: contain;
444
+ cursor: pointer;
445
+ }
446
+ .p3-rec-player-camera {
447
+ position: absolute;
448
+ right: 8px;
449
+ bottom: 8px;
450
+ aspect-ratio: 1 / 1;
451
+ border-radius: 999px;
452
+ object-fit: cover;
453
+ border: 2px solid rgba(255,255,255,0.6);
454
+ pointer-events: none;
455
+ }
456
+ .p3-rec-player-overlay {
457
+ position: absolute;
458
+ display: inline-flex;
459
+ align-items: center;
460
+ justify-content: center;
461
+ width: 52px;
462
+ height: 52px;
463
+ border: none;
464
+ border-radius: 999px;
465
+ background: rgba(17, 24, 39, 0.7);
466
+ color: #fff;
467
+ cursor: pointer;
468
+ backdrop-filter: blur(4px);
469
+ }
470
+ .p3-rec-player-overlay:hover { background: rgba(17, 24, 39, 0.82); }
471
+ .p3-rec-player-controls {
472
+ display: flex;
473
+ align-items: center;
474
+ gap: 8px;
475
+ padding: 10px 12px;
476
+ background: #111827;
477
+ color: #fff;
478
+ }
479
+ .p3-rec-player-btn {
480
+ display: inline-flex;
481
+ align-items: center;
482
+ justify-content: center;
483
+ width: 28px;
484
+ height: 28px;
485
+ padding: 0;
486
+ border: none;
487
+ border-radius: 999px;
488
+ background: rgba(255,255,255,0.12);
489
+ color: #fff;
490
+ cursor: pointer;
491
+ }
492
+ .p3-rec-player-btn:hover { background: rgba(255,255,255,0.2); }
493
+ .p3-rec-player-time {
494
+ min-width: 84px;
495
+ font-size: 12px;
496
+ font-weight: 600;
497
+ font-variant-numeric: tabular-nums;
498
+ }
499
+ .p3-rec-player-slider {
500
+ flex: 1;
501
+ accent-color: ${t.primaryColor};
502
+ }
503
+ .p3-rec-player:fullscreen,
504
+ .p3-rec-player:-webkit-full-screen {
505
+ width: 100vw;
506
+ height: 100vh;
507
+ }
508
+ .p3-rec-player:fullscreen .p3-rec-player-stage,
509
+ .p3-rec-player:-webkit-full-screen .p3-rec-player-stage {
510
+ flex: 1;
511
+ min-height: 0;
512
+ }
513
+ .p3-rec-player:fullscreen .p3-rec-player-video,
514
+ .p3-rec-player:-webkit-full-screen .p3-rec-player-video {
515
+ width: 100%;
516
+ height: 100%;
517
+ max-height: none;
518
+ }
519
+ .p3-rec-player:fullscreen .p3-rec-player-camera,
520
+ .p3-rec-player:-webkit-full-screen .p3-rec-player-camera {
521
+ max-width: 18vw;
522
+ }
523
+ .p3-rec-player:fullscreen .p3-rec-player-controls,
524
+ .p3-rec-player:-webkit-full-screen .p3-rec-player-controls {
525
+ flex-shrink: 0;
526
+ }
527
+ .p3-rec-actions {
528
+ display: flex;
529
+ align-items: center;
530
+ gap: 6px;
531
+ padding: 6px 8px;
532
+ background: #f9fafb;
533
+ border-top: 1px solid #e5e7eb;
534
+ }
535
+ .p3-rec-attach {
536
+ display: inline-flex; align-items: center; gap: 4px;
537
+ padding: 5px 12px;
538
+ border: none; border-radius: 6px;
539
+ background: ${t.primaryColor}; color: ${t.textOnPrimary};
540
+ font-family: ${t.fontFamily}; font-size: 12px; font-weight: 600;
541
+ cursor: pointer; transition: background 0.12s;
542
+ }
543
+ .p3-rec-attach:hover { background: ${t.primaryHoverColor}; }
544
+ .p3-rec-attach:disabled,
545
+ .p3-rec-discard:disabled {
546
+ opacity: 0.6;
547
+ cursor: wait;
548
+ }
549
+ .p3-rec-discard {
550
+ display: inline-flex; align-items: center; gap: 4px;
551
+ padding: 5px 10px;
552
+ border: 1px solid #d1d5db; border-radius: 6px;
553
+ background: transparent; color: #6b7280;
554
+ font-family: ${t.fontFamily}; font-size: 12px; font-weight: 500;
555
+ cursor: pointer; transition: background 0.12s;
556
+ }
557
+ .p3-rec-discard:hover { background: #f3f4f6; }
558
+
559
+ .p3-rec-error { font-size: 12px; color: #dc2626; margin: 0; }
560
+
561
+ /* ---- Past Submissions ---- */
562
+
563
+ .p3-ps-backdrop {
564
+ position: fixed;
565
+ inset: 0;
566
+ z-index: ${t.zIndex + 11};
567
+ display: flex;
568
+ align-items: center;
569
+ justify-content: center;
570
+ background: rgba(0, 0, 0, 0.35);
571
+ }
572
+ .p3-ps-modal {
573
+ width: min(1000px, 96vw);
574
+ height: min(760px, 92vh);
575
+ background: #fff;
576
+ border-radius: ${t.borderRadius + 4}px;
577
+ box-shadow: 0 18px 60px rgba(0, 0, 0, 0.2);
578
+ display: flex;
579
+ flex-direction: column;
580
+ overflow: hidden;
581
+ }
582
+ .p3-ps-header {
583
+ display: flex;
584
+ align-items: center;
585
+ justify-content: space-between;
586
+ padding: 14px 18px;
587
+ border-bottom: 1px solid #e5e7eb;
588
+ }
589
+ .p3-ps-title {
590
+ margin: 0;
591
+ font-size: 16px;
592
+ font-weight: 600;
593
+ }
594
+ .p3-ps-filters {
595
+ padding: 10px 18px;
596
+ display: flex;
597
+ gap: 8px;
598
+ border-bottom: 1px solid #e5e7eb;
599
+ }
600
+ .p3-ps-filters select,
601
+ .p3-ps-search {
602
+ border: 1px solid #d1d5db;
603
+ border-radius: ${t.borderRadius}px;
604
+ padding: 6px 10px;
605
+ font-size: 13px;
606
+ font-family: ${t.fontFamily};
607
+ }
608
+ .p3-ps-search {
609
+ min-width: 220px;
610
+ }
611
+ .p3-ps-body {
612
+ display: grid;
613
+ grid-template-columns: 340px 1fr;
614
+ gap: 0;
615
+ min-height: 0;
616
+ height: 100%;
617
+ }
618
+ .p3-ps-list {
619
+ border-right: 1px solid #e5e7eb;
620
+ padding: 10px;
621
+ display: flex;
622
+ flex-direction: column;
623
+ gap: 8px;
624
+ overflow-y: auto;
625
+ }
626
+ .p3-ps-item {
627
+ border: 1px solid #e5e7eb;
628
+ border-radius: ${t.borderRadius}px;
629
+ text-align: left;
630
+ padding: 10px;
631
+ background: #fff;
632
+ cursor: pointer;
633
+ }
634
+ .p3-ps-item[data-active="true"] {
635
+ border-color: ${t.primaryColor};
636
+ background: ${t.primaryColor}12;
637
+ }
638
+ .p3-ps-item-title {
639
+ font-size: 13px;
640
+ font-weight: 600;
641
+ color: #111827;
642
+ }
643
+ .p3-ps-item-meta {
644
+ margin-top: 4px;
645
+ font-size: 12px;
646
+ color: #6b7280;
647
+ }
648
+ .p3-ps-item-submeta {
649
+ margin-top: 8px;
650
+ display: flex;
651
+ flex-wrap: wrap;
652
+ gap: 8px;
653
+ font-size: 11px;
654
+ color: #9ca3af;
655
+ }
656
+ .p3-ps-detail {
657
+ min-width: 0;
658
+ display: flex;
659
+ flex-direction: column;
660
+ gap: 10px;
661
+ padding: 14px;
662
+ overflow-y: auto;
663
+ }
664
+ .p3-ps-detail-head {
665
+ display: flex;
666
+ align-items: flex-start;
667
+ justify-content: space-between;
668
+ gap: 12px;
669
+ }
670
+ .p3-ps-detail-title {
671
+ margin: 0;
672
+ font-size: 15px;
673
+ color: #111827;
674
+ }
675
+ .p3-ps-detail-meta {
676
+ margin-top: 6px;
677
+ display: flex;
678
+ flex-wrap: wrap;
679
+ gap: 8px;
680
+ font-size: 12px;
681
+ color: #6b7280;
682
+ }
683
+ .p3-ps-detail-text {
684
+ margin: 0;
685
+ font-size: 13px;
686
+ color: #374151;
687
+ }
688
+ .p3-ps-detail-text p,
689
+ .p3-ps-response-text p {
690
+ margin: 0 0 8px;
691
+ }
692
+ .p3-ps-detail-text p:last-child,
693
+ .p3-ps-response-text p:last-child {
694
+ margin-bottom: 0;
695
+ }
696
+ .p3-ps-detail-text a,
697
+ .p3-ps-response-text a {
698
+ color: ${t.primaryColor};
699
+ }
700
+ .p3-ps-detail-text blockquote,
701
+ .p3-ps-response-text blockquote {
702
+ margin: 8px 0;
703
+ padding-left: 12px;
704
+ border-left: 3px solid #d1d5db;
705
+ color: #4b5563;
706
+ }
707
+ .p3-ps-detail-text pre,
708
+ .p3-ps-response-text pre {
709
+ margin: 8px 0;
710
+ padding: 10px 12px;
711
+ border-radius: ${t.borderRadius}px;
712
+ background: #111827;
713
+ color: #f9fafb;
714
+ overflow-x: auto;
715
+ }
716
+ .p3-ps-detail-text ul,
717
+ .p3-ps-detail-text ol,
718
+ .p3-ps-response-text ul,
719
+ .p3-ps-response-text ol {
720
+ margin: 8px 0;
721
+ padding-left: 20px;
722
+ }
723
+ .p3-ps-thread {
724
+ display: flex;
725
+ flex-direction: column;
726
+ gap: 10px;
727
+ }
728
+ .p3-ps-thread-entry {
729
+ border: 1px solid #e5e7eb;
730
+ border-radius: ${t.borderRadius}px;
731
+ padding: 12px;
732
+ background: #fafafa;
733
+ }
734
+ .p3-ps-thread-entry[data-kind="submission"] {
735
+ background: #fff;
736
+ }
737
+ .p3-ps-thread-entry-header {
738
+ display: flex;
739
+ align-items: center;
740
+ justify-content: space-between;
741
+ gap: 10px;
742
+ margin-bottom: 8px;
743
+ }
744
+ .p3-ps-thread-author {
745
+ font-size: 12px;
746
+ font-weight: 600;
747
+ color: #111827;
748
+ }
749
+ .p3-ps-thread-time {
750
+ font-size: 11px;
751
+ color: #9ca3af;
752
+ }
753
+ .p3-ps-response-text {
754
+ font-size: 13px;
755
+ color: #374151;
756
+ }
757
+ .p3-ps-compose {
758
+ display: flex;
759
+ flex-direction: column;
760
+ gap: 8px;
761
+ padding-top: 8px;
762
+ border-top: 1px solid #e5e7eb;
763
+ }
764
+ .p3-ps-attachments {
765
+ display: flex;
766
+ flex-direction: column;
767
+ gap: 8px;
768
+ }
769
+ .p3-ps-attachment {
770
+ border: 1px solid #e5e7eb;
771
+ border-radius: ${t.borderRadius}px;
772
+ padding: 10px;
773
+ background: #f9fafb;
774
+ }
775
+ .p3-ps-attachment-header {
776
+ display: flex;
777
+ align-items: flex-start;
778
+ justify-content: space-between;
779
+ gap: 12px;
780
+ }
781
+ .p3-ps-attachment-name {
782
+ font-size: 13px;
783
+ font-weight: 600;
784
+ color: #111827;
785
+ }
786
+ .p3-ps-attachment-meta {
787
+ margin-top: 2px;
788
+ font-size: 12px;
789
+ color: #6b7280;
790
+ }
791
+ .p3-ps-attachment-image,
792
+ .p3-ps-attachment-media {
793
+ width: 100%;
794
+ margin-top: 10px;
795
+ border-radius: ${t.borderRadius}px;
796
+ background: #000;
797
+ }
798
+ .p3-ps-empty {
799
+ color: #6b7280;
800
+ font-size: 13px;
801
+ }
802
+ .p3-rte {
803
+ border: 1px solid #d1d5db;
804
+ border-radius: ${t.borderRadius}px;
805
+ overflow: hidden;
806
+ background: #fff;
807
+ }
808
+ .p3-rte-toolbar {
809
+ display: flex;
810
+ flex-wrap: wrap;
811
+ gap: 6px;
812
+ padding: 8px;
813
+ border-bottom: 1px solid #e5e7eb;
814
+ background: #f9fafb;
815
+ }
816
+ .p3-rte-btn {
817
+ border: 1px solid #d1d5db;
818
+ border-radius: 6px;
819
+ background: #fff;
820
+ padding: 5px 8px;
821
+ font-size: 12px;
822
+ cursor: pointer;
823
+ }
824
+ .p3-rte-btn[data-active="true"] {
825
+ border-color: ${t.primaryColor};
826
+ color: ${t.primaryColor};
827
+ background: ${t.primaryColor}12;
828
+ }
829
+ .p3-rte-editor {
830
+ min-height: 140px;
831
+ padding: 12px;
832
+ font-size: 14px;
833
+ line-height: 1.55;
834
+ color: #111827;
835
+ }
836
+ .p3-rte-editor:focus {
837
+ outline: none;
838
+ }
839
+ `;
840
+ }
841
+ //# sourceMappingURL=styles.js.map