@rtsee/ngx 0.0.105 → 0.0.107

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.
@@ -9,3 +9,5 @@
9
9
  @import "./settings";
10
10
  @import "./join-call";
11
11
  @import "./story-details";
12
+ @import "./interactive-story-editor";
13
+ @import "./illustrator";
@@ -0,0 +1,521 @@
1
+ @import "./variables";
2
+
3
+ $ise-border-color: rgba(255, 255, 255, 0.06);
4
+ $ise-border-hover-color: rgba(191, 139, 255, 0.45);
5
+ $ise-card-background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
6
+ $ise-transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
7
+ $ise-thumb-min-width: 168px;
8
+ $ise-slide-thumb-size: 112px;
9
+
10
+ @keyframes rtsee-ise-reveal {
11
+ from {
12
+ opacity: 0;
13
+ transform: translateY(-6px);
14
+ }
15
+ to {
16
+ opacity: 1;
17
+ transform: translateY(0);
18
+ }
19
+ }
20
+
21
+ .rtsee-interactive-story-editor {
22
+ display: flex;
23
+ flex-direction: column;
24
+ gap: $rts-offset-md;
25
+ padding: $rts-offset-md;
26
+ color: $ai-text-color-primary;
27
+ background: $ai-background-gradient;
28
+ border-radius: $ai-default-border-radius;
29
+ min-height: 100%;
30
+
31
+ button {
32
+ font: inherit;
33
+ color: inherit;
34
+ }
35
+
36
+ .rtsee-ise-header {
37
+ padding: $rts-offset-sm $rts-offset-xsm;
38
+
39
+ .rtsee-ise-eyebrow {
40
+ font-size: 0.72rem;
41
+ letter-spacing: 0.14em;
42
+ text-transform: uppercase;
43
+ color: $ai-icon-highlight-color;
44
+ }
45
+
46
+ .rtsee-ise-heading {
47
+ margin: $rts-offset-xsm 0 0;
48
+ font-size: 1.6rem;
49
+ font-weight: 600;
50
+ background: linear-gradient(90deg, #ffffff 0%, #d9c2ff 100%);
51
+ -webkit-background-clip: text;
52
+ background-clip: text;
53
+ -webkit-text-fill-color: transparent;
54
+ }
55
+ }
56
+
57
+ .rtsee-ise-loading,
58
+ .rtsee-ise-hint {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: $rts-offset-sm;
62
+ color: $ai-text-color-secondary;
63
+ margin: 0;
64
+ padding: $rts-offset-md;
65
+ }
66
+
67
+ .rtsee-ise-error {
68
+ padding: $rts-offset-sm $rts-offset-md;
69
+ margin-bottom: $rts-offset-sm;
70
+ border-radius: $ai-default-border-radius;
71
+ background: rgba(255, 92, 120, 0.1);
72
+ border: 1px solid rgba(255, 92, 120, 0.35);
73
+ color: #ff9fb0;
74
+ font-size: 0.9rem;
75
+ }
76
+
77
+ // ---- sections ----
78
+
79
+ .rtsee-ise-section {
80
+ background: rgba(26, 26, 30, 0.82);
81
+ backdrop-filter: blur(14px);
82
+ border: 1px solid $ise-border-color;
83
+ border-radius: $ai-default-border-radius;
84
+ overflow: hidden;
85
+ transition: border-color $ise-transition, box-shadow $ise-transition;
86
+
87
+ &:hover {
88
+ border-color: rgba(191, 139, 255, 0.18);
89
+ }
90
+
91
+ &.rtsee-ise-section--collapsed .rtsee-ise-chevron {
92
+ transform: rotate(-90deg);
93
+ }
94
+ }
95
+
96
+ .rtsee-ise-section-toggle {
97
+ display: flex;
98
+ align-items: center;
99
+ gap: $rts-offset-sm + $rts-offset-xsm;
100
+ width: 100%;
101
+ padding: $rts-offset-md;
102
+ background: transparent;
103
+ border: none;
104
+ cursor: pointer;
105
+ text-align: left;
106
+
107
+ &:hover .rtsee-ise-section-icon {
108
+ background: $ai-icon-highlight-color;
109
+ color: $ai-background-color;
110
+ }
111
+
112
+ &:focus-visible {
113
+ outline: 2px solid $ai-icon-highlight-color;
114
+ outline-offset: -2px;
115
+ }
116
+ }
117
+
118
+ .rtsee-ise-section-icon {
119
+ display: inline-flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ width: 32px;
123
+ height: 32px;
124
+ border-radius: 10px;
125
+ background: $ai-icon-highlight-color-dim;
126
+ color: $ai-icon-highlight-color;
127
+ transition: background $ise-transition, color $ise-transition;
128
+ }
129
+
130
+ .rtsee-ise-section-title {
131
+ margin: 0;
132
+ font-size: 1rem;
133
+ font-weight: 600;
134
+ flex: 1;
135
+ }
136
+
137
+ .rtsee-ise-section-count {
138
+ min-width: 26px;
139
+ padding: 2px $rts-offset-sm;
140
+ border-radius: 999px;
141
+ background: rgba(255, 255, 255, 0.06);
142
+ color: $ai-text-color-secondary;
143
+ font-size: 0.78rem;
144
+ text-align: center;
145
+ }
146
+
147
+ .rtsee-ise-chevron {
148
+ color: $ai-text-color-secondary;
149
+ transition: transform $ise-transition;
150
+ }
151
+
152
+ .rtsee-ise-section-body {
153
+ padding: 0 $rts-offset-md $rts-offset-md;
154
+ animation: rtsee-ise-reveal $ise-transition both;
155
+ }
156
+
157
+ // ---- thumbnails ----
158
+
159
+ .rtsee-ise-thumbs-grid {
160
+ display: grid;
161
+ grid-template-columns: repeat(auto-fill, minmax($ise-thumb-min-width, 1fr));
162
+ gap: $rts-offset-sm + $rts-offset-xsm;
163
+ }
164
+
165
+ %rtsee-ise-card {
166
+ background: $ise-card-background;
167
+ border: 1px solid $ise-border-color;
168
+ border-radius: $ai-default-border-radius;
169
+ cursor: pointer;
170
+ text-align: left;
171
+ transition: transform $ise-transition, border-color $ise-transition, box-shadow $ise-transition;
172
+
173
+ &:hover {
174
+ transform: translateY(-2px);
175
+ border-color: $ise-border-hover-color;
176
+ box-shadow: 0 10px 28px -12px rgba(191, 139, 255, 0.45);
177
+ }
178
+
179
+ &:focus-visible {
180
+ outline: 2px solid $ai-icon-highlight-color;
181
+ outline-offset: 2px;
182
+ }
183
+
184
+ &.rtsee-ise-thumb--active {
185
+ border-color: $ai-icon-highlight-color;
186
+ box-shadow: 0 0 0 1px $ai-icon-highlight-color, 0 12px 32px -14px rgba(191, 139, 255, 0.6);
187
+ }
188
+ }
189
+
190
+ .rtsee-ise-thumb {
191
+ @extend %rtsee-ise-card;
192
+ display: flex;
193
+ flex-direction: column;
194
+ padding: 0;
195
+ overflow: hidden;
196
+
197
+ &:hover .rtsee-ise-thumb-image img {
198
+ transform: scale(1.06);
199
+ }
200
+ }
201
+
202
+ .rtsee-ise-thumb-image {
203
+ position: relative;
204
+ aspect-ratio: 4 / 3;
205
+ overflow: hidden;
206
+ display: flex;
207
+ align-items: center;
208
+ justify-content: center;
209
+ background: radial-gradient(circle at 30% 20%, rgba(191, 139, 255, 0.22), transparent 70%), $ai-background-color;
210
+ color: $ai-icon-highlight-color;
211
+ font-size: 1.6rem;
212
+
213
+ img {
214
+ width: 100%;
215
+ height: 100%;
216
+ object-fit: cover;
217
+ transition: transform 400ms ease;
218
+ }
219
+ }
220
+
221
+ .rtsee-ise-thumb-body {
222
+ display: flex;
223
+ flex-direction: column;
224
+ gap: $rts-offset-xsm;
225
+ padding: $rts-offset-sm + $rts-offset-xsm;
226
+ }
227
+
228
+ .rtsee-ise-thumb-name {
229
+ font-weight: 600;
230
+ font-size: 0.92rem;
231
+ overflow: hidden;
232
+ text-overflow: ellipsis;
233
+ white-space: nowrap;
234
+ }
235
+
236
+ .rtsee-ise-thumb-description {
237
+ font-size: 0.8rem;
238
+ line-height: 1.35;
239
+ color: $ai-text-color-secondary;
240
+ display: -webkit-box;
241
+ -webkit-line-clamp: 3;
242
+ -webkit-box-orient: vertical;
243
+ overflow: hidden;
244
+ }
245
+
246
+ .rtsee-ise-thumb--add {
247
+ align-items: center;
248
+ justify-content: center;
249
+ gap: $rts-offset-sm;
250
+ min-height: 160px;
251
+ border-style: dashed;
252
+ color: $ai-text-color-secondary;
253
+
254
+ i {
255
+ font-size: 1.3rem;
256
+ color: $ai-icon-highlight-color;
257
+ }
258
+
259
+ &:hover {
260
+ color: $ai-text-color-primary;
261
+ }
262
+ }
263
+
264
+ // ---- details & author cards ----
265
+
266
+ .rtsee-ise-details-card,
267
+ .rtsee-ise-author-card {
268
+ @extend %rtsee-ise-card;
269
+ position: relative;
270
+ display: flex;
271
+ gap: $rts-offset-md;
272
+ width: 100%;
273
+ padding: $rts-offset-sm + $rts-offset-xsm;
274
+ align-items: flex-start;
275
+
276
+ &:hover .rtsee-ise-details-edit {
277
+ opacity: 1;
278
+ transform: translateX(0);
279
+ }
280
+ }
281
+
282
+ .rtsee-ise-details-image {
283
+ flex: 0 0 132px;
284
+ aspect-ratio: 4 / 3;
285
+ border-radius: $ai-default-border-radius - 4px;
286
+ overflow: hidden;
287
+ display: flex;
288
+ align-items: center;
289
+ justify-content: center;
290
+ background: $ai-background-color;
291
+ color: $ai-icon-highlight-color;
292
+
293
+ img {
294
+ width: 100%;
295
+ height: 100%;
296
+ object-fit: cover;
297
+ }
298
+ }
299
+
300
+ .rtsee-ise-details-body,
301
+ .rtsee-ise-author-body {
302
+ display: flex;
303
+ flex-direction: column;
304
+ gap: $rts-offset-xsm + 2px;
305
+ flex: 1;
306
+ min-width: 0;
307
+ }
308
+
309
+ .rtsee-ise-details-name {
310
+ font-size: 1.05rem;
311
+ font-weight: 600;
312
+ }
313
+
314
+ .rtsee-ise-details-description {
315
+ margin: 0;
316
+ font-size: 0.86rem;
317
+ line-height: 1.45;
318
+ color: $ai-text-color-secondary;
319
+ }
320
+
321
+ .rtsee-ise-details-edit {
322
+ position: absolute;
323
+ top: $rts-offset-sm + $rts-offset-xsm;
324
+ right: $rts-offset-sm + $rts-offset-xsm;
325
+ color: $ai-icon-highlight-color;
326
+ opacity: 0;
327
+ transform: translateX(-4px);
328
+ transition: opacity $ise-transition, transform $ise-transition;
329
+ }
330
+
331
+ .rtsee-ise-chips {
332
+ display: flex;
333
+ flex-wrap: wrap;
334
+ gap: $rts-offset-xsm + 2px;
335
+ margin-top: $rts-offset-xsm;
336
+ }
337
+
338
+ .rtsee-ise-chip {
339
+ padding: 2px $rts-offset-sm + 2px;
340
+ border-radius: 999px;
341
+ font-size: 0.74rem;
342
+ background: $ai-icon-highlight-color-dim;
343
+ color: #dcc4ff;
344
+ border: 1px solid rgba(191, 139, 255, 0.25);
345
+ }
346
+
347
+ .rtsee-ise-author-card {
348
+ align-items: center;
349
+ }
350
+
351
+ .rtsee-ise-avatar {
352
+ flex: 0 0 56px;
353
+ width: 56px;
354
+ height: 56px;
355
+ border-radius: 50%;
356
+ overflow: hidden;
357
+ display: flex;
358
+ align-items: center;
359
+ justify-content: center;
360
+ background: linear-gradient(135deg, rgba(191, 139, 255, 0.35), rgba(10, 22, 40, 0.9));
361
+ color: #ffffff;
362
+ box-shadow: 0 0 0 2px rgba(191, 139, 255, 0.35);
363
+
364
+ img {
365
+ width: 100%;
366
+ height: 100%;
367
+ object-fit: cover;
368
+ }
369
+ }
370
+
371
+ // ---- slides strip ----
372
+
373
+ .rtsee-ise-slides-strip {
374
+ display: flex;
375
+ gap: $rts-offset-sm + $rts-offset-xsm;
376
+ overflow-x: auto;
377
+ padding: $rts-offset-xsm $rts-offset-xsm $rts-offset-sm;
378
+ scroll-snap-type: x proximity;
379
+ scrollbar-width: thin;
380
+ scrollbar-color: rgba(191, 139, 255, 0.4) transparent;
381
+
382
+ &::-webkit-scrollbar {
383
+ height: 6px;
384
+ }
385
+
386
+ &::-webkit-scrollbar-thumb {
387
+ background: rgba(191, 139, 255, 0.4);
388
+ border-radius: 999px;
389
+ }
390
+ }
391
+
392
+ .rtsee-ise-slide-thumb {
393
+ @extend %rtsee-ise-card;
394
+ position: relative;
395
+ flex: 0 0 $ise-slide-thumb-size;
396
+ height: $ise-slide-thumb-size;
397
+ padding: 0;
398
+ overflow: hidden;
399
+ scroll-snap-align: start;
400
+ display: flex;
401
+ align-items: center;
402
+ justify-content: center;
403
+ color: $ai-icon-highlight-color;
404
+
405
+ img {
406
+ width: 100%;
407
+ height: 100%;
408
+ object-fit: cover;
409
+ transition: transform 400ms ease;
410
+ }
411
+
412
+ &:hover img {
413
+ transform: scale(1.08);
414
+ }
415
+
416
+ &.rtsee-ise-slide-thumb--add {
417
+ border-style: dashed;
418
+
419
+ &:disabled {
420
+ opacity: 0.5;
421
+ cursor: progress;
422
+ }
423
+ }
424
+ }
425
+
426
+ .rtsee-ise-slide-number {
427
+ position: absolute;
428
+ left: 6px;
429
+ bottom: 6px;
430
+ min-width: 22px;
431
+ padding: 1px 6px;
432
+ border-radius: 999px;
433
+ font-size: 0.7rem;
434
+ background: rgba(14, 14, 16, 0.78);
435
+ color: $ai-text-color-primary;
436
+ backdrop-filter: blur(6px);
437
+ }
438
+
439
+ // ---- expanded forms ----
440
+
441
+ .rtsee-ise-expanded {
442
+ margin-top: $rts-offset-md;
443
+ padding: $rts-offset-md;
444
+ border-radius: $ai-default-border-radius;
445
+ background: rgba(14, 14, 16, 0.7);
446
+ border: 1px solid rgba(191, 139, 255, 0.22);
447
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
448
+ animation: rtsee-ise-reveal $ise-transition both;
449
+ }
450
+
451
+ .rtsee-ise-expanded-header {
452
+ display: flex;
453
+ align-items: center;
454
+ justify-content: space-between;
455
+ margin-bottom: $rts-offset-sm;
456
+
457
+ h4 {
458
+ margin: 0;
459
+ font-size: 1rem;
460
+ font-weight: 600;
461
+ }
462
+ }
463
+
464
+ .rtsee-ise-subheading {
465
+ margin: 0 0 $rts-offset-sm;
466
+ font-size: 1rem;
467
+ }
468
+
469
+ .rtsee-ise-icon-button {
470
+ width: 32px;
471
+ height: 32px;
472
+ border-radius: 50%;
473
+ border: none;
474
+ background: rgba(255, 255, 255, 0.05);
475
+ cursor: pointer;
476
+ transition: background $ise-transition, transform $ise-transition;
477
+
478
+ &:hover {
479
+ background: $ai-icon-highlight-color-dim;
480
+ transform: rotate(90deg);
481
+ }
482
+ }
483
+
484
+ .rtsee-ise-actions {
485
+ display: flex;
486
+ flex-wrap: wrap;
487
+ align-items: center;
488
+ gap: $rts-offset-sm;
489
+ margin-top: $rts-offset-sm;
490
+ }
491
+
492
+ .rtsee-ise-actions-spacer {
493
+ flex: 1;
494
+ }
495
+
496
+ @media (max-width: $rts-break-md) {
497
+ padding: $rts-offset-sm;
498
+
499
+ .rtsee-ise-thumbs-grid {
500
+ grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
501
+ }
502
+
503
+ .rtsee-ise-details-card {
504
+ flex-direction: column;
505
+
506
+ .rtsee-ise-details-image {
507
+ flex-basis: auto;
508
+ width: 100%;
509
+ }
510
+ }
511
+ }
512
+
513
+ @media (prefers-reduced-motion: reduce) {
514
+ *,
515
+ *::before,
516
+ *::after {
517
+ animation: none !important;
518
+ transition: none !important;
519
+ }
520
+ }
521
+ }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.0.105",
2
+ "version": "0.0.107",
3
3
  "name": "@rtsee/ngx",
4
4
  "module": "./dist/ngx/fesm2022/rtsee-ngx.mjs",
5
5
  "types": "./dist/ngx/index.d.ts",
@@ -40,15 +40,15 @@
40
40
  "@angular/platform-browser-dynamic": "^20.1.2",
41
41
  "@angular/router": "^20.1.2",
42
42
  "@primeuix/themes": "^1.2.3",
43
- "@rtsee/common": "^0.0.76",
44
- "@rtsee/conference": "^0.0.77",
45
- "@rtsee/core": "^0.0.120",
46
- "@rtsee/events-dashboard": "^0.0.110",
47
- "@rtsee/factory": "^0.0.119",
48
- "@rtsee/messenger": "^0.0.110",
49
- "@rtsee/presentation": "^0.0.109",
50
- "@rtsee/signaling-client": "^0.0.123",
51
- "@rtsee/utilities-ui": "^0.0.41",
43
+ "@rtsee/common": "^0.0.78",
44
+ "@rtsee/conference": "^0.0.79",
45
+ "@rtsee/core": "^0.0.122",
46
+ "@rtsee/events-dashboard": "^0.0.112",
47
+ "@rtsee/factory": "^0.0.121",
48
+ "@rtsee/messenger": "^0.0.112",
49
+ "@rtsee/presentation": "^0.0.111",
50
+ "@rtsee/signaling-client": "^0.0.125",
51
+ "@rtsee/utilities-ui": "^0.0.43",
52
52
  "@stripe/stripe-js": "^8.6.1",
53
53
  "@types/gtag.js": "^0.0.20",
54
54
  "@types/node": "~24.0.14",
@@ -71,5 +71,5 @@
71
71
  "publishConfig": {
72
72
  "access": "public"
73
73
  },
74
- "gitHead": "901fd61fa4b5b985e199a6e74626dc14aa549d10"
74
+ "gitHead": "c1b8716a064376c3640d09099d6c498311b22aba"
75
75
  }