@almadar/ui 2.16.0 → 2.17.0

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.
@@ -1155,514 +1155,6 @@ body {
1155
1155
  counter-reset: katexEqnNo mmlEqnNo;
1156
1156
  }
1157
1157
 
1158
- /* components/organisms/game/three/components/Canvas3DErrorBoundary.css */
1159
- .canvas-3d-error {
1160
- position: absolute;
1161
- inset: 0;
1162
- display: flex;
1163
- align-items: center;
1164
- justify-content: center;
1165
- background:
1166
- linear-gradient(
1167
- 135deg,
1168
- #2e1a1a 0%,
1169
- #3e1616 50%,
1170
- #4a1a1a 100%);
1171
- padding: 20px;
1172
- z-index: 100;
1173
- }
1174
- .canvas-3d-error__content {
1175
- max-width: 600px;
1176
- width: 100%;
1177
- padding: 40px;
1178
- background: rgba(0, 0, 0, 0.4);
1179
- backdrop-filter: blur(10px);
1180
- border-radius: 16px;
1181
- border: 1px solid rgba(255, 100, 100, 0.2);
1182
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
1183
- text-align: center;
1184
- }
1185
- .canvas-3d-error__icon {
1186
- font-size: 64px;
1187
- margin-bottom: 20px;
1188
- animation: shake 0.5s ease-in-out;
1189
- }
1190
- @keyframes shake {
1191
- 0%, 100% {
1192
- transform: translateX(0);
1193
- }
1194
- 25% {
1195
- transform: translateX(-10px);
1196
- }
1197
- 75% {
1198
- transform: translateX(10px);
1199
- }
1200
- }
1201
- .canvas-3d-error__title {
1202
- font-size: 28px;
1203
- font-weight: 700;
1204
- color: #ff6b6b;
1205
- margin: 0 0 16px;
1206
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
1207
- }
1208
- .canvas-3d-error__message {
1209
- font-size: 16px;
1210
- color: rgba(255, 255, 255, 0.8);
1211
- margin: 0 0 24px;
1212
- line-height: 1.5;
1213
- }
1214
- .canvas-3d-error__details {
1215
- margin: 24px 0;
1216
- text-align: left;
1217
- background: rgba(0, 0, 0, 0.3);
1218
- border-radius: 8px;
1219
- overflow: hidden;
1220
- }
1221
- .canvas-3d-error__details summary {
1222
- padding: 12px 16px;
1223
- cursor: pointer;
1224
- color: #ff9999;
1225
- font-weight: 600;
1226
- -webkit-user-select: none;
1227
- -moz-user-select: none;
1228
- user-select: none;
1229
- transition: background 0.2s ease;
1230
- }
1231
- .canvas-3d-error__details summary:hover {
1232
- background: rgba(255, 100, 100, 0.1);
1233
- }
1234
- .error__stack,
1235
- .error__component-stack {
1236
- padding: 16px;
1237
- margin: 0;
1238
- font-family:
1239
- "Fira Code",
1240
- "Monaco",
1241
- "Consolas",
1242
- monospace;
1243
- font-size: 12px;
1244
- line-height: 1.6;
1245
- color: #ffaaaa;
1246
- background: rgba(0, 0, 0, 0.5);
1247
- overflow-x: auto;
1248
- white-space: pre-wrap;
1249
- word-break: break-all;
1250
- }
1251
- .error__component-stack {
1252
- border-top: 1px solid rgba(255, 100, 100, 0.2);
1253
- color: #ff8888;
1254
- }
1255
- .canvas-3d-error__actions {
1256
- display: flex;
1257
- gap: 12px;
1258
- justify-content: center;
1259
- margin-top: 24px;
1260
- flex-wrap: wrap;
1261
- }
1262
- .error__button {
1263
- padding: 12px 24px;
1264
- font-size: 14px;
1265
- font-weight: 600;
1266
- border-radius: 8px;
1267
- border: none;
1268
- cursor: pointer;
1269
- transition: all 0.2s ease;
1270
- }
1271
- .error__button--primary {
1272
- background:
1273
- linear-gradient(
1274
- 135deg,
1275
- #ff6b6b,
1276
- #ff4444);
1277
- color: white;
1278
- }
1279
- .error__button--primary:hover {
1280
- background:
1281
- linear-gradient(
1282
- 135deg,
1283
- #ff8888,
1284
- #ff6666);
1285
- transform: translateY(-2px);
1286
- box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
1287
- }
1288
- .error__button--secondary {
1289
- background: rgba(255, 255, 255, 0.1);
1290
- color: rgba(255, 255, 255, 0.9);
1291
- border: 1px solid rgba(255, 255, 255, 0.2);
1292
- }
1293
- .error__button--secondary:hover {
1294
- background: rgba(255, 255, 255, 0.15);
1295
- transform: translateY(-2px);
1296
- }
1297
- .error__button:active {
1298
- transform: translateY(0);
1299
- }
1300
- @media (max-width: 480px) {
1301
- .canvas-3d-error__content {
1302
- padding: 30px 20px;
1303
- }
1304
- .canvas-3d-error__icon {
1305
- font-size: 48px;
1306
- }
1307
- .canvas-3d-error__title {
1308
- font-size: 22px;
1309
- }
1310
- .canvas-3d-error__message {
1311
- font-size: 14px;
1312
- }
1313
- .canvas-3d-error__actions {
1314
- flex-direction: column;
1315
- }
1316
- .error__button {
1317
- width: 100%;
1318
- }
1319
- }
1320
-
1321
- /* components/organisms/game/three/components/Canvas3DLoadingState.css */
1322
- .canvas-3d-loading {
1323
- position: absolute;
1324
- inset: 0;
1325
- display: flex;
1326
- align-items: center;
1327
- justify-content: center;
1328
- background:
1329
- linear-gradient(
1330
- 135deg,
1331
- #1a1a2e 0%,
1332
- #16213e 50%,
1333
- #0f3460 100%);
1334
- overflow: hidden;
1335
- z-index: 100;
1336
- }
1337
- .canvas-3d-loading__content {
1338
- position: relative;
1339
- z-index: 2;
1340
- display: flex;
1341
- flex-direction: column;
1342
- align-items: center;
1343
- gap: 20px;
1344
- padding: 40px;
1345
- background: rgba(255, 255, 255, 0.05);
1346
- backdrop-filter: blur(10px);
1347
- border-radius: 16px;
1348
- border: 1px solid rgba(255, 255, 255, 0.1);
1349
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
1350
- }
1351
- .canvas-3d-loading__spinner {
1352
- position: relative;
1353
- width: 80px;
1354
- height: 80px;
1355
- }
1356
- .spinner__ring {
1357
- position: absolute;
1358
- inset: 0;
1359
- border: 4px solid transparent;
1360
- border-top-color: #4488ff;
1361
- border-radius: 50%;
1362
- animation: spin 1s linear infinite;
1363
- }
1364
- .spinner__ring--secondary {
1365
- inset: 10px;
1366
- border-top-color: #ff6b6b;
1367
- animation-duration: 1.5s;
1368
- animation-direction: reverse;
1369
- }
1370
- @keyframes spin {
1371
- from {
1372
- transform: rotate(0deg);
1373
- }
1374
- to {
1375
- transform: rotate(360deg);
1376
- }
1377
- }
1378
- .canvas-3d-loading__message {
1379
- font-size: 20px;
1380
- font-weight: 600;
1381
- color: #ffffff;
1382
- text-align: center;
1383
- letter-spacing: 0.5px;
1384
- }
1385
- .canvas-3d-loading__details {
1386
- font-size: 14px;
1387
- color: rgba(255, 255, 255, 0.6);
1388
- text-align: center;
1389
- font-family: monospace;
1390
- max-width: 300px;
1391
- overflow: hidden;
1392
- text-overflow: ellipsis;
1393
- white-space: nowrap;
1394
- }
1395
- .canvas-3d-loading__progress {
1396
- width: 100%;
1397
- max-width: 280px;
1398
- display: flex;
1399
- flex-direction: column;
1400
- gap: 8px;
1401
- }
1402
- .progress__bar {
1403
- height: 6px;
1404
- background: rgba(255, 255, 255, 0.1);
1405
- border-radius: 3px;
1406
- overflow: hidden;
1407
- }
1408
- .progress__fill {
1409
- height: 100%;
1410
- background:
1411
- linear-gradient(
1412
- 90deg,
1413
- #4488ff,
1414
- #ff6b6b);
1415
- border-radius: 3px;
1416
- transition: width 0.3s ease;
1417
- }
1418
- .progress__text {
1419
- display: flex;
1420
- justify-content: space-between;
1421
- font-size: 12px;
1422
- color: rgba(255, 255, 255, 0.7);
1423
- }
1424
- .progress__percentage {
1425
- font-weight: 600;
1426
- color: #4488ff;
1427
- }
1428
- .progress__count {
1429
- font-family: monospace;
1430
- }
1431
- .canvas-3d-loading__background {
1432
- position: absolute;
1433
- inset: 0;
1434
- z-index: 1;
1435
- opacity: 0.3;
1436
- }
1437
- .bg__grid {
1438
- position: absolute;
1439
- inset: -50%;
1440
- background-image:
1441
- linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
1442
- linear-gradient(
1443
- 90deg,
1444
- rgba(255, 255, 255, 0.03) 1px,
1445
- transparent 1px);
1446
- background-size: 50px 50px;
1447
- animation: gridMove 20s linear infinite;
1448
- }
1449
- @keyframes gridMove {
1450
- 0% {
1451
- transform: perspective(500px) rotateX(60deg) translateY(0);
1452
- }
1453
- 100% {
1454
- transform: perspective(500px) rotateX(60deg) translateY(50px);
1455
- }
1456
- }
1457
- @media (max-width: 480px) {
1458
- .canvas-3d-loading__content {
1459
- padding: 30px 20px;
1460
- margin: 20px;
1461
- }
1462
- .canvas-3d-loading__spinner {
1463
- width: 60px;
1464
- height: 60px;
1465
- }
1466
- .canvas-3d-loading__message {
1467
- font-size: 16px;
1468
- }
1469
- .canvas-3d-loading__details {
1470
- font-size: 12px;
1471
- }
1472
- }
1473
-
1474
- /* components/organisms/game/GameCanvas3D.css */
1475
- .game-canvas-3d {
1476
- position: relative;
1477
- width: 100%;
1478
- height: 100%;
1479
- overflow: hidden;
1480
- background: #1a1a2e;
1481
- border-radius: 8px;
1482
- }
1483
- .game-canvas-3d canvas {
1484
- display: block;
1485
- width: 100%;
1486
- height: 100%;
1487
- }
1488
- .game-canvas-3d--loading {
1489
- display: flex;
1490
- align-items: center;
1491
- justify-content: center;
1492
- background:
1493
- linear-gradient(
1494
- 135deg,
1495
- #1a1a2e 0%,
1496
- #16213e 100%);
1497
- }
1498
- .game-canvas-3d__loading {
1499
- padding: 20px 40px;
1500
- background: rgba(255, 255, 255, 0.1);
1501
- border-radius: 8px;
1502
- color: #ffffff;
1503
- font-size: 16px;
1504
- animation: pulse 1.5s ease-in-out infinite;
1505
- }
1506
- .game-canvas-3d--error {
1507
- display: flex;
1508
- align-items: center;
1509
- justify-content: center;
1510
- background:
1511
- linear-gradient(
1512
- 135deg,
1513
- #2e1a1a 0%,
1514
- #3e1616 100%);
1515
- }
1516
- .game-canvas-3d__error {
1517
- padding: 20px 40px;
1518
- background: rgba(255, 0, 0, 0.2);
1519
- border: 1px solid rgba(255, 0, 0, 0.3);
1520
- border-radius: 8px;
1521
- color: #ff6b6b;
1522
- font-size: 14px;
1523
- }
1524
- .game-canvas-3d__coordinates {
1525
- position: absolute;
1526
- bottom: 20px;
1527
- left: 20px;
1528
- padding: 8px 16px;
1529
- background: rgba(0, 0, 0, 0.7);
1530
- border-radius: 4px;
1531
- color: #ffffff;
1532
- font-family: monospace;
1533
- font-size: 12px;
1534
- pointer-events: none;
1535
- z-index: 10;
1536
- }
1537
- .game-canvas-3d__tile-info {
1538
- position: absolute;
1539
- top: 20px;
1540
- left: 20px;
1541
- padding: 12px 16px;
1542
- background: rgba(0, 0, 0, 0.8);
1543
- border-radius: 6px;
1544
- color: #ffffff;
1545
- pointer-events: none;
1546
- z-index: 10;
1547
- min-width: 120px;
1548
- }
1549
- .tile-info__type {
1550
- font-weight: 600;
1551
- font-size: 14px;
1552
- text-transform: capitalize;
1553
- margin-bottom: 4px;
1554
- }
1555
- .tile-info__terrain {
1556
- font-size: 12px;
1557
- color: #aaaaaa;
1558
- }
1559
- @keyframes pulse {
1560
- 0%, 100% {
1561
- opacity: 1;
1562
- }
1563
- 50% {
1564
- opacity: 0.5;
1565
- }
1566
- }
1567
- .game-canvas-3d[data-camera-mode=isometric]::before {
1568
- content: "Isometric";
1569
- position: absolute;
1570
- top: 20px;
1571
- right: 20px;
1572
- padding: 6px 12px;
1573
- background: rgba(0, 0, 0, 0.6);
1574
- border-radius: 4px;
1575
- color: #ffffff;
1576
- font-size: 11px;
1577
- text-transform: uppercase;
1578
- letter-spacing: 1px;
1579
- pointer-events: none;
1580
- }
1581
- .game-canvas-3d[data-camera-mode=perspective]::before {
1582
- content: "Perspective";
1583
- position: absolute;
1584
- top: 20px;
1585
- right: 20px;
1586
- padding: 6px 12px;
1587
- background: rgba(0, 0, 0, 0.6);
1588
- border-radius: 4px;
1589
- color: #ffffff;
1590
- font-size: 11px;
1591
- text-transform: uppercase;
1592
- letter-spacing: 1px;
1593
- pointer-events: none;
1594
- }
1595
- .game-canvas-3d[data-camera-mode=top-down]::before {
1596
- content: "Top Down";
1597
- position: absolute;
1598
- top: 20px;
1599
- right: 20px;
1600
- padding: 6px 12px;
1601
- background: rgba(0, 0, 0, 0.6);
1602
- border-radius: 4px;
1603
- color: #ffffff;
1604
- font-size: 11px;
1605
- text-transform: uppercase;
1606
- letter-spacing: 1px;
1607
- pointer-events: none;
1608
- }
1609
- .game-canvas-3d[data-overlay=hidden] .game-canvas-3d__coordinates,
1610
- .game-canvas-3d[data-overlay=hidden] .game-canvas-3d__tile-info,
1611
- .game-canvas-3d[data-overlay=hidden]::before {
1612
- display: none;
1613
- }
1614
- .game-canvas-3d[data-orientation=rotated] {
1615
- }
1616
- .game-canvas-3d canvas {
1617
- cursor: crosshair;
1618
- }
1619
- .game-canvas-3d canvas:active {
1620
- cursor: grabbing;
1621
- }
1622
- @media (max-width: 768px) {
1623
- .game-canvas-3d__coordinates,
1624
- .game-canvas-3d__tile-info {
1625
- font-size: 10px;
1626
- padding: 6px 10px;
1627
- }
1628
- .game-canvas-3d::before {
1629
- font-size: 9px;
1630
- padding: 4px 8px;
1631
- }
1632
- }
1633
- .game-canvas-3d:focus {
1634
- outline: 2px solid #4488ff;
1635
- outline-offset: 2px;
1636
- }
1637
- .game-canvas-3d canvas {
1638
- transition: opacity 0.3s ease;
1639
- }
1640
- .game-canvas-3d__context-menu {
1641
- position: absolute;
1642
- background: rgba(0, 0, 0, 0.9);
1643
- border: 1px solid rgba(255, 255, 255, 0.1);
1644
- border-radius: 6px;
1645
- padding: 8px 0;
1646
- min-width: 150px;
1647
- z-index: 100;
1648
- }
1649
- .game-canvas-3d__context-menu-item {
1650
- padding: 8px 16px;
1651
- color: #ffffff;
1652
- cursor: pointer;
1653
- font-size: 13px;
1654
- transition: background 0.15s ease;
1655
- }
1656
- .game-canvas-3d__context-menu-item:hover {
1657
- background: rgba(255, 255, 255, 0.1);
1658
- }
1659
- .game-canvas-3d__context-menu-item--danger {
1660
- color: #ff6b6b;
1661
- }
1662
- .game-canvas-3d__context-menu-item--danger:hover {
1663
- background: rgba(255, 0, 0, 0.2);
1664
- }
1665
-
1666
1158
  /* components/organisms/debug/RuntimeDebugger.css */
1667
1159
  .runtime-debugger {
1668
1160
  font-family: