handler-playable-sdk 0.3.65 → 0.3.69

package/dist/three/index.css

@@ -871,6 +871,24 @@
   background: var(--ui-terracotta);
 }
 
+/* Fixed Layout Container */
+.preview-shell.layout-fixed .preview-main {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: 1fr auto;
+  gap: 0;
+  overflow: hidden;
+}
+
+.preview-shell.layout-fixed .preview-container {
+  position: relative;
+  grid-column: 2;
+  grid-row: 1;
+  background: var(--ui-bg-3);
+  border-left: 1px solid var(--ui-border);
+  border-right: 1px solid var(--ui-border);
+}
+
 /* Responsive toolbar - width responsive, height fixed */
 /* Scene Panel Styles - MUST BE OUTSIDE MEDIA QUERY */
 .scene-panel.collapsed .scene-panel-toggle {
@@ -2022,7 +2040,7 @@
 .asset-editor-card {
   width: min(680px, 90vw);
   max-height: 85vh;
-  background: var(--ui-dark-panel);
+  background: var(--ui-surface);
   border: 1px solid var(--ui-border);
   border-radius: 16px;
   box-shadow: var(--ui-shadow-strong);
@@ -2144,7 +2162,7 @@
 .asset-preview-card {
   width: min(720px, 92vw);
   max-height: 82vh;
-  background: var(--ui-dark-panel);
+  background: var(--ui-surface);
   border: 1px solid var(--ui-border);
   border-radius: 14px;
   box-shadow: var(--ui-shadow);
@@ -2273,7 +2291,7 @@
 
 .asset-crop-card {
   width: min(860px, 96vw);
-  background: var(--ui-dark-panel);
+  background: var(--ui-surface);
   border: 1px solid var(--ui-border);
   border-radius: 14px;
   box-shadow: var(--ui-shadow);
@@ -2422,12 +2440,12 @@
   justify-content: space-between;
   gap: 12px;
   padding: 10px 14px;
-  background-color: var(--ui-dark-panel);
+  background-color: var(--ui-bg-2);
   color: var(--ui-text);
   font-size: 12px;
   user-select: none;
   cursor: move;
-  border-bottom: 1px solid var(--ui-overlay-light-1);
+  border-bottom: 1px solid var(--ui-border);
 }
 
 .scene-panel-actions {
@@ -2593,6 +2611,18 @@
   pointer-events: none;
 }
 
+/* Docked Console for Fixed Layout */
+.preview-shell.layout-fixed .console-panel {
+  position: static;
+  grid-column: 1 / span 3;
+  grid-row: 2;
+  height: 200px;
+  border-top: 1px solid var(--ui-border);
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+}
+
 .console-msg {
   font-family: 'Consolas', 'Monaco', monospace;
   font-size: 12px;
@@ -2728,6 +2758,167 @@
   z-index: 1000;
 }
 
+/* Docked Styles for Fixed Layout */
+.preview-shell.layout-fixed .debug-overlay {
+  position: static;
+  display: contents;
+  /* Let children participate in grid directly or via parent */
+}
+
+.preview-shell.layout-fixed .debug-workbench {
+  position: static;
+  grid-column: 3;
+  grid-row: 1;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  box-shadow: none;
+}
+
+.preview-shell.layout-fixed .scene-panel.scene-objects {
+  position: static;
+  grid-column: 1;
+  grid-row: 1;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  border-radius: 0;
+  border-top: none;
+  border-left: none;
+  border-bottom: none;
+  box-shadow: none;
+  position: relative;
+}
+
+.panel-resize-handle-v,
+.workbench-resize-handle-v {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: ew-resize;
+  background: transparent;
+  transition: background 0.2s;
+  z-index: 10;
+}
+
+.panel-resize-handle-v {
+  right: 0;
+}
+
+.workbench-resize-handle-v {
+  left: 0;
+}
+
+.panel-resize-handle-v:hover,
+.workbench-resize-handle-v:hover,
+.scene-panel.resizing .panel-resize-handle-v,
+.debug-workbench.resizing .workbench-resize-handle-v {
+  background: var(--ui-terracotta);
+}
+
+.preview-shell.layout-fixed .workbench-header,
+.preview-shell.layout-fixed .console-header,
+.preview-shell.layout-fixed .workbench-tab[data-tab="library"],
+.preview-shell.layout-fixed .workbench-tab-panel[data-tab-panel="library"],
+.preview-shell.layout-fixed .console-panel.docked-hidden,
+.preview-shell.layout-fixed #debug-close,
+.preview-shell.layout-fixed .scene-panel-toggle {
+  display: none !important;
+}
+
+/* Bottom Dock Styles */
+.bottom-dock {
+  background: var(--ui-bg-2);
+  border-top: 1px solid var(--ui-border);
+  display: flex;
+  flex-direction: column;
+  height: 250px;
+  grid-column: 1 / span 3;
+  grid-row: 2;
+  overflow: hidden;
+  z-index: 100;
+}
+
+.bottom-dock.hidden {
+  display: none;
+}
+
+.bottom-dock-tabs {
+  display: flex;
+  padding: 8px 16px;
+  gap: 16px;
+  background: var(--ui-bg-3);
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.bottom-dock-tab {
+  background: none;
+  border: none;
+  color: var(--ui-muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  padding: 4px 0;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.bottom-dock-tab:hover {
+  color: var(--ui-text);
+}
+
+.bottom-dock-tab.active {
+  color: var(--ui-terracotta);
+  border-bottom-color: var(--ui-terracotta);
+}
+
+.bottom-dock-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.bottom-dock-panel {
+  display: none;
+  height: 100%;
+}
+
+.bottom-dock-panel.active {
+  display: block;
+}
+
+#dock-console-content {
+  background: var(--ui-bg-1);
+}
+
+#dock-console-content .console-messages {
+  height: 100%;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.bottom-dock-resize-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  cursor: ns-resize;
+  background: transparent;
+  transition: background 0.2s;
+}
+
+.bottom-dock-resize-handle:hover,
+.bottom-dock.resizing .bottom-dock-resize-handle {
+  background: var(--ui-terracotta);
+}
+
 .workbench-header {
   display: flex;
   align-items: center;
@@ -2801,7 +2992,6 @@
   z-index: 10;
 }
 
-
 /* ========== 07-panels.css ========== */
 /* 07 Panels */
 /* Auto-generated from preview.css */
@@ -4079,8 +4269,8 @@
   border-radius: 10px;
   padding: 12px;
   margin-top: 8px;
-  background-color: var(--ui-dark-panel);
-  color: var(--ui-dark-text);
+  background-color: var(--ui-surface-2);
+  color: var(--ui-text);
 }
 
 .debug-select {
@@ -4100,8 +4290,8 @@
 }
 
 .debug-select option {
-  background-color: var(--ui-dark-panel);
-  color: var(--ui-dark-text);
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
 }
 
 /* Simple subsection with title and inline row of children */