@mevdragon/vidfarm-devcli 0.2.13 → 0.3.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 (200) hide show
  1. package/README.md +11 -4
  2. package/SKILL.director.md +97 -0
  3. package/SKILL.platform.md +66 -6
  4. package/dist/src/cli.js +137 -1524
  5. package/dist/src/dev-serve.js +169 -0
  6. package/package.json +5 -24
  7. package/.env.example +0 -60
  8. package/auto-create-hyperframe-templates/AUTO_CREATE_HYPERFRAME_TEMPLATES.md +0 -275
  9. package/auto-create-hyperframe-templates/extractor-system-prompt.md +0 -128
  10. package/auto-create-hyperframe-templates/input-manifest.schema.json +0 -56
  11. package/auto-create-hyperframe-templates/lambda-memory-estimator.md +0 -118
  12. package/auto-create-hyperframe-templates/production-graph.schema.json +0 -314
  13. package/auto-create-hyperframe-templates/runbook.md +0 -198
  14. package/auto-create-hyperframe-templates/scripts/create-hyperframe-template.mjs +0 -368
  15. package/auto-create-hyperframe-templates/template-plan.schema.json +0 -311
  16. package/auto-create-hyperframe-templates/template-planner-prompt.md +0 -144
  17. package/auto-create-templates/AUTO_CREATE_TEMPLATES.md +0 -599
  18. package/auto-create-templates/extractor-system-prompt.md +0 -119
  19. package/auto-create-templates/production-graph.schema.json +0 -276
  20. package/auto-create-templates/runbook.md +0 -140
  21. package/auto-create-templates/template-plan.schema.json +0 -301
  22. package/auto-create-templates/template-planner-prompt.md +0 -137
  23. package/dist/src/account-pages-legacy.js +0 -9336
  24. package/dist/src/account-pages-legacy.js.map +0 -1
  25. package/dist/src/account-pages.js +0 -61
  26. package/dist/src/account-pages.js.map +0 -1
  27. package/dist/src/app.js +0 -14023
  28. package/dist/src/app.js.map +0 -1
  29. package/dist/src/cli.js.map +0 -1
  30. package/dist/src/composition-runtime.js +0 -581
  31. package/dist/src/composition-runtime.js.map +0 -1
  32. package/dist/src/config.js +0 -140
  33. package/dist/src/config.js.map +0 -1
  34. package/dist/src/context.js +0 -492
  35. package/dist/src/context.js.map +0 -1
  36. package/dist/src/dev-app-legacy.js +0 -694
  37. package/dist/src/dev-app-legacy.js.map +0 -1
  38. package/dist/src/dev-app.js +0 -6
  39. package/dist/src/dev-app.js.map +0 -1
  40. package/dist/src/domain.js +0 -2
  41. package/dist/src/domain.js.map +0 -1
  42. package/dist/src/editor-chat-history.js +0 -82
  43. package/dist/src/editor-chat-history.js.map +0 -1
  44. package/dist/src/editor-chat.js +0 -311
  45. package/dist/src/editor-chat.js.map +0 -1
  46. package/dist/src/frontend/flockposter-cache-store.js +0 -124
  47. package/dist/src/frontend/flockposter-cache-store.js.map +0 -1
  48. package/dist/src/frontend/homepage-client.js +0 -117
  49. package/dist/src/frontend/homepage-client.js.map +0 -1
  50. package/dist/src/frontend/homepage-shared.js +0 -4
  51. package/dist/src/frontend/homepage-shared.js.map +0 -1
  52. package/dist/src/frontend/homepage-store.js +0 -28
  53. package/dist/src/frontend/homepage-store.js.map +0 -1
  54. package/dist/src/frontend/homepage-view.js +0 -260
  55. package/dist/src/frontend/homepage-view.js.map +0 -1
  56. package/dist/src/frontend/page-runtime-client.js +0 -103
  57. package/dist/src/frontend/page-runtime-client.js.map +0 -1
  58. package/dist/src/frontend/page-runtime-store.js +0 -9
  59. package/dist/src/frontend/page-runtime-store.js.map +0 -1
  60. package/dist/src/frontend/sentry.js +0 -42
  61. package/dist/src/frontend/sentry.js.map +0 -1
  62. package/dist/src/frontend/template-editor-chat.js +0 -3767
  63. package/dist/src/frontend/template-editor-chat.js.map +0 -1
  64. package/dist/src/help-page.js +0 -333
  65. package/dist/src/help-page.js.map +0 -1
  66. package/dist/src/homepage.js +0 -919
  67. package/dist/src/homepage.js.map +0 -1
  68. package/dist/src/hyperframes/composition.js +0 -180
  69. package/dist/src/hyperframes/composition.js.map +0 -1
  70. package/dist/src/index.js +0 -16
  71. package/dist/src/index.js.map +0 -1
  72. package/dist/src/instrument.js +0 -30
  73. package/dist/src/instrument.js.map +0 -1
  74. package/dist/src/lib/crypto.js +0 -45
  75. package/dist/src/lib/crypto.js.map +0 -1
  76. package/dist/src/lib/dev-log.js +0 -54
  77. package/dist/src/lib/dev-log.js.map +0 -1
  78. package/dist/src/lib/display-name.js +0 -11
  79. package/dist/src/lib/display-name.js.map +0 -1
  80. package/dist/src/lib/ids.js +0 -24
  81. package/dist/src/lib/ids.js.map +0 -1
  82. package/dist/src/lib/images.js +0 -19
  83. package/dist/src/lib/images.js.map +0 -1
  84. package/dist/src/lib/json.js +0 -15
  85. package/dist/src/lib/json.js.map +0 -1
  86. package/dist/src/lib/template-dna.js +0 -543
  87. package/dist/src/lib/template-dna.js.map +0 -1
  88. package/dist/src/lib/template-paths.js +0 -28
  89. package/dist/src/lib/template-paths.js.map +0 -1
  90. package/dist/src/lib/template-style-options.js +0 -203
  91. package/dist/src/lib/template-style-options.js.map +0 -1
  92. package/dist/src/lib/time.js +0 -7
  93. package/dist/src/lib/time.js.map +0 -1
  94. package/dist/src/lib/video-quality-harness.js +0 -60
  95. package/dist/src/lib/video-quality-harness.js.map +0 -1
  96. package/dist/src/page-runtime.js +0 -2
  97. package/dist/src/page-runtime.js.map +0 -1
  98. package/dist/src/page-shell.js +0 -2393
  99. package/dist/src/page-shell.js.map +0 -1
  100. package/dist/src/primitive-context.js +0 -299
  101. package/dist/src/primitive-context.js.map +0 -1
  102. package/dist/src/primitive-registry.js +0 -2181
  103. package/dist/src/primitive-registry.js.map +0 -1
  104. package/dist/src/primitive-sdk.js +0 -4
  105. package/dist/src/primitive-sdk.js.map +0 -1
  106. package/dist/src/primitives/remotion/html-image.js +0 -30
  107. package/dist/src/primitives/remotion/html-image.js.map +0 -1
  108. package/dist/src/primitives/remotion/media-slideshow.js +0 -60
  109. package/dist/src/primitives/remotion/media-slideshow.js.map +0 -1
  110. package/dist/src/react-page-shell.js +0 -35
  111. package/dist/src/react-page-shell.js.map +0 -1
  112. package/dist/src/ready-post-schedule-component.js +0 -1515
  113. package/dist/src/ready-post-schedule-component.js.map +0 -1
  114. package/dist/src/registry.js +0 -296
  115. package/dist/src/registry.js.map +0 -1
  116. package/dist/src/runtime.js +0 -31
  117. package/dist/src/runtime.js.map +0 -1
  118. package/dist/src/services/api-call-history.js +0 -249
  119. package/dist/src/services/api-call-history.js.map +0 -1
  120. package/dist/src/services/auth.js +0 -152
  121. package/dist/src/services/auth.js.map +0 -1
  122. package/dist/src/services/billing.js +0 -231
  123. package/dist/src/services/billing.js.map +0 -1
  124. package/dist/src/services/chat-threads.js +0 -92
  125. package/dist/src/services/chat-threads.js.map +0 -1
  126. package/dist/src/services/fork-access.js +0 -94
  127. package/dist/src/services/fork-access.js.map +0 -1
  128. package/dist/src/services/ghostcut.js +0 -132
  129. package/dist/src/services/ghostcut.js.map +0 -1
  130. package/dist/src/services/hyperframes.js +0 -1014
  131. package/dist/src/services/hyperframes.js.map +0 -1
  132. package/dist/src/services/job-capacity.js +0 -14
  133. package/dist/src/services/job-capacity.js.map +0 -1
  134. package/dist/src/services/job-logs.js +0 -197
  135. package/dist/src/services/job-logs.js.map +0 -1
  136. package/dist/src/services/jobs.js +0 -136
  137. package/dist/src/services/jobs.js.map +0 -1
  138. package/dist/src/services/media-processing.js +0 -743
  139. package/dist/src/services/media-processing.js.map +0 -1
  140. package/dist/src/services/primitive-media-lambda.js +0 -280
  141. package/dist/src/services/primitive-media-lambda.js.map +0 -1
  142. package/dist/src/services/providers.js +0 -2870
  143. package/dist/src/services/providers.js.map +0 -1
  144. package/dist/src/services/rate-limits.js +0 -237
  145. package/dist/src/services/rate-limits.js.map +0 -1
  146. package/dist/src/services/remotion.js +0 -688
  147. package/dist/src/services/remotion.js.map +0 -1
  148. package/dist/src/services/serverless-auth.js +0 -374
  149. package/dist/src/services/serverless-auth.js.map +0 -1
  150. package/dist/src/services/serverless-jobs.js +0 -1074
  151. package/dist/src/services/serverless-jobs.js.map +0 -1
  152. package/dist/src/services/serverless-provider-keys.js +0 -401
  153. package/dist/src/services/serverless-provider-keys.js.map +0 -1
  154. package/dist/src/services/serverless-records.js +0 -1086
  155. package/dist/src/services/serverless-records.js.map +0 -1
  156. package/dist/src/services/serverless-template-configs.js +0 -67
  157. package/dist/src/services/serverless-template-configs.js.map +0 -1
  158. package/dist/src/services/storage.js +0 -382
  159. package/dist/src/services/storage.js.map +0 -1
  160. package/dist/src/services/template-certification.js +0 -475
  161. package/dist/src/services/template-certification.js.map +0 -1
  162. package/dist/src/services/template-loader.js +0 -99
  163. package/dist/src/services/template-loader.js.map +0 -1
  164. package/dist/src/services/template-runtime-bundles.js +0 -217
  165. package/dist/src/services/template-runtime-bundles.js.map +0 -1
  166. package/dist/src/services/template-sources.js +0 -1017
  167. package/dist/src/services/template-sources.js.map +0 -1
  168. package/dist/src/services/video-normalization.js +0 -2
  169. package/dist/src/services/video-normalization.js.map +0 -1
  170. package/dist/src/services/webhooks.js +0 -62
  171. package/dist/src/services/webhooks.js.map +0 -1
  172. package/dist/src/template-editor-pages.js +0 -6624
  173. package/dist/src/template-editor-pages.js.map +0 -1
  174. package/dist/src/template-editor-shell.js +0 -2713
  175. package/dist/src/template-editor-shell.js.map +0 -1
  176. package/dist/src/template-sdk.js +0 -4
  177. package/dist/src/template-sdk.js.map +0 -1
  178. package/dist/src/worker.js +0 -17
  179. package/dist/src/worker.js.map +0 -1
  180. package/public/assets/homepage-app.js +0 -54
  181. package/public/assets/homepage-client-app.js +0 -80
  182. package/public/assets/page-runtime-client-app.js +0 -94
  183. package/readme.secret.md +0 -89
  184. package/templates/vidfarm_template_0000/README.md +0 -106
  185. package/templates/vidfarm_template_0000/SKILL.md +0 -266
  186. package/templates/vidfarm_template_0000/assets/Abel-Regular.ttf +0 -0
  187. package/templates/vidfarm_template_0000/assets/DMSerifDisplay-Regular.ttf +0 -0
  188. package/templates/vidfarm_template_0000/assets/Montserrat[wght].ttf +0 -0
  189. package/templates/vidfarm_template_0000/assets/SourceCodePro[wght].ttf +0 -0
  190. package/templates/vidfarm_template_0000/assets/TikTokSans-SemiBold.ttf +0 -0
  191. package/templates/vidfarm_template_0000/assets/Yesteryear-Regular.ttf +0 -0
  192. package/templates/vidfarm_template_0000/composition.json +0 -11
  193. package/templates/vidfarm_template_0000/src/lib/images.js +0 -221
  194. package/templates/vidfarm_template_0000/src/remotion/Root.js +0 -33
  195. package/templates/vidfarm_template_0000/src/remotion/index.js +0 -3
  196. package/templates/vidfarm_template_0000/src/sdk.js +0 -3
  197. package/templates/vidfarm_template_0000/src/style-options.js +0 -200
  198. package/templates/vidfarm_template_0000/src/template-dna.js +0 -9
  199. package/templates/vidfarm_template_0000/src/template.js +0 -1566
  200. package/templates/vidfarm_template_0000/template.config.json +0 -21
