@objectifthunes/whiteboard 0.2.4 → 0.2.5
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.ts +24 -0
- package/dist/index.js +450 -386
- package/dist/whiteboard.css +164 -0
- package/package.json +1 -1
package/dist/whiteboard.css
CHANGED
|
@@ -1267,6 +1267,170 @@ button.chip:hover {
|
|
|
1267
1267
|
}
|
|
1268
1268
|
}
|
|
1269
1269
|
|
|
1270
|
+
/* ── VerticalToolbar ─────────────────────────────────── */
|
|
1271
|
+
|
|
1272
|
+
.vertical-toolbar {
|
|
1273
|
+
position: fixed;
|
|
1274
|
+
top: 50%;
|
|
1275
|
+
left: 0.72rem;
|
|
1276
|
+
z-index: 1200;
|
|
1277
|
+
display: flex;
|
|
1278
|
+
flex-direction: column;
|
|
1279
|
+
align-items: center;
|
|
1280
|
+
gap: var(--wb-gap-sm);
|
|
1281
|
+
transform: translateY(-50%);
|
|
1282
|
+
padding: 0.34rem;
|
|
1283
|
+
border: 1px solid var(--wb-border);
|
|
1284
|
+
border-radius: var(--wb-radius-lg);
|
|
1285
|
+
background: var(--wb-surface);
|
|
1286
|
+
box-shadow: var(--wb-shadow-soft);
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
.vertical-toolbar--right {
|
|
1290
|
+
left: auto;
|
|
1291
|
+
right: 0.72rem;
|
|
1292
|
+
}
|
|
1293
|
+
|
|
1294
|
+
.vertical-toolbar--static {
|
|
1295
|
+
position: static;
|
|
1296
|
+
transform: none;
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1299
|
+
.vertical-toolbar__links {
|
|
1300
|
+
display: flex;
|
|
1301
|
+
flex-direction: column;
|
|
1302
|
+
align-items: center;
|
|
1303
|
+
gap: var(--wb-gap-sm);
|
|
1304
|
+
}
|
|
1305
|
+
|
|
1306
|
+
.vertical-toolbar__icon-btn {
|
|
1307
|
+
display: inline-flex;
|
|
1308
|
+
align-items: center;
|
|
1309
|
+
justify-content: center;
|
|
1310
|
+
width: 2.08rem;
|
|
1311
|
+
height: 2.08rem;
|
|
1312
|
+
min-width: 2.08rem;
|
|
1313
|
+
min-height: 2.08rem;
|
|
1314
|
+
padding: 0;
|
|
1315
|
+
border: 1px solid var(--wb-border);
|
|
1316
|
+
border-radius: var(--wb-radius-md);
|
|
1317
|
+
font-size: var(--wb-fs-base);
|
|
1318
|
+
color: var(--wb-text-tertiary);
|
|
1319
|
+
background: var(--wb-white);
|
|
1320
|
+
cursor: pointer;
|
|
1321
|
+
text-decoration: none;
|
|
1322
|
+
}
|
|
1323
|
+
|
|
1324
|
+
.vertical-toolbar__icon-btn:hover:not([disabled]) {
|
|
1325
|
+
background: var(--wb-bg-hover);
|
|
1326
|
+
transform: none;
|
|
1327
|
+
}
|
|
1328
|
+
|
|
1329
|
+
.vertical-toolbar__icon-btn.is-active {
|
|
1330
|
+
color: var(--wb-btn-text);
|
|
1331
|
+
border-color: var(--wb-primary);
|
|
1332
|
+
background: var(--wb-primary);
|
|
1333
|
+
}
|
|
1334
|
+
|
|
1335
|
+
/* ── AvatarBadge ─────────────────────────────────────── */
|
|
1336
|
+
|
|
1337
|
+
.avatar-badge {
|
|
1338
|
+
display: grid;
|
|
1339
|
+
place-items: center;
|
|
1340
|
+
flex-shrink: 0;
|
|
1341
|
+
width: 1.9rem;
|
|
1342
|
+
height: 1.9rem;
|
|
1343
|
+
border-radius: var(--wb-radius-pill);
|
|
1344
|
+
font-size: var(--wb-fs-sm);
|
|
1345
|
+
font-weight: 600;
|
|
1346
|
+
color: var(--wb-text-primary);
|
|
1347
|
+
background: var(--wb-border);
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
/* ── CanvasStage ─────────────────────────────────────── */
|
|
1351
|
+
|
|
1352
|
+
.canvas-wrap {
|
|
1353
|
+
width: 100%;
|
|
1354
|
+
user-select: none;
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
.canvas-stage {
|
|
1358
|
+
position: relative;
|
|
1359
|
+
width: 100%;
|
|
1360
|
+
overflow: hidden;
|
|
1361
|
+
border: 1px solid var(--wb-border);
|
|
1362
|
+
border-radius: var(--wb-radius-lg);
|
|
1363
|
+
aspect-ratio: 16 / 9;
|
|
1364
|
+
background: var(--wb-surface-muted);
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
.canvas-hint {
|
|
1368
|
+
position: absolute;
|
|
1369
|
+
left: 0.5rem;
|
|
1370
|
+
bottom: 0.5rem;
|
|
1371
|
+
margin: 0;
|
|
1372
|
+
padding: 0.2rem 0.42rem;
|
|
1373
|
+
border-radius: var(--wb-radius-sm);
|
|
1374
|
+
font-size: var(--wb-fs-xs);
|
|
1375
|
+
color: var(--wb-text-muted);
|
|
1376
|
+
background: color-mix(in srgb, var(--wb-surface-soft) 88%, transparent);
|
|
1377
|
+
pointer-events: none;
|
|
1378
|
+
}
|
|
1379
|
+
|
|
1380
|
+
/* ── OverlayIconButton ───────────────────────────────── */
|
|
1381
|
+
|
|
1382
|
+
.overlay-icon-btn {
|
|
1383
|
+
position: absolute;
|
|
1384
|
+
z-index: 3;
|
|
1385
|
+
width: 1.72rem;
|
|
1386
|
+
height: 1.72rem;
|
|
1387
|
+
min-width: 1.72rem;
|
|
1388
|
+
min-height: 1.72rem;
|
|
1389
|
+
padding: 0;
|
|
1390
|
+
border: 1px solid color-mix(in srgb, #0f172a 14%, #ffffff);
|
|
1391
|
+
border-radius: var(--wb-radius-pill);
|
|
1392
|
+
color: var(--wb-text-primary);
|
|
1393
|
+
background: color-mix(in srgb, #ffffff 88%, #dbe7f5);
|
|
1394
|
+
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
|
|
1395
|
+
backdrop-filter: blur(5px);
|
|
1396
|
+
cursor: pointer;
|
|
1397
|
+
}
|
|
1398
|
+
|
|
1399
|
+
.overlay-icon-btn:hover:not(:disabled) {
|
|
1400
|
+
background: color-mix(in srgb, #ffffff 82%, #d5e4f4);
|
|
1401
|
+
transform: none;
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
.overlay-icon-btn:disabled {
|
|
1405
|
+
opacity: 0.55;
|
|
1406
|
+
}
|
|
1407
|
+
|
|
1408
|
+
[data-theme="dark"] .overlay-icon-btn {
|
|
1409
|
+
color: var(--wb-text-primary);
|
|
1410
|
+
background: color-mix(in srgb, var(--wb-surface) 90%, var(--wb-surface-soft));
|
|
1411
|
+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
1412
|
+
border-color: var(--wb-border);
|
|
1413
|
+
}
|
|
1414
|
+
|
|
1415
|
+
[data-theme="dark"] .overlay-icon-btn:hover:not(:disabled) {
|
|
1416
|
+
background: color-mix(in srgb, var(--wb-surface-soft) 80%, var(--wb-surface));
|
|
1417
|
+
}
|
|
1418
|
+
|
|
1419
|
+
.overlay-icon-btn--top-right {
|
|
1420
|
+
top: 0.5rem;
|
|
1421
|
+
right: 0.5rem;
|
|
1422
|
+
}
|
|
1423
|
+
|
|
1424
|
+
.overlay-icon-btn--bottom-left {
|
|
1425
|
+
bottom: 0.5rem;
|
|
1426
|
+
left: 0.5rem;
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
.overlay-icon-btn--bottom-right {
|
|
1430
|
+
bottom: 0.5rem;
|
|
1431
|
+
right: 0.5rem;
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1270
1434
|
/* ── Responsive ─────────────────────────────────────── */
|
|
1271
1435
|
|
|
1272
1436
|
@media (max-width: 768px) {
|