@kibee/renderer-three 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.
- package/dist/index.d.mts +278 -0
- package/dist/index.d.ts +278 -0
- package/dist/index.js +1913 -0
- package/dist/index.mjs +1875 -0
- package/dist/styles.css +739 -0
- package/package.json +31 -0
package/dist/styles.css
ADDED
|
@@ -0,0 +1,739 @@
|
|
|
1
|
+
.kibee-root {
|
|
2
|
+
position: fixed;
|
|
3
|
+
inset: 0;
|
|
4
|
+
/* Must sit above the chat panel (kbp-anchor: 2147483010) and launcher (2147483020) */
|
|
5
|
+
z-index: 2147483030;
|
|
6
|
+
pointer-events: none;
|
|
7
|
+
overflow: visible;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.kibee-canvas-wrap {
|
|
11
|
+
position: absolute;
|
|
12
|
+
inset: 0;
|
|
13
|
+
pointer-events: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.kibee-canvas {
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 100%;
|
|
19
|
+
display: block;
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
transition: opacity 220ms ease;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.kibee-root[data-renderer-ready="false"] .kibee-canvas-wrap {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.kibee-tooltip {
|
|
29
|
+
position: absolute;
|
|
30
|
+
display: none;
|
|
31
|
+
max-width: 260px;
|
|
32
|
+
padding: 10px 12px;
|
|
33
|
+
border-radius: 14px;
|
|
34
|
+
background: rgba(251, 246, 236, 0.94);
|
|
35
|
+
color: #241b11;
|
|
36
|
+
font-size: 13px;
|
|
37
|
+
line-height: 1.4;
|
|
38
|
+
box-shadow:
|
|
39
|
+
0 18px 40px rgba(64, 43, 8, 0.14),
|
|
40
|
+
0 4px 12px rgba(68, 46, 11, 0.08);
|
|
41
|
+
backdrop-filter: blur(8px);
|
|
42
|
+
-webkit-backdrop-filter: blur(8px);
|
|
43
|
+
transform: translate(0, -50%);
|
|
44
|
+
white-space: normal;
|
|
45
|
+
border: 1px solid rgba(91, 65, 19, 0.12);
|
|
46
|
+
opacity: 0;
|
|
47
|
+
transition: opacity 320ms ease;
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.kibee-tooltip--visible {
|
|
52
|
+
opacity: 1;
|
|
53
|
+
pointer-events: auto;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Prompt mode — bubble grows, becomes a tiny "honey paper" note. */
|
|
57
|
+
.kibee-tooltip--prompt {
|
|
58
|
+
max-width: 340px;
|
|
59
|
+
padding: 14px 16px 12px;
|
|
60
|
+
background:
|
|
61
|
+
radial-gradient(120% 140% at 0% 0%, rgba(255, 252, 240, 0.96) 0%, rgba(248, 240, 223, 0.94) 60%, rgba(244, 233, 211, 0.94) 100%);
|
|
62
|
+
border-color: rgba(91, 65, 19, 0.16);
|
|
63
|
+
box-shadow:
|
|
64
|
+
0 22px 60px -10px rgba(64, 43, 8, 0.22),
|
|
65
|
+
0 6px 18px rgba(68, 46, 11, 0.1),
|
|
66
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.kibee-tooltip--hidden {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Diamond notch: same rotation, placed on the edge that faces the bee (data-arrow-edge) */
|
|
74
|
+
.kibee-tooltip::after {
|
|
75
|
+
content: "";
|
|
76
|
+
position: absolute;
|
|
77
|
+
top: 50%;
|
|
78
|
+
width: 12px;
|
|
79
|
+
height: 12px;
|
|
80
|
+
background: rgba(251, 246, 236, 0.94);
|
|
81
|
+
transform: translateY(-50%) rotate(45deg);
|
|
82
|
+
border-radius: 2px;
|
|
83
|
+
box-shadow: -1px 1px 0 rgba(91, 65, 19, 0.08);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Bee faces right → tooltip sits to the right; notch on left points toward bee */
|
|
87
|
+
.kibee-tooltip[data-arrow-edge="left"]::after,
|
|
88
|
+
.kibee-tooltip:not([data-arrow-edge])::after {
|
|
89
|
+
left: -6px;
|
|
90
|
+
right: auto;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Bee faces left → tooltip sits to the left; notch on right points toward bee */
|
|
94
|
+
.kibee-tooltip[data-arrow-edge="right"]::after {
|
|
95
|
+
left: auto;
|
|
96
|
+
right: -6px;
|
|
97
|
+
box-shadow: 1px -1px 0 rgba(91, 65, 19, 0.08);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Tooltip above bee (side top) — notch on bottom, points down */
|
|
101
|
+
.kibee-tooltip[data-arrow-edge="bottom"]::after {
|
|
102
|
+
left: 50%;
|
|
103
|
+
right: auto;
|
|
104
|
+
top: auto;
|
|
105
|
+
bottom: -6px;
|
|
106
|
+
transform: translate(-50%, 0) rotate(45deg);
|
|
107
|
+
box-shadow: 1px 1px 0 rgba(91, 65, 19, 0.08);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Tooltip below bee (side bottom) — notch on top, points up */
|
|
111
|
+
.kibee-tooltip[data-arrow-edge="top"]::after {
|
|
112
|
+
left: 50%;
|
|
113
|
+
right: auto;
|
|
114
|
+
top: -6px;
|
|
115
|
+
bottom: auto;
|
|
116
|
+
transform: translate(-50%, 0) rotate(45deg);
|
|
117
|
+
box-shadow: -1px -1px 0 rgba(91, 65, 19, 0.08);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Close button — top-right, appears on tooltip hover */
|
|
121
|
+
.kibee-tooltip-close {
|
|
122
|
+
position: absolute;
|
|
123
|
+
top: 5px;
|
|
124
|
+
right: 5px;
|
|
125
|
+
width: 20px;
|
|
126
|
+
height: 20px;
|
|
127
|
+
display: inline-flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
border: none;
|
|
131
|
+
border-radius: 6px;
|
|
132
|
+
background: transparent;
|
|
133
|
+
color: #b8956a;
|
|
134
|
+
cursor: pointer;
|
|
135
|
+
opacity: 0;
|
|
136
|
+
pointer-events: none;
|
|
137
|
+
transition:
|
|
138
|
+
opacity 140ms ease,
|
|
139
|
+
background 120ms ease,
|
|
140
|
+
color 120ms ease;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.kibee-tooltip:hover .kibee-tooltip-close {
|
|
144
|
+
opacity: 1;
|
|
145
|
+
pointer-events: auto;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.kibee-tooltip-close:hover {
|
|
149
|
+
background: rgba(91, 65, 19, 0.1);
|
|
150
|
+
color: #5b4113;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.kibee-tooltip-close:active {
|
|
154
|
+
transform: scale(0.88);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Tooltip body text */
|
|
158
|
+
.kibee-tooltip-body {
|
|
159
|
+
line-height: inherit;
|
|
160
|
+
padding-right: 14px; /* avoid text running under close button */
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* ──────────────────────────────────────────────────────────────────────────
|
|
164
|
+
Inline note prompt — "hand-pressed honey paper" aesthetic.
|
|
165
|
+
Used by the bookmark/issue chips to capture a 1-2 line categorisation note.
|
|
166
|
+
────────────────────────────────────────────────────────────────────────── */
|
|
167
|
+
|
|
168
|
+
/* When the prompt is visible, the body text becomes a quiet italic question
|
|
169
|
+
instead of a regular speech line. */
|
|
170
|
+
.kibee-tooltip--prompt .kibee-tooltip-body {
|
|
171
|
+
margin-bottom: 4px;
|
|
172
|
+
padding-right: 18px;
|
|
173
|
+
font-style: italic;
|
|
174
|
+
font-size: 13.5px;
|
|
175
|
+
line-height: 1.35;
|
|
176
|
+
color: #4a3318;
|
|
177
|
+
letter-spacing: -0.005em;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.kibee-tooltip-prompt {
|
|
181
|
+
display: none;
|
|
182
|
+
flex-direction: column;
|
|
183
|
+
gap: 9px;
|
|
184
|
+
margin-top: 4px;
|
|
185
|
+
padding: 0;
|
|
186
|
+
pointer-events: auto;
|
|
187
|
+
/* Subtle entrance — runs once when the prompt is revealed (display: flex). */
|
|
188
|
+
animation: kibee-prompt-rise 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
@keyframes kibee-prompt-rise {
|
|
192
|
+
from {
|
|
193
|
+
opacity: 0;
|
|
194
|
+
transform: translateY(4px);
|
|
195
|
+
}
|
|
196
|
+
to {
|
|
197
|
+
opacity: 1;
|
|
198
|
+
transform: translateY(0);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.kibee-tooltip-prompt-input {
|
|
203
|
+
display: block;
|
|
204
|
+
width: 100%;
|
|
205
|
+
min-height: 56px;
|
|
206
|
+
box-sizing: border-box;
|
|
207
|
+
resize: none;
|
|
208
|
+
padding: 9px 11px;
|
|
209
|
+
border: 1px solid rgba(91, 65, 19, 0.18);
|
|
210
|
+
border-radius: 10px;
|
|
211
|
+
background: rgba(255, 252, 244, 0.75);
|
|
212
|
+
color: #241b11;
|
|
213
|
+
font: inherit;
|
|
214
|
+
font-size: 13px;
|
|
215
|
+
line-height: 1.45;
|
|
216
|
+
outline: none;
|
|
217
|
+
box-shadow:
|
|
218
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.7),
|
|
219
|
+
inset 0 0 0 1px rgba(255, 255, 255, 0.25);
|
|
220
|
+
transition:
|
|
221
|
+
border-color 180ms ease,
|
|
222
|
+
box-shadow 180ms ease,
|
|
223
|
+
background 180ms ease;
|
|
224
|
+
font-feature-settings: "kern", "liga";
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.kibee-tooltip-prompt-input::placeholder {
|
|
228
|
+
color: rgba(91, 65, 19, 0.42);
|
|
229
|
+
font-style: italic;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.kibee-tooltip-prompt-input:focus {
|
|
233
|
+
border-color: rgba(167, 122, 47, 0.6);
|
|
234
|
+
background: rgba(255, 253, 247, 0.96);
|
|
235
|
+
box-shadow:
|
|
236
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.7),
|
|
237
|
+
0 0 0 3px rgba(167, 122, 47, 0.16);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.kibee-tooltip-prompt-input::selection {
|
|
241
|
+
background: rgba(167, 122, 47, 0.28);
|
|
242
|
+
color: #2c1f0a;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* Bottom row: hint on the left, action cluster on the right. */
|
|
246
|
+
.kibee-tooltip-prompt-row {
|
|
247
|
+
display: flex;
|
|
248
|
+
align-items: center;
|
|
249
|
+
justify-content: space-between;
|
|
250
|
+
gap: 12px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.kibee-tooltip-prompt-actions {
|
|
254
|
+
display: inline-flex;
|
|
255
|
+
align-items: center;
|
|
256
|
+
gap: 4px;
|
|
257
|
+
flex-shrink: 0;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* Tabular char counter / keyboard hint — quiet, monospaced, sits to the left. */
|
|
261
|
+
.kibee-tooltip-prompt-hint {
|
|
262
|
+
flex: 1 1 auto;
|
|
263
|
+
min-width: 0;
|
|
264
|
+
font-size: 11px;
|
|
265
|
+
line-height: 1;
|
|
266
|
+
color: rgba(91, 65, 19, 0.55);
|
|
267
|
+
letter-spacing: 0.01em;
|
|
268
|
+
font-variant-numeric: tabular-nums;
|
|
269
|
+
user-select: none;
|
|
270
|
+
white-space: nowrap;
|
|
271
|
+
overflow: hidden;
|
|
272
|
+
text-overflow: ellipsis;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.kibee-tooltip-prompt-hint kbd {
|
|
276
|
+
display: inline-block;
|
|
277
|
+
margin: 0 1px;
|
|
278
|
+
padding: 1px 5px 2px;
|
|
279
|
+
border-radius: 4px;
|
|
280
|
+
background: rgba(91, 65, 19, 0.07);
|
|
281
|
+
border: 1px solid rgba(91, 65, 19, 0.14);
|
|
282
|
+
border-bottom-width: 2px;
|
|
283
|
+
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
|
|
284
|
+
font-size: 10px;
|
|
285
|
+
font-weight: 500;
|
|
286
|
+
color: rgba(44, 31, 10, 0.78);
|
|
287
|
+
line-height: 1;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.kibee-tooltip-prompt-skip,
|
|
291
|
+
.kibee-tooltip-prompt-save {
|
|
292
|
+
display: inline-flex;
|
|
293
|
+
align-items: center;
|
|
294
|
+
justify-content: center;
|
|
295
|
+
border: none;
|
|
296
|
+
border-radius: 999px;
|
|
297
|
+
font: inherit;
|
|
298
|
+
font-size: 12.5px;
|
|
299
|
+
line-height: 1;
|
|
300
|
+
cursor: pointer;
|
|
301
|
+
transition:
|
|
302
|
+
background 160ms ease,
|
|
303
|
+
color 160ms ease,
|
|
304
|
+
box-shadow 200ms ease,
|
|
305
|
+
transform 90ms ease;
|
|
306
|
+
-webkit-tap-highlight-color: transparent;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.kibee-tooltip-prompt-skip {
|
|
310
|
+
padding: 6px 11px;
|
|
311
|
+
background: transparent;
|
|
312
|
+
color: rgba(91, 65, 19, 0.7);
|
|
313
|
+
letter-spacing: 0.005em;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.kibee-tooltip-prompt-skip:hover {
|
|
317
|
+
background: rgba(91, 65, 19, 0.07);
|
|
318
|
+
color: #2c1f0a;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.kibee-tooltip-prompt-skip:active {
|
|
322
|
+
transform: translateY(1px);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.kibee-tooltip-prompt-save {
|
|
326
|
+
padding: 7px 14px;
|
|
327
|
+
font-weight: 600;
|
|
328
|
+
letter-spacing: 0.005em;
|
|
329
|
+
color: #fff8e7;
|
|
330
|
+
background:
|
|
331
|
+
linear-gradient(180deg, #c08a32 0%, #8e631a 100%);
|
|
332
|
+
box-shadow:
|
|
333
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
|
334
|
+
inset 0 -1px 0 rgba(80, 53, 12, 0.35),
|
|
335
|
+
0 1px 2px rgba(91, 65, 19, 0.18),
|
|
336
|
+
0 6px 14px -4px rgba(91, 65, 19, 0.35);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.kibee-tooltip-prompt-save:hover {
|
|
340
|
+
background:
|
|
341
|
+
linear-gradient(180deg, #ce9740 0%, #9d7220 100%);
|
|
342
|
+
box-shadow:
|
|
343
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.28),
|
|
344
|
+
inset 0 -1px 0 rgba(80, 53, 12, 0.35),
|
|
345
|
+
0 2px 4px rgba(91, 65, 19, 0.22),
|
|
346
|
+
0 10px 22px -6px rgba(91, 65, 19, 0.4);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.kibee-tooltip-prompt-save:active {
|
|
350
|
+
transform: translateY(1px);
|
|
351
|
+
box-shadow:
|
|
352
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.16),
|
|
353
|
+
inset 0 -1px 0 rgba(80, 53, 12, 0.45),
|
|
354
|
+
0 1px 2px rgba(91, 65, 19, 0.18);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.kibee-tooltip-prompt-save:focus-visible,
|
|
358
|
+
.kibee-tooltip-prompt-skip:focus-visible {
|
|
359
|
+
outline: 2px solid rgba(167, 122, 47, 0.5);
|
|
360
|
+
outline-offset: 2px;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/* Nav footer — only visible when guidance has prev/next */
|
|
364
|
+
.kibee-tooltip-nav {
|
|
365
|
+
display: none;
|
|
366
|
+
align-items: center;
|
|
367
|
+
gap: 2px;
|
|
368
|
+
margin-top: 9px;
|
|
369
|
+
padding-top: 8px;
|
|
370
|
+
border-top: 1px solid rgba(91, 65, 19, 0.12);
|
|
371
|
+
pointer-events: auto;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.kibee-nav-btn {
|
|
375
|
+
display: inline-flex;
|
|
376
|
+
align-items: center;
|
|
377
|
+
justify-content: center;
|
|
378
|
+
width: 26px;
|
|
379
|
+
height: 26px;
|
|
380
|
+
flex-shrink: 0;
|
|
381
|
+
border: none;
|
|
382
|
+
border-radius: 7px;
|
|
383
|
+
background: transparent;
|
|
384
|
+
color: #5b4113;
|
|
385
|
+
cursor: pointer;
|
|
386
|
+
pointer-events: auto;
|
|
387
|
+
transition:
|
|
388
|
+
background 120ms ease,
|
|
389
|
+
transform 120ms ease;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.kibee-nav-btn:hover {
|
|
393
|
+
background: rgba(91, 65, 19, 0.1);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.kibee-nav-btn:active {
|
|
397
|
+
background: rgba(91, 65, 19, 0.18);
|
|
398
|
+
transform: scale(0.9);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.kibee-nav-label {
|
|
402
|
+
flex: 1;
|
|
403
|
+
text-align: center;
|
|
404
|
+
font-size: 11px;
|
|
405
|
+
font-weight: 600;
|
|
406
|
+
letter-spacing: 0.04em;
|
|
407
|
+
color: #9c7c50;
|
|
408
|
+
pointer-events: none;
|
|
409
|
+
user-select: none;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.kibee-hover-zone {
|
|
413
|
+
position: absolute;
|
|
414
|
+
border-radius: 50%;
|
|
415
|
+
pointer-events: auto;
|
|
416
|
+
cursor: pointer;
|
|
417
|
+
z-index: 2;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
/* Grab cursor during drag */
|
|
421
|
+
.kibee-root--dragging .kibee-hover-zone,
|
|
422
|
+
.kibee-root--dragging {
|
|
423
|
+
cursor: grabbing !important;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.kibee-root--dragging * {
|
|
427
|
+
cursor: grabbing !important;
|
|
428
|
+
user-select: none;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* ── Radial action buttons ─────────────────────────────────────────────── */
|
|
432
|
+
|
|
433
|
+
.kibee-action {
|
|
434
|
+
position: absolute;
|
|
435
|
+
display: none; /* JS sets to "grid" when visible */
|
|
436
|
+
place-items: center;
|
|
437
|
+
width: 30px;
|
|
438
|
+
height: 30px;
|
|
439
|
+
border-radius: 50%;
|
|
440
|
+
border: none;
|
|
441
|
+
padding: 0;
|
|
442
|
+
cursor: pointer;
|
|
443
|
+
pointer-events: auto;
|
|
444
|
+
z-index: 4;
|
|
445
|
+
|
|
446
|
+
/* Spring-in: each button staggers via --i (0, 1, 2) */
|
|
447
|
+
opacity: 0;
|
|
448
|
+
transform: scale(0.4);
|
|
449
|
+
transition:
|
|
450
|
+
opacity 200ms ease calc(var(--i, 0) * 44ms),
|
|
451
|
+
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 44ms),
|
|
452
|
+
filter 140ms ease;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.kibee-action--visible {
|
|
456
|
+
opacity: 1;
|
|
457
|
+
transform: scale(1);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.kibee-action--hidden {
|
|
461
|
+
opacity: 0;
|
|
462
|
+
transform: scale(0.4);
|
|
463
|
+
pointer-events: none;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.kibee-action svg {
|
|
467
|
+
width: 14px;
|
|
468
|
+
height: 14px;
|
|
469
|
+
flex-shrink: 0;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
/* Honey — flat amber */
|
|
473
|
+
.kibee-action--honey {
|
|
474
|
+
background: #f5a623;
|
|
475
|
+
color: #fff;
|
|
476
|
+
box-shadow: 0 2px 6px rgba(180, 120, 0, 0.35);
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.kibee-action--honey:hover {
|
|
480
|
+
filter: brightness(1.08);
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
/* Sting — flat rose */
|
|
484
|
+
.kibee-action--sting {
|
|
485
|
+
background: #e84040;
|
|
486
|
+
color: #fff;
|
|
487
|
+
box-shadow: 0 2px 6px rgba(200, 30, 30, 0.3);
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
.kibee-action--sting:hover {
|
|
491
|
+
filter: brightness(1.08);
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
/* Chat — flat blue */
|
|
495
|
+
.kibee-action--chat {
|
|
496
|
+
background: #1e9de8;
|
|
497
|
+
color: #fff;
|
|
498
|
+
box-shadow: 0 2px 6px rgba(14, 100, 200, 0.28);
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.kibee-action--chat:hover {
|
|
502
|
+
filter: brightness(1.08);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
/* Dock — flat slate */
|
|
506
|
+
.kibee-action--dock {
|
|
507
|
+
background: #475569;
|
|
508
|
+
color: #fff;
|
|
509
|
+
box-shadow: 0 2px 8px rgba(71, 85, 105, 0.35);
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.kibee-action--dock:hover {
|
|
513
|
+
filter: brightness(1.08);
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
/* Hover tooltip label for each radial button */
|
|
517
|
+
.kibee-action[data-label] {
|
|
518
|
+
overflow: visible;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
.kibee-action[data-label]::after {
|
|
522
|
+
content: attr(data-label);
|
|
523
|
+
position: absolute;
|
|
524
|
+
bottom: calc(100% + 7px);
|
|
525
|
+
left: 50%;
|
|
526
|
+
transform: translateX(-50%) scale(0.85);
|
|
527
|
+
background: rgba(24, 18, 8, 0.82);
|
|
528
|
+
color: #fff;
|
|
529
|
+
font-size: 10px;
|
|
530
|
+
font-weight: 500;
|
|
531
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
532
|
+
letter-spacing: 0.02em;
|
|
533
|
+
padding: 3px 7px;
|
|
534
|
+
border-radius: 5px;
|
|
535
|
+
white-space: nowrap;
|
|
536
|
+
pointer-events: none;
|
|
537
|
+
opacity: 0;
|
|
538
|
+
transition:
|
|
539
|
+
opacity 140ms ease,
|
|
540
|
+
transform 140ms ease;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.kibee-action[data-label]:hover::after {
|
|
544
|
+
opacity: 1;
|
|
545
|
+
transform: translateX(-50%) scale(1);
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.kibee-dock {
|
|
549
|
+
position: absolute;
|
|
550
|
+
right: var(--kibee-dock-right, auto);
|
|
551
|
+
bottom: var(--kibee-dock-bottom, auto);
|
|
552
|
+
left: var(--kibee-dock-left, auto);
|
|
553
|
+
top: var(--kibee-dock-top, auto);
|
|
554
|
+
width: var(--kibee-dock-size, 58px);
|
|
555
|
+
height: var(--kibee-dock-size, 58px);
|
|
556
|
+
display: grid;
|
|
557
|
+
place-items: center;
|
|
558
|
+
border: 0;
|
|
559
|
+
clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
|
|
560
|
+
padding: 0;
|
|
561
|
+
pointer-events: auto;
|
|
562
|
+
cursor: pointer;
|
|
563
|
+
background:
|
|
564
|
+
radial-gradient(circle at 36% 32%, rgba(255, 250, 238, 0.9), transparent 24%),
|
|
565
|
+
radial-gradient(circle at 64% 68%, rgba(222, 173, 77, 0.46), transparent 28%),
|
|
566
|
+
linear-gradient(180deg, #a77a2f 0%, #7f5b20 38%, #5b3d10 100%);
|
|
567
|
+
border: 1px solid rgba(130, 90, 24, 0.26);
|
|
568
|
+
box-shadow:
|
|
569
|
+
inset 0 1px 0 rgba(255, 245, 221, 0.38),
|
|
570
|
+
0 18px 34px rgba(117, 80, 17, 0.24);
|
|
571
|
+
transform: translateY(0) scale(1);
|
|
572
|
+
opacity: 1;
|
|
573
|
+
transition:
|
|
574
|
+
opacity 220ms ease,
|
|
575
|
+
transform 220ms ease,
|
|
576
|
+
box-shadow 220ms ease,
|
|
577
|
+
right 320ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
578
|
+
bottom 320ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
579
|
+
left 320ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
580
|
+
top 320ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
581
|
+
width 320ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
582
|
+
height 320ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
/* Inline mode: renders inside a container element (navbar, sidebar, etc.) */
|
|
586
|
+
.kibee-root--inline {
|
|
587
|
+
position: relative;
|
|
588
|
+
inset: auto;
|
|
589
|
+
width: var(--kibee-dock-size, 58px);
|
|
590
|
+
height: var(--kibee-dock-size, 58px);
|
|
591
|
+
display: inline-flex;
|
|
592
|
+
z-index: auto;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.kibee-root--inline .kibee-dock {
|
|
596
|
+
position: relative;
|
|
597
|
+
right: auto;
|
|
598
|
+
bottom: auto;
|
|
599
|
+
left: auto;
|
|
600
|
+
top: auto;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
.kibee-dock::before {
|
|
604
|
+
content: "";
|
|
605
|
+
position: absolute;
|
|
606
|
+
inset: 16%;
|
|
607
|
+
clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
|
|
608
|
+
background:
|
|
609
|
+
radial-gradient(circle at center, rgba(255, 226, 165, 0.44), transparent 56%),
|
|
610
|
+
linear-gradient(180deg, rgba(255, 242, 214, 0.28), rgba(255, 219, 132, 0.06));
|
|
611
|
+
opacity: 0.72;
|
|
612
|
+
box-shadow:
|
|
613
|
+
inset 0 0 0 1px rgba(255, 231, 180, 0.22),
|
|
614
|
+
inset 0 10px 16px rgba(255, 247, 224, 0.12);
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.kibee-dock:hover {
|
|
618
|
+
box-shadow:
|
|
619
|
+
inset 0 1px 0 rgba(255, 245, 221, 0.42),
|
|
620
|
+
0 22px 42px rgba(117, 80, 17, 0.28);
|
|
621
|
+
transform: translateY(-1px) scale(1.02);
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
.kibee-dock__core,
|
|
625
|
+
.kibee-dock__spark {
|
|
626
|
+
position: absolute;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.kibee-dock__core {
|
|
630
|
+
width: 46%;
|
|
631
|
+
height: 46%;
|
|
632
|
+
clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
|
|
633
|
+
background:
|
|
634
|
+
radial-gradient(circle at center, rgba(255, 239, 205, 0.96), rgba(233, 187, 87, 0.62) 46%, rgba(114, 78, 20, 0.22) 100%);
|
|
635
|
+
filter: blur(0.2px);
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.kibee-dock__spark {
|
|
639
|
+
width: 14%;
|
|
640
|
+
height: 14%;
|
|
641
|
+
top: 21%;
|
|
642
|
+
right: 24%;
|
|
643
|
+
border-radius: 50%;
|
|
644
|
+
background: rgba(255, 247, 225, 0.88);
|
|
645
|
+
box-shadow: 0 0 10px rgba(255, 239, 202, 0.52);
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.kibee-root[data-dock-visible="false"] .kibee-dock {
|
|
649
|
+
opacity: 0;
|
|
650
|
+
transform: translateY(14px) scale(0.88);
|
|
651
|
+
pointer-events: none;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.kibee-root[data-idle="false"] .kibee-dock {
|
|
655
|
+
opacity: 0;
|
|
656
|
+
transform: translateY(14px) scale(0.88);
|
|
657
|
+
pointer-events: none;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
/* When the 3D renderer is active the dock button itself becomes transparent
|
|
661
|
+
so the kbp-launcher hex frame shows through underneath the 3D bee. */
|
|
662
|
+
body[data-kibee-renderer-active="true"] .kibee-dock {
|
|
663
|
+
background: transparent !important;
|
|
664
|
+
border: none !important;
|
|
665
|
+
box-shadow: none !important;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
body[data-kibee-renderer-active="true"] .kibee-dock::before {
|
|
669
|
+
display: none;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
body[data-kibee-renderer-active="true"] .kibee-dock__core,
|
|
673
|
+
body[data-kibee-renderer-active="true"] .kibee-dock__spark {
|
|
674
|
+
display: none;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
body[data-kibee-empty-dock="true"] .kibee-root[data-docked="true"] .kibee-canvas-wrap {
|
|
678
|
+
opacity: 0;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.kibee-highlight {
|
|
682
|
+
position: fixed;
|
|
683
|
+
border-radius: 14px;
|
|
684
|
+
pointer-events: none;
|
|
685
|
+
z-index: 2147483001;
|
|
686
|
+
transition:
|
|
687
|
+
left 180ms ease,
|
|
688
|
+
top 180ms ease,
|
|
689
|
+
width 180ms ease,
|
|
690
|
+
height 180ms ease,
|
|
691
|
+
opacity 180ms ease;
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
.kibee-highlight--hidden {
|
|
695
|
+
opacity: 0;
|
|
696
|
+
transform: scale(0.98);
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.kibee-highlight--pulse {
|
|
700
|
+
opacity: 1;
|
|
701
|
+
border: 2px solid rgba(255, 208, 0, 0.95);
|
|
702
|
+
box-shadow:
|
|
703
|
+
0 0 0 6px rgba(255, 208, 0, 0.12),
|
|
704
|
+
0 0 28px rgba(255, 208, 0, 0.24);
|
|
705
|
+
animation: kibeePulse 1.4s infinite;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.kibee-highlight--ring {
|
|
709
|
+
opacity: 1;
|
|
710
|
+
border: 2px solid rgba(255, 84, 84, 0.95);
|
|
711
|
+
box-shadow:
|
|
712
|
+
0 0 0 6px rgba(255, 84, 84, 0.12),
|
|
713
|
+
0 0 28px rgba(255, 84, 84, 0.22);
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
.kibee-highlight--soft {
|
|
717
|
+
opacity: 1;
|
|
718
|
+
border: 2px solid rgba(255, 208, 0, 0.55);
|
|
719
|
+
background: rgba(255, 208, 0, 0.08);
|
|
720
|
+
box-shadow: 0 0 18px rgba(255, 208, 0, 0.12);
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
@keyframes kibeePulse {
|
|
724
|
+
0% {
|
|
725
|
+
box-shadow:
|
|
726
|
+
0 0 0 4px rgba(255, 208, 0, 0.12),
|
|
727
|
+
0 0 24px rgba(255, 208, 0, 0.18);
|
|
728
|
+
}
|
|
729
|
+
50% {
|
|
730
|
+
box-shadow:
|
|
731
|
+
0 0 0 10px rgba(255, 208, 0, 0.08),
|
|
732
|
+
0 0 32px rgba(255, 208, 0, 0.28);
|
|
733
|
+
}
|
|
734
|
+
100% {
|
|
735
|
+
box-shadow:
|
|
736
|
+
0 0 0 4px rgba(255, 208, 0, 0.12),
|
|
737
|
+
0 0 24px rgba(255, 208, 0, 0.18);
|
|
738
|
+
}
|
|
739
|
+
}
|