@@ -1,2713 +0,0 @@
1
- import { escapeAttribute, escapeHtml, resolveAccountDisplayName } from "./page-shell.js";
2
- export const TEMPLATE_EDITOR_SHELL_STYLES = `
3
- .editor-workbench {
4
- min-height: 100%;
5
- height: 100%;
6
- padding: 96px 0 28px 432px;
7
- overflow: hidden;
8
- min-width: 0;
9
- box-sizing: border-box;
10
- }
11
-
12
- .editor-main {
13
- min-height: 0;
14
- height: 100%;
15
- overflow-x: hidden;
16
- overflow-y: auto;
17
- overflow: auto;
18
- padding-left: 10px;
19
- }
20
-
21
- .editor-floating-nav {
22
- position: fixed;
23
- top: 20px;
24
- left: 452px;
25
- right: 20px;
26
- z-index: 60;
27
- display: flex;
28
- flex-wrap: wrap;
29
- align-items: center;
30
- gap: 10px;
31
- max-width: none;
32
- padding: 12px 14px;
33
- border: 1px solid rgba(255, 255, 255, 0.84);
34
- border-radius: 24px;
35
- background: rgba(255, 252, 247, 0.9);
36
- box-shadow: var(--shadow);
37
- backdrop-filter: blur(16px);
38
- }
39
-
40
- .editor-back-link {
41
- display: inline-flex;
42
- align-items: center;
43
- justify-content: center;
44
- min-height: 40px;
45
- padding: 0 14px;
46
- border: 1px solid rgba(191, 164, 109, 0.34);
47
- border-radius: 999px;
48
- background: #dbc17a;
49
- color: #243041;
50
- text-decoration: none;
51
- font-size: 0.9rem;
52
- font-weight: 700;
53
- white-space: nowrap;
54
- }
55
-
56
- .editor-nav-title {
57
- min-width: 0;
58
- flex: 1 1 auto;
59
- margin: 0 4px 0 2px;
60
- font-family: "Instrument Serif", serif;
61
- font-size: 1.4rem;
62
- line-height: 0.95;
63
- letter-spacing: -0.04em;
64
- color: #1f2635;
65
- overflow: hidden;
66
- text-overflow: ellipsis;
67
- white-space: nowrap;
68
- }
69
-
70
- .editor-nav-account {
71
- min-width: 0;
72
- max-width: min(42vw, 460px);
73
- margin-left: auto;
74
- color: rgba(116, 130, 156, 0.78);
75
- font-size: 0.94rem;
76
- line-height: 1.2;
77
- font-weight: 500;
78
- letter-spacing: -0.01em;
79
- overflow: hidden;
80
- text-overflow: ellipsis;
81
- white-space: nowrap;
82
- }
83
-
84
- .editor-nav-account span {
85
- color: rgba(116, 130, 156, 0.62);
86
- }
87
-
88
- .editor-right-rail {
89
- position: fixed;
90
- top: 0;
91
- left: 0;
92
- bottom: 0;
93
- z-index: 30;
94
- width: 432px;
95
- overflow: hidden;
96
- }
97
-
98
- .editor-chat-panel {
99
- height: 100%;
100
- min-width: 0;
101
- display: flex;
102
- overflow: hidden;
103
- border-right: 1px solid rgba(255, 255, 255, 0.84);
104
- background: rgba(255, 252, 247, 0.92);
105
- }
106
-
107
- .vf-editor-chat-shell,
108
- .vf-editor-chat-thread {
109
- height: 100%;
110
- min-height: 0;
111
- }
112
-
113
- .vf-editor-chat-shell {
114
- display: flex;
115
- flex-direction: column;
116
- min-height: 100%;
117
- min-width: 0;
118
- width: 100%;
119
- }
120
-
121
- .vf-editor-chat-body {
122
- flex: 1 1 auto;
123
- display: flex;
124
- min-height: 0;
125
- min-width: 0;
126
- width: 100%;
127
- }
128
-
129
- .vf-editor-chat-shell[data-layout="brainstorm"] {
130
- height: 100%;
131
- min-height: 0;
132
- }
133
-
134
- .vf-editor-chat-brainstorm-layout {
135
- position: relative;
136
- flex: 1 1 auto;
137
- display: grid;
138
- grid-template-columns: 284px minmax(0, 1fr);
139
- min-height: 0;
140
- height: 100%;
141
- width: 100%;
142
- }
143
-
144
- .vf-editor-chat-history-pane {
145
- display: grid;
146
- grid-template-rows: auto auto auto minmax(0, 1fr);
147
- gap: 10px;
148
- min-height: 0;
149
- padding: 14px 12px 12px;
150
- border-right: 1px solid rgba(191, 164, 109, 0.14);
151
- background:
152
- radial-gradient(circle at top left, rgba(219, 193, 122, 0.14), transparent 34%),
153
- linear-gradient(180deg, rgba(255, 251, 244, 0.96), rgba(250, 246, 238, 0.94));
154
- }
155
-
156
- .vf-editor-chat-history-header {
157
- display: flex;
158
- align-items: center;
159
- justify-content: space-between;
160
- gap: 10px;
161
- }
162
-
163
- .vf-editor-chat-history-header-main {
164
- display: flex;
165
- align-items: center;
166
- gap: 10px;
167
- min-width: 0;
168
- }
169
-
170
- .vf-editor-chat-history-kicker {
171
- color: #8d99ae;
172
- font-size: 0.72rem;
173
- font-weight: 800;
174
- letter-spacing: 0.18em;
175
- text-transform: uppercase;
176
- }
177
-
178
- .vf-editor-chat-new-thread-sidebar {
179
- justify-self: start;
180
- min-height: 34px;
181
- padding: 0 12px;
182
- border-radius: 999px;
183
- }
184
-
185
- .vf-editor-chat-history-close,
186
- .vf-editor-chat-history-toggle,
187
- .vf-editor-chat-back-button {
188
- all: unset;
189
- display: inline-flex;
190
- align-items: center;
191
- justify-content: center;
192
- min-height: 34px;
193
- padding: 0 12px;
194
- border: 1px solid rgba(191, 164, 109, 0.28);
195
- border-radius: 999px;
196
- background: rgba(255, 255, 255, 0.88);
197
- color: #243041;
198
- font-size: 0.8rem;
199
- font-weight: 800;
200
- line-height: 1;
201
- white-space: nowrap;
202
- }
203
-
204
- .vf-editor-chat-history-close {
205
- display: none;
206
- width: 34px;
207
- min-width: 34px;
208
- padding: 0;
209
- font-size: 1rem;
210
- }
211
-
212
- .vf-editor-chat-history-toggle {
213
- display: none;
214
- }
215
-
216
- .vf-editor-chat-thread-list-sidebar {
217
- display: flex;
218
- flex-direction: column;
219
- align-items: stretch;
220
- gap: 8px;
221
- margin-top: 4px;
222
- min-height: 0;
223
- overflow-y: auto;
224
- overflow-x: hidden;
225
- padding: 2px 2px 6px 0;
226
- }
227
-
228
- .vf-editor-chat-thread-list-sidebar::-webkit-scrollbar {
229
- width: 6px;
230
- }
231
-
232
- .vf-editor-chat-thread-list-sidebar::-webkit-scrollbar-thumb {
233
- border-radius: 999px;
234
- background: rgba(191, 164, 109, 0.42);
235
- }
236
-
237
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip {
238
- display: flex;
239
- width: 100%;
240
- max-width: none;
241
- min-width: 0;
242
- padding: 6px 6px 6px 8px;
243
- border-radius: 14px;
244
- background: rgba(255, 255, 255, 0.78);
245
- }
246
-
247
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-main {
248
- display: block;
249
- flex: 1 1 auto;
250
- width: 100%;
251
- max-width: none;
252
- padding: 1px 0;
253
- }
254
-
255
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-title {
256
- font-size: 0.8rem;
257
- }
258
-
259
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-tracers {
260
- font-size: 0.64rem;
261
- }
262
-
263
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread {
264
- border-left: 0;
265
- display: grid;
266
- grid-template-rows: auto minmax(0, 1fr) auto;
267
- }
268
-
269
- .vf-editor-chat-brainstorm-topbar {
270
- display: flex;
271
- align-items: center;
272
- justify-content: space-between;
273
- gap: 12px;
274
- }
275
-
276
- .vf-editor-chat-brainstorm-topbar-left {
277
- display: flex;
278
- align-items: center;
279
- gap: 10px;
280
- min-width: 0;
281
- }
282
-
283
- .vf-editor-chat-brainstorm-title {
284
- color: #1f2635;
285
- font-family: "Instrument Serif", serif;
286
- font-size: 1.8rem;
287
- line-height: 0.96;
288
- letter-spacing: -0.05em;
289
- }
290
-
291
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-header {
292
- padding: 10px 12px 8px;
293
- }
294
-
295
- .vf-editor-chat-history-scrim {
296
- display: none;
297
- }
298
-
299
- .vf-editor-chat-mobile-fab,
300
- .vf-editor-chat-minimize {
301
- display: none;
302
- }
303
-
304
- .vf-editor-chat-thread {
305
- flex: 1 1 auto;
306
- min-height: 0;
307
- min-width: 0;
308
- display: flex;
309
- flex-direction: column;
310
- overflow: hidden;
311
- background:
312
- radial-gradient(circle at top right, rgba(219, 193, 122, 0.12), transparent 26%),
313
- linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(252, 247, 238, 0.94));
314
- }
315
-
316
- .vf-editor-chat-header {
317
- min-width: 0;
318
- padding: 8px 8px 6px;
319
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
320
- background: rgba(255, 251, 244, 0.76);
321
- backdrop-filter: blur(12px);
322
- }
323
-
324
- .vf-editor-chat-header-row {
325
- display: flex;
326
- align-items: flex-start;
327
- justify-content: space-between;
328
- gap: 12px;
329
- }
330
-
331
- .vf-editor-chat-header-title {
332
- color: #8d99ae;
333
- font-size: 0.78rem;
334
- font-weight: 800;
335
- letter-spacing: 0.16em;
336
- text-transform: uppercase;
337
- }
338
-
339
- .vf-editor-chat-header-subtitle {
340
- margin-top: 4px;
341
- color: #334155;
342
- font-size: 0.92rem;
343
- font-weight: 700;
344
- line-height: 1.3;
345
- }
346
-
347
- .vf-editor-chat-new-thread {
348
- all: unset;
349
- display: inline-flex;
350
- align-items: center;
351
- justify-content: center;
352
- min-height: 30px;
353
- padding: 0 10px;
354
- border-radius: 12px;
355
- border: 1px solid rgba(191, 164, 109, 0.34);
356
- background: rgba(255, 255, 255, 0.92);
357
- color: #243041;
358
- font-size: 0.78rem;
359
- font-weight: 700;
360
- white-space: nowrap;
361
- }
362
-
363
- .vf-editor-chat-history-icon {
364
- all: unset;
365
- display: inline-flex;
366
- align-items: center;
367
- justify-content: center;
368
- width: 32px;
369
- height: 32px;
370
- min-width: 32px;
371
- border-radius: 999px;
372
- border: 1px solid rgba(191, 164, 109, 0.34);
373
- background: rgba(255, 255, 255, 0.92);
374
- color: #5c6a82;
375
- cursor: pointer;
376
- }
377
-
378
- .vf-editor-chat-history-icon[aria-pressed="true"] {
379
- border-color: rgba(219, 193, 122, 0.9);
380
- background: rgba(219, 193, 122, 0.16);
381
- color: #8a6b1b;
382
- }
383
-
384
- .vf-editor-chat-history-icon svg {
385
- width: 18px;
386
- height: 18px;
387
- }
388
-
389
- .vf-editor-chat-history-panel {
390
- display: grid;
391
- grid-template-rows: auto minmax(0, 1fr);
392
- gap: 10px;
393
- min-height: 0;
394
- height: 100%;
395
- padding: 12px 4px;
396
- }
397
-
398
- .vf-editor-chat-history-panel-header {
399
- display: flex;
400
- align-items: center;
401
- justify-content: space-between;
402
- gap: 10px;
403
- }
404
-
405
- .vf-editor-chat-thread-list {
406
- display: flex;
407
- flex-wrap: nowrap;
408
- gap: 4px;
409
- margin-top: 8px;
410
- width: 100%;
411
- max-width: 100%;
412
- min-width: 0;
413
- overflow-x: auto;
414
- overflow-y: hidden;
415
- padding: 0 4px 5px 0;
416
- overscroll-behavior-x: contain;
417
- scrollbar-width: thin;
418
- -webkit-overflow-scrolling: touch;
419
- }
420
-
421
- .vf-editor-chat-thread-list::-webkit-scrollbar {
422
- height: 6px;
423
- }
424
-
425
- .vf-editor-chat-thread-list::-webkit-scrollbar-thumb {
426
- border-radius: 999px;
427
- background: rgba(191, 164, 109, 0.42);
428
- }
429
-
430
- .vf-editor-chat-tracer-bar {
431
- display: grid;
432
- gap: 8px;
433
- margin-top: 10px;
434
- padding-top: 10px;
435
- border-top: 1px solid rgba(191, 164, 109, 0.12);
436
- }
437
-
438
- .vf-editor-chat-tracer-bar-head {
439
- display: flex;
440
- align-items: center;
441
- justify-content: space-between;
442
- gap: 8px;
443
- }
444
-
445
- .vf-editor-chat-tracer-label {
446
- color: #8d99ae;
447
- font-size: 0.72rem;
448
- font-weight: 800;
449
- letter-spacing: 0.14em;
450
- text-transform: uppercase;
451
- }
452
-
453
- .vf-editor-chat-tracer-add {
454
- all: unset;
455
- display: inline-flex;
456
- align-items: center;
457
- justify-content: center;
458
- min-height: 28px;
459
- padding: 0 10px;
460
- border-radius: 999px;
461
- border: 1px solid rgba(191, 164, 109, 0.34);
462
- background: rgba(255, 255, 255, 0.92);
463
- color: #243041;
464
- font-size: 0.74rem;
465
- font-weight: 700;
466
- white-space: nowrap;
467
- }
468
-
469
- .vf-editor-chat-tracer-list {
470
- display: flex;
471
- flex-wrap: wrap;
472
- gap: 6px;
473
- }
474
-
475
- .vf-editor-chat-tracer-chip {
476
- display: inline-flex;
477
- align-items: center;
478
- gap: 6px;
479
- min-height: 30px;
480
- padding: 0 4px 0 10px;
481
- border-radius: 999px;
482
- border: 1px solid rgba(191, 164, 109, 0.24);
483
- background: rgba(255, 255, 255, 0.84);
484
- }
485
-
486
- .vf-editor-chat-tracer-chip[data-active="true"] {
487
- border-color: rgba(219, 193, 122, 0.82);
488
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.22), rgba(255, 255, 255, 0.92));
489
- }
490
-
491
- .vf-editor-chat-tracer-chip-button,
492
- .vf-editor-chat-tracer-chip-remove {
493
- all: unset;
494
- color: inherit;
495
- }
496
-
497
- .vf-editor-chat-tracer-chip-button {
498
- display: inline-flex;
499
- align-items: center;
500
- min-width: 0;
501
- font-size: 0.74rem;
502
- font-weight: 800;
503
- color: #334155;
504
- }
505
-
506
- .vf-editor-chat-tracer-chip-text {
507
- display: inline-block;
508
- max-width: 184px;
509
- overflow: hidden;
510
- text-overflow: ellipsis;
511
- white-space: nowrap;
512
- }
513
-
514
- .vf-editor-chat-tracer-chip-remove {
515
- display: inline-flex;
516
- align-items: center;
517
- justify-content: center;
518
- width: 18px;
519
- height: 18px;
520
- border-radius: 999px;
521
- color: #617087;
522
- font-size: 0.9rem;
523
- line-height: 1;
524
- }
525
-
526
- .vf-editor-chat-tracer-help {
527
- color: #617087;
528
- font-size: 0.72rem;
529
- line-height: 1.45;
530
- }
531
-
532
- .vf-editor-chat-thread-chip {
533
- display: inline-flex;
534
- align-items: center;
535
- gap: 2px;
536
- flex: 0 0 auto;
537
- width: auto;
538
- max-width: 184px;
539
- min-width: 0;
540
- padding: 0 4px;
541
- border: 1px solid rgba(191, 164, 109, 0.16);
542
- border-radius: 8px;
543
- background: rgba(255, 255, 255, 0.75);
544
- color: #243041;
545
- transition:
546
- border-color 140ms ease,
547
- background 140ms ease;
548
- }
549
-
550
- .vf-editor-chat-thread-chip[data-active="true"] {
551
- border-color: rgba(219, 193, 122, 0.82);
552
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.22), rgba(255, 255, 255, 0.92));
553
- }
554
-
555
- .vf-editor-chat-thread-chip-main {
556
- all: unset;
557
- display: inline-block;
558
- flex: 0 1 auto;
559
- min-width: 0;
560
- width: auto;
561
- max-width: 148px;
562
- padding: 3px 0;
563
- margin: 0;
564
- border: 0;
565
- border-radius: 0;
566
- background: transparent;
567
- text-align: left;
568
- color: inherit;
569
- box-shadow: none;
570
- min-height: 0;
571
- appearance: none;
572
- -webkit-appearance: none;
573
- font: inherit;
574
- outline: none;
575
- }
576
-
577
- .vf-editor-chat-thread-menu-wrap {
578
- position: relative;
579
- display: inline-flex;
580
- flex: 0 0 auto;
581
- }
582
-
583
- .vf-editor-chat-thread-chip-menu {
584
- all: unset;
585
- display: inline-flex;
586
- align-items: center;
587
- justify-content: center;
588
- flex: 0 0 auto;
589
- width: 20px;
590
- min-width: 20px;
591
- height: 20px;
592
- padding: 0;
593
- border: 0;
594
- border-radius: 999px;
595
- background: transparent;
596
- color: #617087;
597
- box-shadow: none;
598
- font-size: 0.72rem;
599
- font-weight: 900;
600
- line-height: 1;
601
- opacity: 0.8;
602
- }
603
-
604
- .vf-editor-chat-thread-chip-menu:hover {
605
- background: rgba(219, 193, 122, 0.18);
606
- opacity: 1;
607
- }
608
-
609
- .vf-editor-chat-thread-menu {
610
- position: fixed;
611
- z-index: 1000;
612
- display: grid;
613
- gap: 2px;
614
- min-width: 138px;
615
- padding: 6px;
616
- border: 1px solid rgba(191, 164, 109, 0.28);
617
- border-radius: 10px;
618
- background: rgba(255, 252, 247, 0.98);
619
- box-shadow: 0 14px 34px rgba(37, 45, 61, 0.16);
620
- }
621
-
622
- .vf-editor-chat-thread-menu button {
623
- all: unset;
624
- padding: 8px 9px;
625
- border-radius: 7px;
626
- color: #324156;
627
- font-size: 0.76rem;
628
- font-weight: 800;
629
- white-space: nowrap;
630
- }
631
-
632
- .vf-editor-chat-thread-menu button:hover {
633
- background: rgba(219, 193, 122, 0.16);
634
- }
635
-
636
- .vf-editor-chat-thread-menu button[data-danger="true"] {
637
- color: #8d4a3b;
638
- }
639
-
640
- .vf-editor-chat-thread-chip-title {
641
- display: block;
642
- max-width: 100%;
643
- overflow: hidden;
644
- text-overflow: ellipsis;
645
- white-space: nowrap;
646
- font-size: 0.74rem;
647
- font-weight: 800;
648
- line-height: 1.2;
649
- }
650
-
651
- .vf-editor-chat-thread-chip-tracers,
652
- .vf-editor-chat-thread-chip-preview,
653
- .vf-editor-chat-thread-empty {
654
- display: block;
655
- overflow: hidden;
656
- text-overflow: ellipsis;
657
- white-space: nowrap;
658
- color: #617087;
659
- font-size: 0.68rem;
660
- line-height: 1.25;
661
- }
662
-
663
- .vf-editor-chat-thread-chip-tracers {
664
- max-width: 100%;
665
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
666
- font-size: 0.62rem;
667
- }
668
-
669
- .vf-editor-chat-empty h2,
670
- .vf-editor-chat-disabled h2 {
671
- margin: 0;
672
- font-family: inherit;
673
- font-size: 1.35rem;
674
- line-height: 1.08;
675
- letter-spacing: -0.03em;
676
- color: #1f2635;
677
- }
678
-
679
- .vf-editor-chat-kicker {
680
- color: #8d99ae;
681
- font-size: 0.75rem;
682
- font-weight: 700;
683
- letter-spacing: 0.18em;
684
- text-transform: uppercase;
685
- }
686
-
687
- .vf-editor-chat-viewport {
688
- min-height: 0;
689
- flex: 1 1 0;
690
- overflow: auto;
691
- overscroll-behavior: contain;
692
- padding: 8px 8px 10px;
693
- }
694
-
695
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-viewport {
696
- height: 100%;
697
- align-self: stretch;
698
- }
699
-
700
- .vf-editor-chat-empty,
701
- .vf-editor-chat-disabled {
702
- display: grid;
703
- gap: 8px;
704
- margin: 0;
705
- padding: 12px;
706
- border: 1px solid rgba(191, 164, 109, 0.18);
707
- border-radius: 10px;
708
- background: rgba(255, 255, 255, 0.86);
709
- box-shadow: 0 10px 20px rgba(15, 23, 42, 0.035);
710
- }
711
-
712
- .vf-editor-chat-empty p,
713
- .vf-editor-chat-disabled p {
714
- color: #617087;
715
- line-height: 1.7;
716
- }
717
-
718
- .vf-editor-chat-empty-prompts {
719
- display: grid;
720
- gap: 6px;
721
- margin-top: 2px;
722
- }
723
-
724
- .vf-editor-chat-empty-prompts div {
725
- padding: 8px 10px;
726
- border: 1px solid rgba(141, 153, 174, 0.22);
727
- border-radius: 8px;
728
- background: rgba(248, 250, 252, 0.84);
729
- color: #334155;
730
- font-size: 0.78rem;
731
- line-height: 1.35;
732
- }
733
-
734
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-empty,
735
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-disabled {
736
- padding: 16px;
737
- border-radius: 16px;
738
- }
739
-
740
- .vf-editor-chat-message {
741
- display: flex;
742
- flex-direction: column;
743
- align-items: flex-start;
744
- gap: 6px;
745
- min-width: 0;
746
- margin-bottom: 14px;
747
- }
748
-
749
- .vf-editor-chat-message.is-user {
750
- align-items: flex-end;
751
- }
752
-
753
- .vf-editor-chat-message-meta {
754
- font-size: 0.72rem;
755
- font-weight: 700;
756
- letter-spacing: 0.12em;
757
- text-transform: uppercase;
758
- color: #8d99ae;
759
- }
760
-
761
- .vf-editor-chat-message.is-user .vf-editor-chat-message-meta {
762
- text-align: right;
763
- }
764
-
765
- .vf-editor-chat-bubble {
766
- display: grid;
767
- justify-items: start;
768
- gap: 8px;
769
- max-width: min(100%, 340px);
770
- width: auto;
771
- min-width: 0;
772
- padding: 10px 12px;
773
- border-radius: 10px;
774
- border: 1px solid rgba(191, 164, 109, 0.18);
775
- background: rgba(255, 255, 255, 0.9);
776
- box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
777
- }
778
-
779
- .vf-editor-chat-bubble[data-pending="true"] {
780
- background:
781
- linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 248, 240, 0.96)),
782
- linear-gradient(90deg, rgba(219, 193, 122, 0.08), rgba(255, 255, 255, 0.4), rgba(219, 193, 122, 0.08));
783
- }
784
-
785
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble {
786
- align-self: flex-start;
787
- border-top-left-radius: 4px;
788
- }
789
-
790
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
791
- align-self: flex-end;
792
- border-top-right-radius: 4px;
793
- max-width: min(82%, 340px);
794
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.32), rgba(255, 255, 255, 0.94));
795
- }
796
-
797
- .vf-editor-chat-viewport .vf-editor-chat-message-attachment-thumb,
798
- .vf-editor-chat-composer-images .vf-editor-chat-message-attachment-thumb {
799
- width: min(220px, 100%);
800
- max-width: min(220px, 100%);
801
- }
802
-
803
- .vf-editor-chat-message-body {
804
- display: block;
805
- width: 100%;
806
- color: #334155;
807
- line-height: 1.6;
808
- font-size: 0.92rem;
809
- white-space: pre-wrap;
810
- word-break: break-word;
811
- overflow-wrap: break-word;
812
- text-align: left;
813
- }
814
-
815
- .vf-editor-chat-message-body p + p {
816
- margin-top: 0.8em;
817
- }
818
-
819
- .vf-editor-chat-message-body a {
820
- color: #8a6b1b;
821
- text-decoration: underline;
822
- text-underline-offset: 0.16em;
823
- word-break: break-word;
824
- }
825
-
826
- .vf-editor-chat-message-body strong {
827
- font-weight: 800;
828
- color: #243041;
829
- }
830
-
831
- .vf-editor-chat-message-body em {
832
- font-style: italic;
833
- }
834
-
835
- .vf-editor-chat-message-body code {
836
- padding: 0.08rem 0.32rem;
837
- border-radius: 0.35rem;
838
- background: rgba(36, 48, 65, 0.08);
839
- color: #243041;
840
- font-size: 0.88em;
841
- font-family: "SFMono-Regular", "Menlo", monospace;
842
- }
843
-
844
- .vf-editor-chat-message-body pre {
845
- margin: 0;
846
- padding: 10px 11px;
847
- border-radius: 10px;
848
- background: rgba(36, 48, 65, 0.06);
849
- overflow: auto;
850
- }
851
-
852
- .vf-editor-chat-message-body pre code {
853
- padding: 0;
854
- background: transparent;
855
- font-size: 0.82em;
856
- white-space: pre-wrap;
857
- }
858
-
859
- .vf-editor-chat-message-body ul,
860
- .vf-editor-chat-message-body ol {
861
- margin: 0;
862
- padding-left: 1.2rem;
863
- }
864
-
865
- .vf-editor-chat-message-body li + li {
866
- margin-top: 0.28rem;
867
- }
868
-
869
- .vf-editor-chat-http-list {
870
- display: grid;
871
- gap: 6px;
872
- width: 100%;
873
- }
874
-
875
- .vf-editor-chat-json-list {
876
- display: grid;
877
- gap: 8px;
878
- width: 100%;
879
- }
880
-
881
- .vf-editor-chat-json-card {
882
- width: min(100%, 860px);
883
- border-radius: 12px;
884
- border: 1px solid rgba(191, 164, 109, 0.18);
885
- background: rgba(251, 247, 238, 0.92);
886
- overflow: hidden;
887
- }
888
-
889
- .vf-editor-chat-json-card-head {
890
- display: flex;
891
- align-items: flex-start;
892
- justify-content: space-between;
893
- gap: 12px;
894
- padding: 10px 12px;
895
- }
896
-
897
- .vf-editor-chat-json-card-kicker {
898
- color: #8a6b1b;
899
- font-size: 0.64rem;
900
- font-weight: 800;
901
- letter-spacing: 0.08em;
902
- text-transform: uppercase;
903
- }
904
-
905
- .vf-editor-chat-json-card-title {
906
- color: #243041;
907
- font-size: 0.92rem;
908
- font-weight: 800;
909
- line-height: 1.3;
910
- }
911
-
912
- .vf-editor-chat-json-card-actions {
913
- display: inline-flex;
914
- align-items: center;
915
- gap: 8px;
916
- flex: 0 0 auto;
917
- }
918
-
919
- .vf-editor-chat-json-card-action {
920
- all: unset;
921
- display: inline-flex;
922
- align-items: center;
923
- justify-content: center;
924
- min-height: 30px;
925
- padding: 0 11px;
926
- border-radius: 999px;
927
- background: rgba(255, 255, 255, 0.92);
928
- color: #617087;
929
- font-size: 0.76rem;
930
- font-weight: 800;
931
- cursor: pointer;
932
- }
933
-
934
- .vf-editor-chat-json-card-action.is-strong {
935
- background: rgba(225, 201, 136, 0.36);
936
- color: #7a5d19;
937
- }
938
-
939
- .vf-editor-chat-json-card-body {
940
- padding: 0 12px 12px;
941
- }
942
-
943
- .vf-editor-chat-json-state {
944
- padding: 12px;
945
- border-radius: 10px;
946
- background: rgba(255, 255, 255, 0.9);
947
- color: #526179;
948
- font-size: 0.78rem;
949
- }
950
-
951
- .vf-editor-chat-json-state.is-error {
952
- color: #a14444;
953
- }
954
-
955
- .vf-editor-chat-json-viewer {
956
- border-radius: 12px;
957
- border: 1px solid rgba(191, 164, 109, 0.16);
958
- background: rgba(255, 255, 255, 0.9);
959
- overflow: hidden;
960
- }
961
-
962
- .vf-editor-chat-json-toolbar {
963
- display: flex;
964
- align-items: center;
965
- justify-content: space-between;
966
- gap: 12px;
967
- padding: 10px 12px;
968
- border-bottom: 1px solid rgba(191, 164, 109, 0.12);
969
- background: rgba(250, 245, 236, 0.88);
970
- }
971
-
972
- .vf-editor-chat-json-file,
973
- .vf-editor-chat-json-copy-state {
974
- color: #617087;
975
- font-size: 0.7rem;
976
- font-weight: 700;
977
- line-height: 1.35;
978
- }
979
-
980
- .vf-editor-chat-json-copy-state[data-state="done"] {
981
- color: #2f7d4f;
982
- }
983
-
984
- .vf-editor-chat-json-copy-state[data-state="error"] {
985
- color: #a14444;
986
- }
987
-
988
- .vf-editor-chat-json-scroll {
989
- max-height: 320px;
990
- overflow: auto;
991
- padding: 10px 0;
992
- }
993
-
994
- .vf-editor-chat-json-toggle-row {
995
- display: flex;
996
- align-items: flex-start;
997
- gap: 2px;
998
- }
999
-
1000
- .vf-editor-chat-json-toggle-icon {
1001
- all: unset;
1002
- display: inline-flex;
1003
- align-items: center;
1004
- justify-content: center;
1005
- width: 24px;
1006
- min-width: 24px;
1007
- height: 26px;
1008
- margin-left: 6px;
1009
- color: #7b879b;
1010
- cursor: pointer;
1011
- }
1012
-
1013
- .vf-editor-chat-json-toggle-icon svg {
1014
- width: 14px;
1015
- height: 14px;
1016
- transition: transform 120ms ease;
1017
- }
1018
-
1019
- .vf-editor-chat-json-line {
1020
- position: relative;
1021
- display: flex;
1022
- align-items: flex-start;
1023
- width: 100%;
1024
- min-height: 24px;
1025
- box-sizing: border-box;
1026
- padding-right: 12px;
1027
- }
1028
-
1029
- .vf-editor-chat-json-line:hover {
1030
- background: rgba(138, 107, 27, 0.05);
1031
- }
1032
-
1033
- .vf-editor-chat-json-line-text {
1034
- display: block;
1035
- width: 100%;
1036
- color: #2c3748;
1037
- font-size: 0.78rem;
1038
- line-height: 1.5;
1039
- white-space: pre-wrap;
1040
- word-break: break-word;
1041
- user-select: text;
1042
- font-family: "SFMono-Regular", "Menlo", monospace;
1043
- }
1044
-
1045
- .vf-editor-chat-json-copy {
1046
- all: unset;
1047
- position: absolute;
1048
- left: 0;
1049
- top: 3px;
1050
- width: 20px;
1051
- height: 20px;
1052
- border-radius: 6px;
1053
- background: rgba(255, 255, 255, 0.96);
1054
- color: #7b879b;
1055
- opacity: 0;
1056
- box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
1057
- cursor: pointer;
1058
- transition: opacity 120ms ease, color 120ms ease;
1059
- }
1060
-
1061
- .vf-editor-chat-json-line:hover .vf-editor-chat-json-copy,
1062
- .vf-editor-chat-json-copy:focus-visible {
1063
- opacity: 1;
1064
- }
1065
-
1066
- .vf-editor-chat-json-copy:hover {
1067
- color: #8a6b1b;
1068
- }
1069
-
1070
- .vf-editor-chat-json-copy svg {
1071
- width: 14px;
1072
- height: 14px;
1073
- margin: 3px;
1074
- }
1075
-
1076
- .vf-editor-chat-http-card {
1077
- width: 100%;
1078
- border-radius: 8px;
1079
- border: 1px solid rgba(191, 164, 109, 0.18);
1080
- background: rgba(248, 244, 235, 0.82);
1081
- overflow: hidden;
1082
- }
1083
-
1084
- .vf-editor-chat-http-card-header {
1085
- all: unset;
1086
- display: flex;
1087
- align-items: center;
1088
- gap: 6px;
1089
- min-width: 0;
1090
- width: 100%;
1091
- box-sizing: border-box;
1092
- padding: 6px 8px;
1093
- cursor: pointer;
1094
- }
1095
-
1096
- .vf-editor-chat-http-pill,
1097
- .vf-editor-chat-http-status {
1098
- display: inline-flex;
1099
- align-items: center;
1100
- min-height: 18px;
1101
- padding: 0 6px;
1102
- border-radius: 999px;
1103
- font-size: 0.62rem;
1104
- font-weight: 800;
1105
- letter-spacing: 0.04em;
1106
- background: rgba(255, 255, 255, 0.92);
1107
- color: #3f4a5d;
1108
- flex: 0 0 auto;
1109
- }
1110
-
1111
- .vf-editor-chat-http-status[data-error="true"] {
1112
- color: #a33c32;
1113
- background: rgba(245, 213, 208, 0.92);
1114
- }
1115
-
1116
- .vf-editor-chat-http-status[data-success="true"] {
1117
- color: #1f6a3a;
1118
- background: rgba(214, 240, 222, 0.96);
1119
- }
1120
-
1121
- .vf-editor-chat-http-url {
1122
- min-width: 0;
1123
- flex: 1 1 auto;
1124
- color: #526179;
1125
- font-size: 0.68rem;
1126
- line-height: 1.25;
1127
- white-space: nowrap;
1128
- overflow: hidden;
1129
- text-overflow: ellipsis;
1130
- }
1131
-
1132
- .vf-editor-chat-http-expand {
1133
- display: inline-flex;
1134
- align-items: center;
1135
- justify-content: center;
1136
- width: 16px;
1137
- min-width: 16px;
1138
- height: 16px;
1139
- border-radius: 999px;
1140
- background: rgba(255, 255, 255, 0.92);
1141
- color: #617087;
1142
- font-size: 0.8rem;
1143
- line-height: 1;
1144
- flex: 0 0 auto;
1145
- }
1146
-
1147
- .vf-editor-chat-http-card-body {
1148
- display: grid;
1149
- gap: 6px;
1150
- padding: 0 8px 8px;
1151
- }
1152
-
1153
- .vf-editor-chat-http-card-body.is-modal {
1154
- padding: 14px;
1155
- gap: 10px;
1156
- }
1157
-
1158
- .vf-editor-chat-http-modal-backdrop {
1159
- position: fixed;
1160
- inset: 0;
1161
- z-index: 120;
1162
- display: flex;
1163
- align-items: center;
1164
- justify-content: center;
1165
- padding: 18px;
1166
- background: rgba(31, 38, 53, 0.42);
1167
- backdrop-filter: blur(8px);
1168
- }
1169
-
1170
- .vf-editor-chat-http-modal-backdrop[hidden] {
1171
- display: none;
1172
- }
1173
-
1174
- .vf-editor-chat-http-modal {
1175
- width: min(860px, calc(100vw - 36px));
1176
- max-height: min(82vh, 920px);
1177
- overflow: auto;
1178
- border-radius: 18px;
1179
- border: 1px solid rgba(191, 164, 109, 0.2);
1180
- background: rgba(255, 251, 244, 0.98);
1181
- box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
1182
- }
1183
-
1184
- .vf-editor-chat-http-modal-header {
1185
- display: flex;
1186
- align-items: flex-start;
1187
- justify-content: space-between;
1188
- gap: 10px;
1189
- padding: 14px;
1190
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1191
- position: sticky;
1192
- top: 0;
1193
- background: rgba(255, 251, 244, 0.98);
1194
- }
1195
-
1196
- .vf-editor-chat-http-modal-header-main {
1197
- display: flex;
1198
- align-items: center;
1199
- gap: 8px;
1200
- min-width: 0;
1201
- flex-wrap: wrap;
1202
- }
1203
-
1204
- .vf-editor-chat-http-modal-url {
1205
- min-width: 0;
1206
- color: #334155;
1207
- font-size: 0.78rem;
1208
- line-height: 1.4;
1209
- word-break: break-word;
1210
- overflow-wrap: anywhere;
1211
- flex: 1 1 320px;
1212
- }
1213
-
1214
- .vf-editor-chat-http-modal-close {
1215
- all: unset;
1216
- display: inline-flex;
1217
- align-items: center;
1218
- justify-content: center;
1219
- width: 30px;
1220
- min-width: 30px;
1221
- height: 30px;
1222
- border-radius: 999px;
1223
- background: rgba(36, 48, 65, 0.08);
1224
- color: #617087;
1225
- font-size: 1.2rem;
1226
- line-height: 1;
1227
- cursor: pointer;
1228
- }
1229
-
1230
- .vf-editor-chat-http-note,
1231
- .vf-editor-chat-http-label {
1232
- color: #7b879b;
1233
- font-size: 0.68rem;
1234
- font-weight: 800;
1235
- letter-spacing: 0.08em;
1236
- text-transform: uppercase;
1237
- }
1238
-
1239
- .vf-editor-chat-http-block {
1240
- display: grid;
1241
- gap: 4px;
1242
- }
1243
-
1244
- .vf-editor-chat-http-pre {
1245
- margin: 0;
1246
- padding: 6px 7px;
1247
- border-radius: 6px;
1248
- background: rgba(255, 255, 255, 0.9);
1249
- color: #334155;
1250
- font-size: 0.66rem;
1251
- line-height: 1.4;
1252
- white-space: pre-wrap;
1253
- word-break: break-word;
1254
- overflow-wrap: anywhere;
1255
- max-height: 180px;
1256
- overflow: auto;
1257
- }
1258
-
1259
- .vf-editor-chat-message-status,
1260
- .vf-editor-chat-runtime-status {
1261
- display: inline-flex;
1262
- align-items: center;
1263
- gap: 8px;
1264
- color: #8a6b1b;
1265
- font-size: 0.78rem;
1266
- font-weight: 700;
1267
- line-height: 1.35;
1268
- }
1269
-
1270
- .vf-editor-chat-status-dot {
1271
- width: 8px;
1272
- height: 8px;
1273
- border-radius: 999px;
1274
- background: #dbc17a;
1275
- box-shadow: 0 0 0 6px rgba(219, 193, 122, 0.14);
1276
- animation: vf-editor-chat-pulse 1.35s ease-in-out infinite;
1277
- }
1278
-
1279
- .vf-editor-chat-message-loading {
1280
- display: inline-flex;
1281
- align-items: center;
1282
- gap: 5px;
1283
- min-height: 18px;
1284
- }
1285
-
1286
- .vf-editor-chat-message-loading span {
1287
- width: 7px;
1288
- height: 7px;
1289
- border-radius: 999px;
1290
- background: rgba(141, 153, 174, 0.72);
1291
- animation: vf-editor-chat-bounce 1s ease-in-out infinite;
1292
- }
1293
-
1294
- .vf-editor-chat-message-loading span:nth-child(2) {
1295
- animation-delay: 120ms;
1296
- }
1297
-
1298
- .vf-editor-chat-message-loading span:nth-child(3) {
1299
- animation-delay: 240ms;
1300
- }
1301
-
1302
- .vf-editor-chat-message-attachments,
1303
- .vf-editor-chat-composer-attachments {
1304
- display: flex;
1305
- flex-wrap: wrap;
1306
- gap: 8px;
1307
- }
1308
-
1309
- .vf-editor-chat-message-attachments {
1310
- flex-direction: column;
1311
- align-items: flex-start;
1312
- width: 100%;
1313
- min-width: 0;
1314
- }
1315
-
1316
- .vf-editor-chat-message-attachment-row {
1317
- display: grid;
1318
- gap: 8px;
1319
- width: fit-content;
1320
- max-width: 100%;
1321
- min-width: 0;
1322
- }
1323
-
1324
- .vf-editor-chat-message-preview-link {
1325
- display: inline-flex;
1326
- width: fit-content;
1327
- max-width: 100%;
1328
- text-decoration: none;
1329
- }
1330
-
1331
- .vf-editor-chat-message-thumb-button {
1332
- all: unset;
1333
- position: relative;
1334
- display: inline-flex;
1335
- width: fit-content;
1336
- max-width: 100%;
1337
- cursor: zoom-in;
1338
- }
1339
-
1340
- .vf-editor-chat-message-thumb-button.is-image {
1341
- flex: 0 0 86px;
1342
- width: 86px;
1343
- height: 86px;
1344
- border-radius: 8px;
1345
- overflow: hidden;
1346
- background: rgba(255, 255, 255, 0.96);
1347
- }
1348
-
1349
- .vf-editor-chat-message-attachment-thumb {
1350
- width: min(240px, 100%);
1351
- max-width: 100%;
1352
- max-height: 180px;
1353
- border-radius: 12px;
1354
- object-fit: contain;
1355
- border: 1px solid rgba(191, 164, 109, 0.22);
1356
- }
1357
-
1358
- .vf-editor-chat-message-thumb-button.is-image .vf-editor-chat-message-attachment-thumb {
1359
- width: 86px;
1360
- max-width: 86px;
1361
- height: 86px;
1362
- max-height: 86px;
1363
- border-radius: 8px;
1364
- object-fit: cover;
1365
- }
1366
-
1367
- .vf-editor-chat-message-image-rail {
1368
- display: flex;
1369
- gap: 8px;
1370
- width: 100%;
1371
- max-width: 100%;
1372
- min-width: 0;
1373
- overflow-x: auto;
1374
- overflow-y: hidden;
1375
- padding: 1px 2px 5px;
1376
- scrollbar-width: thin;
1377
- }
1378
-
1379
- .vf-editor-chat-message-thumb-fallback {
1380
- display: flex;
1381
- align-items: center;
1382
- justify-content: center;
1383
- box-sizing: border-box;
1384
- width: 86px;
1385
- height: 86px;
1386
- padding: 8px;
1387
- border: 1px dashed rgba(141, 153, 174, 0.5);
1388
- border-radius: 8px;
1389
- background: rgba(248, 244, 235, 0.9);
1390
- color: #7b879b;
1391
- font-size: 0.66rem;
1392
- font-weight: 800;
1393
- line-height: 1.15;
1394
- text-align: center;
1395
- }
1396
-
1397
- .vf-editor-chat-message-video-thumb {
1398
- background: rgba(255, 255, 255, 0.96);
1399
- }
1400
-
1401
- .vf-editor-chat-message-video-play {
1402
- position: absolute;
1403
- left: 50%;
1404
- top: 50%;
1405
- width: 38px;
1406
- height: 38px;
1407
- transform: translate(-50%, -50%);
1408
- display: inline-flex;
1409
- align-items: center;
1410
- justify-content: center;
1411
- border-radius: 999px;
1412
- background: rgba(18, 24, 34, 0.74);
1413
- box-shadow: 0 10px 26px rgba(12, 18, 28, 0.24);
1414
- pointer-events: none;
1415
- }
1416
-
1417
- .vf-editor-chat-message-video-play::before {
1418
- content: "";
1419
- display: block;
1420
- width: 0;
1421
- height: 0;
1422
- margin-left: 3px;
1423
- border-top: 8px solid transparent;
1424
- border-bottom: 8px solid transparent;
1425
- border-left: 12px solid #fff8ee;
1426
- }
1427
-
1428
- .vf-editor-chat-media-modal-backdrop {
1429
- position: fixed;
1430
- inset: 0;
1431
- z-index: 125;
1432
- display: flex;
1433
- align-items: center;
1434
- justify-content: center;
1435
- padding: 20px;
1436
- background: rgba(31, 38, 53, 0.58);
1437
- backdrop-filter: blur(10px);
1438
- }
1439
-
1440
- .vf-editor-chat-media-modal {
1441
- width: min(920px, calc(100vw - 40px));
1442
- max-height: min(88vh, 980px);
1443
- overflow: hidden;
1444
- border-radius: 20px;
1445
- border: 1px solid rgba(191, 164, 109, 0.24);
1446
- background: rgba(255, 251, 244, 0.99);
1447
- box-shadow: 0 28px 64px rgba(15, 23, 42, 0.28);
1448
- }
1449
-
1450
- .vf-editor-chat-json-modal {
1451
- width: min(1080px, calc(100vw - 40px));
1452
- max-height: min(88vh, 980px);
1453
- overflow: hidden;
1454
- border-radius: 20px;
1455
- border: 1px solid rgba(191, 164, 109, 0.24);
1456
- background: rgba(255, 251, 244, 0.99);
1457
- box-shadow: 0 28px 64px rgba(15, 23, 42, 0.28);
1458
- }
1459
-
1460
- .vf-editor-chat-json-modal-body {
1461
- padding: 18px;
1462
- max-height: calc(88vh - 76px);
1463
- background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 242, 231, 0.96));
1464
- }
1465
-
1466
- .vf-editor-chat-json-modal-body .vf-editor-chat-json-scroll {
1467
- max-height: calc(88vh - 164px);
1468
- }
1469
-
1470
- .vf-editor-chat-doc-viewer {
1471
- max-height: calc(88vh - 164px);
1472
- overflow: auto;
1473
- padding: 16px 18px;
1474
- border-radius: 12px;
1475
- border: 1px solid rgba(191, 164, 109, 0.16);
1476
- background: rgba(255, 255, 255, 0.92);
1477
- }
1478
-
1479
- .vf-editor-chat-doc-viewer.is-inline {
1480
- max-height: 320px;
1481
- }
1482
-
1483
- .vf-editor-chat-doc-pre {
1484
- margin: 0;
1485
- white-space: pre-wrap;
1486
- word-break: break-word;
1487
- color: #2c3748;
1488
- font-size: 0.8rem;
1489
- line-height: 1.55;
1490
- font-family: "SFMono-Regular", "Menlo", monospace;
1491
- }
1492
-
1493
- .vf-editor-chat-doc-markdown {
1494
- color: #334155;
1495
- font-size: 0.92rem;
1496
- line-height: 1.65;
1497
- }
1498
-
1499
- .vf-editor-chat-doc-markdown > :first-child {
1500
- margin-top: 0;
1501
- }
1502
-
1503
- .vf-editor-chat-doc-markdown > :last-child {
1504
- margin-bottom: 0;
1505
- }
1506
-
1507
- .vf-editor-chat-doc-markdown h1,
1508
- .vf-editor-chat-doc-markdown h2,
1509
- .vf-editor-chat-doc-markdown h3 {
1510
- color: #243041;
1511
- line-height: 1.2;
1512
- margin: 0 0 0.7rem;
1513
- }
1514
-
1515
- .vf-editor-chat-doc-markdown p,
1516
- .vf-editor-chat-doc-markdown ul,
1517
- .vf-editor-chat-doc-markdown ol,
1518
- .vf-editor-chat-doc-markdown blockquote,
1519
- .vf-editor-chat-doc-markdown pre {
1520
- margin: 0 0 0.85rem;
1521
- }
1522
-
1523
- .vf-editor-chat-doc-markdown ul,
1524
- .vf-editor-chat-doc-markdown ol {
1525
- padding-left: 1.2rem;
1526
- }
1527
-
1528
- .vf-editor-chat-doc-markdown blockquote {
1529
- margin-left: 0;
1530
- padding-left: 0.9rem;
1531
- border-left: 3px solid rgba(191, 164, 109, 0.34);
1532
- color: #617087;
1533
- }
1534
-
1535
- .vf-editor-chat-doc-markdown a {
1536
- color: #8a6b1b;
1537
- text-decoration: underline;
1538
- text-underline-offset: 0.16em;
1539
- word-break: break-word;
1540
- }
1541
-
1542
- .vf-editor-chat-media-modal-header {
1543
- display: flex;
1544
- align-items: center;
1545
- justify-content: space-between;
1546
- gap: 12px;
1547
- padding: 14px 16px;
1548
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1549
- }
1550
-
1551
- .vf-editor-chat-media-modal-link {
1552
- min-width: 0;
1553
- flex: 1 1 auto;
1554
- color: #8a6b1b;
1555
- font-size: 0.92rem;
1556
- font-weight: 700;
1557
- line-height: 1.35;
1558
- word-break: break-word;
1559
- overflow-wrap: anywhere;
1560
- }
1561
-
1562
- .vf-editor-chat-media-modal-actions {
1563
- display: inline-flex;
1564
- align-items: center;
1565
- gap: 8px;
1566
- flex: 0 0 auto;
1567
- }
1568
-
1569
- .vf-editor-chat-media-modal-control {
1570
- all: unset;
1571
- display: inline-flex;
1572
- align-items: center;
1573
- justify-content: center;
1574
- width: 32px;
1575
- min-width: 32px;
1576
- height: 32px;
1577
- border-radius: 999px;
1578
- background: rgba(36, 48, 65, 0.08);
1579
- color: #617087;
1580
- font-size: 1.2rem;
1581
- line-height: 1;
1582
- cursor: pointer;
1583
- }
1584
-
1585
- a.vf-editor-chat-media-modal-control {
1586
- text-decoration: none;
1587
- }
1588
-
1589
- .vf-editor-chat-media-modal-control:hover,
1590
- .vf-editor-chat-media-modal-control:focus-visible {
1591
- background: rgba(138, 107, 27, 0.14);
1592
- color: #8a6b1b;
1593
- }
1594
-
1595
- .vf-editor-chat-media-modal-control[data-state="done"] {
1596
- background: rgba(56, 142, 91, 0.14);
1597
- color: #2f7d4f;
1598
- }
1599
-
1600
- .vf-editor-chat-media-modal-control[data-state="error"] {
1601
- background: rgba(161, 68, 68, 0.12);
1602
- color: #a14444;
1603
- }
1604
-
1605
- .vf-editor-chat-media-modal-control svg {
1606
- width: 18px;
1607
- height: 18px;
1608
- }
1609
-
1610
- .vf-editor-chat-media-modal-body {
1611
- display: flex;
1612
- align-items: center;
1613
- justify-content: center;
1614
- padding: 18px;
1615
- max-height: calc(88vh - 76px);
1616
- background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 242, 231, 0.96));
1617
- }
1618
-
1619
- .vf-editor-chat-media-modal-image,
1620
- .vf-editor-chat-media-modal-video {
1621
- width: auto;
1622
- max-width: 100%;
1623
- max-height: calc(88vh - 112px);
1624
- border-radius: 16px;
1625
- border: 1px solid rgba(191, 164, 109, 0.18);
1626
- background: rgba(255, 255, 255, 0.96);
1627
- object-fit: contain;
1628
- }
1629
-
1630
- .vf-editor-upload-drawer-backdrop {
1631
- position: fixed;
1632
- inset: 0;
1633
- z-index: 124;
1634
- background: transparent;
1635
- pointer-events: none;
1636
- }
1637
-
1638
- .vf-editor-upload-drawer {
1639
- box-sizing: border-box;
1640
- width: min(420px, 100vw);
1641
- height: 100vh;
1642
- display: grid;
1643
- grid-template-rows: auto auto minmax(0, 1fr) auto;
1644
- border-right: 1px solid rgba(191, 164, 109, 0.24);
1645
- background: rgba(255, 251, 244, 0.99);
1646
- box-shadow: 24px 0 48px rgba(15, 23, 42, 0.22);
1647
- pointer-events: auto;
1648
- }
1649
-
1650
- .vf-editor-upload-header,
1651
- .vf-editor-upload-footer {
1652
- display: flex;
1653
- align-items: center;
1654
- justify-content: space-between;
1655
- gap: 10px;
1656
- padding: 14px;
1657
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1658
- }
1659
-
1660
- .vf-editor-upload-footer {
1661
- border-top: 1px solid rgba(191, 164, 109, 0.14);
1662
- border-bottom: 0;
1663
- }
1664
-
1665
- .vf-editor-upload-footer-confirm {
1666
- display: inline-flex;
1667
- align-items: center;
1668
- gap: 10px;
1669
- color: #7b879b;
1670
- font-size: 0.78rem;
1671
- font-weight: 850;
1672
- }
1673
-
1674
- .vf-editor-upload-title {
1675
- color: #243041;
1676
- font-size: 1rem;
1677
- font-weight: 800;
1678
- }
1679
-
1680
- .vf-editor-upload-subtitle {
1681
- margin-top: 2px;
1682
- color: #7b879b;
1683
- font-size: 0.76rem;
1684
- font-weight: 700;
1685
- }
1686
-
1687
- .vf-editor-upload-close,
1688
- .vf-editor-upload-file-actions button,
1689
- .vf-editor-upload-file-actions a {
1690
- all: unset;
1691
- display: inline-flex;
1692
- align-items: center;
1693
- justify-content: center;
1694
- width: 30px;
1695
- min-width: 30px;
1696
- height: 30px;
1697
- border-radius: 8px;
1698
- background: rgba(36, 48, 65, 0.08);
1699
- color: #617087;
1700
- font-size: 0.94rem;
1701
- font-weight: 800;
1702
- text-decoration: none;
1703
- cursor: pointer;
1704
- }
1705
-
1706
- .vf-editor-upload-tabs {
1707
- display: grid;
1708
- grid-template-columns: repeat(3, minmax(0, 1fr));
1709
- gap: 6px;
1710
- padding: 10px 12px;
1711
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1712
- }
1713
-
1714
- .vf-editor-upload-tabs button,
1715
- .vf-editor-upload-browser button,
1716
- .vf-editor-upload-footer button,
1717
- .vf-editor-upload-popconfirm button,
1718
- .vf-editor-upload-more {
1719
- all: unset;
1720
- box-sizing: border-box;
1721
- display: inline-flex;
1722
- align-items: center;
1723
- justify-content: center;
1724
- min-height: 30px;
1725
- padding: 0 10px;
1726
- border: 1px solid rgba(191, 164, 109, 0.24);
1727
- border-radius: 8px;
1728
- background: rgba(255, 255, 255, 0.86);
1729
- color: #4b5568;
1730
- font-size: 0.76rem;
1731
- font-weight: 800;
1732
- cursor: pointer;
1733
- }
1734
-
1735
- .vf-editor-upload-tabs button[data-active="true"],
1736
- .vf-editor-upload-confirm {
1737
- background: #d7b84f;
1738
- border-color: rgba(138, 107, 27, 0.36);
1739
- color: #243041;
1740
- }
1741
-
1742
- .vf-editor-upload-footer button:disabled,
1743
- .vf-editor-upload-more:disabled {
1744
- opacity: 0.52;
1745
- cursor: not-allowed;
1746
- }
1747
-
1748
- .vf-editor-upload-more {
1749
- width: 100%;
1750
- }
1751
-
1752
- .vf-editor-upload-body {
1753
- display: grid;
1754
- align-content: start;
1755
- gap: 10px;
1756
- min-height: 0;
1757
- overflow: auto;
1758
- padding: 12px;
1759
- }
1760
-
1761
- .vf-editor-upload-status {
1762
- padding: 9px 10px;
1763
- border-radius: 8px;
1764
- background: rgba(36, 48, 65, 0.07);
1765
- color: #4b5568;
1766
- font-size: 0.76rem;
1767
- font-weight: 800;
1768
- }
1769
-
1770
- .vf-editor-upload-status[data-tone="error"] {
1771
- background: rgba(155, 45, 45, 0.08);
1772
- color: #8b1e1e;
1773
- }
1774
-
1775
- .vf-editor-upload-drop {
1776
- all: unset;
1777
- display: grid;
1778
- gap: 4px;
1779
- place-items: center;
1780
- min-height: 66px;
1781
- padding: 10px 12px;
1782
- border: 1px dashed rgba(138, 107, 27, 0.36);
1783
- border-radius: 10px;
1784
- background: rgba(255, 255, 255, 0.78);
1785
- color: #243041;
1786
- font-size: 0.92rem;
1787
- font-weight: 850;
1788
- cursor: pointer;
1789
- }
1790
-
1791
- .vf-editor-upload-drop span {
1792
- color: #7b879b;
1793
- font-size: 0.74rem;
1794
- font-weight: 700;
1795
- }
1796
-
1797
- .vf-editor-upload-browser {
1798
- display: grid;
1799
- gap: 8px;
1800
- }
1801
-
1802
- .vf-editor-upload-browser-toolbar {
1803
- display: grid;
1804
- grid-template-columns: minmax(0, 1fr) auto;
1805
- align-items: center;
1806
- gap: 6px;
1807
- }
1808
-
1809
- .vf-editor-upload-browser-toolbar button:disabled {
1810
- opacity: 0.5;
1811
- cursor: not-allowed;
1812
- }
1813
-
1814
- .vf-editor-upload-breadcrumb {
1815
- display: flex;
1816
- align-items: center;
1817
- min-width: 0;
1818
- overflow-x: auto;
1819
- gap: 2px;
1820
- padding-bottom: 1px;
1821
- color: #7b879b;
1822
- font-size: 0.78rem;
1823
- font-weight: 850;
1824
- }
1825
-
1826
- .vf-editor-upload-breadcrumb button {
1827
- all: unset;
1828
- flex: 0 0 auto;
1829
- max-width: 120px;
1830
- padding: 3px 7px;
1831
- border-radius: 6px;
1832
- overflow: hidden;
1833
- text-overflow: ellipsis;
1834
- white-space: nowrap;
1835
- color: #4b5568;
1836
- cursor: pointer;
1837
- }
1838
-
1839
- .vf-editor-upload-breadcrumb-segment {
1840
- display: inline-flex;
1841
- align-items: center;
1842
- gap: 2px;
1843
- min-width: 0;
1844
- }
1845
-
1846
- .vf-editor-upload-folder-grid {
1847
- display: grid;
1848
- gap: 6px;
1849
- }
1850
-
1851
- .vf-editor-upload-folder-row {
1852
- position: relative;
1853
- display: grid;
1854
- grid-template-columns: minmax(0, 1fr) auto;
1855
- align-items: center;
1856
- gap: 10px;
1857
- padding: 9px 10px;
1858
- border: 1px solid rgba(191, 164, 109, 0.18);
1859
- border-radius: 8px;
1860
- background: rgba(255, 255, 255, 0.72);
1861
- }
1862
-
1863
- .vf-editor-upload-folder-open {
1864
- justify-content: flex-start !important;
1865
- gap: 10px;
1866
- min-width: 0;
1867
- border: 0 !important;
1868
- background: transparent !important;
1869
- padding: 0 !important;
1870
- color: #243041 !important;
1871
- }
1872
-
1873
- .vf-editor-upload-folder-open span:last-child {
1874
- min-width: 0;
1875
- overflow: hidden;
1876
- text-overflow: ellipsis;
1877
- white-space: nowrap;
1878
- }
1879
-
1880
- .vf-editor-upload-folder-icon {
1881
- position: relative;
1882
- display: inline-flex;
1883
- align-items: center;
1884
- justify-content: center;
1885
- width: 34px;
1886
- min-width: 34px;
1887
- height: 25px;
1888
- border-radius: 4px;
1889
- background: #dbc17a;
1890
- box-shadow: inset 0 -1px 0 rgba(138, 107, 27, 0.18);
1891
- }
1892
-
1893
- .vf-editor-upload-folder-icon::before {
1894
- content: "";
1895
- position: absolute;
1896
- left: 4px;
1897
- top: -6px;
1898
- width: 16px;
1899
- height: 8px;
1900
- border-radius: 4px 4px 0 0;
1901
- background: #e4cd88;
1902
- }
1903
-
1904
- .vf-editor-upload-folder-menu-button {
1905
- width: auto;
1906
- min-width: 34px;
1907
- padding-left: 9px !important;
1908
- padding-right: 9px !important;
1909
- }
1910
-
1911
- .vf-editor-upload-folder-menu {
1912
- position: absolute;
1913
- right: 8px;
1914
- top: calc(100% - 2px);
1915
- z-index: 3;
1916
- display: grid;
1917
- gap: 4px;
1918
- min-width: 132px;
1919
- padding: 6px;
1920
- border: 1px solid rgba(191, 164, 109, 0.2);
1921
- border-radius: 10px;
1922
- background: #fffbf4;
1923
- box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
1924
- }
1925
-
1926
- .vf-editor-upload-folder-menu button {
1927
- justify-content: flex-start;
1928
- }
1929
-
1930
- .vf-editor-upload-folder-menu button[data-danger="true"] {
1931
- color: #8b1e1e;
1932
- }
1933
-
1934
- .vf-editor-upload-folder-dialog {
1935
- display: grid;
1936
- gap: 9px;
1937
- padding: 10px;
1938
- border: 1px solid rgba(191, 164, 109, 0.22);
1939
- border-radius: 10px;
1940
- background: rgba(255, 255, 255, 0.86);
1941
- box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
1942
- }
1943
-
1944
- .vf-editor-upload-folder-dialog-title {
1945
- color: #243041;
1946
- font-size: 0.82rem;
1947
- font-weight: 850;
1948
- }
1949
-
1950
- .vf-editor-upload-folder-dialog-copy {
1951
- color: #4b5568;
1952
- font-size: 0.78rem;
1953
- font-weight: 750;
1954
- line-height: 1.35;
1955
- overflow-wrap: anywhere;
1956
- }
1957
-
1958
- .vf-editor-upload-folder-dialog input {
1959
- box-sizing: border-box;
1960
- width: 100%;
1961
- height: 34px;
1962
- padding: 0 9px;
1963
- border: 1px solid rgba(191, 164, 109, 0.24);
1964
- border-radius: 8px;
1965
- background: #fff;
1966
- color: #243041;
1967
- font-size: 0.8rem;
1968
- font-weight: 750;
1969
- }
1970
-
1971
- .vf-editor-upload-folder-dialog-actions {
1972
- display: flex;
1973
- justify-content: flex-end;
1974
- gap: 6px;
1975
- }
1976
-
1977
- .vf-editor-upload-folder-dialog-actions button {
1978
- all: unset;
1979
- box-sizing: border-box;
1980
- display: inline-flex;
1981
- align-items: center;
1982
- justify-content: center;
1983
- min-height: 30px;
1984
- padding: 0 10px;
1985
- border: 1px solid rgba(191, 164, 109, 0.24);
1986
- border-radius: 8px;
1987
- background: rgba(255, 255, 255, 0.86);
1988
- color: #4b5568;
1989
- font-size: 0.76rem;
1990
- font-weight: 800;
1991
- cursor: pointer;
1992
- }
1993
-
1994
- .vf-editor-upload-folder-dialog-actions button[data-danger="true"] {
1995
- border-color: rgba(155, 45, 45, 0.22);
1996
- background: rgba(155, 45, 45, 0.08);
1997
- color: #8b1e1e;
1998
- }
1999
-
2000
- .vf-editor-upload-list {
2001
- display: grid;
2002
- gap: 8px;
2003
- }
2004
-
2005
- .vf-editor-upload-file-card {
2006
- position: relative;
2007
- display: grid;
2008
- grid-template-columns: minmax(0, 1fr) auto;
2009
- align-items: center;
2010
- gap: 8px;
2011
- min-width: 0;
2012
- padding: 8px;
2013
- border: 1px solid rgba(191, 164, 109, 0.18);
2014
- border-radius: 10px;
2015
- background: rgba(255, 255, 255, 0.82);
2016
- }
2017
-
2018
- .vf-editor-upload-file-card[data-selected="true"] {
2019
- border-color: rgba(138, 107, 27, 0.72);
2020
- background: rgba(255, 248, 226, 0.94);
2021
- box-shadow: inset 0 0 0 2px rgba(215, 184, 79, 0.44);
2022
- }
2023
-
2024
- .vf-editor-upload-file-select {
2025
- all: unset;
2026
- display: grid;
2027
- grid-template-columns: auto minmax(0, 1fr);
2028
- align-items: center;
2029
- gap: 9px;
2030
- min-width: 0;
2031
- cursor: pointer;
2032
- }
2033
-
2034
- .vf-editor-upload-file-thumb,
2035
- .vf-editor-upload-file-icon {
2036
- width: 44px;
2037
- min-width: 44px;
2038
- height: 44px;
2039
- border-radius: 8px;
2040
- border: 1px solid rgba(191, 164, 109, 0.2);
2041
- background: rgba(252, 248, 240, 0.94);
2042
- }
2043
-
2044
- .vf-editor-upload-file-thumb {
2045
- object-fit: cover;
2046
- }
2047
-
2048
- .vf-editor-upload-file-icon {
2049
- display: inline-flex;
2050
- align-items: center;
2051
- justify-content: center;
2052
- color: #617087;
2053
- font-weight: 850;
2054
- }
2055
-
2056
- .vf-editor-upload-file-main {
2057
- display: grid;
2058
- gap: 3px;
2059
- min-width: 0;
2060
- }
2061
-
2062
- .vf-editor-upload-file-name,
2063
- .vf-editor-upload-file-meta {
2064
- min-width: 0;
2065
- overflow: hidden;
2066
- text-overflow: ellipsis;
2067
- white-space: nowrap;
2068
- }
2069
-
2070
- .vf-editor-upload-file-name {
2071
- color: #243041;
2072
- font-size: 0.8rem;
2073
- font-weight: 850;
2074
- }
2075
-
2076
- .vf-editor-upload-file-meta {
2077
- color: #7b879b;
2078
- font-size: 0.7rem;
2079
- font-weight: 700;
2080
- }
2081
-
2082
- .vf-editor-upload-file-actions {
2083
- display: inline-flex;
2084
- align-items: center;
2085
- gap: 4px;
2086
- }
2087
-
2088
- .vf-editor-upload-file-actions svg {
2089
- width: 18px;
2090
- height: 18px;
2091
- fill: none;
2092
- stroke: currentColor;
2093
- stroke-width: 2;
2094
- stroke-linecap: round;
2095
- stroke-linejoin: round;
2096
- }
2097
-
2098
- .vf-editor-upload-selection-indicator {
2099
- display: inline-flex;
2100
- align-items: center;
2101
- justify-content: center;
2102
- width: 26px;
2103
- min-width: 26px;
2104
- height: 26px;
2105
- border: 2px solid rgba(123, 135, 155, 0.42);
2106
- border-radius: 7px;
2107
- color: #243041;
2108
- font-size: 0.9rem;
2109
- font-weight: 900;
2110
- background: rgba(255, 255, 255, 0.82);
2111
- }
2112
-
2113
- .vf-editor-upload-selection-indicator[data-selected="true"] {
2114
- border-color: rgba(138, 107, 27, 0.72);
2115
- background: #d7b84f;
2116
- }
2117
-
2118
- .vf-editor-upload-popconfirm {
2119
- position: absolute;
2120
- right: 8px;
2121
- top: calc(100% - 2px);
2122
- z-index: 2;
2123
- display: grid;
2124
- gap: 6px;
2125
- min-width: 180px;
2126
- padding: 8px;
2127
- border: 1px solid rgba(191, 164, 109, 0.2);
2128
- border-radius: 10px;
2129
- background: #fffbf4;
2130
- box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
2131
- color: #4b5568;
2132
- font-size: 0.76rem;
2133
- font-weight: 800;
2134
- }
2135
-
2136
- .vf-editor-upload-popconfirm button[data-danger="true"] {
2137
- border-color: rgba(155, 45, 45, 0.22);
2138
- background: rgba(155, 45, 45, 0.08);
2139
- color: #8b1e1e;
2140
- }
2141
-
2142
- .vf-editor-upload-empty {
2143
- padding: 20px 10px;
2144
- border: 1px dashed rgba(191, 164, 109, 0.24);
2145
- border-radius: 10px;
2146
- color: #7b879b;
2147
- font-size: 0.8rem;
2148
- font-weight: 800;
2149
- text-align: center;
2150
- }
2151
-
2152
- .vf-editor-chat-attachment {
2153
- display: inline-flex;
2154
- align-items: center;
2155
- gap: 8px;
2156
- min-height: 32px;
2157
- padding: 0 10px;
2158
- border-radius: 999px;
2159
- border: 1px solid rgba(191, 164, 109, 0.24);
2160
- background: rgba(252, 248, 240, 0.98);
2161
- color: #4b5568;
2162
- max-width: 100%;
2163
- }
2164
-
2165
- .vf-editor-chat-attachment-name {
2166
- display: inline-flex;
2167
- min-width: 0;
2168
- overflow: hidden;
2169
- text-overflow: ellipsis;
2170
- white-space: nowrap;
2171
- font-size: 0.78rem;
2172
- font-weight: 700;
2173
- }
2174
-
2175
- .vf-editor-chat-attachment-remove {
2176
- display: inline-flex;
2177
- align-items: center;
2178
- justify-content: center;
2179
- width: 18px;
2180
- height: 18px;
2181
- padding: 0;
2182
- border: 0;
2183
- border-radius: 999px;
2184
- background: rgba(36, 48, 65, 0.08);
2185
- color: #617087;
2186
- cursor: pointer;
2187
- box-shadow: none;
2188
- min-height: 0;
2189
- }
2190
-
2191
- .vf-editor-chat-footer {
2192
- padding: 0;
2193
- border-top: 1px solid rgba(191, 164, 109, 0.14);
2194
- background: rgba(255, 251, 244, 0.9);
2195
- backdrop-filter: blur(16px);
2196
- }
2197
-
2198
- .vf-editor-chat-composer {
2199
- display: grid;
2200
- gap: 6px;
2201
- padding: 4px 6px;
2202
- border: 0;
2203
- border-radius: 0;
2204
- background: rgba(255, 255, 255, 0.92);
2205
- box-shadow: none;
2206
- }
2207
-
2208
- .vf-editor-chat-composer-attachments-strip {
2209
- display: flex;
2210
- gap: 8px;
2211
- overflow-x: auto;
2212
- overflow-y: hidden;
2213
- padding-bottom: 2px;
2214
- scrollbar-width: thin;
2215
- }
2216
-
2217
- .vf-editor-chat-composer-attachment-item {
2218
- display: flex;
2219
- align-items: center;
2220
- gap: 8px;
2221
- flex: 0 0 auto;
2222
- min-width: 0;
2223
- max-width: 190px;
2224
- padding: 6px 8px;
2225
- border: 1px solid rgba(191, 164, 109, 0.22);
2226
- border-radius: 12px;
2227
- background: rgba(252, 248, 240, 0.94);
2228
- }
2229
-
2230
- .vf-editor-chat-composer-attachment-thumb,
2231
- .vf-editor-chat-composer-attachment-file {
2232
- width: 42px;
2233
- min-width: 42px;
2234
- height: 42px;
2235
- border-radius: 8px;
2236
- border: 1px solid rgba(191, 164, 109, 0.2);
2237
- background: rgba(255, 255, 255, 0.92);
2238
- }
2239
-
2240
- .vf-editor-chat-composer-attachment-thumb {
2241
- object-fit: cover;
2242
- }
2243
-
2244
- .vf-editor-chat-composer-attachment-file {
2245
- display: inline-flex;
2246
- align-items: center;
2247
- justify-content: center;
2248
- color: #617087;
2249
- font-size: 0.82rem;
2250
- font-weight: 800;
2251
- }
2252
-
2253
- .vf-editor-chat-composer-attachment-meta {
2254
- min-width: 0;
2255
- flex: 1 1 auto;
2256
- }
2257
-
2258
- .vf-editor-chat-composer-attachment-name {
2259
- display: block;
2260
- overflow: hidden;
2261
- text-overflow: ellipsis;
2262
- white-space: nowrap;
2263
- color: #334155;
2264
- font-size: 0.76rem;
2265
- font-weight: 700;
2266
- line-height: 1.2;
2267
- }
2268
-
2269
- .vf-editor-chat-composer-attachment-remove {
2270
- all: unset;
2271
- display: inline-flex;
2272
- align-items: center;
2273
- justify-content: center;
2274
- width: 16px;
2275
- min-width: 16px;
2276
- height: 16px;
2277
- padding: 0;
2278
- border: 0;
2279
- border-radius: 999px;
2280
- background: transparent;
2281
- color: #7b879b;
2282
- box-shadow: none;
2283
- font-size: 0.95rem;
2284
- line-height: 1;
2285
- }
2286
-
2287
- .vf-editor-chat-composer-row {
2288
- display: grid;
2289
- grid-template-columns: auto minmax(0, 1fr) auto;
2290
- align-items: flex-start;
2291
- gap: 6px;
2292
- }
2293
-
2294
- .vf-editor-chat-attach-button,
2295
- .vf-editor-chat-send-button {
2296
- all: unset;
2297
- display: inline-flex;
2298
- align-items: center;
2299
- justify-content: center;
2300
- min-height: 32px;
2301
- height: 32px;
2302
- border-radius: 8px;
2303
- border: 1px solid rgba(191, 164, 109, 0.34);
2304
- background: rgba(255, 255, 255, 0.92);
2305
- color: #243041;
2306
- font-weight: 700;
2307
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
2308
- }
2309
-
2310
- .vf-editor-chat-attach-button {
2311
- width: 32px;
2312
- min-width: 32px;
2313
- padding: 0;
2314
- font-size: 1.1rem;
2315
- line-height: 1;
2316
- }
2317
-
2318
- .vf-editor-chat-send-button {
2319
- padding: 0 12px;
2320
- background: #dbc17a;
2321
- }
2322
-
2323
- .vf-editor-chat-attach-button:disabled,
2324
- .vf-editor-chat-send-button:disabled,
2325
- .vf-editor-chat-new-thread:disabled {
2326
- opacity: 0.58;
2327
- cursor: not-allowed;
2328
- }
2329
-
2330
- .vf-editor-chat-input {
2331
- all: unset;
2332
- display: block;
2333
- width: 100%;
2334
- min-height: 96px;
2335
- max-height: 180px;
2336
- padding: 10px 0;
2337
- background: transparent;
2338
- box-shadow: none;
2339
- color: #243041;
2340
- font-size: 0.88rem;
2341
- line-height: 1.45;
2342
- resize: none;
2343
- border: 0;
2344
- }
2345
-
2346
- .vf-editor-chat-input:focus {
2347
- border: 0;
2348
- box-shadow: none;
2349
- }
2350
-
2351
- .vf-editor-chat-input::placeholder {
2352
- color: #7b879b;
2353
- }
2354
-
2355
- .vf-editor-chat-error {
2356
- margin: 10px 10px 0;
2357
- padding: 12px 14px;
2358
- border-radius: 10px;
2359
- border: 1px solid rgba(155, 45, 45, 0.18);
2360
- background: rgba(155, 45, 45, 0.08);
2361
- color: #8b1e1e;
2362
- font-size: 0.88rem;
2363
- }
2364
-
2365
- @keyframes vf-editor-chat-bounce {
2366
- 0%, 80%, 100% {
2367
- transform: translateY(0);
2368
- opacity: 0.55;
2369
- }
2370
- 40% {
2371
- transform: translateY(-3px);
2372
- opacity: 1;
2373
- }
2374
- }
2375
-
2376
- @keyframes vf-editor-chat-pulse {
2377
- 0%, 100% {
2378
- box-shadow: 0 0 0 0 rgba(219, 193, 122, 0.26);
2379
- }
2380
- 50% {
2381
- box-shadow: 0 0 0 6px rgba(219, 193, 122, 0.08);
2382
- }
2383
- }
2384
-
2385
- @media (max-width: 1180px) {
2386
- .editor-workbench {
2387
- padding-top: 0;
2388
- padding-right: 0;
2389
- padding-bottom: 18px;
2390
- }
2391
-
2392
- .editor-main {
2393
- overflow-x: hidden;
2394
- overflow-y: auto;
2395
- }
2396
-
2397
- .editor-floating-nav {
2398
- position: sticky;
2399
- top: 16px;
2400
- left: auto;
2401
- max-width: none;
2402
- margin: 0 0 16px;
2403
- }
2404
-
2405
- .editor-right-rail {
2406
- position: static;
2407
- width: auto;
2408
- height: 45vh;
2409
- min-height: 240px;
2410
- margin-top: 18px;
2411
- }
2412
-
2413
- .vf-editor-chat-thread-chip {
2414
- max-width: 180px;
2415
- }
2416
-
2417
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble,
2418
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
2419
- max-width: min(100%, 340px);
2420
- }
2421
- }
2422
-
2423
- @media (max-width: 1024px) {
2424
- .editor-workbench {
2425
- padding-bottom: 12px;
2426
- }
2427
-
2428
- .editor-floating-nav {
2429
- top: 8px;
2430
- grid-template-columns: auto minmax(0, 1fr) auto;
2431
- gap: 8px;
2432
- padding: 8px;
2433
- border-radius: 18px;
2434
- flex-wrap: nowrap;
2435
- }
2436
-
2437
- .editor-nav-title {
2438
- min-width: 0;
2439
- overflow: hidden;
2440
- text-overflow: ellipsis;
2441
- white-space: nowrap;
2442
- }
2443
-
2444
- .editor-nav-account {
2445
- display: none;
2446
- }
2447
-
2448
- .editor-right-rail {
2449
- position: fixed !important;
2450
- inset: 0;
2451
- z-index: 110;
2452
- width: 100%;
2453
- height: 100svh;
2454
- min-height: 0;
2455
- margin: 0;
2456
- border-radius: 0;
2457
- overflow: visible;
2458
- pointer-events: none;
2459
- }
2460
-
2461
- .editor-chat-panel {
2462
- height: 100%;
2463
- border-left: 0;
2464
- background: transparent;
2465
- pointer-events: none;
2466
- }
2467
-
2468
- .vf-editor-chat-shell {
2469
- height: 100%;
2470
- min-height: 0;
2471
- pointer-events: none;
2472
- }
2473
-
2474
- .vf-editor-chat-shell[data-mobile-open="true"] {
2475
- pointer-events: auto;
2476
- }
2477
-
2478
- .vf-editor-chat-mobile-fab {
2479
- all: unset;
2480
- position: fixed;
2481
- right: 18px;
2482
- bottom: calc(18px + env(safe-area-inset-bottom));
2483
- z-index: 2;
2484
- display: inline-flex;
2485
- align-items: center;
2486
- justify-content: center;
2487
- width: 58px;
2488
- height: 58px;
2489
- border-radius: 999px;
2490
- border: 1px solid rgba(255, 255, 255, 0.86);
2491
- background:
2492
- radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.36), transparent 30%),
2493
- linear-gradient(180deg, #e2c675, #c79f3b);
2494
- color: #243041;
2495
- box-shadow:
2496
- 0 18px 36px rgba(102, 82, 43, 0.24),
2497
- 0 0 0 1px rgba(102, 82, 43, 0.14) inset;
2498
- pointer-events: auto;
2499
- transition:
2500
- transform 160ms ease,
2501
- opacity 160ms ease,
2502
- box-shadow 160ms ease;
2503
- }
2504
-
2505
- .vf-editor-chat-mobile-fab:active {
2506
- transform: translateY(1px) scale(0.98);
2507
- }
2508
-
2509
- .vf-editor-chat-mobile-fab svg {
2510
- width: 29px;
2511
- height: 29px;
2512
- fill: none;
2513
- stroke: currentColor;
2514
- stroke-width: 1.9;
2515
- stroke-linecap: round;
2516
- stroke-linejoin: round;
2517
- }
2518
-
2519
- .vf-editor-chat-shell[data-mobile-open="true"] .vf-editor-chat-mobile-fab {
2520
- opacity: 0;
2521
- transform: scale(0.86);
2522
- pointer-events: none;
2523
- }
2524
-
2525
- .vf-editor-chat-thread {
2526
- position: fixed;
2527
- inset: 0;
2528
- z-index: 1;
2529
- display: none;
2530
- width: 100%;
2531
- height: 100svh;
2532
- border-radius: 0;
2533
- background:
2534
- radial-gradient(circle at top right, rgba(219, 193, 122, 0.12), transparent 30%),
2535
- linear-gradient(180deg, rgba(255, 252, 247, 0.99), rgba(252, 247, 238, 0.98));
2536
- box-shadow: none;
2537
- pointer-events: auto;
2538
- }
2539
-
2540
- .vf-editor-chat-shell[data-mobile-open="true"] .vf-editor-chat-thread {
2541
- display: flex;
2542
- }
2543
-
2544
- .vf-editor-chat-minimize {
2545
- all: unset;
2546
- display: inline-flex;
2547
- align-items: center;
2548
- justify-content: center;
2549
- flex: 0 0 auto;
2550
- width: 34px;
2551
- height: 34px;
2552
- border-radius: 999px;
2553
- border: 1px solid rgba(191, 164, 109, 0.24);
2554
- background: rgba(255, 255, 255, 0.9);
2555
- color: #617087;
2556
- font-size: 1.35rem;
2557
- line-height: 1;
2558
- }
2559
-
2560
- .vf-editor-chat-header-row {
2561
- align-items: flex-start;
2562
- justify-content: flex-start;
2563
- gap: 8px;
2564
- }
2565
-
2566
- .vf-editor-chat-header-row > div:first-child {
2567
- flex: 1 1 auto;
2568
- min-width: 0;
2569
- }
2570
-
2571
- .vf-editor-chat-new-thread,
2572
- .vf-editor-chat-minimize {
2573
- flex: 0 0 auto;
2574
- }
2575
-
2576
- .vf-editor-chat-header,
2577
- .vf-editor-chat-tracer-bar,
2578
- .vf-editor-chat-footer {
2579
- padding-left: 12px;
2580
- padding-right: 12px;
2581
- }
2582
-
2583
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble,
2584
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
2585
- max-width: 100%;
2586
- }
2587
-
2588
- .vf-editor-chat-thread-chip {
2589
- max-width: 72vw;
2590
- }
2591
-
2592
- .vf-editor-chat-shell[data-layout="brainstorm"] {
2593
- pointer-events: auto;
2594
- }
2595
-
2596
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-mobile-fab {
2597
- display: none;
2598
- }
2599
-
2600
- .vf-editor-chat-shell[data-layout="brainstorm"] .editor-chat-panel,
2601
- .vf-editor-chat-shell[data-layout="brainstorm"] {
2602
- background: transparent;
2603
- }
2604
-
2605
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-brainstorm-layout {
2606
- grid-template-columns: minmax(0, 1fr);
2607
- }
2608
-
2609
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread {
2610
- position: relative;
2611
- inset: auto;
2612
- display: grid;
2613
- grid-template-rows: auto minmax(0, 1fr) auto;
2614
- width: 100%;
2615
- height: 100%;
2616
- min-height: 0;
2617
- border-radius: 0;
2618
- }
2619
-
2620
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-scrim {
2621
- position: fixed;
2622
- inset: 0;
2623
- z-index: 25;
2624
- display: block;
2625
- border: 0;
2626
- background: rgba(31, 38, 53, 0.42);
2627
- opacity: 0;
2628
- pointer-events: none;
2629
- transition: opacity 160ms ease;
2630
- }
2631
-
2632
- .vf-editor-chat-shell[data-layout="brainstorm"][data-mobile-open="true"] .vf-editor-chat-history-scrim {
2633
- opacity: 1;
2634
- pointer-events: auto;
2635
- }
2636
-
2637
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-pane {
2638
- position: fixed;
2639
- top: 0;
2640
- left: 0;
2641
- bottom: 0;
2642
- z-index: 26;
2643
- width: min(84vw, 320px);
2644
- transform: translateX(-104%);
2645
- transition: transform 180ms ease;
2646
- box-shadow: 18px 0 34px rgba(37, 45, 61, 0.18);
2647
- }
2648
-
2649
- .vf-editor-chat-shell[data-layout="brainstorm"][data-mobile-open="true"] .vf-editor-chat-history-pane {
2650
- transform: translateX(0);
2651
- }
2652
-
2653
- .vf-editor-chat-history-close,
2654
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-toggle {
2655
- display: inline-flex;
2656
- }
2657
-
2658
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-viewport {
2659
- padding-left: 12px;
2660
- padding-right: 12px;
2661
- }
2662
- }
2663
-
2664
- @media (min-width: 1025px) {
2665
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-toggle {
2666
- display: none;
2667
- }
2668
- }
2669
- `;
2670
- export const TEMPLATE_EDITOR_SHELL_SCRIPT = `
2671
- document.addEventListener("click", async (event) => {
2672
- const target = event.target;
2673
- if (!(target instanceof HTMLElement)) {
2674
- return;
2675
- }
2676
- const button = target.closest("[data-editor-copy]");
2677
- if (!(button instanceof HTMLButtonElement)) {
2678
- return;
2679
- }
2680
- const value = button.getAttribute("data-editor-copy") || "";
2681
- if (!value) {
2682
- return;
2683
- }
2684
- try {
2685
- await navigator.clipboard.writeText(value);
2686
- button.setAttribute("data-copied", "true");
2687
- const original = button.textContent || "";
2688
- button.textContent = "Copied";
2689
- window.setTimeout(() => {
2690
- button.textContent = original;
2691
- button.setAttribute("data-copied", "false");
2692
- }, 1200);
2693
- } catch {}
2694
- });
2695
- `;
2696
- export function renderTemplateEditorChrome(input) {
2697
- const email = input.account?.email?.trim() || "";
2698
- const displayName = resolveAccountDisplayName(input.account);
2699
- const accountMeta = email
2700
- ? `<div class="editor-nav-account">${escapeHtml(displayName)} <span>(${escapeHtml(email)})</span></div>`
2701
- : "";
2702
- return `
2703
- <nav class="editor-floating-nav" aria-label="HyperFrames workspace">
2704
- <a class="editor-back-link" href="${escapeAttribute(input.backHref)}">Back to Studio</a>
2705
- <div class="editor-nav-title">${escapeHtml(input.templateTitle)}</div>
2706
- ${accountMeta}
2707
- </nav>
2708
- <aside class="editor-right-rail" aria-label="Layer copilot panel">
2709
- <div class="editor-chat-panel" data-template-editor-chat-root></div>
2710
- </aside>
2711
- `;
2712
- }
2713
- //# sourceMappingURL=template-editor-shell.js.map