handler-playable-sdk 0.3.63 → 0.3.65

package/dist/three/index.css

@@ -4,6 +4,34 @@
 /* Import Inter Font - Main Site Typography */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
+/* ========== 01-primitives.css ========== */
+/* 01 Primitives */
+/* Low-level color definitions - DO NOT USE DIRECTLY IN COMPONENTS */
+
+:root {
+    /* RAW PALETTE */
+    --raw-white: #FFFFFF;
+    --raw-black: #1E1E1E;
+    --raw-beige-light: #F6F3EF;
+    --raw-beige-dark: #EFEAE5;
+    --raw-terracotta: #E38A5A;
+    --raw-terracotta-rgb: 227, 138, 90;
+    --raw-clay: #C9A28C;
+    --raw-clay-rgb: 201, 162, 140;
+
+    /* STATUS PRIMITIVES */
+    --raw-danger: #D97558;
+    --raw-danger-rgb: 217, 117, 88;
+    --raw-success: #5F8F6B;
+    --raw-success-rgb: 95, 143, 107;
+    --raw-warning: #FFD36B;
+    --raw-info: #9FC4FF;
+
+    /* THEME PRIMITIVES */
+    --raw-dark-bg: #1A1A1A;
+    --raw-dark-text: #E8E8E8;
+}
+
 /* ========== 01-variables.css ========== */
 /* 01 Variables */
 /* Auto-generated from preview.css */
