@blinq_ai/widget 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1198 @@
1
+ import {
2
+ init,
3
+ initFromConfig
4
+ } from "./chunk-2BSH3PRA.js";
5
+
6
+ // src/embed-styles.ts
7
+ var EMBED_WIDGET_STYLES = `
8
+ :host {
9
+ all: initial;
10
+ display: block;
11
+ position: static;
12
+ color-scheme: light;
13
+ }
14
+
15
+ *, *::before, *::after {
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ button,
20
+ input {
21
+ font: inherit;
22
+ }
23
+
24
+ .blinq-shell {
25
+ position: fixed;
26
+ bottom: 24px;
27
+ z-index: 2147483647;
28
+ display: flex;
29
+ flex-direction: column;
30
+ gap: 12px;
31
+ width: 420px;
32
+ max-width: calc(100vw - 24px);
33
+ font-family:
34
+ "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
35
+ "Segoe UI", sans-serif;
36
+ pointer-events: none;
37
+ --blinq-accent: #111111;
38
+ --blinq-background: #ffffff;
39
+ --blinq-panel: rgba(255, 255, 255, 0.98);
40
+ --blinq-panel-soft: #fafafa;
41
+ --blinq-surface: #ffffff;
42
+ --blinq-surface-soft: #f5f5f5;
43
+ --blinq-surface-muted: #ededed;
44
+ --blinq-border: rgba(17, 17, 17, 0.08);
45
+ --blinq-border-strong: rgba(17, 17, 17, 0.18);
46
+ --blinq-text: #111111;
47
+ --blinq-text-soft: #262626;
48
+ --blinq-text-muted: #737373;
49
+ --blinq-user-bubble: #111111;
50
+ --blinq-user-text: #ffffff;
51
+ --blinq-shadow: 0 24px 60px rgba(17, 17, 17, 0.12);
52
+ }
53
+
54
+ .blinq-shell[data-side="left"] {
55
+ left: 24px;
56
+ align-items: flex-start;
57
+ }
58
+
59
+ .blinq-shell[data-side="right"] {
60
+ right: 24px;
61
+ align-items: flex-end;
62
+ }
63
+
64
+ .blinq-panel,
65
+ .blinq-launcher {
66
+ pointer-events: auto;
67
+ }
68
+
69
+ .blinq-launcher {
70
+ display: inline-flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ gap: 12px;
74
+ min-height: 58px;
75
+ padding: 0 18px;
76
+ border: 1px solid var(--blinq-border);
77
+ border-radius: 20px;
78
+ background: #ffffff;
79
+ color: var(--blinq-text);
80
+ box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
81
+ backdrop-filter: blur(18px);
82
+ -webkit-backdrop-filter: blur(18px);
83
+ transition:
84
+ transform 180ms ease,
85
+ box-shadow 180ms ease,
86
+ border-color 180ms ease;
87
+ }
88
+
89
+ .blinq-launcher:hover {
90
+ transform: translateY(-2px);
91
+ border-color: rgba(17, 17, 17, 0.16);
92
+ box-shadow: 0 22px 46px rgba(17, 17, 17, 0.16);
93
+ }
94
+
95
+ .blinq-launcher-badge {
96
+ display: grid;
97
+ place-items: center;
98
+ width: 34px;
99
+ height: 34px;
100
+ border-radius: 12px;
101
+ background: #111111;
102
+ color: #ffffff;
103
+ transition:
104
+ transform 180ms ease,
105
+ box-shadow 180ms ease;
106
+ }
107
+
108
+ .blinq-launcher:hover .blinq-launcher-badge {
109
+ transform: scale(1.06);
110
+ box-shadow: 0 10px 24px rgba(17, 17, 17, 0.22);
111
+ }
112
+
113
+ .blinq-launcher-icon-only {
114
+ width: 58px;
115
+ min-width: 58px;
116
+ padding: 0;
117
+ border-radius: 18px;
118
+ }
119
+
120
+ .blinq-launcher-agent {
121
+ overflow: visible;
122
+ }
123
+
124
+ .blinq-agent-orbit {
125
+ stroke: rgba(255, 255, 255, 0.42);
126
+ stroke-width: 1.3;
127
+ stroke-dasharray: 2.6 2.6;
128
+ transform-origin: center;
129
+ transition: opacity 180ms ease;
130
+ }
131
+
132
+ .blinq-agent-spark,
133
+ .blinq-agent-head,
134
+ .blinq-agent-antenna,
135
+ .blinq-agent-antenna-dot,
136
+ .blinq-agent-neck {
137
+ transform-origin: center;
138
+ }
139
+
140
+ .blinq-launcher:hover .blinq-agent-orbit {
141
+ animation: blinq-agent-spin 2.2s linear infinite;
142
+ }
143
+
144
+ .blinq-launcher:hover .blinq-agent-spark {
145
+ animation: blinq-agent-spark 1.1s ease-in-out infinite;
146
+ }
147
+
148
+ .blinq-launcher:hover .blinq-agent-head,
149
+ .blinq-launcher:hover .blinq-agent-neck,
150
+ .blinq-launcher:hover .blinq-agent-antenna,
151
+ .blinq-launcher:hover .blinq-agent-antenna-dot {
152
+ animation: blinq-agent-bob 1.35s ease-in-out infinite;
153
+ }
154
+
155
+ .blinq-launcher-copy {
156
+ display: flex;
157
+ flex-direction: column;
158
+ align-items: flex-start;
159
+ line-height: 1.1;
160
+ }
161
+
162
+ .blinq-launcher-label {
163
+ font-size: 11px;
164
+ font-weight: 700;
165
+ letter-spacing: 0.08em;
166
+ text-transform: uppercase;
167
+ color: var(--blinq-text-muted);
168
+ }
169
+
170
+ .blinq-launcher-title {
171
+ margin-top: 3px;
172
+ font-size: 14px;
173
+ font-weight: 600;
174
+ color: var(--blinq-text);
175
+ }
176
+
177
+ .blinq-panel {
178
+ width: 100%;
179
+ max-width: 420px;
180
+ border: 1px solid var(--blinq-border);
181
+ border-radius: 28px;
182
+ overflow: hidden;
183
+ background: #ffffff;
184
+ box-shadow: var(--blinq-shadow);
185
+ backdrop-filter: blur(24px);
186
+ -webkit-backdrop-filter: blur(24px);
187
+ }
188
+
189
+ .blinq-header {
190
+ padding: 16px;
191
+ border-bottom: 1px solid var(--blinq-border);
192
+ background: #ffffff;
193
+ }
194
+
195
+ .blinq-status-line {
196
+ margin-top: 10px;
197
+ font-size: 12px;
198
+ line-height: 1.45;
199
+ color: var(--blinq-text-muted);
200
+ }
201
+
202
+ .blinq-header-row {
203
+ display: flex;
204
+ align-items: center;
205
+ justify-content: space-between;
206
+ gap: 12px;
207
+ }
208
+
209
+ .blinq-header-copy {
210
+ min-width: 0;
211
+ flex: 1;
212
+ }
213
+
214
+ .blinq-header-badges {
215
+ display: flex;
216
+ flex-wrap: wrap;
217
+ gap: 8px;
218
+ }
219
+
220
+ .blinq-heading-row {
221
+ margin-top: 14px;
222
+ display: flex;
223
+ align-items: flex-start;
224
+ justify-content: space-between;
225
+ gap: 12px;
226
+ }
227
+
228
+ .blinq-heading {
229
+ font-size: 16px;
230
+ font-weight: 700;
231
+ letter-spacing: -0.02em;
232
+ color: var(--blinq-text);
233
+ }
234
+
235
+ .blinq-subheading {
236
+ margin-top: 6px;
237
+ max-width: 320px;
238
+ font-size: 13px;
239
+ line-height: 1.45;
240
+ color: var(--blinq-text-muted);
241
+ }
242
+
243
+ .blinq-statusbar {
244
+ margin-top: 14px;
245
+ display: flex;
246
+ align-items: center;
247
+ justify-content: space-between;
248
+ gap: 10px;
249
+ flex-wrap: wrap;
250
+ }
251
+
252
+ .blinq-status {
253
+ display: inline-flex;
254
+ align-items: center;
255
+ min-height: 34px;
256
+ padding: 0 12px;
257
+ border-radius: 999px;
258
+ border: 1px solid var(--blinq-border);
259
+ background: #f8f8f8;
260
+ color: var(--blinq-text-soft);
261
+ font-size: 12px;
262
+ line-height: 1.45;
263
+ }
264
+
265
+ .blinq-runtime-chip {
266
+ display: inline-flex;
267
+ align-items: center;
268
+ min-height: 34px;
269
+ padding: 0 12px;
270
+ border-radius: 999px;
271
+ background: #111111;
272
+ border: 1px solid #111111;
273
+ color: #ffffff;
274
+ font-size: 12px;
275
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
276
+ }
277
+
278
+ .blinq-workspace {
279
+ display: grid;
280
+ grid-template-columns: 112px minmax(0, 1fr);
281
+ min-height: 430px;
282
+ }
283
+
284
+ .blinq-sidebar {
285
+ display: flex;
286
+ flex-direction: column;
287
+ gap: 14px;
288
+ padding: 16px;
289
+ border-right: 1px solid var(--blinq-border);
290
+ background: #fafafa;
291
+ }
292
+
293
+ .blinq-sidebar-group {
294
+ display: flex;
295
+ flex-direction: column;
296
+ gap: 8px;
297
+ }
298
+
299
+ .blinq-tab-trigger {
300
+ display: flex;
301
+ align-items: center;
302
+ gap: 10px;
303
+ width: 100%;
304
+ min-height: 56px;
305
+ padding: 10px;
306
+ border: 1px solid transparent;
307
+ border-radius: 18px;
308
+ background: transparent;
309
+ color: var(--blinq-text-soft);
310
+ cursor: pointer;
311
+ transition:
312
+ background 120ms ease,
313
+ border-color 120ms ease,
314
+ color 120ms ease,
315
+ transform 120ms ease;
316
+ }
317
+
318
+ .blinq-tab-trigger:hover {
319
+ background: rgba(255,255,255,0.9);
320
+ border-color: var(--blinq-border);
321
+ }
322
+
323
+ .blinq-tab-trigger-active {
324
+ background: #ffffff;
325
+ border-color: rgba(17, 17, 17, 0.16);
326
+ box-shadow: 0 10px 24px rgba(17, 17, 17, 0.08);
327
+ color: var(--blinq-text);
328
+ }
329
+
330
+ .blinq-tab-icon {
331
+ display: grid;
332
+ place-items: center;
333
+ width: 32px;
334
+ height: 32px;
335
+ border-radius: 12px;
336
+ background: rgba(15, 23, 42, 0.04);
337
+ color: currentColor;
338
+ flex: 0 0 auto;
339
+ }
340
+
341
+ .blinq-tab-copy {
342
+ display: flex;
343
+ flex-direction: column;
344
+ min-width: 0;
345
+ align-items: flex-start;
346
+ text-align: left;
347
+ }
348
+
349
+ .blinq-tab-label {
350
+ font-size: 13px;
351
+ font-weight: 600;
352
+ }
353
+
354
+ .blinq-tab-caption {
355
+ margin-top: 2px;
356
+ font-size: 11px;
357
+ color: var(--blinq-text-muted);
358
+ }
359
+
360
+ .blinq-tab-count {
361
+ margin-left: auto;
362
+ min-width: 22px;
363
+ height: 22px;
364
+ padding: 0 6px;
365
+ display: inline-flex;
366
+ align-items: center;
367
+ justify-content: center;
368
+ border-radius: 999px;
369
+ background: rgba(15, 23, 42, 0.06);
370
+ color: var(--blinq-text-soft);
371
+ font-size: 11px;
372
+ font-weight: 700;
373
+ }
374
+
375
+ .blinq-separator {
376
+ height: 1px;
377
+ background: var(--blinq-border);
378
+ }
379
+
380
+ .blinq-sidebar-card {
381
+ gap: 12px;
382
+ border-radius: 18px;
383
+ background: rgba(255,255,255,0.94);
384
+ box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
385
+ }
386
+
387
+ .blinq-sidebar-card-header {
388
+ padding: 14px 14px 0;
389
+ }
390
+
391
+ .blinq-sidebar-card-content {
392
+ padding: 0 14px 14px;
393
+ display: flex;
394
+ flex-direction: column;
395
+ gap: 10px;
396
+ }
397
+
398
+ .blinq-stat-line {
399
+ display: flex;
400
+ align-items: center;
401
+ justify-content: space-between;
402
+ gap: 8px;
403
+ font-size: 12px;
404
+ color: var(--blinq-text-muted);
405
+ }
406
+
407
+ .blinq-stat-line strong {
408
+ color: var(--blinq-text);
409
+ font-size: 12px;
410
+ }
411
+
412
+ .blinq-main {
413
+ display: flex;
414
+ flex-direction: column;
415
+ min-width: 0;
416
+ background: transparent;
417
+ }
418
+
419
+ .blinq-main-toolbar {
420
+ padding: 16px 18px 12px;
421
+ display: flex;
422
+ flex-direction: column;
423
+ gap: 10px;
424
+ }
425
+
426
+ .blinq-toolbar-label {
427
+ font-size: 11px;
428
+ font-weight: 700;
429
+ letter-spacing: 0.08em;
430
+ text-transform: uppercase;
431
+ color: var(--blinq-text-muted);
432
+ }
433
+
434
+ .blinq-prompt-row {
435
+ display: flex;
436
+ gap: 8px;
437
+ flex-wrap: wrap;
438
+ }
439
+
440
+ .blinq-prompt-chip {
441
+ padding: 8px 12px;
442
+ border-radius: 999px;
443
+ border: 1px solid var(--blinq-border);
444
+ background: rgba(255,255,255,0.95);
445
+ color: var(--blinq-text-soft);
446
+ font-size: 12px;
447
+ font-weight: 600;
448
+ cursor: pointer;
449
+ transition:
450
+ background 120ms ease,
451
+ border-color 120ms ease,
452
+ color 120ms ease,
453
+ transform 120ms ease;
454
+ }
455
+
456
+ .blinq-prompt-chip:hover {
457
+ border-color: rgba(17, 17, 17, 0.16);
458
+ color: #111111;
459
+ background: #f7f7f7;
460
+ }
461
+
462
+ .blinq-scroll {
463
+ display: flex;
464
+ flex-direction: column;
465
+ gap: 12px;
466
+ min-height: 0;
467
+ height: 100%;
468
+ max-height: 420px;
469
+ padding: 16px;
470
+ overflow-y: auto;
471
+ }
472
+
473
+ .blinq-thread {
474
+ min-height: 0;
475
+ }
476
+
477
+ .blinq-thread-viewport {
478
+ width: 100%;
479
+ }
480
+
481
+ .blinq-scroll-actions,
482
+ .blinq-scroll-context {
483
+ padding-top: 18px;
484
+ }
485
+
486
+ .blinq-scroll::-webkit-scrollbar {
487
+ width: 8px;
488
+ }
489
+
490
+ .blinq-scroll::-webkit-scrollbar-thumb {
491
+ background: rgba(148, 163, 184, 0.25);
492
+ border-radius: 999px;
493
+ }
494
+
495
+ .blinq-message {
496
+ max-width: 88%;
497
+ border-radius: 20px;
498
+ padding: 13px 14px;
499
+ font-size: 14px;
500
+ line-height: 1.55;
501
+ white-space: pre-wrap;
502
+ border: 1px solid var(--blinq-border);
503
+ box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
504
+ }
505
+
506
+ .blinq-message[data-role="assistant"] {
507
+ align-self: flex-start;
508
+ background: rgba(255,255,255,0.98);
509
+ color: var(--blinq-text);
510
+ }
511
+
512
+ .blinq-message[data-kind="artifact"] {
513
+ max-width: 100%;
514
+ width: 100%;
515
+ padding: 0;
516
+ border: 0;
517
+ background: transparent;
518
+ box-shadow: none;
519
+ }
520
+
521
+ .blinq-message[data-role="user"] {
522
+ align-self: flex-end;
523
+ background: var(--blinq-user-bubble);
524
+ border-color: rgba(17, 17, 17, 0.22);
525
+ color: var(--blinq-user-text);
526
+ }
527
+
528
+ .blinq-message-copy {
529
+ display: block;
530
+ }
531
+
532
+ .blinq-message-copy-reveal {
533
+ animation: blinq-blur-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
534
+ will-change: opacity, transform, filter;
535
+ }
536
+
537
+ .blinq-thinking-card {
538
+ align-self: flex-start;
539
+ background: rgba(255,255,255,0.98);
540
+ color: var(--blinq-text);
541
+ }
542
+
543
+ .blinq-thinking {
544
+ display: inline-flex;
545
+ align-items: center;
546
+ gap: 10px;
547
+ min-height: 20px;
548
+ font-size: 13px;
549
+ color: var(--blinq-text-muted);
550
+ opacity: 1;
551
+ transform: translateY(0);
552
+ transition:
553
+ opacity 180ms ease,
554
+ transform 180ms ease;
555
+ }
556
+
557
+ .blinq-thinking-dots {
558
+ display: inline-flex;
559
+ align-items: center;
560
+ gap: 4px;
561
+ }
562
+
563
+ .blinq-thinking-dots > span {
564
+ width: 6px;
565
+ height: 6px;
566
+ border-radius: 999px;
567
+ background: #111111;
568
+ animation: blinq-thinking-pulse 1.1s ease-in-out infinite;
569
+ }
570
+
571
+ .blinq-thinking-dots > span:nth-child(2) {
572
+ animation-delay: 120ms;
573
+ }
574
+
575
+ .blinq-thinking-dots > span:nth-child(3) {
576
+ animation-delay: 240ms;
577
+ }
578
+
579
+ .blinq-card {
580
+ display: flex;
581
+ flex-direction: column;
582
+ gap: 14px;
583
+ border: 1px solid var(--blinq-border);
584
+ border-radius: 20px;
585
+ background: var(--blinq-surface);
586
+ color: var(--blinq-text);
587
+ box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
588
+ }
589
+
590
+ .blinq-card-header {
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: 7px;
594
+ padding: 16px 16px 0;
595
+ }
596
+
597
+ .blinq-card-title {
598
+ font-size: 15px;
599
+ font-weight: 700;
600
+ color: var(--blinq-text);
601
+ }
602
+
603
+ .blinq-card-description {
604
+ font-size: 13px;
605
+ line-height: 1.5;
606
+ color: var(--blinq-text-muted);
607
+ }
608
+
609
+ .blinq-card-content {
610
+ padding: 0 16px 16px;
611
+ }
612
+
613
+ .blinq-action-card {
614
+ align-self: stretch;
615
+ gap: 0;
616
+ }
617
+
618
+ .blinq-plan-card {
619
+ border-color: var(--blinq-border-strong);
620
+ }
621
+
622
+ .blinq-plan-step {
623
+ display: flex;
624
+ align-items: flex-start;
625
+ gap: 10px;
626
+ padding: 10px 0;
627
+ border-top: 1px solid rgba(17, 17, 17, 0.06);
628
+ }
629
+
630
+ .blinq-plan-step:first-child {
631
+ border-top: 0;
632
+ padding-top: 0;
633
+ }
634
+
635
+ .blinq-plan-step-index {
636
+ display: inline-flex;
637
+ align-items: center;
638
+ justify-content: center;
639
+ width: 22px;
640
+ height: 22px;
641
+ border-radius: 999px;
642
+ background: #111111;
643
+ color: #ffffff;
644
+ font-size: 11px;
645
+ font-weight: 700;
646
+ flex: none;
647
+ }
648
+
649
+ .blinq-plan-step-copy {
650
+ min-width: 0;
651
+ display: flex;
652
+ flex-direction: column;
653
+ gap: 3px;
654
+ font-size: 13px;
655
+ color: var(--blinq-text);
656
+ }
657
+
658
+ .blinq-plan-step-meta {
659
+ font-size: 12px;
660
+ color: var(--blinq-text-muted);
661
+ }
662
+
663
+ .blinq-plan-step[data-current="true"] .blinq-plan-step-index {
664
+ box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.08);
665
+ }
666
+
667
+ .blinq-plan-step[data-status="completed"] .blinq-plan-step-index {
668
+ background: #111111;
669
+ }
670
+
671
+ .blinq-plan-step[data-status="failed"] .blinq-plan-step-index,
672
+ .blinq-plan-step[data-status="cancelled"] .blinq-plan-step-index {
673
+ background: #525252;
674
+ }
675
+
676
+ .blinq-action-meta-row {
677
+ display: flex;
678
+ align-items: center;
679
+ justify-content: space-between;
680
+ gap: 8px;
681
+ flex-wrap: wrap;
682
+ }
683
+
684
+ .blinq-action-details {
685
+ margin-top: 8px;
686
+ }
687
+
688
+ .blinq-action-details > summary {
689
+ cursor: pointer;
690
+ font-size: 12px;
691
+ font-weight: 600;
692
+ color: #111111;
693
+ list-style: none;
694
+ }
695
+
696
+ .blinq-action-details > summary::-webkit-details-marker {
697
+ display: none;
698
+ }
699
+
700
+ .blinq-code {
701
+ margin-top: 10px;
702
+ padding: 10px 12px;
703
+ border-radius: 14px;
704
+ background: var(--blinq-surface-soft);
705
+ border: 1px solid var(--blinq-border);
706
+ font-size: 12px;
707
+ line-height: 1.45;
708
+ white-space: pre-wrap;
709
+ color: var(--blinq-text-soft);
710
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
711
+ }
712
+
713
+ .blinq-code-compact {
714
+ margin-top: 12px;
715
+ }
716
+
717
+ .blinq-action-state {
718
+ margin-top: 12px;
719
+ font-size: 12px;
720
+ color: var(--blinq-text-muted);
721
+ }
722
+
723
+ .blinq-action-state[data-state="approved"] {
724
+ color: #111111;
725
+ }
726
+
727
+ .blinq-action-state[data-state="declined"] {
728
+ color: var(--blinq-text-muted);
729
+ }
730
+
731
+ .blinq-actions {
732
+ display: flex;
733
+ gap: 10px;
734
+ margin-top: 14px;
735
+ }
736
+
737
+ .blinq-actions > * {
738
+ flex: 1;
739
+ }
740
+
741
+ .blinq-context-grid {
742
+ display: grid;
743
+ grid-template-columns: repeat(2, minmax(0, 1fr));
744
+ gap: 12px;
745
+ }
746
+
747
+ .blinq-context-card {
748
+ min-height: 150px;
749
+ }
750
+
751
+ .blinq-context-card-wide {
752
+ grid-column: 1 / -1;
753
+ }
754
+
755
+ .blinq-context-copy {
756
+ font-size: 13px;
757
+ line-height: 1.5;
758
+ color: var(--blinq-text-soft);
759
+ }
760
+
761
+ .blinq-empty-card {
762
+ min-height: 180px;
763
+ justify-content: center;
764
+ }
765
+
766
+ .blinq-badge-pill {
767
+ display: inline-flex;
768
+ align-items: center;
769
+ justify-content: center;
770
+ min-height: 28px;
771
+ padding: 0 10px;
772
+ border-radius: 999px;
773
+ font-size: 11px;
774
+ font-weight: 700;
775
+ letter-spacing: 0.06em;
776
+ text-transform: uppercase;
777
+ }
778
+
779
+ .blinq-badge-pill-default {
780
+ background: rgba(15, 23, 42, 0.05);
781
+ color: var(--blinq-text-soft);
782
+ }
783
+
784
+ .blinq-badge-pill-outline {
785
+ border: 1px solid var(--blinq-border);
786
+ color: var(--blinq-text-muted);
787
+ background: rgba(255,255,255,0.84);
788
+ }
789
+
790
+ .blinq-badge-pill-soft {
791
+ background: #f5f5f5;
792
+ color: #111111;
793
+ }
794
+
795
+ .blinq-badge-pill-accent {
796
+ background: #111111;
797
+ color: #ffffff;
798
+ }
799
+
800
+ .blinq-composer {
801
+ display: flex;
802
+ flex-direction: column;
803
+ gap: 10px;
804
+ padding: 0 16px 16px;
805
+ border-top: 1px solid var(--blinq-border);
806
+ background: #ffffff;
807
+ }
808
+
809
+ .blinq-composer-copy {
810
+ display: flex;
811
+ flex-direction: column;
812
+ gap: 4px;
813
+ }
814
+
815
+ .blinq-composer-title {
816
+ font-size: 12px;
817
+ font-weight: 700;
818
+ letter-spacing: 0.08em;
819
+ text-transform: uppercase;
820
+ color: var(--blinq-text-muted);
821
+ }
822
+
823
+ .blinq-composer-hint {
824
+ font-size: 13px;
825
+ line-height: 1.45;
826
+ color: var(--blinq-text-muted);
827
+ }
828
+
829
+ .blinq-composer-controls {
830
+ display: flex;
831
+ padding-top: 14px;
832
+ }
833
+
834
+ .blinq-button {
835
+ display: inline-flex;
836
+ align-items: center;
837
+ justify-content: center;
838
+ gap: 8px;
839
+ border-radius: 14px;
840
+ border: 1px solid transparent;
841
+ font-size: 14px;
842
+ font-weight: 600;
843
+ transition:
844
+ background 120ms ease,
845
+ border-color 120ms ease,
846
+ color 120ms ease,
847
+ opacity 120ms ease,
848
+ transform 120ms ease;
849
+ cursor: pointer;
850
+ outline: none;
851
+ }
852
+
853
+ .blinq-button:disabled {
854
+ opacity: 0.55;
855
+ cursor: not-allowed;
856
+ }
857
+
858
+ .blinq-button:focus-visible,
859
+ .blinq-input:focus-visible,
860
+ .blinq-tab-trigger:focus-visible,
861
+ .blinq-prompt-chip:focus-visible {
862
+ box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
863
+ outline: none;
864
+ }
865
+
866
+ .blinq-button-default {
867
+ background: #111111;
868
+ color: white;
869
+ box-shadow: 0 12px 24px rgba(17, 17, 17, 0.16);
870
+ }
871
+
872
+ .blinq-button-default:hover:not(:disabled) {
873
+ filter: brightness(1.04);
874
+ }
875
+
876
+ .blinq-button-outline {
877
+ border-color: var(--blinq-border-strong);
878
+ background: #ffffff;
879
+ color: var(--blinq-text);
880
+ }
881
+
882
+ .blinq-button-outline:hover:not(:disabled),
883
+ .blinq-button-ghost:hover:not(:disabled) {
884
+ background: var(--blinq-surface-soft);
885
+ }
886
+
887
+ .blinq-button-ghost {
888
+ border-color: var(--blinq-border);
889
+ background: rgba(255,255,255,0.76);
890
+ color: var(--blinq-text-soft);
891
+ }
892
+
893
+ .blinq-button-destructive {
894
+ background: #111111;
895
+ border-color: #111111;
896
+ color: #ffffff;
897
+ }
898
+
899
+ .blinq-button-md {
900
+ height: 44px;
901
+ padding: 0 16px;
902
+ }
903
+
904
+ .blinq-button-sm {
905
+ height: 36px;
906
+ padding: 0 12px;
907
+ font-size: 13px;
908
+ }
909
+
910
+ .blinq-button-icon {
911
+ width: 44px;
912
+ height: 44px;
913
+ padding: 0;
914
+ }
915
+
916
+ .blinq-button-icon-sm {
917
+ width: 36px;
918
+ height: 36px;
919
+ padding: 0;
920
+ border-radius: 12px;
921
+ }
922
+
923
+ .blinq-input {
924
+ width: 100%;
925
+ min-width: 0;
926
+ height: 52px;
927
+ border-radius: 18px;
928
+ border: 1px solid var(--blinq-border-strong);
929
+ padding: 0 48px 0 44px;
930
+ background: #ffffff;
931
+ color: var(--blinq-text);
932
+ outline: none;
933
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
934
+ }
935
+
936
+ .blinq-input-shell {
937
+ position: relative;
938
+ width: 100%;
939
+ }
940
+
941
+ .blinq-recording-input {
942
+ display: flex;
943
+ align-items: center;
944
+ gap: 12px;
945
+ width: 100%;
946
+ min-width: 0;
947
+ height: 52px;
948
+ padding: 0 48px 0 44px;
949
+ border-radius: 18px;
950
+ border: 1px solid var(--blinq-border-strong);
951
+ background: #ffffff;
952
+ color: var(--blinq-text);
953
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
954
+ }
955
+
956
+ .blinq-recording-time {
957
+ flex: 0 0 auto;
958
+ min-width: 42px;
959
+ font-size: 12px;
960
+ font-weight: 700;
961
+ letter-spacing: 0.04em;
962
+ color: var(--blinq-text-soft);
963
+ font-variant-numeric: tabular-nums;
964
+ }
965
+
966
+ .blinq-recording-waveform {
967
+ display: flex;
968
+ align-items: flex-end;
969
+ gap: 3px;
970
+ flex: 1 1 auto;
971
+ min-width: 0;
972
+ height: 24px;
973
+ overflow: hidden;
974
+ }
975
+
976
+ .blinq-recording-waveform-bar {
977
+ width: 3px;
978
+ min-width: 3px;
979
+ height: 100%;
980
+ border-radius: 999px;
981
+ background: rgba(17, 17, 17, 0.22);
982
+ transform-origin: center bottom;
983
+ transition:
984
+ transform 110ms ease,
985
+ background 110ms ease;
986
+ }
987
+
988
+ .blinq-input-mic {
989
+ position: absolute;
990
+ left: 8px;
991
+ top: 50%;
992
+ transform: translateY(-50%);
993
+ z-index: 2;
994
+ }
995
+
996
+ .blinq-input-send {
997
+ position: absolute;
998
+ right: 8px;
999
+ top: 50%;
1000
+ transform: translateY(-50%);
1001
+ z-index: 2;
1002
+ width: 36px;
1003
+ height: 36px;
1004
+ min-width: 36px;
1005
+ border-radius: 12px;
1006
+ }
1007
+
1008
+ .blinq-text-animate {
1009
+ display: block;
1010
+ }
1011
+
1012
+ .blinq-text-animate-blur-in .blinq-text-segment {
1013
+ display: inline-block;
1014
+ opacity: 0;
1015
+ filter: blur(8px);
1016
+ animation: blinq-blur-in 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
1017
+ }
1018
+
1019
+ @keyframes blinq-thinking-pulse {
1020
+ 0%, 100% {
1021
+ opacity: 0.28;
1022
+ transform: translateY(0);
1023
+ }
1024
+
1025
+ 50% {
1026
+ opacity: 1;
1027
+ transform: translateY(-2px);
1028
+ }
1029
+ }
1030
+
1031
+ @keyframes blinq-agent-spin {
1032
+ from {
1033
+ transform: rotate(0deg);
1034
+ }
1035
+
1036
+ to {
1037
+ transform: rotate(360deg);
1038
+ }
1039
+ }
1040
+
1041
+ @keyframes blinq-agent-bob {
1042
+ 0%, 100% {
1043
+ transform: translateY(0);
1044
+ }
1045
+
1046
+ 50% {
1047
+ transform: translateY(-0.8px);
1048
+ }
1049
+ }
1050
+
1051
+ @keyframes blinq-agent-spark {
1052
+ 0%, 100% {
1053
+ transform: scale(1);
1054
+ opacity: 0.72;
1055
+ }
1056
+
1057
+ 50% {
1058
+ transform: scale(1.25);
1059
+ opacity: 1;
1060
+ }
1061
+ }
1062
+
1063
+ @keyframes blinq-blur-in {
1064
+ 0% {
1065
+ opacity: 0;
1066
+ filter: blur(8px);
1067
+ transform: translateY(4px);
1068
+ }
1069
+
1070
+ 100% {
1071
+ opacity: 1;
1072
+ filter: blur(0);
1073
+ transform: translateY(0);
1074
+ }
1075
+ }
1076
+
1077
+ .blinq-input::placeholder {
1078
+ color: var(--blinq-text-muted);
1079
+ }
1080
+
1081
+ @media (max-width: 720px) {
1082
+ .blinq-shell {
1083
+ bottom: 12px;
1084
+ left: 12px;
1085
+ right: 12px;
1086
+ width: auto;
1087
+ max-width: none;
1088
+ align-items: stretch;
1089
+ }
1090
+
1091
+ .blinq-shell[data-side="left"],
1092
+ .blinq-shell[data-side="right"] {
1093
+ left: 12px;
1094
+ right: 12px;
1095
+ align-items: stretch;
1096
+ }
1097
+
1098
+ .blinq-panel,
1099
+ .blinq-launcher {
1100
+ max-width: none;
1101
+ width: 100%;
1102
+ }
1103
+
1104
+ .blinq-workspace {
1105
+ grid-template-columns: 1fr;
1106
+ }
1107
+
1108
+ .blinq-sidebar {
1109
+ border-right: none;
1110
+ border-bottom: 1px solid var(--blinq-border);
1111
+ }
1112
+
1113
+ .blinq-sidebar-group {
1114
+ flex-direction: row;
1115
+ overflow-x: auto;
1116
+ }
1117
+
1118
+ .blinq-tab-trigger {
1119
+ min-width: 116px;
1120
+ }
1121
+
1122
+ .blinq-context-grid {
1123
+ grid-template-columns: 1fr;
1124
+ }
1125
+ }
1126
+ `;
1127
+
1128
+ // src/browser.ts
1129
+ var EMBED_TAG_NAME = "blinq-widget";
1130
+ function shadowRootStyles() {
1131
+ return EMBED_WIDGET_STYLES;
1132
+ }
1133
+ var BlinqWidgetElement = class extends HTMLElement {
1134
+ widget = null;
1135
+ widgetPromise = null;
1136
+ mountEl = null;
1137
+ connectedCallback() {
1138
+ if (this.widget || this.widgetPromise) {
1139
+ return;
1140
+ }
1141
+ const publicToken = this.getAttribute("public-token")?.trim();
1142
+ if (!publicToken) {
1143
+ console.error("Blinq widget: missing required public-token attribute.");
1144
+ return;
1145
+ }
1146
+ const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
1147
+ root.replaceChildren();
1148
+ const style = document.createElement("style");
1149
+ style.textContent = shadowRootStyles();
1150
+ const mount = document.createElement("div");
1151
+ mount.dataset.blinqMount = "true";
1152
+ root.append(style, mount);
1153
+ this.mountEl = mount;
1154
+ const options = {
1155
+ publicToken,
1156
+ apiBaseUrl: this.getAttribute("api-base-url")?.trim() || void 0,
1157
+ mcpEndpoint: this.getAttribute("mcp-endpoint")?.trim() || void 0,
1158
+ mount
1159
+ };
1160
+ this.widgetPromise = init(options).then((widget) => {
1161
+ this.widget = widget;
1162
+ return widget;
1163
+ }).catch((error) => {
1164
+ console.error("Blinq widget failed to initialize.", error);
1165
+ throw error;
1166
+ }).finally(() => {
1167
+ this.widgetPromise = null;
1168
+ });
1169
+ }
1170
+ disconnectedCallback() {
1171
+ this.widget?.destroy();
1172
+ void this.widget?.endSession();
1173
+ this.widget = null;
1174
+ this.widgetPromise = null;
1175
+ this.mountEl = null;
1176
+ }
1177
+ };
1178
+ function defineBlinqWidgetElement() {
1179
+ if (typeof window === "undefined" || typeof customElements === "undefined") {
1180
+ return;
1181
+ }
1182
+ if (!customElements.get(EMBED_TAG_NAME)) {
1183
+ customElements.define(EMBED_TAG_NAME, BlinqWidgetElement);
1184
+ }
1185
+ }
1186
+ if (typeof window !== "undefined") {
1187
+ defineBlinqWidgetElement();
1188
+ window.BlinqWidget = {
1189
+ init,
1190
+ initFromConfig
1191
+ };
1192
+ }
1193
+ export {
1194
+ BlinqWidgetElement,
1195
+ init,
1196
+ initFromConfig
1197
+ };
1198
+ //# sourceMappingURL=browser.js.map