@lokutor/sdk 1.1.31 → 1.1.33

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 (6) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +27 -8
  4. package/dist/index.mjs +27 -8
  5. package/package.json +1 -1
  6. package/src/conversational-panel.ts +34 -8
package/dist/index.d.mts CHANGED
@@ -657,7 +657,7 @@ declare class ConversationalPanel {
657
657
  stop(): void;
658
658
  /** Update accent color dynamically */
659
659
  setColor(color: string): void;
660
- /** Update background color dynamically */
660
+ /** Update background color dynamically and ensure text/UI contrast */
661
661
  setBackgroundColor(color: string): void;
662
662
  /** Update title text */
663
663
  setTitle(title: string): void;
package/dist/index.d.ts CHANGED
@@ -657,7 +657,7 @@ declare class ConversationalPanel {
657
657
  stop(): void;
658
658
  /** Update accent color dynamically */
659
659
  setColor(color: string): void;
660
- /** Update background color dynamically */
660
+ /** Update background color dynamically and ensure text/UI contrast */
661
661
  setBackgroundColor(color: string): void;
662
662
  /** Update title text */
663
663
  setTitle(title: string): void;
package/dist/index.js CHANGED
@@ -1325,6 +1325,7 @@ var PANEL_CSS = (
1325
1325
  .cv-curtain-desc {
1326
1326
  font-size: clamp(0.75rem, 2vw, 1.1rem);
1327
1327
  opacity: 0.8;
1328
+ color: rgba(255,255,255,0.8);
1328
1329
  max-width: 400px;
1329
1330
  margin: 0;
1330
1331
  line-height: 1.5;
@@ -1364,7 +1365,7 @@ var PANEL_CSS = (
1364
1365
  .cv-title {
1365
1366
  font-size: clamp(1rem, 2.5vw, 1.75rem);
1366
1367
  font-weight: 700;
1367
- color: #e0e0e0;
1368
+ color: var(--cv-text, #e0e0e0);
1368
1369
  display: flex;
1369
1370
  align-items: center;
1370
1371
  gap: 1rem;
@@ -1425,13 +1426,13 @@ var PANEL_CSS = (
1425
1426
  display: flex;
1426
1427
  align-items: center;
1427
1428
  gap: 0.75rem;
1428
- background: rgba(255, 255, 255, 0.03);
1429
+ background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
1429
1430
  backdrop-filter: blur(30px);
1430
1431
  -webkit-backdrop-filter: blur(30px);
1431
- border: 1px solid rgba(255, 255, 255, 0.08);
1432
+ border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
1432
1433
  padding: 0.3rem 0.75rem;
1433
1434
  border-radius: 100px;
1434
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
1435
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
1435
1436
  }
1436
1437
  .cv-btn {
1437
1438
  display: flex;
@@ -1439,7 +1440,7 @@ var PANEL_CSS = (
1439
1440
  gap: 0.5rem;
1440
1441
  background: transparent;
1441
1442
  border: none;
1442
- color: rgba(255,255,255,0.55);
1443
+ color: var(--cv-text-dim, rgba(255,255,255,0.55));
1443
1444
  font-weight: 600;
1444
1445
  font-size: 0.75rem;
1445
1446
  cursor: pointer;
@@ -1447,7 +1448,7 @@ var PANEL_CSS = (
1447
1448
  padding: 0.35rem 0.75rem;
1448
1449
  border-radius: 50px;
1449
1450
  }
1450
- .cv-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
1451
+ .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
1451
1452
  .cv-btn--end { color: #ff4444; }
1452
1453
  .cv-btn--end .cv-btn-box {
1453
1454
  background: #ff4444;
@@ -1536,7 +1537,7 @@ var ConversationalPanel = class {
1536
1537
  const accent = this.cfg.accentColor || "#a25a6b";
1537
1538
  const bg = this.cfg.backgroundColor || "#0a0a0a";
1538
1539
  this.container.style.setProperty("--cv-accent", accent);
1539
- this.container.style.setProperty("--cv-bg", bg);
1540
+ this.setBackgroundColor(bg);
1540
1541
  this.el = document.createElement("div");
1541
1542
  this.el.className = "cv-panel";
1542
1543
  this.el.innerHTML = `
@@ -1744,10 +1745,28 @@ var ConversationalPanel = class {
1744
1745
  this.visualizer.setAccentColor(r, g, b);
1745
1746
  }
1746
1747
  }
1747
- /** Update background color dynamically */
1748
+ /** Update background color dynamically and ensure text/UI contrast */
1748
1749
  setBackgroundColor(color) {
1749
1750
  this.cfg.backgroundColor = color;
1750
1751
  this.container.style.setProperty("--cv-bg", color);
1752
+ let r = 0, g = 0, b = 0;
1753
+ if (color.startsWith("#")) {
1754
+ if (color.length === 4) {
1755
+ r = parseInt(color[1] + color[1], 16);
1756
+ g = parseInt(color[2] + color[2], 16);
1757
+ b = parseInt(color[3] + color[3], 16);
1758
+ } else {
1759
+ r = parseInt(color.slice(1, 3), 16);
1760
+ g = parseInt(color.slice(3, 5), 16);
1761
+ b = parseInt(color.slice(5, 7), 16);
1762
+ }
1763
+ }
1764
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
1765
+ const isLight = luminance > 0.5;
1766
+ this.container.style.setProperty("--cv-text", isLight ? "#000000" : "#ffffff");
1767
+ this.container.style.setProperty("--cv-text-dim", isLight ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.6)");
1768
+ this.container.style.setProperty("--cv-ui-bg", isLight ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)");
1769
+ this.container.style.setProperty("--cv-ui-border", isLight ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)");
1751
1770
  }
1752
1771
  /** Update title text */
1753
1772
  setTitle(title) {
package/dist/index.mjs CHANGED
@@ -1278,6 +1278,7 @@ var PANEL_CSS = (
1278
1278
  .cv-curtain-desc {
1279
1279
  font-size: clamp(0.75rem, 2vw, 1.1rem);
1280
1280
  opacity: 0.8;
1281
+ color: rgba(255,255,255,0.8);
1281
1282
  max-width: 400px;
1282
1283
  margin: 0;
1283
1284
  line-height: 1.5;
@@ -1317,7 +1318,7 @@ var PANEL_CSS = (
1317
1318
  .cv-title {
1318
1319
  font-size: clamp(1rem, 2.5vw, 1.75rem);
1319
1320
  font-weight: 700;
1320
- color: #e0e0e0;
1321
+ color: var(--cv-text, #e0e0e0);
1321
1322
  display: flex;
1322
1323
  align-items: center;
1323
1324
  gap: 1rem;
@@ -1378,13 +1379,13 @@ var PANEL_CSS = (
1378
1379
  display: flex;
1379
1380
  align-items: center;
1380
1381
  gap: 0.75rem;
1381
- background: rgba(255, 255, 255, 0.03);
1382
+ background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
1382
1383
  backdrop-filter: blur(30px);
1383
1384
  -webkit-backdrop-filter: blur(30px);
1384
- border: 1px solid rgba(255, 255, 255, 0.08);
1385
+ border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
1385
1386
  padding: 0.3rem 0.75rem;
1386
1387
  border-radius: 100px;
1387
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
1388
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
1388
1389
  }
1389
1390
  .cv-btn {
1390
1391
  display: flex;
@@ -1392,7 +1393,7 @@ var PANEL_CSS = (
1392
1393
  gap: 0.5rem;
1393
1394
  background: transparent;
1394
1395
  border: none;
1395
- color: rgba(255,255,255,0.55);
1396
+ color: var(--cv-text-dim, rgba(255,255,255,0.55));
1396
1397
  font-weight: 600;
1397
1398
  font-size: 0.75rem;
1398
1399
  cursor: pointer;
@@ -1400,7 +1401,7 @@ var PANEL_CSS = (
1400
1401
  padding: 0.35rem 0.75rem;
1401
1402
  border-radius: 50px;
1402
1403
  }
1403
- .cv-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
1404
+ .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
1404
1405
  .cv-btn--end { color: #ff4444; }
1405
1406
  .cv-btn--end .cv-btn-box {
1406
1407
  background: #ff4444;
@@ -1489,7 +1490,7 @@ var ConversationalPanel = class {
1489
1490
  const accent = this.cfg.accentColor || "#a25a6b";
1490
1491
  const bg = this.cfg.backgroundColor || "#0a0a0a";
1491
1492
  this.container.style.setProperty("--cv-accent", accent);
1492
- this.container.style.setProperty("--cv-bg", bg);
1493
+ this.setBackgroundColor(bg);
1493
1494
  this.el = document.createElement("div");
1494
1495
  this.el.className = "cv-panel";
1495
1496
  this.el.innerHTML = `
@@ -1697,10 +1698,28 @@ var ConversationalPanel = class {
1697
1698
  this.visualizer.setAccentColor(r, g, b);
1698
1699
  }
1699
1700
  }
1700
- /** Update background color dynamically */
1701
+ /** Update background color dynamically and ensure text/UI contrast */
1701
1702
  setBackgroundColor(color) {
1702
1703
  this.cfg.backgroundColor = color;
1703
1704
  this.container.style.setProperty("--cv-bg", color);
1705
+ let r = 0, g = 0, b = 0;
1706
+ if (color.startsWith("#")) {
1707
+ if (color.length === 4) {
1708
+ r = parseInt(color[1] + color[1], 16);
1709
+ g = parseInt(color[2] + color[2], 16);
1710
+ b = parseInt(color[3] + color[3], 16);
1711
+ } else {
1712
+ r = parseInt(color.slice(1, 3), 16);
1713
+ g = parseInt(color.slice(3, 5), 16);
1714
+ b = parseInt(color.slice(5, 7), 16);
1715
+ }
1716
+ }
1717
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
1718
+ const isLight = luminance > 0.5;
1719
+ this.container.style.setProperty("--cv-text", isLight ? "#000000" : "#ffffff");
1720
+ this.container.style.setProperty("--cv-text-dim", isLight ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.6)");
1721
+ this.container.style.setProperty("--cv-ui-bg", isLight ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)");
1722
+ this.container.style.setProperty("--cv-ui-border", isLight ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)");
1704
1723
  }
1705
1724
  /** Update title text */
1706
1725
  setTitle(title) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lokutor/sdk",
3
3
 
4
- "version": "1.1.31",
4
+ "version": "1.1.33",
5
5
  "description": "JavaScript/TypeScript SDK for Lokutor Real-time Voice AI",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.mjs",
package/src/conversational-panel.ts CHANGED
@@ -60,6 +60,7 @@ const PANEL_CSS = /*css*/ `
60
60
  .cv-curtain-desc {
61
61
  font-size: clamp(0.75rem, 2vw, 1.1rem);
62
62
  opacity: 0.8;
63
+ color: rgba(255,255,255,0.8);
63
64
  max-width: 400px;
64
65
  margin: 0;
65
66
  line-height: 1.5;
@@ -99,7 +100,7 @@ const PANEL_CSS = /*css*/ `
99
100
  .cv-title {
100
101
  font-size: clamp(1rem, 2.5vw, 1.75rem);
101
102
  font-weight: 700;
102
- color: #e0e0e0;
103
+ color: var(--cv-text, #e0e0e0);
103
104
  display: flex;
104
105
  align-items: center;
105
106
  gap: 1rem;
@@ -160,13 +161,13 @@ const PANEL_CSS = /*css*/ `
160
161
  display: flex;
161
162
  align-items: center;
162
163
  gap: 0.75rem;
163
- background: rgba(255, 255, 255, 0.03);
164
+ background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
164
165
  backdrop-filter: blur(30px);
165
166
  -webkit-backdrop-filter: blur(30px);
166
- border: 1px solid rgba(255, 255, 255, 0.08);
167
+ border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
167
168
  padding: 0.3rem 0.75rem;
168
169
  border-radius: 100px;
169
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
170
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
170
171
  }
171
172
  .cv-btn {
172
173
  display: flex;
@@ -174,7 +175,7 @@ const PANEL_CSS = /*css*/ `
174
175
  gap: 0.5rem;
175
176
  background: transparent;
176
177
  border: none;
177
- color: rgba(255,255,255,0.55);
178
+ color: var(--cv-text-dim, rgba(255,255,255,0.55));
178
179
  font-weight: 600;
179
180
  font-size: 0.75rem;
180
181
  cursor: pointer;
@@ -182,7 +183,7 @@ const PANEL_CSS = /*css*/ `
182
183
  padding: 0.35rem 0.75rem;
183
184
  border-radius: 50px;
184
185
  }
185
- .cv-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
186
+ .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
186
187
  .cv-btn--end { color: #ff4444; }
187
188
  .cv-btn--end .cv-btn-box {
188
189
  background: #ff4444;
@@ -307,7 +308,7 @@ export class ConversationalPanel {
307
308
  const bg = this.cfg.backgroundColor || '#0a0a0a';
308
309
 
309
310
  this.container.style.setProperty('--cv-accent', accent);
310
- this.container.style.setProperty('--cv-bg', bg);
311
+ this.setBackgroundColor(bg);
311
312
 
312
313
  this.el = document.createElement('div');
313
314
  this.el.className = 'cv-panel';
@@ -528,10 +529,35 @@ export class ConversationalPanel {
528
529
  }
529
530
  }
530
531
 
531
- /** Update background color dynamically */
532
+ /** Update background color dynamically and ensure text/UI contrast */
532
533
  setBackgroundColor(color: string) {
533
534
  this.cfg.backgroundColor = color;
534
535
  this.container.style.setProperty('--cv-bg', color);
536
+
537
+ // Calculate luminance to decide on light/dark theme contrast
538
+ // Simple hex to RGB conversion
539
+ let r = 0, g = 0, b = 0;
540
+ if (color.startsWith('#')) {
541
+ if (color.length === 4) {
542
+ r = parseInt(color[1] + color[1], 16);
543
+ g = parseInt(color[2] + color[2], 16);
544
+ b = parseInt(color[3] + color[3], 16);
545
+ } else {
546
+ r = parseInt(color.slice(1, 3), 16);
547
+ g = parseInt(color.slice(3, 5), 16);
548
+ b = parseInt(color.slice(5, 7), 16);
549
+ }
550
+ }
551
+
552
+ // Relative luminance formula
553
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
554
+ const isLight = luminance > 0.5;
555
+
556
+ // Set contrast variables
557
+ this.container.style.setProperty('--cv-text', isLight ? '#000000' : '#ffffff');
558
+ this.container.style.setProperty('--cv-text-dim', isLight ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.6)');
559
+ this.container.style.setProperty('--cv-ui-bg', isLight ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)');
560
+ this.container.style.setProperty('--cv-ui-border', isLight ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)');
535
561
  }
536
562
 
537
563
  /** Update title text */