@@ -12,28 +40,30 @@
 /* preview.css - Scene editor preview UI */
 
 :root {
-  /* HANDLER Base Colors - LOCKED */
-  --ui-bg: #F6F3EF;
-  --ui-bg-2: #EFEAE5;
-  --ui-surface: #FFFFFF;
+  /* 1. SEMANTIC THEME TOKENS - LIGHT (DEFAULT) */
+  --ui-bg: var(--raw-beige-light);
+  --ui-bg-2: var(--raw-beige-dark);
+  --ui-surface: var(--raw-white);
   --ui-surface-2: #F9F7F5;
+  /* To be refactored to primitive later */
   --ui-border: #D4CFC8;
-  --ui-text: #1E1E1E;
-  --ui-text-white: #FFFFFF;
+  /* To be refactored to primitive later */
+  --ui-text: var(--raw-black);
+  --ui-text-white: var(--raw-white);
   --ui-muted: #8E8A84;
 
-  /* HANDLER Accent Colors - LOCKED */
-  --ui-accent: #E38A5A;
-  --ui-accent-2: #C9A28C;
-  --ui-accent-3: #E38A5A;
+  /* 2. ACCENT & ACTION TOKENS */
+  --ui-accent: var(--raw-terracotta);
+  --ui-accent-2: var(--raw-clay);
+  --ui-accent-3: var(--raw-terracotta);
   /* No purple - using primary accent */
-  --ui-danger: #D97558;
+  --ui-danger: var(--raw-danger);
   /* Muted danger color */
-  --ui-success: #5F8F6B;
+  --ui-success: var(--raw-success);
   /* Status green */
 
-  /* Terracotta Button System - Main Site Style */
-  --ui-terracotta: #E38A5A;
+  /* 3. TERRACOTTA SYSTEM (LEGACY) */
+  --ui-terracotta: var(--raw-terracotta);
   --ui-terracotta-hover: #D77A4A;
   --ui-terracotta-active: #C66A3A;
 
@@ -63,25 +93,28 @@
   --ui-overlay-light-6: rgba(255, 255, 255, 0.15);
   --ui-overlay-light-7: rgba(255, 255, 255, 0.2);
 
+  /* 4. OVERLAYS & TRANSPARENCIES (PROCEDURAL) */
+  /* These map to raw primitives to allow for global hue updates */
+
   /* 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);
+  --ui-accent-overlay-1: rgba(var(--raw-terracotta-rgb), 0.08);
+  --ui-accent-overlay-2: rgba(var(--raw-terracotta-rgb), 0.12);
+  --ui-accent-overlay-3: rgba(var(--raw-terracotta-rgb), 0.35);
+  --ui-accent-overlay-4: rgba(var(--raw-terracotta-rgb), 0.45);
+  --ui-accent-overlay-5: rgba(var(--raw-terracotta-rgb), 0.5);
+  --ui-accent-overlay-6: rgba(var(--raw-terracotta-rgb), 0.55);
 
   /* Danger Overlays */
-  --ui-danger-overlay-1: rgba(217, 117, 88, 0.1);
-  --ui-danger-overlay-2: rgba(217, 117, 88, 0.3);
+  --ui-danger-overlay-1: rgba(var(--raw-danger-rgb), 0.1);
+  --ui-danger-overlay-2: rgba(var(--raw-danger-rgb), 0.3);
 
   /* Accent-2 Overlays */
-  --ui-accent-2-overlay-1: rgba(201, 162, 140, 0.1);
+  --ui-accent-2-overlay-1: rgba(var(--raw-clay-rgb), 0.1);
 
   /* Border Overlays */
   --ui-border-overlay-1: rgba(212, 207, 200, 0.8);
@@ -106,12 +139,12 @@
   /* AI Prompt Colors */
   --ui-ai-magenta: #FF00FF;
 
-  /* Status Colors (for override states, validation, etc.) */
-  --ui-status-warning: #FFD36B;
+  /* 5. STATUS COLORS (SEMANTIC) */
+  --ui-status-warning: var(--raw-warning);
   --ui-status-warning-border: rgba(255, 211, 107, 0.4);
   --ui-status-success: #9FE7C5;
   --ui-status-success-border: rgba(159, 231, 197, 0.4);
-  --ui-status-info: #9FC4FF;
+  --ui-status-info: var(--raw-info);
   --ui-status-info-border: rgba(159, 196, 255, 0.35);
 
   /* Background Texture */
@@ -145,6 +178,46 @@
   --ui-hover-darken: 0.92;
   --ui-hover-lift: -2px;
   --ui-hover-shadow-increase: 0.04;
+
+  /* Theme Defaults */
+  --ui-shadow-color: rgba(30, 30, 30, 0.08);
+  --ui-shadow: 0 2px 8px var(--ui-shadow-color);
+}
+
+/* DARK THEME OVERRIDES */
+.theme-dark {
+  --ui-bg: #121212;
+  --ui-bg-2: #1e1e1e;
+  --ui-surface: #1e1e1e;
+  --ui-surface-2: #252525;
+  --ui-border: #333333;
+  --ui-text: #e8e8e8;
+  --ui-text-white: #ffffff;
+  --ui-muted: #999999;
+
+  /* Panel Overrides */
+  --ui-dark-panel: #0a0a0a;
+  --ui-ai-dark-bg: rgba(0, 0, 0, 0.8);
+
+  /* Overlay Overrides for Dark Mode */
+  --ui-overlay-light-1: rgba(255, 255, 255, 0.05);
+  --ui-overlay-light-2: rgba(255, 255, 255, 0.08);
+  --ui-overlay-light-3: rgba(255, 255, 255, 0.12);
+  --ui-overlay-light-4: rgba(255, 255, 255, 0.15);
+  --ui-overlay-light-5: rgba(255, 255, 255, 0.18);
+  --ui-overlay-light-6: rgba(255, 255, 255, 0.22);
+  --ui-overlay-light-7: rgba(255, 255, 255, 0.25);
+
+  --ui-overlay-dark-1: rgba(0, 0, 0, 0.4);
+  --ui-overlay-dark-2: rgba(0, 0, 0, 0.6);
+  --ui-overlay-dark-3: rgba(0, 0, 0, 0.8);
+
+  /* Status Border Overrides */
+  --ui-status-warning-border: rgba(255, 211, 107, 0.2);
+  --ui-status-success-border: rgba(159, 231, 197, 0.2);
+  --ui-status-info-border: rgba(159, 196, 255, 0.15);
+
+  --ui-shadow-color: rgba(0, 0, 0, 0.5);
 }
 
 .preview-shell {
@@ -2622,7 +2695,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 {
@@ -3135,7 +3208,7 @@
   outline: none;
   background: var(--ui-surface);
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.15);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 
 .debug-field input[type="range"] {
@@ -3286,7 +3359,7 @@
 
 /* Library Panel */
 .library-panel {
-  border-color: rgba(61, 214, 198, 0.35);
+  border-color: var(--ui-status-info-border);
 }
 
 .library-grid {
@@ -3398,7 +3471,8 @@
 
 /* Panel accent color */
 .panel-accent-purple {
-  border-left: 3px solid #a855f7;
+  border-left: 3px solid var(--ui-accent-2);
+  /* Dusty clay tinted border */
 }
 
 /* ========================================
@@ -3504,7 +3578,8 @@
 
 .ai-tabs {
   display: flex;
-  background: var(--ui-overlay-dark-1);
+  background: var(--ui-overlay-dark-3);
+  /* Darker backdrop */
   border-radius: 8px;
   padding: 4px;
   margin-bottom: 16px;
@@ -3515,7 +3590,7 @@
   flex: 1;
   background: transparent;
   border: none;
-  color: #a0a0a0;
+  color: var(--ui-muted);
   padding: 8px;
   border-radius: 6px;
   font-size: 13px;
@@ -3532,9 +3607,10 @@
 }
 
 .ai-tab-btn.active {
-  background: #6d5dfc;
-  color: white;
-  box-shadow: 0 4px 12px rgba(109, 93, 252, 0.3);
+  background: var(--ui-accent);
+  /* Use Terracotta instead of Indigo */
+  color: var(--ui-text-white);
+  box-shadow: 0 4px 12px var(--ui-accent-overlay-3);
 }
 
 .ai-tab-content {
@@ -3556,7 +3632,7 @@
   width: 24px;
   height: 24px;
   border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-overlay-light-7);
   cursor: help;
 }
 
@@ -3570,11 +3646,11 @@
 
 .ai-batch-item,
 .ai-obj-item {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--ui-overlay-light-1);
   border-radius: 8px;
   padding: 10px;
   margin-bottom: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-2);
 }
 
 .ai-item-row {
@@ -3587,7 +3663,7 @@
 .ai-obj-title {
   flex: 1;
   font-weight: 500;
-  color: #eee;
+  color: var(--ui-text-white);
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
@@ -3598,7 +3674,7 @@
 .ai-obj-status {
   font-size: 11px;
   color: var(--ui-muted);
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--ui-overlay-dark-2);
   padding: 2px 6px;
   border-radius: 4px;
 }
@@ -3613,7 +3689,7 @@
 .ai-tabs {
   display: flex;
   gap: 2px;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--ui-overlay-dark-2);
   padding: 4px;
   border-radius: 12px;
   margin-bottom: 20px;
@@ -3637,14 +3713,14 @@
 }
 
 .ai-tab-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--ui-overlay-light-2);
   color: var(--ui-text);
 }
 
 .ai-tab-btn.active {
-  background: #6d5dfc;
+  background: var(--ui-accent);
   color: var(--ui-text);
-  box-shadow: 0 4px 12px rgba(109, 93, 252, 0.3);
+  box-shadow: 0 4px 12px var(--ui-accent-overlay-3);
 }
 
 .ai-tab-content {
@@ -3659,18 +3735,18 @@
 }
 
 .panel-section {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--ui-overlay-light-1);
   border-radius: 12px;
   padding: 16px;
   margin-bottom: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-2);
 }
 
 .panel-section-title {
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
-  color: #6d5dfc;
+  color: var(--ui-accent);
   letter-spacing: 0.05em;
   margin-bottom: 16px;
   display: flex;
@@ -3682,15 +3758,15 @@
   display: block;
   font-size: 12px;
   font-weight: 600;
-  color: #aaa;
+  color: var(--ui-muted);
   margin-bottom: 8px;
 }
 
 .inspector-input,
 .inspector-textarea {
   width: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--ui-overlay-dark-3);
