@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/src-web/components/VeoStudioPanel.tsx

@@ -1,3 +1,3 @@
 // Re-export from the shared module — do NOT add logic here.
 // Edit src/renderer/shared/components/VeoStudioPanel.tsx instead.
-export { default } from '../../shared/components/VeoStudioPanel'
+export { default } from '../../shared/components/studio/VeoStudioPanel'

package/src/renderer/src-web/css/app-shell.css

@@ -1,80 +1,5 @@
 /* web: app-shell.css — split from styles.css, rules kept in original order */
-
-:root {
-  --status-listening: #7dd3fc;
-  --status-thinking: var(--accent);
-  --status-speaking: #22c55e;
-  --status-error: #ef4444;
-  --hover-delete: #fca5a5;
-  --hover-delete-bg: rgba(248, 113, 113, 0.12);
-  --hover-edit: #c7d2fe;
-  --hover-edit-bg: rgba(99, 102, 241, 0.12);
-  --close-btn-hover-bg: #3a2020;
-  --close-btn-hover-color: #ff8a8a;
-
-  /* Radius scale — same across all themes. Values are the dominant sizes
-     already in use across the app; stray one-off values (5px, 7px, 9px,
-     11px, 14px, 18px, 24px, 99px, 9999px, ...) were consolidated onto the
-     nearest step here so cards/buttons/panels of the same visual weight
-     share the same corner radius. Sub-4px radii are left as raw px values
-     where they appear — those are deliberate micro-details (e.g. a small
-     square-ish status dot), not part of this scale. */
-  --radius-xs: 6px;
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 14px;
-  --radius-xl: 16px;
-  --radius-2xl: 20px;
-  --radius-3xl: 24px;
-  --radius-full: 999px;
-
-  /* Elevation scale — border-first: most resting surfaces lean on --border
-     (or --border-light) for their edge and don't need a shadow at all
-     (--shadow itself is `none` in dark mode). These tokens are for the
-     minority of cases that do want a lift — a toolbar raised above
-     scrolling content, a dropdown, a modal — consolidated from a long tail
-     of one-off rgba(0,0,0,N) values that varied in blur/opacity for no
-     reason tied to their actual elevation. --glow-accent-* replaces
-     one-off `color-mix(in srgb, var(--accent) NN%, transparent)` shadows
-     used for accent-tinted hover/active glows (buttons, chips) — capped
-     around ~28% so the glow reads as an accent, not a flash. Reserve
-     --shadow-lg for real modals/dialogs; @keyframes pulse/breathe rings
-     (status/recording/voice-active indicators) are a different thing —
-     motion communicating state, not elevation — and are left alone. */
-  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.12);
-  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.16);
-  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.22);
-  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
-  --glow-accent-xs: 0 2px 8px color-mix(in srgb, var(--accent) 15%, transparent);
-  --glow-accent-sm: 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent);
-  --glow-accent-md: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
-}
-
-[data-theme="light"] {
-  --status-listening: #0284c7;
-  --status-thinking: var(--accent);
-  --status-speaking: #16a34a;
-  --status-error: #dc2626;
-  --hover-delete: #dc2626;
-  --hover-delete-bg: rgba(220, 38, 38, 0.08);
-  --hover-edit: #4f46e5;
-  --hover-edit-bg: rgba(79, 70, 229, 0.08);
-  --close-btn-hover-bg: #fee2e2;
-  --close-btn-hover-color: #dc2626;
-}
-
-[data-theme="midnight"] {
-  --status-listening: #7dd3fc;
-  --status-thinking: var(--accent);
-  --status-speaking: #22c55e;
-  --status-error: #fca5a5;
-  --hover-delete: #fca5a5;
-  --hover-delete-bg: rgba(248, 113, 113, 0.12);
-  --hover-edit: #c7d2fe;
-  --hover-edit-bg: rgba(99, 102, 241, 0.12);
-  --close-btn-hover-bg: #3a2020;
-  --close-btn-hover-color: #ff8a8a;
-}
+/* Global status, radius, and shadow tokens are centrally defined in shared/theme/tokens.css */
 
 * {
   box-sizing: border-box;
@@ -83,7 +8,7 @@
 }
 
 body {
-  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
   background: transparent;
   color: var(--text-main);
   height: 100vh;
@@ -277,19 +202,10 @@ h1 {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.assistant-workspace.model-hidden {
+.assistant-workspace.chat-only {
   padding: 22px 120px;
 }
 
-.assistant-workspace.model-hidden .model-stage {
-  flex: 0 0 0;
-  min-width: 0;
-  opacity: 0;
-  pointer-events: none;
-  transform: scale(0.9);
-  margin-right: -22px;
-}
-
 .loader-dots {
   display: flex;
   gap: 6px;
@@ -324,10 +240,10 @@ h1 {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0,0,0,0.45);
+  background: var(--bg-backdrop, rgba(0,0,0,0.45));
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
-  z-index: 80;
+  z-index: 1000;
   padding: 24px;
 }
 
@@ -336,19 +252,7 @@ h1 {
   height: min(780px, 88vh);
   overflow: hidden;
   border-radius: var(--radius-xl);
-  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
-}
-
-[data-theme="light"] .settings-modal-overlay {
-  background: rgba(15, 23, 42, 0.42);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-}
-
-[data-theme="light"] .settings-modal {
-  background: #ffffff;
-  border: 1px solid rgba(15, 23, 42, 0.12);
-  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
+  box-shadow: var(--shadow-lg);
 }
 
 @keyframes modelFloat {
@@ -362,7 +266,7 @@ h1 {
   }
 }
 
-.assistant-workspace.model-hidden .conversation-panel {
+.assistant-workspace.chat-only .conversation-panel {
   flex: 1;
   max-width: 1100px;
   margin: 0 auto;
@@ -399,23 +303,6 @@ h1 {
   }
 }
 
-@keyframes pulse-mic {
-  0% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
-    transform: scale(1);
-  }
-
-  50% {
-    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
-    transform: scale(1.05);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
-    transform: scale(1);
-  }
-}
-
 @keyframes agent-activity-slide-up-fade {
   from {
     opacity: 0;
@@ -639,8 +526,6 @@ h1 {
 .app-body.sidebar-collapsed .sidebar-account-logout {
   display: none;
 }
-
-.app-body.sidebar-collapsed .sidebar-model-controls,
 .app-body.sidebar-collapsed .sidebar-bottom-actions {
   justify-items: center;
 }
@@ -673,14 +558,6 @@ h1 {
               transform 0.22s ease;
 }
 
-.assistant-workspace.layout-chat-wide {
-  grid-template-columns: minmax(280px, 0.72fr) minmax(460px, 1.18fr);
-}
-
-.assistant-workspace.layout-model-wide {
-  grid-template-columns: minmax(420px, 1.18fr) minmax(360px, 0.72fr);
-}
-
 .assistant-workspace.workspace-open .message {
   max-width: 100%;
 }
@@ -711,16 +588,16 @@ h1 {
   }
 }
 
-.assistant-workspace.model-hidden {
+.assistant-workspace.chat-only {
   grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
   gap: 0;
   padding: 0;
   position: relative;
 }
 
-/* Background glows when model is hidden */
+/* Background glows behind chat */
 
-.assistant-workspace.model-hidden::before {
+.assistant-workspace.chat-only::before {
   content: '';
   position: absolute;
   top: 15%;
@@ -734,7 +611,7 @@ h1 {
   animation: floatGlowOne 25s infinite alternate ease-in-out;
 }
 
-.assistant-workspace.model-hidden::after {
+.assistant-workspace.chat-only::after {
   content: '';
   position: absolute;
   bottom: 15%;
@@ -758,19 +635,22 @@ h1 {
   100% { transform: translate(-60px, -70px) scale(0.9); }
 }
 
-[data-theme="light"] .suggestion-card:hover {
-  background: rgba(143, 108, 245, 0.05);
+/* Studio Dark: Pure solid neutral canvas without colored decorative background glows */
+[data-theme="studio"] .assistant-workspace.chat-only::before,
+[data-theme="studio"] .assistant-workspace.chat-only::after {
+  display: none !important;
 }
 
-.assistant-workspace.model-hidden .model-stage {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateX(-28px) scale(0.985);
-  padding-left: 0;
-  margin-right: 0;
+[data-theme="studio"] .assistant-workspace,
+[data-theme="studio"] .app-body {
+  background: var(--bg-canvas, #101010) !important;
+}
+
+[data-theme="light"] .suggestion-card:hover {
+  background: rgba(143, 108, 245, 0.05);
 }
 
-.assistant-workspace.model-hidden .conversation-panel {
+.assistant-workspace.chat-only .conversation-panel {
   position: relative;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto auto;
@@ -801,12 +681,12 @@ h1 {
   align-self: stretch;
 }
 
-.assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview {
+.assistant-workspace.chat-only .chat-panel-split-wrapper.no-preview {
   grid-column: 1 / -1;
   grid-row: 1;
 }
 
-.assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview .conversation-panel {
+.assistant-workspace.chat-only .chat-panel-split-wrapper.no-preview .conversation-panel {
   height: auto;
   min-height: 0;
   align-self: stretch;
@@ -831,7 +711,7 @@ h1 {
     justify-self: center;
   }
 
-  .assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview {
+  .assistant-workspace.chat-only .chat-panel-split-wrapper.no-preview {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -936,16 +816,16 @@ h1 {
   pointer-events: auto !important;
 }
 
-.assistant-workspace.model-hidden .chat-container {
+.assistant-workspace.chat-only .chat-container {
   padding: 0 8px 18px;
   overflow-y: auto;
 }
 
-.assistant-workspace.model-hidden .input-area {
+.assistant-workspace.chat-only .input-area {
   width: 100%;
 }
 
-.assistant-workspace.model-hidden .conversation-panel.is-empty {
+.assistant-workspace.chat-only .conversation-panel.is-empty {
   grid-template-rows: auto minmax(0, 1fr) auto;
   align-content: stretch;
   justify-content: stretch;
@@ -955,18 +835,18 @@ h1 {
   padding-bottom: 8px;
 }
 
-.assistant-workspace.model-hidden .conversation-panel.is-empty .chat-header {
+.assistant-workspace.chat-only .conversation-panel.is-empty .chat-header {
   grid-row: 1;
   align-self: start;
 }
 
-.assistant-workspace.model-hidden .conversation-panel.is-empty .input-area {
+.assistant-workspace.chat-only .conversation-panel.is-empty .input-area {
   grid-row: 2;
   align-self: center;
   margin: 0;
 }
 
-.assistant-workspace.model-hidden .conversation-panel.is-empty .input-disclaimer {
+.assistant-workspace.chat-only .conversation-panel.is-empty .input-disclaimer {
   grid-row: 3;
 }
 
@@ -991,7 +871,7 @@ h1 {
   .assistant-workspace .conversation-panel.is-empty .input-area {
     position: absolute;
     top: auto;
-    bottom: 44px;
+    bottom: 16px;
     left: 50%;
     width: min(840px, calc(100% - 64px));
     margin: 0;
@@ -999,17 +879,9 @@ h1 {
   }
 
   .assistant-workspace .conversation-panel.is-empty .empty-chat-prompt {
-    top: calc(100% + 44px - 50vh);
+    top: calc(100% + 16px - 50vh);
     transform: translateY(-50%);
   }
-
-  .assistant-workspace .conversation-panel.is-empty .input-disclaimer {
-    position: absolute;
-    right: 32px;
-    bottom: 8px;
-    left: 32px;
-    margin: 0;
-  }
 }
 
 @keyframes toolMenuPopIn {
@@ -1023,22 +895,6 @@ h1 {
   }
 }
 
-.assistant-workspace.layout-horizontal {
-  grid-template-columns: 1fr;
-  grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
-  gap: 12px;
-}
-
-.assistant-workspace.layout-horizontal .model-stage {
-  min-width: 0;
-  max-width: 100%;
-}
-
-.assistant-workspace.layout-horizontal .conversation-panel {
-  min-width: 0;
-  max-width: 100%;
-}
-
 @media (max-width: 760px) {
 
   .header-content h1 {
@@ -1109,17 +965,6 @@ h1 {
   box-shadow: 0 0 8px currentColor;
 }
 
-@keyframes pulseRed {
-  from {
-    transform: scale(1);
-    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
-  }
-  to {
-    transform: scale(1.1);
-    box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
-  }
-}
-
 @keyframes pulseGlow {
   0% {
     box-shadow: 0 0 10px rgba(143, 108, 245, 0.2), inset 0 0 10px rgba(143, 108, 245, 0.1);
@@ -1134,8 +979,8 @@ h1 {
 /* Mobile Media Query Enhancements */
 
 @media (max-width: 760px) {
-  .assistant-workspace.model-hidden .conversation-panel,
-  .assistant-workspace.model-hidden .conversation-panel.is-empty {
+  .assistant-workspace.chat-only .conversation-panel,
+  .assistant-workspace.chat-only .conversation-panel.is-empty {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -1146,22 +991,22 @@ h1 {
     grid-column: auto;
   }
 
-  .assistant-workspace.model-hidden .chat-header {
+  .assistant-workspace.chat-only .chat-header {
     display: flex;
     flex-shrink: 0;
   }
-  .assistant-workspace.model-hidden .chat-container {
+  .assistant-workspace.chat-only .chat-container {
     flex: 1;
     overflow-y: auto;
     padding: 64px 12px 8px;
   }
 
-  .assistant-workspace.model-hidden .input-area {
+  .assistant-workspace.chat-only .input-area {
     width: 100%;
     flex-shrink: 0;
   }
 
-  .assistant-workspace.model-hidden .conversation-panel.is-empty .input-area {
+  .assistant-workspace.chat-only .conversation-panel.is-empty .input-area {
     margin: auto 0;
   }
 }
@@ -1366,32 +1211,6 @@ h1 {
   -ms-user-select: text !important;
 }
 
-/* Breathing voice-active aura glow */
-
-@keyframes aura-breathe-form {
-  0% {
-    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
-  }
-  50% {
-    box-shadow: 0 4px 25px color-mix(in srgb, var(--accent) 42%, transparent);
-  }
-  100% {
-    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
-  }
-}
-
-@keyframes aura-breathe-bar {
-  0% {
-    box-shadow: 0 -4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
-  }
-  50% {
-    box-shadow: 0 -4px 25px color-mix(in srgb, var(--accent) 42%, transparent);
-  }
-  100% {
-    box-shadow: 0 -4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
-  }
-}
-
 /* Rewind Floating Toast Banner */
 .rewind-toast-banner {
   position: absolute;