handler-playable-sdk 0.5.546 → 0.5.548

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.
@@ -309,12 +309,183 @@
309
309
  width: 100%;
310
310
  height: 100%;
311
311
  display: flex;
312
- align-items: center;
313
- justify-content: center;
312
+ align-items: stretch;
313
+ justify-content: stretch;
314
314
  padding: 16px;
315
315
  box-sizing: border-box;
316
316
  }
317
317
 
318
+ /* Scene + Game Split Layout */
319
+ .preview-split {
320
+ position: relative;
321
+ display: flex;
322
+ align-items: stretch;
323
+ justify-content: stretch;
324
+ gap: 0;
325
+ width: 100%;
326
+ height: 100%;
327
+ overflow: hidden;
328
+ }
329
+
330
+ .scene-editor-pane {
331
+ width: var(--scene-pane-width, 420px);
332
+ min-width: 260px;
333
+ max-width: 65%;
334
+ height: 100%;
335
+ background: var(--ui-surface);
336
+ border-right: 1px solid var(--ui-border);
337
+ display: flex;
338
+ flex-direction: column;
339
+ position: relative;
340
+ z-index: 20;
341
+ box-sizing: border-box;
342
+ }
343
+
344
+ .scene-editor-header {
345
+ display: flex;
346
+ align-items: center;
347
+ justify-content: space-between;
348
+ gap: 8px;
349
+ padding: 8px 12px;
350
+ background: var(--ui-bg-2);
351
+ border-bottom: 1px solid var(--ui-border);
352
+ }
353
+
354
+ .scene-editor-title {
355
+ font-size: 12px;
356
+ font-weight: 600;
357
+ text-transform: uppercase;
358
+ letter-spacing: 0.6px;
359
+ }
360
+
361
+ .scene-editor-actions {
362
+ display: flex;
363
+ gap: 8px;
364
+ align-items: center;
365
+ }
366
+
367
+ .scene-editor-drag-handle {
368
+ display: none;
369
+ color: var(--ui-muted);
370
+ font-size: 12px;
371
+ line-height: 1;
372
+ padding: 2px 6px;
373
+ border-radius: 6px;
374
+ cursor: move;
375
+ user-select: none;
376
+ }
377
+
378
+ .scene-editor-body {
379
+ position: relative;
380
+ flex: 1;
381
+ background: var(--ui-bg-2);
382
+ overflow: hidden;
383
+ }
384
+
385
+ .scene-editor-root {
386
+ position: absolute;
387
+ inset: 0;
388
+ }
389
+
390
+ .scene-editor-root canvas {
391
+ width: 100%;
392
+ height: 100%;
393
+ display: block;
394
+ }
395
+
396
+ .scene-editor-resize-handle {
397
+ position: absolute;
398
+ right: 6px;
399
+ bottom: 6px;
400
+ width: 14px;
401
+ height: 14px;
402
+ cursor: nwse-resize;
403
+ opacity: 0.4;
404
+ transition: opacity var(--ui-duration-fast) var(--ui-ease);
405
+ }
406
+
407
+ .scene-editor-resize-handle:hover {
408
+ opacity: 0.9;
409
+ }
410
+
411
+ .scene-editor-resize-handle::after {
412
+ content: '';
413
+ position: absolute;
414
+ right: 2px;
415
+ bottom: 2px;
416
+ width: 8px;
417
+ height: 8px;
418
+ border-right: 2px solid var(--ui-muted);
419
+ border-bottom: 2px solid var(--ui-muted);
420
+ border-radius: 0 0 2px 0;
421
+ }
422
+
423
+ .scene-splitter {
424
+ width: 6px;
425
+ cursor: ew-resize;
426
+ background: transparent;
427
+ transition: background var(--ui-duration-fast) var(--ui-ease);
428
+ }
429
+
430
+ .scene-splitter:hover {
431
+ background: var(--ui-terracotta);
432
+ }
433
+
434
+ .game-view-pane {
435
+ flex: 1;
436
+ position: relative;
437
+ display: flex;
438
+ align-items: center;
439
+ justify-content: center;
440
+ overflow: hidden;
441
+ }
442
+
443
+ .preview-shell.scene-hidden .scene-editor-pane,
444
+ .preview-shell.scene-hidden .scene-splitter {
445
+ display: none;
446
+ }
447
+
448
+ .preview-shell.compare-mode .scene-editor-pane,
449
+ .preview-shell.compare-mode .scene-splitter {
450
+ display: none;
451
+ }
452
+
453
+ .preview-shell.layout-draggable .scene-editor-pane {
454
+ position: absolute;
455
+ right: 24px;
456
+ top: 72px;
457
+ width: 420px;
458
+ height: 320px;
459
+ max-width: 70%;
460
+ max-height: 70%;
461
+ border-radius: 14px;
462
+ border: 1px solid var(--ui-border);
463
+ box-shadow: var(--ui-shadow);
464
+ }
465
+
466
+ .preview-shell.layout-draggable .scene-editor-drag-handle {
467
+ display: inline-flex;
468
+ align-items: center;
469
+ justify-content: center;
470
+ }
471
+
472
+ .preview-shell.layout-draggable .scene-editor-resize-handle {
473
+ display: block;
474
+ }
475
+
476
+ .preview-shell.layout-draggable .scene-splitter {
477
+ display: none;
478
+ }
479
+
480
+ .preview-shell.layout-fixed .scene-editor-pane {
481
+ border-radius: 0;
482
+ box-shadow: none;
483
+ }
484
+
485
+ .preview-shell.layout-fixed .scene-editor-resize-handle {
486
+ display: none;
487
+ }
488
+
318
489
  /* Preview Stage Layouts */
319
490
  .preview-stage {
320
491
  width: 100%;
@@ -808,6 +979,7 @@
808
979
  display: none;
809
980
  }
810
981
 
982
+
811
983
  /* ========== 03-toolbar.css ========== */
812
984
  /* 03 Toolbar */
813
985
  /* Auto-generated from preview.css */
@@ -1283,6 +1455,18 @@
1283
1455
  display: inline-block;
1284
1456
  }
1285
1457
 
1458
+ /* Scene View Toggle */
1459
+ .scene-toggle.active {
1460
+ background: var(--ui-terracotta);
1461
+ color: var(--ui-text-white);
1462
+ border-color: var(--ui-terracotta);
1463
+ }
1464
+
1465
+ .scene-toggle:disabled {
1466
+ opacity: 0.5;
1467
+ cursor: not-allowed;
1468
+ }
1469
+
1286
1470
  /* Inspector Image Property - Premium Layout */
1287
1471
  .inspector-property-image {
1288
1472
  margin-bottom: 16px;