+  border: 1px solid var(--ui-overlay-light-7);
   border-radius: 8px;
   padding: 10px 12px;
   color: var(--ui-dark-text);
@@ -3703,8 +3779,8 @@
 .inspector-input:focus,
 .inspector-textarea:focus {
   outline: none;
-  border-color: #6d5dfc;
-  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--ui-accent);
+  background: var(--ui-overlay-light-4);
 }
 
 .inspector-textarea {
@@ -3716,17 +3792,17 @@
   width: 32px;
   height: 32px;
   border-radius: 6px;
-  border: 2px solid rgba(255, 255, 255, 0.1);
+  border: 2px solid var(--ui-overlay-light-7);
   cursor: pointer;
   transition: transform var(--ui-duration-fast);
 }
 
 .ai-batch-item,
 .ai-obj-item {
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--ui-overlay-dark-1);
   border-radius: 8px;
   padding: 10px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-2);
   margin-bottom: 8px;
 }
 
@@ -3740,7 +3816,7 @@
   font-size: 10px;
   padding: 2px 8px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--ui-overlay-light-2);
   color: var(--ui-muted);
   font-weight: 700;
   text-transform: uppercase;
@@ -3763,18 +3839,18 @@
   gap: 4px;
   padding: 12px;
   border-radius: 10px;
