@lokutor/sdk 1.1.39 → 1.1.41

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 (7) hide show
  1. package/dist/index.d.mts +28 -1
  2. package/dist/index.d.ts +28 -1
  3. package/dist/index.js +110 -19
  4. package/dist/index.mjs +110 -19
  5. package/package.json +1 -1
  6. package/src/conversational-panel.ts +83 -19
  7. package/src/types.ts +27 -0
package/dist/index.d.mts CHANGED
@@ -20,8 +20,35 @@ declare enum Language {
20
20
  ENGLISH = "en",
21
21
  SPANISH = "es",
22
22
  FRENCH = "fr",
23
+ GERMAN = "de",
24
+ ITALIAN = "it",
23
25
  PORTUGUESE = "pt",
24
- KOREAN = "ko"
26
+ JAPANESE = "ja",
27
+ KOREAN = "ko",
28
+ CHINESE = "zh",
29
+ ARABIC = "ar",
30
+ BULGARIAN = "bg",
31
+ CROATIAN = "hr",
32
+ CZECH = "cs",
33
+ DANISH = "da",
34
+ DUTCH = "nl",
35
+ ESTONIAN = "et",
36
+ FINNISH = "fi",
37
+ GREEK = "el",
38
+ HINDI = "hi",
39
+ HUNGARIAN = "hu",
40
+ INDONESIAN = "id",
41
+ LATVIAN = "lv",
42
+ LITHUANIAN = "lt",
43
+ POLISH = "pl",
44
+ ROMANIAN = "ro",
45
+ RUSSIAN = "ru",
46
+ SLOVAK = "sk",
47
+ SLOVENIAN = "sl",
48
+ SWEDISH = "sv",
49
+ TURKISH = "tr",
50
+ UKRAINIAN = "uk",
51
+ VIETNAMESE = "vi"
25
52
  }
26
53
  /**
27
54
  * Audio configuration constants
package/dist/index.d.ts CHANGED
@@ -20,8 +20,35 @@ declare enum Language {
20
20
  ENGLISH = "en",
21
21
  SPANISH = "es",
22
22
  FRENCH = "fr",
23
+ GERMAN = "de",
24
+ ITALIAN = "it",
23
25
  PORTUGUESE = "pt",
24
- KOREAN = "ko"
26
+ JAPANESE = "ja",
27
+ KOREAN = "ko",
28
+ CHINESE = "zh",
29
+ ARABIC = "ar",
30
+ BULGARIAN = "bg",
31
+ CROATIAN = "hr",
32
+ CZECH = "cs",
33
+ DANISH = "da",
34
+ DUTCH = "nl",
35
+ ESTONIAN = "et",
36
+ FINNISH = "fi",
37
+ GREEK = "el",
38
+ HINDI = "hi",
39
+ HUNGARIAN = "hu",
40
+ INDONESIAN = "id",
41
+ LATVIAN = "lv",
42
+ LITHUANIAN = "lt",
43
+ POLISH = "pl",
44
+ ROMANIAN = "ro",
45
+ RUSSIAN = "ru",
46
+ SLOVAK = "sk",
47
+ SLOVENIAN = "sl",
48
+ SWEDISH = "sv",
49
+ TURKISH = "tr",
50
+ UKRAINIAN = "uk",
51
+ VIETNAMESE = "vi"
25
52
  }
26
53
  /**
27
54
  * Audio configuration constants
package/dist/index.js CHANGED
@@ -63,8 +63,35 @@ var Language = /* @__PURE__ */ ((Language2) => {
63
63
  Language2["ENGLISH"] = "en";
64
64
  Language2["SPANISH"] = "es";
65
65
  Language2["FRENCH"] = "fr";
66
+ Language2["GERMAN"] = "de";
67
+ Language2["ITALIAN"] = "it";
66
68
  Language2["PORTUGUESE"] = "pt";
69
+ Language2["JAPANESE"] = "ja";
67
70
  Language2["KOREAN"] = "ko";
71
+ Language2["CHINESE"] = "zh";
72
+ Language2["ARABIC"] = "ar";
73
+ Language2["BULGARIAN"] = "bg";
74
+ Language2["CROATIAN"] = "hr";
75
+ Language2["CZECH"] = "cs";
76
+ Language2["DANISH"] = "da";
77
+ Language2["DUTCH"] = "nl";
78
+ Language2["ESTONIAN"] = "et";
79
+ Language2["FINNISH"] = "fi";
80
+ Language2["GREEK"] = "el";
81
+ Language2["HINDI"] = "hi";
82
+ Language2["HUNGARIAN"] = "hu";
83
+ Language2["INDONESIAN"] = "id";
84
+ Language2["LATVIAN"] = "lv";
85
+ Language2["LITHUANIAN"] = "lt";
86
+ Language2["POLISH"] = "pl";
87
+ Language2["ROMANIAN"] = "ro";
88
+ Language2["RUSSIAN"] = "ru";
89
+ Language2["SLOVAK"] = "sk";
90
+ Language2["SLOVENIAN"] = "sl";
91
+ Language2["SWEDISH"] = "sv";
92
+ Language2["TURKISH"] = "tr";
93
+ Language2["UKRAINIAN"] = "uk";
94
+ Language2["VIETNAMESE"] = "vi";
68
95
  return Language2;
69
96
  })(Language || {});
