@lokutor/sdk 1.1.24 → 1.1.26

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 (4) hide show
  1. package/dist/index.js +27 -27
  2. package/dist/index.mjs +27 -27
  3. package/package.json +1 -1
  4. package/src/conversational-panel.ts +27 -27
package/dist/index.js CHANGED
@@ -1262,19 +1262,15 @@ var PANEL_CSS = (
1262
1262
  .cv-panel {
1263
1263
  position: relative;
1264
1264
  width: 100%;
1265
- aspect-ratio: 16 / 9;
1266
- max-height: 800px;
1267
- display: flex;
1268
- flex-direction: column;
1269
- align-items: center;
1270
- justify-content: center;
1271
- padding: 2rem 0;
1272
- margin: 0;
1273
1265
  background: var(--cv-bg, #0a0a0a);
1274
1266
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
1275
1267
  border-radius: 40px;
1276
1268
  overflow: hidden;
1277
- container-type: inline-size;
1269
+ }
1270
+ .cv-panel::before {
1271
+ content: '';
1272
+ display: block;
1273
+ padding-bottom: 56.25%;
1278
1274
  }
1279
1275
  .cv-curtain {
1280
1276
  position: absolute;
@@ -1305,21 +1301,21 @@ var PANEL_CSS = (
1305
1301
  display: flex;
1306
1302
  flex-direction: column;
1307
1303
  align-items: center;
1308
- gap: clamp(0.75rem, 1.5cqi, 1.5rem);
1304
+ gap: clamp(0.75rem, 1.5vw, 1.5rem);
1309
1305
  color: #fff;
1310
1306
  text-align: center;
1311
1307
  z-index: 2;
1312
- padding: clamp(1rem, 2cqi, 2rem);
1308
+ padding: clamp(1rem, 2vw, 2rem);
1313
1309
  }
1314
1310
  .cv-curtain-title {
1315
- font-size: clamp(1.2rem, 4cqi, 2.5rem);
1311
+ font-size: clamp(1.2rem, 4vw, 2.5rem);
1316
1312
  font-weight: 800;
1317
1313
  letter-spacing: -0.03em;
1318
1314
  margin: 0;
1319
1315
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
1320
1316
  }
1321
1317
  .cv-curtain-desc {
1322
- font-size: clamp(0.75rem, 2cqi, 1.1rem);
1318
+ font-size: clamp(0.75rem, 2vw, 1.1rem);
1323
1319
  opacity: 0.8;
1324
1320
  max-width: 400px;
1325
1321
  margin: 0;
@@ -1327,13 +1323,13 @@ var PANEL_CSS = (
1327
1323
  }
1328
1324
  .cv-curtain-btn {
1329
1325
  margin-top: 1rem;
1330
- padding: clamp(0.6rem, 1.5cqi, 1rem) clamp(1.5rem, 3cqi, 2.5rem);
1326
+ padding: clamp(0.6rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2.5rem);
1331
1327
  border-radius: 100px;
1332
1328
  background: #fff;
1333
1329
  color: #000;
1334
1330
  border: none;
1335
1331
  font-weight: 700;
1336
- font-size: clamp(0.8rem, 1.5cqi, 1rem);
1332
+ font-size: clamp(0.8rem, 1.5vw, 1rem);
1337
1333
  display: flex;
1338
1334
  align-items: center;
1339
1335
  gap: 0.75rem;
@@ -1349,16 +1345,18 @@ var PANEL_CSS = (
1349
1345
  .cv-curtain-btn svg { transition: transform 0.3s ease; }
1350
1346
  .cv-curtain-btn:hover svg { transform: translateX(4px); }
1351
1347
  .cv-header {
1352
- width: 100%;
1348
+ position: absolute;
1349
+ top: 1.5rem;
1350
+ left: 0;
1351
+ right: 0;
1353
1352
  display: flex;
1354
1353
  flex-direction: column;
1355
1354
  align-items: center;
1356
1355
  gap: 0.25rem;
1357
1356
  z-index: 20;
1358
- margin-bottom: auto;
1359
1357
  }
1360
1358
  .cv-title {
1361
- font-size: clamp(1rem, 2.5cqi, 1.75rem);
1359
+ font-size: clamp(1rem, 2.5vw, 1.75rem);
1362
1360
  font-weight: 700;
1363
1361
  color: #e0e0e0;
1364
1362
  display: flex;
@@ -1377,8 +1375,8 @@ var PANEL_CSS = (
1377
1375
  top: 50%;
1378
1376
  left: 50%;
1379
1377
  transform: translate(-50%, -50%);
1380
- width: clamp(140px, 40cqi, 280px);
1381
- height: clamp(140px, 40cqi, 280px);
1378
+ width: clamp(140px, 40vw, 280px);
1379
+ height: clamp(140px, 40vw, 280px);
1382
1380
  display: flex;
1383
1381
  align-items: center;
1384
1382
  justify-content: center;
@@ -1409,13 +1407,14 @@ var PANEL_CSS = (
1409
1407
  z-index: 0;
1410
1408
  }
1411
1409
  .cv-controls {
1412
- width: 100%;
1410
+ position: absolute;
1411
+ bottom: 1.5rem;
1412
+ left: 0;
1413
+ right: 0;
1413
1414
  display: flex;
1414
1415
  flex-direction: column;
1415
1416
  align-items: center;
1416
1417
  gap: 1.5rem;
1417
- padding-top: 1rem;
1418
- margin-top: auto;
1419
1418
  z-index: 20;
1420
1419
  }
1421
1420
  .cv-pill {
@@ -1475,11 +1474,12 @@ var PANEL_CSS = (
1475
1474
  .cv-error.is-visible { display: flex; }
1476
1475
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
1477
1476
  @media (max-width: 640px) {
1478
- .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; padding: 1rem 0; }
1477
+ .cv-panel { max-height: 600px; border-radius: 20px; }
1478
+ .cv-panel::before { padding-bottom: 133.33%; }
1479
1479
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
1480
- .cv-curtain-title { font-size: clamp(1rem, 5cqi, 1.6rem); }
1481
- .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2cqi, 0.85rem); }
1482
- .cv-visualizer-wrap { width: clamp(100px, 50cqi, 200px); height: clamp(100px, 50cqi, 200px); }
1480
+ .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
1481
+ .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
1482
+ .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
1483
1483
  }
1484
1484
  `
1485
1485
  );
package/dist/index.mjs CHANGED
@@ -1215,19 +1215,15 @@ var PANEL_CSS = (
1215
1215
  .cv-panel {
1216
1216
  position: relative;
1217
1217
  width: 100%;
1218
- aspect-ratio: 16 / 9;
1219
- max-height: 800px;
1220
- display: flex;
1221
- flex-direction: column;
1222
- align-items: center;
1223
- justify-content: center;
1224
- padding: 2rem 0;
1225
- margin: 0;
1226
1218
  background: var(--cv-bg, #0a0a0a);
1227
1219
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
1228
1220
  border-radius: 40px;
1229
1221
  overflow: hidden;
1230
- container-type: inline-size;
1222
+ }
1223
+ .cv-panel::before {
1224
+ content: '';
1225
+ display: block;
1226
+ padding-bottom: 56.25%;
1231
1227
  }
1232
1228
  .cv-curtain {
1233
1229
  position: absolute;
@@ -1258,21 +1254,21 @@ var PANEL_CSS = (
1258
1254
  display: flex;
1259
1255
  flex-direction: column;
1260
1256
  align-items: center;
1261
- gap: clamp(0.75rem, 1.5cqi, 1.5rem);
1257
+ gap: clamp(0.75rem, 1.5vw, 1.5rem);
1262
1258
  color: #fff;
1263
1259
  text-align: center;
1264
1260
  z-index: 2;
1265
- padding: clamp(1rem, 2cqi, 2rem);
1261
+ padding: clamp(1rem, 2vw, 2rem);
1266
1262
  }
1267
1263
  .cv-curtain-title {
1268
- font-size: clamp(1.2rem, 4cqi, 2.5rem);
1264
+ font-size: clamp(1.2rem, 4vw, 2.5rem);
1269
1265
  font-weight: 800;
1270
1266
  letter-spacing: -0.03em;
1271
1267
  margin: 0;
1272
1268
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
1273
1269
  }
1274
1270
  .cv-curtain-desc {
1275
- font-size: clamp(0.75rem, 2cqi, 1.1rem);
1271
+ font-size: clamp(0.75rem, 2vw, 1.1rem);
1276
1272
  opacity: 0.8;
1277
1273
  max-width: 400px;
1278
1274
  margin: 0;
@@ -1280,13 +1276,13 @@ var PANEL_CSS = (
1280
1276
  }
1281
1277
  .cv-curtain-btn {
1282
1278
  margin-top: 1rem;
1283
- padding: clamp(0.6rem, 1.5cqi, 1rem) clamp(1.5rem, 3cqi, 2.5rem);
1279
+ padding: clamp(0.6rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2.5rem);
1284
1280
  border-radius: 100px;
1285
1281
  background: #fff;
1286
1282
  color: #000;
1287
1283
  border: none;
1288
1284
  font-weight: 700;
1289
- font-size: clamp(0.8rem, 1.5cqi, 1rem);
1285
+ font-size: clamp(0.8rem, 1.5vw, 1rem);
1290
1286
  display: flex;
1291
1287
  align-items: center;
1292
1288
  gap: 0.75rem;
@@ -1302,16 +1298,18 @@ var PANEL_CSS = (
1302
1298
  .cv-curtain-btn svg { transition: transform 0.3s ease; }
1303
1299
  .cv-curtain-btn:hover svg { transform: translateX(4px); }
1304
1300
  .cv-header {
1305
- width: 100%;
1301
+ position: absolute;
1302
+ top: 1.5rem;
1303
+ left: 0;
1304
+ right: 0;
1306
1305
  display: flex;
1307
1306
  flex-direction: column;
1308
1307
  align-items: center;
1309
1308
  gap: 0.25rem;
1310
1309
  z-index: 20;
1311
- margin-bottom: auto;
1312
1310
  }
1313
1311
  .cv-title {
1314
- font-size: clamp(1rem, 2.5cqi, 1.75rem);
1312
+ font-size: clamp(1rem, 2.5vw, 1.75rem);
1315
1313
  font-weight: 700;
1316
1314
  color: #e0e0e0;
1317
1315
  display: flex;
@@ -1330,8 +1328,8 @@ var PANEL_CSS = (
1330
1328
  top: 50%;
1331
1329
  left: 50%;
1332
1330
  transform: translate(-50%, -50%);
1333
- width: clamp(140px, 40cqi, 280px);
1334
- height: clamp(140px, 40cqi, 280px);
1331
+ width: clamp(140px, 40vw, 280px);
1332
+ height: clamp(140px, 40vw, 280px);
1335
1333
  display: flex;
1336
1334
  align-items: center;
1337
1335
  justify-content: center;
@@ -1362,13 +1360,14 @@ var PANEL_CSS = (
1362
1360
  z-index: 0;
1363
1361
  }
1364
1362
  .cv-controls {
1365
- width: 100%;
1363
+ position: absolute;
1364
+ bottom: 1.5rem;
1365
+ left: 0;
1366
+ right: 0;
1366
1367
  display: flex;
1367
1368
  flex-direction: column;
1368
1369
  align-items: center;
1369
1370
  gap: 1.5rem;
1370
- padding-top: 1rem;
1371
- margin-top: auto;
1372
1371
  z-index: 20;
1373
1372
  }
1374
1373
  .cv-pill {
@@ -1428,11 +1427,12 @@ var PANEL_CSS = (
1428
1427
  .cv-error.is-visible { display: flex; }
1429
1428
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
1430
1429
  @media (max-width: 640px) {
1431
- .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; padding: 1rem 0; }
1430
+ .cv-panel { max-height: 600px; border-radius: 20px; }
1431
+ .cv-panel::before { padding-bottom: 133.33%; }
1432
1432
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
1433
- .cv-curtain-title { font-size: clamp(1rem, 5cqi, 1.6rem); }
1434
- .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2cqi, 0.85rem); }
1435
- .cv-visualizer-wrap { width: clamp(100px, 50cqi, 200px); height: clamp(100px, 50cqi, 200px); }
1433
+ .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
1434
+ .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
1435
+ .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
1436
1436
  }
1437
1437
  `
1438
1438
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lokutor/sdk",
3
- "version": "1.1.24",
3
+ "version": "1.1.26",
4
4
  "description": "JavaScript/TypeScript SDK for Lokutor Real-time Voice AI",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/conversational-panel.ts CHANGED
@@ -2,19 +2,15 @@ const PANEL_CSS = /*css*/ `
2
2
  .cv-panel {
3
3
  position: relative;
4
4
  width: 100%;
5
- aspect-ratio: 16 / 9;
6
- max-height: 800px;
7
- display: flex;
8
- flex-direction: column;
9
- align-items: center;
10
- justify-content: center;
11
- padding: 2rem 0;
12
- margin: 0;
13
5
  background: var(--cv-bg, #0a0a0a);
14
6
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
15
7
  border-radius: 40px;
16
8
  overflow: hidden;
17
- container-type: inline-size;
9
+ }
10
+ .cv-panel::before {
11
+ content: '';
12
+ display: block;
13
+ padding-bottom: 56.25%;
18
14
  }
19
15
  .cv-curtain {
20
16
  position: absolute;
@@ -45,21 +41,21 @@ const PANEL_CSS = /*css*/ `
45
41
  display: flex;
46
42
  flex-direction: column;
47
43
  align-items: center;
48
- gap: clamp(0.75rem, 1.5cqi, 1.5rem);
44
+ gap: clamp(0.75rem, 1.5vw, 1.5rem);
49
45
  color: #fff;
50
46
  text-align: center;
51
47
  z-index: 2;
52
- padding: clamp(1rem, 2cqi, 2rem);
48
+ padding: clamp(1rem, 2vw, 2rem);
53
49
  }
54
50
  .cv-curtain-title {
55
- font-size: clamp(1.2rem, 4cqi, 2.5rem);
51
+ font-size: clamp(1.2rem, 4vw, 2.5rem);
56
52
  font-weight: 800;
57
53
  letter-spacing: -0.03em;
58
54
  margin: 0;
59
55
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
60
56
  }
61
57
  .cv-curtain-desc {
62
- font-size: clamp(0.75rem, 2cqi, 1.1rem);
58
+ font-size: clamp(0.75rem, 2vw, 1.1rem);
63
59
  opacity: 0.8;
64
60
  max-width: 400px;
65
61
  margin: 0;
@@ -67,13 +63,13 @@ const PANEL_CSS = /*css*/ `
67
63
  }
68
64
  .cv-curtain-btn {
69
65
  margin-top: 1rem;
70
- padding: clamp(0.6rem, 1.5cqi, 1rem) clamp(1.5rem, 3cqi, 2.5rem);
66
+ padding: clamp(0.6rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2.5rem);
71
67
  border-radius: 100px;
72
68
  background: #fff;
73
69
  color: #000;
74
70
  border: none;
75
71
  font-weight: 700;
76
- font-size: clamp(0.8rem, 1.5cqi, 1rem);
72
+ font-size: clamp(0.8rem, 1.5vw, 1rem);
77
73
  display: flex;
78
74
  align-items: center;
79
75
  gap: 0.75rem;
@@ -89,16 +85,18 @@ const PANEL_CSS = /*css*/ `
89
85
  .cv-curtain-btn svg { transition: transform 0.3s ease; }
90
86
  .cv-curtain-btn:hover svg { transform: translateX(4px); }
91
87
  .cv-header {
92
- width: 100%;
88
+ position: absolute;
89
+ top: 1.5rem;
90
+ left: 0;
91
+ right: 0;
93
92
  display: flex;
94
93
  flex-direction: column;
95
94
  align-items: center;
96
95
  gap: 0.25rem;
97
96
  z-index: 20;
98
- margin-bottom: auto;
99
97
  }
100
98
  .cv-title {
101
- font-size: clamp(1rem, 2.5cqi, 1.75rem);
99
+ font-size: clamp(1rem, 2.5vw, 1.75rem);
102
100
  font-weight: 700;
103
101
  color: #e0e0e0;
104
102
  display: flex;
@@ -117,8 +115,8 @@ const PANEL_CSS = /*css*/ `
117
115
  top: 50%;
118
116
  left: 50%;
119
117
  transform: translate(-50%, -50%);
120
- width: clamp(140px, 40cqi, 280px);
121
- height: clamp(140px, 40cqi, 280px);
118
+ width: clamp(140px, 40vw, 280px);
119
+ height: clamp(140px, 40vw, 280px);
122
120
  display: flex;
123
121
  align-items: center;
124
122
  justify-content: center;
@@ -149,13 +147,14 @@ const PANEL_CSS = /*css*/ `
149
147
  z-index: 0;
150
148
  }
151
149
  .cv-controls {
152
- width: 100%;
150
+ position: absolute;
151
+ bottom: 1.5rem;
152
+ left: 0;
153
+ right: 0;
153
154
  display: flex;
154
155
  flex-direction: column;
155
156
  align-items: center;
156
157
  gap: 1.5rem;
157
- padding-top: 1rem;
158
- margin-top: auto;
159
158
  z-index: 20;
160
159
  }
161
160
  .cv-pill {
@@ -215,11 +214,12 @@ const PANEL_CSS = /*css*/ `
215
214
  .cv-error.is-visible { display: flex; }
216
215
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
217
216
  @media (max-width: 640px) {
218
- .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; padding: 1rem 0; }
217
+ .cv-panel { max-height: 600px; border-radius: 20px; }
218
+ .cv-panel::before { padding-bottom: 133.33%; }
219
219
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
220
- .cv-curtain-title { font-size: clamp(1rem, 5cqi, 1.6rem); }
221
- .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2cqi, 0.85rem); }
222
- .cv-visualizer-wrap { width: clamp(100px, 50cqi, 200px); height: clamp(100px, 50cqi, 200px); }
220
+ .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
221
+ .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
222
+ .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
223
223
  }
224
224
  `;
225
225