handler-playable-sdk 0.3.61 → 0.3.62

package/dist/three/index.css

@@ -44,6 +44,79 @@
   /* HANDLER Shadow System */
   --ui-shadow: 0 2px 8px rgba(30, 30, 30, 0.08);
   --ui-shadow-hover: 0 4px 12px rgba(30, 30, 30, 0.12);
+  --ui-shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.5);
+
+  /* === EXTENDED COLOR PALETTE === */
+  /* Pure Colors */
+  --ui-black: #000000;
+  --ui-white: #FFFFFF;
+
+  /* Device Frame */
+  --ui-device-frame-bg: #000000;
+
+  /* Light Overlays (White with opacity) */
+  --ui-overlay-light-1: rgba(255, 255, 255, 0.02);
+  --ui-overlay-light-2: rgba(255, 255, 255, 0.03);
+  --ui-overlay-light-3: rgba(255, 255, 255, 0.05);
+  --ui-overlay-light-4: rgba(255, 255, 255, 0.08);
+  --ui-overlay-light-5: rgba(255, 255, 255, 0.1);
+  --ui-overlay-light-6: rgba(255, 255, 255, 0.15);
+  --ui-overlay-light-7: rgba(255, 255, 255, 0.2);
+
+  /* Dark Overlays (Black with opacity) */
+  --ui-overlay-dark-1: rgba(0, 0, 0, 0.2);
+  --ui-overlay-dark-2: rgba(0, 0, 0, 0.3);
+  --ui-overlay-dark-3: rgba(0, 0, 0, 0.5);
+
+  /* Accent Overlays (Terracotta with opacity) */
+  --ui-accent-overlay-1: rgba(227, 138, 90, 0.08);
+  --ui-accent-overlay-2: rgba(227, 138, 90, 0.12);
+  --ui-accent-overlay-3: rgba(227, 138, 90, 0.35);
+  --ui-accent-overlay-4: rgba(227, 138, 90, 0.45);
+  --ui-accent-overlay-5: rgba(227, 138, 90, 0.5);
+  --ui-accent-overlay-6: rgba(227, 138, 90, 0.55);
+
+  /* Danger Overlays */
+  --ui-danger-overlay-1: rgba(217, 117, 88, 0.1);
+  --ui-danger-overlay-2: rgba(217, 117, 88, 0.3);
+
+  /* Accent-2 Overlays */
+  --ui-accent-2-overlay-1: rgba(201, 162, 140, 0.1);
+
+  /* Border Overlays */
+  --ui-border-overlay-1: rgba(212, 207, 200, 0.8);
+
+  /* AI Tools Dark Background */
+  --ui-ai-dark-bg: rgba(8, 10, 14, 0.6);
+
+  /* Error/Alert Colors (for critical states) */
+  --ui-error-bright: #FF5C70;
+  --ui-error-bright-overlay-1: rgba(255, 92, 112, 0.1);
+  --ui-error-bright-overlay-2: rgba(255, 92, 112, 0.3);
+
+  --ui-alert-red: #FF5A5A;
+  --ui-alert-red-overlay-1: rgba(255, 90, 90, 0.15);
+  --ui-alert-red-overlay-2: rgba(255, 90, 90, 0.4);
+
+  /* Console/Debug Colors */
+  --ui-console-info: #007acc;
+  --ui-console-bg: #e1e4e8;
+  --ui-console-text: #333;
+
+  /* AI Prompt Colors */
+  --ui-ai-magenta: #FF00FF;
+
+  /* Dark Input System (for inspector/workbench panels) */
+  --ui-input-dark-bg: #1A1D23;
+  /* Darker than panel background */
+  --ui-input-dark-text: #E8E8E8;
+  /* Light text for readability */
+  --ui-input-dark-border: #2A2E36;
+  /* Subtle border */
+  --ui-input-dark-focus: #3A3E46;
+  /* Slightly lighter on focus */
+  --ui-input-dark-placeholder: #6B7280;
+  /* Muted placeholder text */
 
   /* Background Texture */
   --ui-noise-opacity: 0.05;