70
97
  var AUDIO_CONFIG = {
@@ -1335,7 +1362,7 @@ var PANEL_CSS = (
1335
1362
  position: relative;
1336
1363
  width: 100%;
1337
1364
  aspect-ratio: 16 / 9;
1338
- max-height: 800px;
1365
+ max-height: clamp(200px, 50vh, 800px);
1339
1366
  display: flex;
1340
1367
  flex-direction: column;
1341
1368
  align-items: center;
@@ -1344,8 +1371,9 @@ var PANEL_CSS = (
1344
1371
  margin: 0;
1345
1372
  background: var(--cv-bg, #0a0a0a);
1346
1373
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
1347
- border-radius: 40px;
1374
+ border-radius: clamp(12px, 4vw, 40px);
1348
1375
  overflow: hidden;
1376
+ container-type: size;
1349
1377
  }
1350
1378
  .cv-curtain {
1351
1379
  position: absolute;
@@ -1484,35 +1512,35 @@ var PANEL_CSS = (
1484
1512
  display: flex;
1485
1513
  flex-direction: column;
1486
1514
  align-items: center;
1487
- gap: 1.5rem;
1515
+ gap: clamp(1rem, 2vw, 1.5rem);
1488
1516
  margin-top: auto;
1489
- padding-bottom: 1.5rem;
1517
+ padding-bottom: clamp(1rem, 2vw, 1.5rem);
1490
1518
  z-index: 20;
1491
1519
  }
1492
1520
  .cv-pill {
1493
1521
  display: flex;
1494
1522
  align-items: center;
1495
- gap: 0.75rem;
1523
+ gap: clamp(0.5rem, 1vw, 0.75rem);
1496
1524
  background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
1497
1525
  backdrop-filter: blur(30px);
1498
1526
  -webkit-backdrop-filter: blur(30px);
1499
1527
  border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
1500
- padding: 0.3rem 0.75rem;
1528
+ padding: clamp(0.25rem, 0.5vw, 0.3rem) clamp(0.5rem, 1vw, 0.75rem);
1501
1529
  border-radius: 100px;
1502
1530
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
1503
1531
  }
1504
1532
  .cv-btn {
1505
1533
  display: flex;
1506
1534
  align-items: center;
1507
- gap: 0.5rem;
1535
+ gap: clamp(0.35rem, 1vw, 0.5rem);
1508
1536
  background: transparent;
1509
1537
  border: none;
1510
1538
  color: var(--cv-text-dim, rgba(255,255,255,0.55));
1511
1539
  font-weight: 600;
1512
- font-size: 0.75rem;
1540
+ font-size: clamp(0.65rem, 1.5vw, 0.75rem);
1513
1541
  cursor: pointer;
1514
1542
  transition: all 0.2s ease;
1515
- padding: 0.35rem 0.75rem;
1543
+ padding: clamp(0.25rem, 0.5vw, 0.35rem) clamp(0.5rem, 1vw, 0.75rem);
1516
1544
  border-radius: 50px;
1517
1545
  }
1518
1546
  .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
@@ -1526,31 +1554,94 @@ var PANEL_CSS = (
1526
1554
  .cv-btn.is-muted { color: var(--cv-accent); }
1527
1555
  .cv-error {
1528
1556
  position: absolute;
1529
- bottom: 1.25rem;
1557
+ bottom: clamp(0.75rem, 2vw, 1.25rem);
1530
1558
  left: 50%;
1531
1559
  transform: translateX(-50%);
1532
1560
  background: #0a0a0a;
1533
1561
  color: #e0e0e0;
1534
- padding: 0.75rem 1.5rem;
1535
- border-radius: 12px;
1536
- font-size: 0.875rem;
1562
+ padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
1563
+ border-radius: clamp(8px, 1.5vw, 12px);
1564
+ font-size: clamp(0.75rem, 1.5vw, 0.875rem);
1537
1565
  font-weight: 500;
1538
1566
  display: none;
1539
1567
  align-items: center;
1540
- gap: 0.75rem;
1568
+ gap: clamp(0.5rem, 1vw, 0.75rem);
1541
1569
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
1542
1570
  z-index: 1000;
1543
1571
  border: 1px solid rgba(255, 255, 255, 0.06);
1544
1572
  backdrop-filter: blur(20px);
1573
+ max-width: clamp(280px, 90vw, 400px);
1545
1574
  }
1546
1575
  .cv-error.is-visible { display: flex; }
1547
1576
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
1548
- @media (max-width: 640px) {
1549
- .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
1577
+
1578
+ /* === COMPACT MODE: < 300px width === */
1579
+ @container (max-width: 299px) {
1580
+ .cv-curtain-content { padding: 0.5rem; gap: 0.3rem; }
1581
+ .cv-curtain-title { font-size: 0.8rem; }
1582
+ .cv-curtain-desc { display: none; }
1583
+ .cv-curtain-btn { padding: 0.3rem 0.6rem; font-size: 0.6rem; gap: 0.3rem; }
1584
+ .cv-curtain-btn svg { display: none; }
1585
+ .cv-visualizer-wrap { width: 60px; height: 60px; }
1586
+ .cv-header { padding-top: 0.75rem; }
1587
+ .cv-title { font-size: 0.7rem; gap: 0.3rem; }
1588
+ .cv-title .cv-timer { display: none; }
1589
+ .cv-controls { gap: 0.6rem; padding-bottom: 0.6rem; }
1590
+ .cv-pill { padding: 0.15rem 0.4rem; gap: 0.3rem; }
1591
+ .cv-btn { padding: 0.2rem 0.4rem; font-size: 0.6rem; gap: 0; }
1592
+ .cv-btn span { display: none; }
1593
+ .cv-btn svg { width: 16px; height: 16px; }
1594
+ .cv-error { padding: 0.4rem 0.8rem; font-size: 0.65rem; bottom: 0.5rem; }
1595
+ }
1596
+
1597
+ /* === SMALL MODE: 300px - 480px width === */
1598
+ @container (min-width: 300px) and (max-width: 480px) {
1550
1599
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
1551
- .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
1552
- .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
1553
- .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
1600
+ .cv-curtain-title { font-size: clamp(0.9rem, 3cqw, 1.2rem); }
1601
+ .cv-curtain-desc { font-size: clamp(0.6rem, 2cqw, 0.8rem); }
1602
+ .cv-curtain-btn { padding: clamp(0.3rem, 1cqw, 0.5rem) clamp(0.6rem, 2cqw, 1rem); font-size: clamp(0.6rem, 1.5cqw, 0.8rem); }
1603
+ .cv-visualizer-wrap { width: clamp(80px, 35cqw, 140px); height: clamp(80px, 35cqw, 140px); }
1604
+ .cv-header { padding-top: 0.8rem; }
1605
+ .cv-title { font-size: clamp(0.7rem, 2.5cqw, 1rem); gap: 0.4rem; }
1606
+ .cv-title .cv-timer { font-size: 0.65em; }
1607
+ .cv-controls { gap: clamp(0.6rem, 1.5cqw, 1rem); padding-bottom: clamp(0.6rem, 1.5cqw, 1rem); }
1608
+ .cv-pill { padding: clamp(0.15rem, 0.5cqw, 0.25rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: 0.65rem; gap: 0.3rem; }
1609
+ .cv-btn { padding: clamp(0.2rem, 0.5cqw, 0.3rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: clamp(0.6rem, 1.2cqw, 0.7rem); }
1610
+ .cv-btn span:last-child { display: none; }
1611
+ .cv-error { padding: clamp(0.4rem, 1cqw, 0.6rem) clamp(0.8rem, 1.5cqw, 1.2rem); font-size: 0.7rem; }
1612
+ }
1613
+
1614
+ /* === MEDIUM MODE: 480px - 768px width === */
1615
+ @container (min-width: 480px) and (max-width: 768px) {
1616
+ .cv-panel { max-height: 600px; aspect-ratio: 3 / 4; }
1617
+ .cv-curtain-content { padding: clamp(0.75rem, 2cqw, 1.25rem); gap: clamp(0.5rem, 1.5cqw, 1rem); }
1618
+ .cv-curtain-title { font-size: clamp(1rem, 4cqw, 1.6rem); }
1619
+ .cv-curtain-desc { font-size: clamp(0.7rem, 2.5cqw, 1rem); }
1620
+ .cv-curtain-btn { padding: clamp(0.45rem, 1.5cqw, 0.7rem) clamp(1rem, 2cqw, 1.5rem); font-size: clamp(0.7rem, 1.5cqw, 0.9rem); }
1621
+ .cv-visualizer-wrap { width: clamp(100px, 40cqw, 200px); height: clamp(100px, 40cqw, 200px); }
1622
+ .cv-header { padding-top: clamp(1rem, 1.5cqw, 1.5rem); }
1623
+ .cv-title { font-size: clamp(0.9rem, 3cqw, 1.3rem); gap: clamp(0.4rem, 1cqw, 0.75rem); }
1624
+ .cv-title .cv-timer { font-size: 0.85em; }
1625
+ .cv-controls { gap: clamp(0.8rem, 1.5cqw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5cqw, 1.2rem); }
1626
+ .cv-pill { padding: clamp(0.2rem, 0.75cqw, 0.3rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: 0.7rem; }
1627
+ .cv-btn { padding: clamp(0.25rem, 0.75cqw, 0.35rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: clamp(0.65rem, 1.2cqw, 0.8rem); }
1628
+ .cv-error { padding: clamp(0.5rem, 1.2cqw, 0.75rem) clamp(1rem, 1.5cqw, 1.5rem); font-size: clamp(0.7rem, 1.2cqw, 0.85rem); }
1629
+ }
1630
+
1631
+ /* === LARGE MODE: > 768px width === */
1632
+ @container (min-width: 768px) {
1633
+ .cv-curtain-content { padding: clamp(1rem, 2.5cqw, 2rem); gap: clamp(0.75rem, 2cqw, 1.5rem); }
1634
+ .cv-curtain-title { font-size: clamp(1.2rem, 5cqw, 2.5rem); }
1635
+ .cv-curtain-desc { font-size: clamp(0.8rem, 2.5cqw, 1.2rem); max-width: 500px; }
1636
+ .cv-curtain-btn { padding: clamp(0.6rem, 2cqw, 1rem) clamp(1.5rem, 3cqw, 2.5rem); font-size: clamp(0.8rem, 1.5cqw, 1.1rem); }
1637
+ .cv-visualizer-wrap { width: clamp(140px, 45cqw, 300px); height: clamp(140px, 45cqw, 300px); }
1638
+ .cv-header { padding-top: clamp(1.5rem, 2cqw, 2rem); }
1639
+ .cv-title { font-size: clamp(1rem, 3cqw, 1.8rem); gap: clamp(0.75rem, 1.5cqw, 1.2rem); }
1640
+ .cv-title .cv-timer { font-size: 0.9em; }
1641
+ .cv-controls { gap: clamp(1.2rem, 2cqw, 1.8rem); padding-bottom: clamp(1.2rem, 2cqw, 1.8rem); }
1642
+ .cv-pill { padding: clamp(0.3rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: 0.85rem; gap: 0.75rem; }
1643
+ .cv-btn { padding: clamp(0.35rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: clamp(0.75rem, 1.2cqw, 0.9rem); }
1644
+ .cv-error { padding: clamp(0.75rem, 1.5cqw, 1rem) clamp(1.5rem, 2cqw, 2rem); font-size: clamp(0.85rem, 1cqw, 1rem); }
1554
1645
  }
1555
1646
  `
1556
1647
  );
package/dist/index.mjs CHANGED
@@ -16,8 +16,35 @@ var Language = /* @__PURE__ */ ((Language2) => {
16
16
  Language2["ENGLISH"] = "en";
17
17
  Language2["SPANISH"] = "es";
18
18
  Language2["FRENCH"] = "fr";
19
+ Language2["GERMAN"] = "de";
20
+ Language2["ITALIAN"] = "it";
19
21
  Language2["PORTUGUESE"] = "pt";
22
+ Language2["JAPANESE"] = "ja";
20
23
  Language2["KOREAN"] = "ko";
24
+ Language2["CHINESE"] = "zh";
25
+ Language2["ARABIC"] = "ar";
26
+ Language2["BULGARIAN"] = "bg";
27
+ Language2["CROATIAN"] = "hr";
28
+ Language2["CZECH"] = "cs";
29
+ Language2["DANISH"] = "da";
30
+ Language2["DUTCH"] = "nl";
31
+ Language2["ESTONIAN"] = "et";
32
+ Language2["FINNISH"] = "fi";
33
+ Language2["GREEK"] = "el";
34
+ Language2["HINDI"] = "hi";
35
+ Language2["HUNGARIAN"] = "hu";
36
+ Language2["INDONESIAN"] = "id";
37
+ Language2["LATVIAN"] = "lv";
38
+ Language2["LITHUANIAN"] = "lt";
39
+ Language2["POLISH"] = "pl";
40
+ Language2["ROMANIAN"] = "ro";
41
+ Language2["RUSSIAN"] = "ru";
42
+ Language2["SLOVAK"] = "sk";
43
+ Language2["SLOVENIAN"] = "sl";
44
+ Language2["SWEDISH"] = "sv";
45
+ Language2["TURKISH"] = "tr";
46
+ Language2["UKRAINIAN"] = "uk";
47
+ Language2["VIETNAMESE"] = "vi";
21
48
  return Language2;
22
49
  })(Language || {});
23
50
  var AUDIO_CONFIG = {
@@ -1288,7 +1315,7 @@ var PANEL_CSS = (
1288
1315
  position: relative;
1289
1316
  width: 100%;
1290
1317
  aspect-ratio: 16 / 9;
1291
- max-height: 800px;
1318
+ max-height: clamp(200px, 50vh, 800px);
1292
1319
  display: flex;
1293
1320
  flex-direction: column;
1294
1321
  align-items: center;
@@ -1297,8 +1324,9 @@ var PANEL_CSS = (
1297
1324
  margin: 0;
1298
1325
  background: var(--cv-bg, #0a0a0a);
1299
1326
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
1300
- border-radius: 40px;
1327
+ border-radius: clamp(12px, 4vw, 40px);
1301
1328
  overflow: hidden;
1329
+ container-type: size;
1302
1330
  }
1303
1331
  .cv-curtain {
1304
1332
  position: absolute;
@@ -1437,35 +1465,35 @@ var PANEL_CSS = (
1437
1465
  display: flex;
1438
1466
  flex-direction: column;
1439
1467
  align-items: center;
1440
- gap: 1.5rem;
1468
+ gap: clamp(1rem, 2vw, 1.5rem);
1441
1469
  margin-top: auto;
1442
- padding-bottom: 1.5rem;
1470
+ padding-bottom: clamp(1rem, 2vw, 1.5rem);
1443
1471
  z-index: 20;
1444
1472
  }
1445
1473
  .cv-pill {
1446
1474
  display: flex;
1447
1475
  align-items: center;
1448
- gap: 0.75rem;
1476
+ gap: clamp(0.5rem, 1vw, 0.75rem);
1449
1477
  background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
1450
1478
  backdrop-filter: blur(30px);
1451
1479
  -webkit-backdrop-filter: blur(30px);
1452
1480
  border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
1453
- padding: 0.3rem 0.75rem;
1481
+ padding: clamp(0.25rem, 0.5vw, 0.3rem) clamp(0.5rem, 1vw, 0.75rem);
1454
1482
  border-radius: 100px;
1455
1483
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
1456
1484
  }
1457
1485
  .cv-btn {
1458
1486
  display: flex;
1459
1487
  align-items: center;
1460
- gap: 0.5rem;
1488
+ gap: clamp(0.35rem, 1vw, 0.5rem);
1461
1489
  background: transparent;
1462
1490
  border: none;
1463
1491
  color: var(--cv-text-dim, rgba(255,255,255,0.55));
1464
1492
  font-weight: 600;
1465
- font-size: 0.75rem;
1493
+ font-size: clamp(0.65rem, 1.5vw, 0.75rem);
1466
1494
  cursor: pointer;
1467
1495
  transition: all 0.2s ease;
1468
- padding: 0.35rem 0.75rem;
1496
+ padding: clamp(0.25rem, 0.5vw, 0.35rem) clamp(0.5rem, 1vw, 0.75rem);
1469
1497
  border-radius: 50px;
1470
1498
  }
1471
1499
  .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
@@ -1479,31 +1507,94 @@ var PANEL_CSS = (
1479
1507
  .cv-btn.is-muted { color: var(--cv-accent); }
1480
1508
  .cv-error {
1481
1509
  position: absolute;
1482
- bottom: 1.25rem;
1510
+ bottom: clamp(0.75rem, 2vw, 1.25rem);
1483
1511
  left: 50%;
1484
1512
  transform: translateX(-50%);
1485
1513
  background: #0a0a0a;
1486
1514
  color: #e0e0e0;
1487
- padding: 0.75rem 1.5rem;
1488
- border-radius: 12px;
1489
- font-size: 0.875rem;
1515
+ padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
1516
+ border-radius: clamp(8px, 1.5vw, 12px);
1517
+ font-size: clamp(0.75rem, 1.5vw, 0.875rem);
1490
1518
  font-weight: 500;
1491
1519
  display: none;
1492
1520
  align-items: center;
1493
- gap: 0.75rem;
1521
+ gap: clamp(0.5rem, 1vw, 0.75rem);
1494
1522
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
1495
1523
  z-index: 1000;
1496
1524
  border: 1px solid rgba(255, 255, 255, 0.06);
1497
1525
  backdrop-filter: blur(20px);
1526
+ max-width: clamp(280px, 90vw, 400px);
1498
1527
  }
1499
1528
  .cv-error.is-visible { display: flex; }
1500
1529
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
1501
- @media (max-width: 640px) {
1502
- .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
1530
+
1531
+ /* === COMPACT MODE: < 300px width === */
1532
+ @container (max-width: 299px) {
1533
+ .cv-curtain-content { padding: 0.5rem; gap: 0.3rem; }
1534
+ .cv-curtain-title { font-size: 0.8rem; }
1535
+ .cv-curtain-desc { display: none; }
1536
+ .cv-curtain-btn { padding: 0.3rem 0.6rem; font-size: 0.6rem; gap: 0.3rem; }
1537
+ .cv-curtain-btn svg { display: none; }
1538
+ .cv-visualizer-wrap { width: 60px; height: 60px; }
1539
+ .cv-header { padding-top: 0.75rem; }
1540
+ .cv-title { font-size: 0.7rem; gap: 0.3rem; }
1541
+ .cv-title .cv-timer { display: none; }
1542
+ .cv-controls { gap: 0.6rem; padding-bottom: 0.6rem; }
1543
+ .cv-pill { padding: 0.15rem 0.4rem; gap: 0.3rem; }
1544
+ .cv-btn { padding: 0.2rem 0.4rem; font-size: 0.6rem; gap: 0; }
1545
+ .cv-btn span { display: none; }
1546
+ .cv-btn svg { width: 16px; height: 16px; }
1547
+ .cv-error { padding: 0.4rem 0.8rem; font-size: 0.65rem; bottom: 0.5rem; }
1548
+ }
1549
+
1550
+ /* === SMALL MODE: 300px - 480px width === */
1551
+ @container (min-width: 300px) and (max-width: 480px) {
1503
1552
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
1504
- .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
1505
- .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
1506
- .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
1553
+ .cv-curtain-title { font-size: clamp(0.9rem, 3cqw, 1.2rem); }
1554
+ .cv-curtain-desc { font-size: clamp(0.6rem, 2cqw, 0.8rem); }
1555
+ .cv-curtain-btn { padding: clamp(0.3rem, 1cqw, 0.5rem) clamp(0.6rem, 2cqw, 1rem); font-size: clamp(0.6rem, 1.5cqw, 0.8rem); }
1556
+ .cv-visualizer-wrap { width: clamp(80px, 35cqw, 140px); height: clamp(80px, 35cqw, 140px); }
1557
+ .cv-header { padding-top: 0.8rem; }
1558
+ .cv-title { font-size: clamp(0.7rem, 2.5cqw, 1rem); gap: 0.4rem; }
1559
+ .cv-title .cv-timer { font-size: 0.65em; }
1560
+ .cv-controls { gap: clamp(0.6rem, 1.5cqw, 1rem); padding-bottom: clamp(0.6rem, 1.5cqw, 1rem); }
1561
+ .cv-pill { padding: clamp(0.15rem, 0.5cqw, 0.25rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: 0.65rem; gap: 0.3rem; }
1562
+ .cv-btn { padding: clamp(0.2rem, 0.5cqw, 0.3rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: clamp(0.6rem, 1.2cqw, 0.7rem); }
1563
+ .cv-btn span:last-child { display: none; }
1564
+ .cv-error { padding: clamp(0.4rem, 1cqw, 0.6rem) clamp(0.8rem, 1.5cqw, 1.2rem); font-size: 0.7rem; }
1565
+ }
1566
+
1567
+ /* === MEDIUM MODE: 480px - 768px width === */
1568
+ @container (min-width: 480px) and (max-width: 768px) {
1569
+ .cv-panel { max-height: 600px; aspect-ratio: 3 / 4; }
1570
+ .cv-curtain-content { padding: clamp(0.75rem, 2cqw, 1.25rem); gap: clamp(0.5rem, 1.5cqw, 1rem); }
1571
+ .cv-curtain-title { font-size: clamp(1rem, 4cqw, 1.6rem); }
1572
+ .cv-curtain-desc { font-size: clamp(0.7rem, 2.5cqw, 1rem); }
1573
+ .cv-curtain-btn { padding: clamp(0.45rem, 1.5cqw, 0.7rem) clamp(1rem, 2cqw, 1.5rem); font-size: clamp(0.7rem, 1.5cqw, 0.9rem); }
1574
+ .cv-visualizer-wrap { width: clamp(100px, 40cqw, 200px); height: clamp(100px, 40cqw, 200px); }
1575
+ .cv-header { padding-top: clamp(1rem, 1.5cqw, 1.5rem); }
1576
+ .cv-title { font-size: clamp(0.9rem, 3cqw, 1.3rem); gap: clamp(0.4rem, 1cqw, 0.75rem); }
1577
+ .cv-title .cv-timer { font-size: 0.85em; }
1578
+ .cv-controls { gap: clamp(0.8rem, 1.5cqw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5cqw, 1.2rem); }
1579
+ .cv-pill { padding: clamp(0.2rem, 0.75cqw, 0.3rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: 0.7rem; }
1580
+ .cv-btn { padding: clamp(0.25rem, 0.75cqw, 0.35rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: clamp(0.65rem, 1.2cqw, 0.8rem); }
1581
+ .cv-error { padding: clamp(0.5rem, 1.2cqw, 0.75rem) clamp(1rem, 1.5cqw, 1.5rem); font-size: clamp(0.7rem, 1.2cqw, 0.85rem); }
1582
+ }
1583
+
1584
+ /* === LARGE MODE: > 768px width === */
1585
+ @container (min-width: 768px) {
1586
+ .cv-curtain-content { padding: clamp(1rem, 2.5cqw, 2rem); gap: clamp(0.75rem, 2cqw, 1.5rem); }
1587
+ .cv-curtain-title { font-size: clamp(1.2rem, 5cqw, 2.5rem); }
1588
+ .cv-curtain-desc { font-size: clamp(0.8rem, 2.5cqw, 1.2rem); max-width: 500px; }
1589
+ .cv-curtain-btn { padding: clamp(0.6rem, 2cqw, 1rem) clamp(1.5rem, 3cqw, 2.5rem); font-size: clamp(0.8rem, 1.5cqw, 1.1rem); }
1590
+ .cv-visualizer-wrap { width: clamp(140px, 45cqw, 300px); height: clamp(140px, 45cqw, 300px); }
1591
+ .cv-header { padding-top: clamp(1.5rem, 2cqw, 2rem); }
1592
+ .cv-title { font-size: clamp(1rem, 3cqw, 1.8rem); gap: clamp(0.75rem, 1.5cqw, 1.2rem); }
1593
+ .cv-title .cv-timer { font-size: 0.9em; }
1594
+ .cv-controls { gap: clamp(1.2rem, 2cqw, 1.8rem); padding-bottom: clamp(1.2rem, 2cqw, 1.8rem); }
1595
+ .cv-pill { padding: clamp(0.3rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: 0.85rem; gap: 0.75rem; }
1596
+ .cv-btn { padding: clamp(0.35rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: clamp(0.75rem, 1.2cqw, 0.9rem); }
1597
+ .cv-error { padding: clamp(0.75rem, 1.5cqw, 1rem) clamp(1.5rem, 2cqw, 2rem); font-size: clamp(0.85rem, 1cqw, 1rem); }
1507
1598
  }
1508
1599
  `
1509
1600
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lokutor/sdk",
3
3
 
4
- "version": "1.1.39",
4
+ "version": "1.1.41",
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
@@ -3,7 +3,7 @@ const PANEL_CSS = /*css*/ `
3
3
  position: relative;
4
4
  width: 100%;
5
5
  aspect-ratio: 16 / 9;
6
- max-height: 800px;
6
+ max-height: clamp(200px, 50vh, 800px);
7
7
  display: flex;
8
8
  flex-direction: column;
9
9
  align-items: center;
@@ -12,8 +12,9 @@ const PANEL_CSS = /*css*/ `
12
12
  margin: 0;
13
13
  background: var(--cv-bg, #0a0a0a);
14
14
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
15
- border-radius: 40px;
15
+ border-radius: clamp(12px, 4vw, 40px);
16
16
  overflow: hidden;
17
+ container-type: size;
17
18
  }
18
19
  .cv-curtain {
19
20
  position: absolute;
@@ -152,35 +153,35 @@ const PANEL_CSS = /*css*/ `
152
153
  display: flex;
153
154
  flex-direction: column;
154
155
  align-items: center;
155
- gap: 1.5rem;
156
+ gap: clamp(1rem, 2vw, 1.5rem);
156
157
  margin-top: auto;
157
- padding-bottom: 1.5rem;
158
+ padding-bottom: clamp(1rem, 2vw, 1.5rem);
158
159
  z-index: 20;
159
160
  }
160
161
  .cv-pill {
161
162
  display: flex;
162
163
  align-items: center;
163
- gap: 0.75rem;
164
+ gap: clamp(0.5rem, 1vw, 0.75rem);
164
165
  background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
165
166
  backdrop-filter: blur(30px);
166
167
  -webkit-backdrop-filter: blur(30px);
167
168
  border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
168
- padding: 0.3rem 0.75rem;
169
+ padding: clamp(0.25rem, 0.5vw, 0.3rem) clamp(0.5rem, 1vw, 0.75rem);
169
170
  border-radius: 100px;
170
171
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
171
172
  }
172
173
  .cv-btn {
173
174
  display: flex;
174
175
  align-items: center;
175
- gap: 0.5rem;
176
+ gap: clamp(0.35rem, 1vw, 0.5rem);
176
177
  background: transparent;
177
178
  border: none;
178
179
  color: var(--cv-text-dim, rgba(255,255,255,0.55));
179
180
  font-weight: 600;
180
- font-size: 0.75rem;
181
+ font-size: clamp(0.65rem, 1.5vw, 0.75rem);
181
182
  cursor: pointer;
182
183
  transition: all 0.2s ease;
183
- padding: 0.35rem 0.75rem;
184
+ padding: clamp(0.25rem, 0.5vw, 0.35rem) clamp(0.5rem, 1vw, 0.75rem);
184
185
  border-radius: 50px;
185
186
  }
186
187
  .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
@@ -194,31 +195,94 @@ const PANEL_CSS = /*css*/ `
194
195
  .cv-btn.is-muted { color: var(--cv-accent); }
195
196
  .cv-error {
196
197
  position: absolute;
197
- bottom: 1.25rem;
198
+ bottom: clamp(0.75rem, 2vw, 1.25rem);
198
199
  left: 50%;
199
200
  transform: translateX(-50%);
200
201
  background: #0a0a0a;
201
202
  color: #e0e0e0;
202
- padding: 0.75rem 1.5rem;
203
- border-radius: 12px;
204
- font-size: 0.875rem;
203
+ padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
204
+ border-radius: clamp(8px, 1.5vw, 12px);
205
+ font-size: clamp(0.75rem, 1.5vw, 0.875rem);
205
206
  font-weight: 500;
206
207
  display: none;
207
208
  align-items: center;
208
- gap: 0.75rem;
209
+ gap: clamp(0.5rem, 1vw, 0.75rem);
209
210
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
210
211
  z-index: 1000;
211
212
  border: 1px solid rgba(255, 255, 255, 0.06);
212
213
  backdrop-filter: blur(20px);
214
+ max-width: clamp(280px, 90vw, 400px);
213
215
  }
214
216
  .cv-error.is-visible { display: flex; }
215
217
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
216
- @media (max-width: 640px) {
217
- .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
218
+
219
+ /* === COMPACT MODE: < 300px width === */
220
+ @container (max-width: 299px) {
221
+ .cv-curtain-content { padding: 0.5rem; gap: 0.3rem; }
222
+ .cv-curtain-title { font-size: 0.8rem; }
223
+ .cv-curtain-desc { display: none; }
224
+ .cv-curtain-btn { padding: 0.3rem 0.6rem; font-size: 0.6rem; gap: 0.3rem; }
225
+ .cv-curtain-btn svg { display: none; }
226
+ .cv-visualizer-wrap { width: 60px; height: 60px; }
227
+ .cv-header { padding-top: 0.75rem; }
228
+ .cv-title { font-size: 0.7rem; gap: 0.3rem; }
229
+ .cv-title .cv-timer { display: none; }
230
+ .cv-controls { gap: 0.6rem; padding-bottom: 0.6rem; }
231
+ .cv-pill { padding: 0.15rem 0.4rem; gap: 0.3rem; }
232
+ .cv-btn { padding: 0.2rem 0.4rem; font-size: 0.6rem; gap: 0; }
233
+ .cv-btn span { display: none; }
234
+ .cv-btn svg { width: 16px; height: 16px; }
235
+ .cv-error { padding: 0.4rem 0.8rem; font-size: 0.65rem; bottom: 0.5rem; }
236
+ }
237
+
238
+ /* === SMALL MODE: 300px - 480px width === */
239
+ @container (min-width: 300px) and (max-width: 480px) {
218
240
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
219
- .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
220
- .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
221
- .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
241
+ .cv-curtain-title { font-size: clamp(0.9rem, 3cqw, 1.2rem); }
242
+ .cv-curtain-desc { font-size: clamp(0.6rem, 2cqw, 0.8rem); }
243
+ .cv-curtain-btn { padding: clamp(0.3rem, 1cqw, 0.5rem) clamp(0.6rem, 2cqw, 1rem); font-size: clamp(0.6rem, 1.5cqw, 0.8rem); }
244
+ .cv-visualizer-wrap { width: clamp(80px, 35cqw, 140px); height: clamp(80px, 35cqw, 140px); }
245
+ .cv-header { padding-top: 0.8rem; }
246
+ .cv-title { font-size: clamp(0.7rem, 2.5cqw, 1rem); gap: 0.4rem; }
247
+ .cv-title .cv-timer { font-size: 0.65em; }
248
+ .cv-controls { gap: clamp(0.6rem, 1.5cqw, 1rem); padding-bottom: clamp(0.6rem, 1.5cqw, 1rem); }
249
+ .cv-pill { padding: clamp(0.15rem, 0.5cqw, 0.25rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: 0.65rem; gap: 0.3rem; }
250
+ .cv-btn { padding: clamp(0.2rem, 0.5cqw, 0.3rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: clamp(0.6rem, 1.2cqw, 0.7rem); }
251
+ .cv-btn span:last-child { display: none; }
252
+ .cv-error { padding: clamp(0.4rem, 1cqw, 0.6rem) clamp(0.8rem, 1.5cqw, 1.2rem); font-size: 0.7rem; }
253
+ }
254
+
255
+ /* === MEDIUM MODE: 480px - 768px width === */
256
+ @container (min-width: 480px) and (max-width: 768px) {
257
+ .cv-panel { max-height: 600px; aspect-ratio: 3 / 4; }
258
+ .cv-curtain-content { padding: clamp(0.75rem, 2cqw, 1.25rem); gap: clamp(0.5rem, 1.5cqw, 1rem); }
259
+ .cv-curtain-title { font-size: clamp(1rem, 4cqw, 1.6rem); }
260
+ .cv-curtain-desc { font-size: clamp(0.7rem, 2.5cqw, 1rem); }
261
+ .cv-curtain-btn { padding: clamp(0.45rem, 1.5cqw, 0.7rem) clamp(1rem, 2cqw, 1.5rem); font-size: clamp(0.7rem, 1.5cqw, 0.9rem); }
262
+ .cv-visualizer-wrap { width: clamp(100px, 40cqw, 200px); height: clamp(100px, 40cqw, 200px); }
263
+ .cv-header { padding-top: clamp(1rem, 1.5cqw, 1.5rem); }
264
+ .cv-title { font-size: clamp(0.9rem, 3cqw, 1.3rem); gap: clamp(0.4rem, 1cqw, 0.75rem); }
265
+ .cv-title .cv-timer { font-size: 0.85em; }
266
+ .cv-controls { gap: clamp(0.8rem, 1.5cqw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5cqw, 1.2rem); }
267
+ .cv-pill { padding: clamp(0.2rem, 0.75cqw, 0.3rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: 0.7rem; }
268
+ .cv-btn { padding: clamp(0.25rem, 0.75cqw, 0.35rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: clamp(0.65rem, 1.2cqw, 0.8rem); }
269
+ .cv-error { padding: clamp(0.5rem, 1.2cqw, 0.75rem) clamp(1rem, 1.5cqw, 1.5rem); font-size: clamp(0.7rem, 1.2cqw, 0.85rem); }
270
+ }
271
+
272
+ /* === LARGE MODE: > 768px width === */
273
+ @container (min-width: 768px) {
274
+ .cv-curtain-content { padding: clamp(1rem, 2.5cqw, 2rem); gap: clamp(0.75rem, 2cqw, 1.5rem); }
275
+ .cv-curtain-title { font-size: clamp(1.2rem, 5cqw, 2.5rem); }
276
+ .cv-curtain-desc { font-size: clamp(0.8rem, 2.5cqw, 1.2rem); max-width: 500px; }
277
+ .cv-curtain-btn { padding: clamp(0.6rem, 2cqw, 1rem) clamp(1.5rem, 3cqw, 2.5rem); font-size: clamp(0.8rem, 1.5cqw, 1.1rem); }
278
+ .cv-visualizer-wrap { width: clamp(140px, 45cqw, 300px); height: clamp(140px, 45cqw, 300px); }
279
+ .cv-header { padding-top: clamp(1.5rem, 2cqw, 2rem); }
280
+ .cv-title { font-size: clamp(1rem, 3cqw, 1.8rem); gap: clamp(0.75rem, 1.5cqw, 1.2rem); }
281
+ .cv-title .cv-timer { font-size: 0.9em; }
282
+ .cv-controls { gap: clamp(1.2rem, 2cqw, 1.8rem); padding-bottom: clamp(1.2rem, 2cqw, 1.8rem); }
283
+ .cv-pill { padding: clamp(0.3rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: 0.85rem; gap: 0.75rem; }
284
+ .cv-btn { padding: clamp(0.35rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: clamp(0.75rem, 1.2cqw, 0.9rem); }
285
+ .cv-error { padding: clamp(0.75rem, 1.5cqw, 1rem) clamp(1.5rem, 2cqw, 2rem); font-size: clamp(0.85rem, 1cqw, 1rem); }
222
286
  }
223
287
  `;
224
288
 
package/src/types.ts CHANGED
@@ -24,8 +24,35 @@ export enum Language {
24
24
  ENGLISH = "en",
25
25
  SPANISH = "es",
26
26
  FRENCH = "fr",
27
+ GERMAN = "de",
28
+ ITALIAN = "it",
27
29
  PORTUGUESE = "pt",
30
+ JAPANESE = "ja",
28
31
  KOREAN = "ko",
32
+ CHINESE = "zh",
33
+ ARABIC = "ar",
34
+ BULGARIAN = "bg",
35
+ CROATIAN = "hr",
36
+ CZECH = "cs",
37
+ DANISH = "da",
38
+ DUTCH = "nl",
39
+ ESTONIAN = "et",
40
+ FINNISH = "fi",
41
+ GREEK = "el",
42
+ HINDI = "hi",
43
+ HUNGARIAN = "hu",
44
+ INDONESIAN = "id",
45
+ LATVIAN = "lv",
46
+ LITHUANIAN = "lt",
47
+ POLISH = "pl",
48
+ ROMANIAN = "ro",
49
+ RUSSIAN = "ru",
50
+ SLOVAK = "sk",
51
+ SLOVENIAN = "sl",
52
+ SWEDISH = "sv",
53
+ TURKISH = "tr",
54
+ UKRAINIAN = "uk",
55
+ VIETNAMESE = "vi",
29
56
  }
30
57
 
31
58
  /**