-  background: rgba(30, 35, 45, 0.4);
+  background: var(--ui-overlay-dark-3);
   border: 1px solid var(--ui-border);
 }
 
 .persistence-status-bar.has-changes {
-  background: rgba(255, 159, 67, 0.1);
-  border-color: rgba(255, 159, 67, 0.3);
+  background: var(--ui-status-warning-border);
+  border-color: var(--ui-status-warning);
 }
 
 .persistence-status-bar.no-changes {
-  background: rgba(61, 214, 198, 0.05);
-  border-color: rgba(61, 214, 198, 0.2);
+  background: var(--ui-accent-overlay-1);
+  border-color: var(--ui-accent-overlay-2);
 }
 
 .status-box {
@@ -3790,7 +3866,7 @@
   font-weight: 800;
   letter-spacing: 0.05em;
   background: var(--ui-accent-2);
-  color: #000;
+  color: var(--ui-black);
 }
 
 .status-badge.success {
@@ -3816,21 +3892,21 @@
 .persistence-btn.primary-action {
   flex: 1;
   padding: 12px;
-  background: linear-gradient(135deg, var(--ui-accent), #2eb0a3);
-  color: #000;
+  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-overlay-3));
+  color: var(--ui-black);
   border: none;
   border-radius: 10px;
   font-weight: 800;
   font-size: 11px;
   letter-spacing: 0.03em;
   cursor: pointer;
-  box-shadow: 0 4px 15px rgba(61, 214, 198, 0.25);
+  box-shadow: 0 4px 15px var(--ui-accent-overlay-1);
   transition: all var(--ui-duration-fast) var(--ui-ease);
 }
 
 .persistence-btn.primary-action:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(61, 214, 198, 0.35);