@@ -2399,7 +2472,7 @@
 .device-frame {
   box-shadow: 0 0 0 1px rgba(30, 30, 30, 0.08), 0 8px 20px rgba(30, 30, 30, 0.15);
   border-radius: 14px;
-  background-color: #000;
+  background-color: var(--ui-device-frame-bg);
   transition: width var(--ui-duration-normal) var(--ui-ease), height var(--ui-duration-normal) var(--ui-ease);
   overflow: hidden;
   position: relative;
@@ -2460,7 +2533,7 @@
 
 .console-msg.type-error {
   color: var(--ui-danger);
-  background: rgba(217, 117, 88, 0.1);
+  background: var(--ui-danger-overlay-1);
 }
 
 .console-msg.type-warn {
@@ -2558,7 +2631,7 @@
 
 .console-msg.type-warn {
   color: var(--ui-accent-2);
-  background: rgba(201, 162, 140, 0.1);
+  background: var(--ui-accent-2-overlay-1);
 }
 
 /* ========== 06-debug-overlay.css ========== */
@@ -3051,9 +3124,9 @@
 .debug-field input,
 .debug-field select {
   width: 100%;
-  background-color: var(--ui-surface);
-  color: var(--ui-text);
-  border: 1px solid var(--ui-border);
+  background-color: var(--ui-input-dark-bg);
+  color: var(--ui-input-dark-text);
+  border: 1px solid var(--ui-input-dark-border);
   border-radius: 4px;
   padding: 6px 8px;
   font-size: 12px;
@@ -3064,6 +3137,7 @@
 .debug-field input:focus,
 .debug-field select:focus {
   outline: none;
+  background: var(--ui-input-dark-focus);
   border-color: var(--ui-accent-3);
   box-shadow: 0 0 0 2px rgba(111, 140, 255, 0.2);
 }
@@ -3369,9 +3443,9 @@
 
 .inspector-header {
   padding: 12px;
-  background: rgba(24, 30, 42, 0.9);
+  background: rgba(24, 30, 42, 0.95);
   border-radius: 8px;
-  border: 1px solid rgba(191, 126, 255, 0.2);
+  border: 1px solid rgba(191, 126, 255, 0.25);
 }
 
 .inspector-object-name {
@@ -3938,9 +4012,9 @@
 
 .debug-select {
   width: 100%;
-  background-color: var(--ui-surface);
-  color: var(--ui-text);
-  border: 1px solid var(--ui-border);
+  background-color: var(--ui-input-dark-bg);
+  color: var(--ui-input-dark-text);
+  border: 1px solid var(--ui-input-dark-border);
   border-radius: 4px;
   padding: 6px 8px;
   font-size: 11px;
@@ -4028,9 +4102,9 @@
 .inspector-input {
   flex: 1;
   min-width: 80px;
-  background: var(--ui-surface);
-  color: var(--ui-text);
-  border: 1px solid var(--ui-border);
+  background: var(--ui-input-dark-bg);
+  color: var(--ui-input-dark-text);
+  border: 1px solid var(--ui-input-dark-border);
   border-radius: 4px;
   padding: 4px 6px;
   font-size: 11px;
@@ -4040,6 +4114,7 @@
 
 .inspector-input:focus {
   outline: none;
+  background: var(--ui-input-dark-focus);
   border-color: rgba(227, 138, 90, 0.7);
   box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.18);
 }
@@ -4302,14 +4377,14 @@
 }
 
 .library-category-tab:hover {
-  background: rgba(227, 138, 90, 0.08);
+  background: var(--ui-accent-overlay-1);
   color: var(--ui-text);
 }
 
 .library-category-tab.active {
-  background: rgba(227, 138, 90, 0.12);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-accent);
-  border-color: rgba(227, 138, 90, 0.35);
+  border-color: var(--ui-accent-overlay-3);
 }
 
 /* Individual Slot */
@@ -4322,11 +4397,11 @@
 }
 
 .library-slot:hover {
-  border-color: rgba(227, 138, 90, 0.5);
+  border-color: var(--ui-accent-overlay-5);
 }
 
 .library-slot.expanded {
-  border-color: rgba(227, 138, 90, 0.55);
+  border-color: var(--ui-accent-overlay-6);
   background: var(--ui-surface-2);
 }
 
@@ -4347,15 +4422,15 @@
   gap: 4px;
   padding: 6px;
   border-radius: 8px;
-  border: 1px solid rgba(212, 207, 200, 0.8);
+  border: 1px solid var(--ui-border-overlay-1);
   background: var(--ui-surface);
   cursor: pointer;
   transition: all 0.15s var(--ui-ease);
 }
 
 .library-item:hover {
-  background: rgba(227, 138, 90, 0.08);
-  border-color: rgba(227, 138, 90, 0.45);
+  background: var(--ui-accent-overlay-1);
+  border-color: var(--ui-accent-overlay-4);
 }
 
 .library-item:active {
@@ -4389,7 +4464,6 @@
   text-align: center;
 }
 
-
 /* ========== 10-ai-tools.css ========== */
 /* 10 Ai Tools */
 /* Auto-generated from preview.css */
@@ -4415,8 +4489,8 @@
   height: 24px;
   object-fit: cover;
   border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(8, 10, 14, 0.6);
+  border: 1px solid var(--ui-overlay-light-5);
+  background: var(--ui-ai-dark-bg);
   flex-shrink: 0;
   margin-right: 6px;
 }
