@lokutor/sdk 1.1.27 → 1.1.28

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 +13 -15
  2. package/dist/index.mjs +13 -15
  3. package/package.json +1 -1
  4. package/src/conversational-panel.ts +13 -15
package/dist/index.js CHANGED
@@ -1262,16 +1262,19 @@ 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: 0;
1272
+ margin: 0;
1265
1273
  background: var(--cv-bg, #0a0a0a);
1266
1274
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
1267
1275
  border-radius: 40px;
1268
1276
  overflow: hidden;
1269
1277
  }
1270
- .cv-panel::before {
1271
- content: '';
1272
- display: block;
1273
- padding-bottom: 56.25%;
1274
- }
1275
1278
  .cv-curtain {
1276
1279
  position: absolute;
1277
1280
  inset: 0;
@@ -1345,15 +1348,13 @@ var PANEL_CSS = (
1345
1348
  .cv-curtain-btn svg { transition: transform 0.3s ease; }
1346
1349
  .cv-curtain-btn:hover svg { transform: translateX(4px); }
1347
1350
  .cv-header {
1348
- position: absolute;
1349
- top: 1.5rem;
1350
- left: 0;
1351
- right: 0;
1352
1351
  display: flex;
1353
1352
  flex-direction: column;
1354
1353
  align-items: center;
1355
1354
  gap: 0.25rem;
1356
1355
  z-index: 20;
1356
+ margin-bottom: auto;
1357
+ padding-top: 1.5rem;
1357
1358
  }
1358
1359
  .cv-title {
1359
1360
  font-size: clamp(1rem, 2.5vw, 1.75rem);
@@ -1407,14 +1408,12 @@ var PANEL_CSS = (
1407
1408
  z-index: 0;
1408
1409
  }
1409
1410
  .cv-controls {
1410
- position: absolute;
1411
- bottom: 1.5rem;
1412
- left: 0;
1413
- right: 0;
1414
1411
  display: flex;
1415
1412
  flex-direction: column;
1416
1413
  align-items: center;
1417
1414
  gap: 1.5rem;
1415
+ margin-top: auto;
1416
+ padding-bottom: 1.5rem;
1418
1417
  z-index: 20;
1419
1418
  }
1420
1419
  .cv-pill {
@@ -1474,8 +1473,7 @@ var PANEL_CSS = (
1474
1473
  .cv-error.is-visible { display: flex; }
1475
1474
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
1476
1475
  @media (max-width: 640px) {
1477
- .cv-panel { max-height: 600px; border-radius: 20px; }
1478
- .cv-panel::before { padding-bottom: 133.33%; }
1476
+ .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
1479
1477
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
1480
1478
  .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
1481
1479
  .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
package/dist/index.mjs CHANGED
@@ -1215,16 +1215,19 @@ 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: 0;
1225
+ margin: 0;
1218
1226
  background: var(--cv-bg, #0a0a0a);
1219
1227
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
1220
1228
  border-radius: 40px;
1221
1229
  overflow: hidden;
1222
1230
  }
1223
- .cv-panel::before {
1224
- content: '';
1225
- display: block;
1226
- padding-bottom: 56.25%;
1227
- }
1228
1231
  .cv-curtain {
1229
1232
  position: absolute;
1230
1233
  inset: 0;
@@ -1298,15 +1301,13 @@ var PANEL_CSS = (
1298
1301
  .cv-curtain-btn svg { transition: transform 0.3s ease; }
1299
1302
  .cv-curtain-btn:hover svg { transform: translateX(4px); }
1300
1303
  .cv-header {
1301
- position: absolute;
1302
- top: 1.5rem;
1303
- left: 0;
1304
- right: 0;
1305
1304
  display: flex;
1306
1305
  flex-direction: column;
1307
1306
  align-items: center;
1308
1307
  gap: 0.25rem;
1309
1308
  z-index: 20;
1309
+ margin-bottom: auto;
1310
+ padding-top: 1.5rem;
1310
1311
  }
1311
1312
  .cv-title {
1312
1313
  font-size: clamp(1rem, 2.5vw, 1.75rem);
@@ -1360,14 +1361,12 @@ var PANEL_CSS = (
1360
1361
  z-index: 0;
1361
1362
  }
1362
1363
  .cv-controls {
1363
- position: absolute;
1364
- bottom: 1.5rem;
1365
- left: 0;
1366
- right: 0;
1367
1364
  display: flex;
1368
1365
  flex-direction: column;
1369
1366
  align-items: center;
1370
1367
  gap: 1.5rem;
1368
+ margin-top: auto;
1369
+ padding-bottom: 1.5rem;
1371
1370
  z-index: 20;
1372
1371
  }
1373
1372
  .cv-pill {
@@ -1427,8 +1426,7 @@ var PANEL_CSS = (
1427
1426
  .cv-error.is-visible { display: flex; }
1428
1427
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
1429
1428
  @media (max-width: 640px) {
1430
- .cv-panel { max-height: 600px; border-radius: 20px; }
1431
- .cv-panel::before { padding-bottom: 133.33%; }
1429
+ .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
1432
1430
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
1433
1431
  .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
1434
1432
  .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lokutor/sdk",
3
- "version": "1.1.27",
3
+ "version": "1.1.28",
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,16 +2,19 @@ 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: 0;
12
+ margin: 0;
5
13
  background: var(--cv-bg, #0a0a0a);
6
14
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
7
15
  border-radius: 40px;
8
16
  overflow: hidden;
9
17
  }
10
- .cv-panel::before {
11
- content: '';
12
- display: block;
13
- padding-bottom: 56.25%;
14
- }
15
18
  .cv-curtain {
16
19
  position: absolute;
17
20
  inset: 0;
@@ -85,15 +88,13 @@ const PANEL_CSS = /*css*/ `
85
88
  .cv-curtain-btn svg { transition: transform 0.3s ease; }
86
89
  .cv-curtain-btn:hover svg { transform: translateX(4px); }
87
90
  .cv-header {
88
- position: absolute;
89
- top: 1.5rem;
90
- left: 0;
91
- right: 0;
92
91
  display: flex;
93
92
  flex-direction: column;
94
93
  align-items: center;
95
94
  gap: 0.25rem;
96
95
  z-index: 20;
96
+ margin-bottom: auto;
97
+ padding-top: 1.5rem;
97
98
  }
98
99
  .cv-title {
99
100
  font-size: clamp(1rem, 2.5vw, 1.75rem);
@@ -147,14 +148,12 @@ const PANEL_CSS = /*css*/ `
147
148
  z-index: 0;
148
149
  }
149
150
  .cv-controls {
150
- position: absolute;
151
- bottom: 1.5rem;
152
- left: 0;
153
- right: 0;
154
151
  display: flex;
155
152
  flex-direction: column;
156
153
  align-items: center;
157
154
  gap: 1.5rem;
155
+ margin-top: auto;
156
+ padding-bottom: 1.5rem;
158
157
  z-index: 20;
159
158
  }
160
159
  .cv-pill {
@@ -214,8 +213,7 @@ const PANEL_CSS = /*css*/ `
214
213
  .cv-error.is-visible { display: flex; }
215
214
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
216
215
  @media (max-width: 640px) {
217
- .cv-panel { max-height: 600px; border-radius: 20px; }
218
- .cv-panel::before { padding-bottom: 133.33%; }
216
+ .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
219
217
  .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
220
218
  .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
221
219
  .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }