@officexapp/catalogs-cli 0.4.9 → 0.4.10

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.
@@ -0,0 +1,417 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ /* ── Typography ─────────────────────────────────────────────────── */
6
+ /* Fonts loaded via <link> in index.html to avoid render-blocking @import */
7
+
8
+ :root {
9
+ --font-display: 'Outfit', system-ui, sans-serif;
10
+ --font-body: 'DM Sans', system-ui, sans-serif;
11
+ --font-size-body: 1.125rem;
12
+ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
13
+ --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
14
+ }
15
+
16
+ body {
17
+ font-family: var(--font-body);
18
+ -webkit-font-smoothing: antialiased;
19
+ -moz-osx-font-smoothing: grayscale;
20
+ color: #1a1a2e;
21
+ }
22
+
23
+ h1, h2, h3, h4, h5, h6 {
24
+ font-family: var(--font-display);
25
+ }
26
+
27
+ /* ── Page Transitions ───────────────────────────────────────────── */
28
+
29
+ /* slide-up (default) */
30
+ .page-transition-slide-up {
31
+ animation: pageSlideUp 0.35s var(--ease-out-expo) both;
32
+ }
33
+ .page-transition-slide-up > * {
34
+ animation: staggerSlideUp 0.3s var(--ease-out-expo) both;
35
+ }
36
+
37
+ @keyframes pageSlideUp {
38
+ from { opacity: 0; transform: translateY(8px); }
39
+ to { opacity: 1; transform: translateY(0); }
40
+ }
41
+ @keyframes staggerSlideUp {
42
+ from { opacity: 0; transform: translateY(6px); }
43
+ to { opacity: 1; transform: translateY(0); }
44
+ }
45
+
46
+ /* fade */
47
+ .page-transition-fade {
48
+ animation: pageFade 0.4s ease both;
49
+ }
50
+ .page-transition-fade > * {
51
+ animation: staggerFade 0.35s ease both;
52
+ }
53
+
54
+ @keyframes pageFade {
55
+ from { opacity: 0; }
56
+ to { opacity: 1; }
57
+ }
58
+ @keyframes staggerFade {
59
+ from { opacity: 0; }
60
+ to { opacity: 1; }
61
+ }
62
+
63
+ /* slide-left */
64
+ .page-transition-slide-left {
65
+ animation: pageSlideLeft 0.4s var(--ease-out-expo) both;
66
+ }
67
+ .page-transition-slide-left > * {
68
+ animation: staggerSlideLeft 0.35s var(--ease-out-expo) both;
69
+ }
70
+
71
+ @keyframes pageSlideLeft {
72
+ from { opacity: 0; transform: translateX(20px); }
73
+ to { opacity: 1; transform: translateX(0); }
74
+ }
75
+ @keyframes staggerSlideLeft {
76
+ from { opacity: 0; transform: translateX(12px); }
77
+ to { opacity: 1; transform: translateX(0); }
78
+ }
79
+
80
+ /* scale */
81
+ .page-transition-scale {
82
+ animation: pageScale 0.35s var(--ease-out-expo) both;
83
+ }
84
+ .page-transition-scale > * {
85
+ animation: staggerScale 0.3s var(--ease-out-expo) both;
86
+ }
87
+
88
+ @keyframes pageScale {
89
+ from { opacity: 0; transform: scale(0.97); }
90
+ to { opacity: 1; transform: scale(1); }
91
+ }
92
+ @keyframes staggerScale {
93
+ from { opacity: 0; transform: scale(0.98); }
94
+ to { opacity: 1; transform: scale(1); }
95
+ }
96
+
97
+ /* none */
98
+ .page-transition-none {
99
+ /* no animation */
100
+ }
101
+
102
+ /* Staggered children delays (shared across all transition types) */
103
+ .page-transition-slide-up > *:nth-child(1),
104
+ .page-transition-fade > *:nth-child(1),
105
+ .page-transition-slide-left > *:nth-child(1),
106
+ .page-transition-scale > *:nth-child(1) { animation-delay: 0.02s; }
107
+
108
+ .page-transition-slide-up > *:nth-child(2),
109
+ .page-transition-fade > *:nth-child(2),
110
+ .page-transition-slide-left > *:nth-child(2),
111
+ .page-transition-scale > *:nth-child(2) { animation-delay: 0.05s; }
112
+
113
+ .page-transition-slide-up > *:nth-child(3),
114
+ .page-transition-fade > *:nth-child(3),
115
+ .page-transition-slide-left > *:nth-child(3),
116
+ .page-transition-scale > *:nth-child(3) { animation-delay: 0.08s; }
117
+
118
+ .page-transition-slide-up > *:nth-child(4),
119
+ .page-transition-fade > *:nth-child(4),
120
+ .page-transition-slide-left > *:nth-child(4),
121
+ .page-transition-scale > *:nth-child(4) { animation-delay: 0.11s; }
122
+
123
+ .page-transition-slide-up > *:nth-child(5),
124
+ .page-transition-fade > *:nth-child(5),
125
+ .page-transition-slide-left > *:nth-child(5),
126
+ .page-transition-scale > *:nth-child(5) { animation-delay: 0.14s; }
127
+
128
+ .page-transition-slide-up > *:nth-child(6),
129
+ .page-transition-fade > *:nth-child(6),
130
+ .page-transition-slide-left > *:nth-child(6),
131
+ .page-transition-scale > *:nth-child(6) { animation-delay: 0.17s; }
132
+
133
+ .page-transition-slide-up > *:nth-child(7),
134
+ .page-transition-fade > *:nth-child(7),
135
+ .page-transition-slide-left > *:nth-child(7),
136
+ .page-transition-scale > *:nth-child(7) { animation-delay: 0.2s; }
137
+
138
+ .page-transition-slide-up > *:nth-child(8),
139
+ .page-transition-fade > *:nth-child(8),
140
+ .page-transition-slide-left > *:nth-child(8),
141
+ .page-transition-scale > *:nth-child(8) { animation-delay: 0.23s; }
142
+
143
+ /* Legacy alias — keep backward compat with any external custom_css referencing this */
144
+ .page-enter-active {
145
+ animation: pageSlideUp 0.35s var(--ease-out-expo) both;
146
+ }
147
+ .page-enter-active > * {
148
+ animation: staggerSlideUp 0.3s var(--ease-out-expo) both;
149
+ }
150
+ .page-enter-active > *:nth-child(1) { animation-delay: 0.02s; }
151
+ .page-enter-active > *:nth-child(2) { animation-delay: 0.05s; }
152
+ .page-enter-active > *:nth-child(3) { animation-delay: 0.08s; }
153
+ .page-enter-active > *:nth-child(4) { animation-delay: 0.11s; }
154
+ .page-enter-active > *:nth-child(5) { animation-delay: 0.14s; }
155
+ .page-enter-active > *:nth-child(6) { animation-delay: 0.17s; }
156
+ .page-enter-active > *:nth-child(7) { animation-delay: 0.2s; }
157
+ .page-enter-active > *:nth-child(8) { animation-delay: 0.23s; }
158
+
159
+ /* ── Cover Page ─────────────────────────────────────────────────── */
160
+ .cf-cover-overlay {
161
+ background: linear-gradient(
162
+ 180deg,
163
+ rgba(0, 0, 0, 0.15) 0%,
164
+ rgba(0, 0, 0, 0.4) 50%,
165
+ rgba(0, 0, 0, 0.6) 100%
166
+ );
167
+ }
168
+
169
+ .cf-cover-content {
170
+ animation: coverFloat 0.8s var(--ease-out-expo) both;
171
+ }
172
+
173
+ @keyframes coverFloat {
174
+ from {
175
+ opacity: 0;
176
+ transform: translateY(30px) scale(0.98);
177
+ }
178
+ to {
179
+ opacity: 1;
180
+ transform: translateY(0) scale(1);
181
+ }
182
+ }
183
+
184
+ /* ── Top Bar ────────────────────────────────────────────────────── */
185
+ .cf-topbar {
186
+ background: rgba(255, 255, 255, 0.92);
187
+ backdrop-filter: blur(16px) saturate(180%);
188
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
189
+ }
190
+
191
+ /* ── Card Container ─────────────────────────────────────────────── */
192
+ .cf-card {
193
+ background: white;
194
+ border-radius: 20px;
195
+ box-shadow:
196
+ 0 0 0 1px rgba(0, 0, 0, 0.03),
197
+ 0 2px 4px rgba(0, 0, 0, 0.02),
198
+ 0 12px 40px rgba(0, 0, 0, 0.06);
199
+ }
200
+
201
+ /* ── Inputs ─────────────────────────────────────────────────────── */
202
+ .cf-input {
203
+ font-family: var(--font-body);
204
+ border-radius: 12px;
205
+ border: 1.5px solid #e2e4e9;
206
+ background: #fafbfc;
207
+ padding-top: 12px;
208
+ padding-bottom: 12px;
209
+ padding-left: 16px;
210
+ padding-right: 16px;
211
+ font-size: var(--font-size-body);
212
+ color: #1a1a2e;
213
+ outline: none;
214
+ transition: all 0.2s var(--ease-out-expo);
215
+ width: 100%;
216
+ }
217
+
218
+ .cf-input.pl-10 {
219
+ padding-left: 2.5rem;
220
+ }
221
+
222
+ .cf-input::placeholder {
223
+ color: #a0a3b1;
224
+ }
225
+
226
+ .cf-input:hover {
227
+ border-color: #c8cbd4;
228
+ background: #fff;
229
+ }
230
+
231
+ .cf-input:focus {
232
+ background: #fff;
233
+ box-shadow: 0 0 0 3px var(--theme-color-ring, rgba(74, 144, 217, 0.15));
234
+ }
235
+
236
+ /* ── Field Error State ──────────────────────────────────────────── */
237
+ .cf-field-error .cf-input,
238
+ .cf-field-error .cf-choice,
239
+ .cf-field-error input,
240
+ .cf-field-error textarea,
241
+ .cf-field-error select {
242
+ border-color: #f87171 !important;
243
+ }
244
+
245
+ .cf-field-error .cf-input:focus,
246
+ .cf-field-error input:focus,
247
+ .cf-field-error textarea:focus {
248
+ box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
249
+ }
250
+
251
+ @keyframes shake {
252
+ 0%, 100% { transform: translateX(0); }
253
+ 15%, 45%, 75% { transform: translateX(-4px); }
254
+ 30%, 60%, 90% { transform: translateX(4px); }
255
+ }
256
+
257
+ .cf-field-error {
258
+ animation: shake 0.4s ease-in-out;
259
+ }
260
+
261
+ /* ── Buttons ────────────────────────────────────────────────────── */
262
+ .cf-btn-primary {
263
+ font-family: var(--font-display);
264
+ font-weight: 600;
265
+ letter-spacing: -0.01em;
266
+ border-radius: 14px;
267
+ padding: 14px 28px;
268
+ font-size: 16px;
269
+ color: white;
270
+ border: none;
271
+ cursor: pointer;
272
+ transition: all 0.25s var(--ease-out-expo);
273
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
274
+ position: relative;
275
+ overflow: hidden;
276
+ }
277
+
278
+ .cf-btn-primary:hover {
279
+ transform: translateY(-1px);
280
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.1);
281
+ }
282
+
283
+ .cf-btn-primary:active {
284
+ transform: translateY(0) scale(0.98);
285
+ }
286
+
287
+ .cf-btn-ghost {
288
+ font-family: var(--font-body);
289
+ font-weight: 500;
290
+ border-radius: 12px;
291
+ padding: 10px 20px;
292
+ font-size: 14px;
293
+ border: none;
294
+ cursor: pointer;
295
+ background: transparent;
296
+ transition: all 0.2s ease;
297
+ }
298
+
299
+ .cf-btn-ghost:hover {
300
+ background: rgba(0, 0, 0, 0.04);
301
+ }
302
+
303
+ /* ── Choice Buttons ─────────────────────────────────────────────── */
304
+ .cf-choice {
305
+ border-radius: 14px;
306
+ border: 1.5px solid #e2e4e9;
307
+ background: #fafbfc;
308
+ transition: all 0.2s var(--ease-out-expo);
309
+ }
310
+
311
+ .cf-choice:hover {
312
+ border-color: #c8cbd4;
313
+ background: #fff;
314
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
315
+ }
316
+
317
+ .cf-choice[data-selected="true"] {
318
+ background: #fff;
319
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
320
+ }
321
+
322
+ /* ── Progress Bar ───────────────────────────────────────────────── */
323
+ .progress-bar-fill {
324
+ transition: width 0.6s var(--ease-out-expo);
325
+ }
326
+
327
+ /* ── Star Rating ────────────────────────────────────────────────── */
328
+ .star-rating-star {
329
+ cursor: pointer;
330
+ transition: transform 0.15s var(--ease-out-back);
331
+ }
332
+ .star-rating-star:hover {
333
+ transform: scale(1.25);
334
+ }
335
+
336
+ /* ── Range Slider ───────────────────────────────────────────────── */
337
+ input[type="range"] {
338
+ -webkit-appearance: none;
339
+ appearance: none;
340
+ height: 6px;
341
+ border-radius: 999px;
342
+ outline: none;
343
+ background: #e2e4e9;
344
+ }
345
+ input[type="range"]::-webkit-slider-thumb {
346
+ -webkit-appearance: none;
347
+ appearance: none;
348
+ width: 22px;
349
+ height: 22px;
350
+ border-radius: 50%;
351
+ cursor: pointer;
352
+ border: 3px solid white;
353
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
354
+ transition: transform 0.15s var(--ease-out-back);
355
+ }
356
+ input[type="range"]::-webkit-slider-thumb:hover {
357
+ transform: scale(1.15);
358
+ }
359
+
360
+ /* ── Resume Modal ───────────────────────────────────────────────── */
361
+ .cf-modal-backdrop {
362
+ animation: modalFadeIn 0.3s ease both;
363
+ }
364
+
365
+ .cf-modal-card {
366
+ animation: modalSlideUp 0.4s var(--ease-out-expo) both;
367
+ animation-delay: 0.1s;
368
+ }
369
+
370
+ @keyframes modalFadeIn {
371
+ from { opacity: 0; }
372
+ to { opacity: 1; }
373
+ }
374
+
375
+ @keyframes modalSlideUp {
376
+ from {
377
+ opacity: 0;
378
+ transform: translateY(20px) scale(0.96);
379
+ }
380
+ to {
381
+ opacity: 1;
382
+ transform: translateY(0) scale(1);
383
+ }
384
+ }
385
+
386
+ /* ── Banner ─────────────────────────────────────────────────────── */
387
+ .cf-banner-glass {
388
+ background: rgba(255, 255, 255, 0.12);
389
+ backdrop-filter: blur(12px);
390
+ -webkit-backdrop-filter: blur(12px);
391
+ border: 1px solid rgba(255, 255, 255, 0.18);
392
+ }
393
+
394
+ /* ── Images ─────────────────────────────────────────────────────── */
395
+ /* Low-specificity defaults — override with #componentId img { ... } in custom_css */
396
+ .ck-img {
397
+ width: 100%;
398
+ height: auto;
399
+ object-fit: cover;
400
+ display: block;
401
+ }
402
+
403
+ /* ── Utility ────────────────────────────────────────────────────── */
404
+ .cf-text-balance {
405
+ text-wrap: balance;
406
+ }
407
+
408
+ /* Subtle noise texture for cover pages */
409
+ .cf-noise::before {
410
+ content: '';
411
+ position: absolute;
412
+ inset: 0;
413
+ opacity: 0.03;
414
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
415
+ background-size: 256px 256px;
416
+ pointer-events: none;
417
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@officexapp/catalogs-cli",
3
- "version": "0.4.9",
3
+ "version": "0.4.10",
4
4
  "description": "CLI for Catalog Kit — upload videos, push catalogs, manage assets",
5
5
  "type": "module",
6
6
  "bin": {
@@ -9,7 +9,7 @@
9
9
  "scripts": {
10
10
  "build": "tsup",
11
11
  "dev": "tsx src/index.ts",
12
- "prepublishOnly": "npm run build"
12
+ "prepublishOnly": "npm run build && cp -r ../renderer/dist dist/renderer"
13
13
  },
14
14
  "files": [
15
15
  "dist"