@@ -4425,10 +4499,10 @@
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--ui-overlay-light-7);
   flex-shrink: 0;
   margin-left: 6px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 4px var(--ui-overlay-dark-2);
 }
 
 .scene-object-meta {
@@ -4463,7 +4537,7 @@
 }
 
 .slot-header:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--ui-overlay-light-2);
 }
 
 .slot-current {
@@ -4472,8 +4546,8 @@
   flex-shrink: 0;
   border-radius: 6px;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--ui-overlay-dark-2);
+  border: 1px solid var(--ui-overlay-light-4);
 }
 
 .slot-thumbnail {
@@ -4514,8 +4588,8 @@
   width: 24px;
   height: 24px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-5);
+  background: var(--ui-overlay-light-3);
   color: var(--ui-muted);
   font-size: 14px;
   cursor: pointer;
@@ -4526,8 +4600,8 @@
 }
 
 .slot-reset:hover {
-  background: rgba(255, 90, 90, 0.15);
-  border-color: rgba(255, 90, 90, 0.4);
+  background: var(--ui-alert-red-overlay-1);
+  border-color: var(--ui-alert-red-overlay-2);
   color: var(--ui-danger);
 }
 
@@ -4553,9 +4627,9 @@
 }
 
 .staging-group {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ui-overlay-light-1);
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-3);
   overflow: hidden;
 }
 
@@ -4564,8 +4638,8 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: var(--ui-overlay-light-2);
+  border-bottom: 1px solid var(--ui-overlay-light-3);
   font-size: 12px;
   font-weight: 700;
 }
@@ -4588,7 +4662,7 @@
   align-items: center;
   gap: 8px;
   padding: 6px 4px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid var(--ui-overlay-light-1);
 }
 
 .staging-item:last-child {
@@ -4609,7 +4683,7 @@
   flex: 1;
   font-size: 11px;
   color: var(--ui-text);
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--ui-overlay-dark-1);
   padding: 2px 6px;
   border-radius: 4px;
   font-family: 'JetBrains Mono', 'Consolas', monospace;
@@ -4633,8 +4707,6 @@
   transform: scale(1.2);
 }
 
-
-
 /* ========== 11-modals.css ========== */
 /* 11 Modals */
 /* Auto-generated from preview.css */
@@ -5009,7 +5081,7 @@
 }
 
 .unused-group {
-  border-top: 1px dashed rgba(255, 255, 255, 0.1);
+  border-top: 1px dashed var(--ui-overlay-light-5);
   margin-top: 8px;
   padding-top: 8px;
 }
@@ -5041,7 +5113,7 @@
 
 .staging-clear-all {
   background: transparent;
-  border: 1px solid rgba(217, 117, 88, 0.3);
+  border: 1px solid var(--ui-danger-overlay-2);
   color: var(--ui-danger);
   font-size: 10px;
   padding: 2px 8px;
@@ -5051,7 +5123,7 @@
 }
 
 .staging-clear-all:hover {
-  background: rgba(217, 117, 88, 0.1);
+  background: var(--ui-danger-overlay-1);
   border-color: var(--ui-danger);
 }
 
@@ -5127,7 +5199,7 @@
   flex: 1;
   padding: 6px;
   font-size: 10px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--ui-overlay-light-3);
   border: 1px solid var(--ui-border);
   border-radius: 6px;
   color: var(--ui-text);
@@ -5135,16 +5207,16 @@
 }
 
 .footer-btn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--ui-overlay-light-5);
 }
 
 .footer-btn.danger {
   color: var(--ui-danger);
-  border-color: rgba(255, 92, 112, 0.3);
+  border-color: var(--ui-error-bright-overlay-2);
 }
 
 .footer-btn.danger:hover {
-  background: rgba(255, 92, 112, 0.1);
+  background: var(--ui-error-bright-overlay-1);
   border-color: var(--ui-danger);
 }
 
@@ -5157,7 +5229,7 @@
   font-size: 10px;
   color: var(--ui-muted);
   line-height: 1.4;
-  background: rgba(227, 138, 90, 0.08);
+  background: var(--ui-accent-overlay-1);
   padding: 8px;
   border-radius: 8px;
 }