+  box-shadow: 0 6px 20px var(--ui-accent-overlay-3);
 }
 
 .persistence-btn.primary-action:active:not(:disabled) {
@@ -3850,7 +3926,7 @@
 .version-management-section {
   margin-top: 16px;
   padding: 12px;
-  background: rgba(30, 35, 45, 0.5);
+  background: var(--ui-overlay-dark-3);
   border: 1px solid var(--ui-border);
   border-radius: 10px;
 }
@@ -3905,7 +3981,7 @@
 .version-dropdown:focus {
   outline: none;
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 2px rgba(61, 214, 198, 0.2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 
 .persistence-btn {
@@ -3921,7 +3997,7 @@
 }
 
 .persistence-btn:hover:not(:disabled) {
-  background: rgba(61, 214, 198, 0.1);
+  background: var(--ui-accent-overlay-1);
   border-color: var(--ui-accent);
 }
 
@@ -3934,14 +4010,14 @@
 .dev-only-section {
   margin-top: 16px;
   padding: 12px;
-  background: rgba(255, 165, 0, 0.08);
-  border: 1px solid rgba(255, 165, 0, 0.3);
+  background: var(--ui-status-warning-border);
+  border: 1px solid var(--ui-status-warning-border);
   border-radius: 8px;
 }
 
 .dev-warning {
   font-size: 11px;
-  color: #ff8c00;
+  color: var(--ui-status-warning);
   font-weight: 700;
   margin-bottom: 8px;
   text-transform: uppercase;
@@ -3949,16 +4025,16 @@
 }
 
 .persistence-btn.danger-action {
-  background: #dc3545;
-  border-color: #dc3545;
+  background: var(--ui-danger);
+  border-color: var(--ui-danger);
   color: white;
   width: 100%;
 }
 
 .persistence-btn.danger-action:hover:not(:disabled) {
-  background: #c82333;
-  border-color: #c82333;
-  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
+  background: var(--ui-danger);
+  border-color: var(--ui-danger);
+  box-shadow: 0 4px 12px var(--ui-danger-overlay-2);
 }
 
 .dev-hint {
@@ -4020,7 +4096,7 @@
 .debug-select:focus {
   outline: none;
   border-color: var(--ui-accent-3);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-2);
 }
 
 .debug-select option {
@@ -4111,7 +4187,7 @@
   outline: none;
   background: var(--ui-surface);
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.15);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-2);
 }
 
 .inspector-checkbox {
@@ -4162,8 +4238,8 @@
 }
 
 .inspector-btn:hover {
-  border-color: rgba(227, 138, 90, 0.55);
-  background: rgba(227, 138, 90, 0.08);
+  border-color: var(--ui-accent-overlay-6);
+  background: var(--ui-accent-overlay-1);
 }
 
 .inspector-btn.primary {
@@ -4180,7 +4256,7 @@
 .inspector-btn:disabled {
   opacity: 0.55;
   cursor: not-allowed;
-  background: rgba(212, 207, 200, 0.55);
+  background: var(--ui-overlay-light-4);
 }
 
 .inspector-btn-sm {
@@ -4295,8 +4371,8 @@
 }
 
 .inspector-btn-icon {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--ui-overlay-light-2);
+  border: 1px solid var(--ui-overlay-light-5);
   color: var(--ui-text);
   width: 28px;
   height: 28px;
@@ -4311,7 +4387,7 @@
 }
 
 .inspector-btn-icon:hover {
-  background: rgba(227, 138, 90, 0.1);
+  background: var(--ui-accent-overlay-1);
   border-color: var(--ui-accent);
   transform: translateY(-1px);
 }
@@ -4710,7 +4786,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: var(--ui-overlay-dark-4);
   z-index: 10000;
   display: flex;
   align-items: center;
@@ -4718,8 +4794,8 @@
 }
 
 .json-modal-content {
-  background-color: #1e1e1e;
-  border: 1px solid #555;
+  background-color: var(--ui-dark-panel);
+  border: 1px solid var(--ui-border);
   border-radius: 8px;
   width: 80%;
   max-width: 800px;
@@ -4733,7 +4809,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid #444;
+  border-bottom: 1px solid var(--ui-overlay-light-2);
 }
 
 .json-modal-header h3 {
@@ -4759,8 +4835,6 @@
   word-wrap: break-word;
 }
 
-
-
 /* ========== 12-responsive.css ========== */
 /* 12 Responsive */
 /* Auto-generated from preview.css */
@@ -4859,7 +4933,7 @@
 .nudge-step-input:focus {
     outline: none;
     border-color: var(--ui-terracotta);
-    box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.2);
+    box-shadow: 0 0 0 2px var(--ui-accent-overlay-2);
 }
 
 /* Nudge arrow grid */