@pheem49/mint 1.16.0 → 1.17.0

package/src/renderer/src/components/SpotlightWindow.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import '../css/spotlight.css'
 import { evaluateArithmetic } from '../calculator'
+import { applyTheme } from '../../shared/theme/themeManager'
 
 const COMMANDS = [
     { label: 'Open YouTube', desc: 'Open YouTube website', icon: '📺', action: { type: 'open_url', target: 'https://youtube.com' } },
@@ -98,31 +99,11 @@ export default function SpotlightWindow() {
   const [selectedIndex, setSelectedIndex] = useState(-1)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Sync theme
+  // Sync theme via centralized themeManager
   useEffect(() => {
-    const applyThemeVariables = (config: any) => {
-      if (config.systemTextColor) {
-        document.documentElement.style.setProperty('--text-main', config.systemTextColor)
-      }
-      document.documentElement.setAttribute('data-theme', config.theme || 'dark')
-      if (config.theme === 'custom') {
-        if (config.customBgStart && config.customBgEnd) {
-          const gradient = `linear-gradient(135deg, ${config.customBgStart} 0%, ${config.customBgEnd} 100%)`
-          document.documentElement.style.setProperty('--bg-gradient', gradient)
-        }
-        if (config.customPanelBg) {
-          const rgb = hexToRgb(config.customPanelBg)
-          document.documentElement.style.setProperty('--panel-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.75)`)
-        }
-      } else {
-        document.documentElement.style.removeProperty('--bg-gradient')
-        document.documentElement.style.removeProperty('--panel-bg')
-      }
-    }
-
     if (window.spotlightAPI) {
-      window.spotlightAPI.getSettings().then(applyThemeVariables)
-      window.spotlightAPI.onSettingsChanged(applyThemeVariables)
+      window.spotlightAPI.getSettings().then(applyTheme)
+      window.spotlightAPI.onSettingsChanged(applyTheme)
     }
 
     const handleFocus = () => {
@@ -135,15 +116,6 @@ export default function SpotlightWindow() {
     return () => window.removeEventListener('focus', handleFocus)
   }, [])
 
-  const hexToRgb = (hex: string) => {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-    return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-    } : { r: 15, g: 23, b: 42 }
-  }
-
   // Calculate matches when query text changes
   useEffect(() => {
     const trimmed = query.trim()

package/src/renderer/src/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/components/WorkspacePanel.tsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import WorkspacePreviewActions from '@shared/components/WorkspacePreviewActions'
-import WorkspacePaneResizer from '@shared/components/WorkspacePaneResizer'
+import WorkspacePreviewActions from '@shared/components/workspace/WorkspacePreviewActions'
+import WorkspacePaneResizer from '@shared/components/workspace/WorkspacePaneResizer'
 import { WorkspaceSnapshotReader } from '@shared/utils/workspaceSnapshot'
-import { detectArtifactType } from '@shared/components/ArtifactPreviewPanel'
+import { detectArtifactType } from '@shared/utils/artifacts'
 import { workspacePlatform } from '@shared/platform'
 import { announceWorkspaceChange, useWorkspaceUndo } from '@shared/workspaceUndo'
+import { normalizeWorkspacePath } from '@shared/utils/workspaces'
+import { WORKSPACE_FILE_MIME } from '@shared/utils/workspaceDrag'
 import type { WorkspaceSnapshot, WorkspaceTreeEntry } from '@shared/types'
 import {
   materialFolderIcon,
@@ -46,8 +48,17 @@ interface WorkspaceMenu {
   trigger: HTMLButtonElement
 }
 
-function TreeNode({ entry, level, onContextMenu }: { entry: WorkspaceTreeEntry; level: number; onContextMenu: (event: React.MouseEvent<HTMLButtonElement>, entry: WorkspaceTreeEntry) => void; key?: string }) {
-  const [open, setOpen] = useState(level < 1)
+interface TreeNodeProps {
+  workspacePath: string
+  entry: WorkspaceTreeEntry
+  level: number
+  expanded: Set<string>
+  onToggle: (path: string) => void
+  onContextMenu: (event: React.MouseEvent<HTMLButtonElement>, entry: WorkspaceTreeEntry) => void
+}
+
+function TreeNode({ workspacePath, entry, level, expanded, onToggle, onContextMenu }: TreeNodeProps) {
+  const open = expanded.has(entry.path)
   const isDirectory = entry.kind === 'directory'
   const hasChildren = entry.children.length > 0
   const fileExtension = extension(entry.name)
@@ -61,14 +72,16 @@ function TreeNode({ entry, level, onContextMenu }: { entry: WorkspaceTreeEntry;
         type="button"
         className={`workspace-tree-row ${isDirectory ? 'is-directory' : 'is-file'}`}
         style={{ paddingLeft: `${level * 16 + 8}px` }}
-        onClick={() => isDirectory && hasChildren && setOpen((current) => !current)}
+        onClick={() => isDirectory && hasChildren && onToggle(entry.path)}
         onContextMenu={(event) => onContextMenu(event, entry)}
         aria-haspopup="menu"
+        aria-expanded={isDirectory ? open : undefined}
         title={entry.path}
         draggable
         onDragStart={(event) => {
           event.dataTransfer.setData('application/x-mint-workspace-path', dragText)
           event.dataTransfer.setData('text/plain', dragText)
+          if (!isDirectory) event.dataTransfer.setData(WORKSPACE_FILE_MIME, JSON.stringify({ root: workspacePath, path: entry.path, kind: 'file' }))
           event.dataTransfer.effectAllowed = 'copy'
         }}
       >
@@ -87,7 +100,7 @@ function TreeNode({ entry, level, onContextMenu }: { entry: WorkspaceTreeEntry;
       {isDirectory && open && hasChildren && (
         <div className="workspace-tree-children">
           {entry.children.map((child) => (
-            <TreeNode key={child.path} entry={child} level={level + 1} onContextMenu={onContextMenu} />
+            <TreeNode key={child.path} workspacePath={workspacePath} entry={child} level={level + 1} expanded={expanded} onToggle={onToggle} onContextMenu={onContextMenu} />
           ))}
         </div>
       )}
@@ -95,6 +108,30 @@ function TreeNode({ entry, level, onContextMenu }: { entry: WorkspaceTreeEntry;
   )
 }
 
+function WorkspaceTree({ workspacePath, entries, onContextMenu }: {
+  workspacePath: string
+  entries: WorkspaceTreeEntry[]
+  onContextMenu: TreeNodeProps['onContextMenu']
+}) {
+  const storageKey = `mint:workspace-expanded-folders:${encodeURIComponent(workspacePath)}`
+  const [expanded, setExpanded] = useState<Set<string>>(() => {
+    try {
+      const saved: unknown = JSON.parse(window.localStorage.getItem(storageKey) || '[]')
+      return new Set(Array.isArray(saved) ? saved.filter((path): path is string => typeof path === 'string') : [])
+    } catch { return new Set() }
+  })
+  const toggle = (path: string) => {
+    const next = new Set(expanded)
+    if (next.has(path)) next.delete(path)
+    else next.add(path)
+    setExpanded(next)
+    try { window.localStorage.setItem(storageKey, JSON.stringify([...next])) } catch { /* Keep this view usable when storage is unavailable. */ }
+  }
+  return <div className="workspace-tree">
+    {entries.map(entry => <TreeNode key={entry.path} workspacePath={workspacePath} entry={entry} level={0} expanded={expanded} onToggle={toggle} onContextMenu={onContextMenu} />)}
+  </div>
+}
+
 export default function WorkspacePanel({ agentMode, sending, workspacePath, onEnableAgentMode, onSetMessage, onWorkspaceReady, refreshRevision = 0, onOpenHtml, onOpenPreview }: WorkspacePanelProps) {
   const [tree, setTree] = useState<WorkspaceTreeEntry | null>(null)
   const [revision, setRevision] = useState(0)
@@ -373,11 +410,7 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
               </span>
               <span>{tree.name}</span>
             </div>
-            <div className="workspace-tree">
-              {tree.children.map((entry) => (
-                <TreeNode key={entry.path} entry={entry} level={0} onContextMenu={handleContextMenu} />
-              ))}
-            </div>
+            <WorkspaceTree key={normalizeWorkspacePath(workspacePath)} workspacePath={normalizeWorkspacePath(workspacePath)} entries={tree.children} onContextMenu={handleContextMenu} />
           </>
         ) : (
           <div className="workspace-tree-empty">Select a project to show workspace files.</div>

package/src/renderer/src/components/browser-shell.css

@@ -2,7 +2,7 @@
   width: 100vw;
   height: 100%;
   overflow: hidden;
-  color: #e5e7eb;
+  color: var(--text-primary, #e5e7eb);
   background: transparent;
   font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
 }
@@ -13,8 +13,8 @@
   gap: 6px;
   height: 42px;
   padding: 7px 14px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background: #151619;
+  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  background: var(--bg-canvas, #151619);
 }
 
 .mint-browser-tab {
@@ -24,16 +24,16 @@
   width: min(250px, 42vw);
   height: 35px;
   padding: 0 9px 0 12px;
-  border: 1px solid rgba(255, 255, 255, 0.11);
-  border-bottom-color: #25272c;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.11));
+  border-bottom-color: var(--bg-surface-raised, #25272c);
   border-radius: 9px 9px 0 0;
-  color: #f3f4f6;
-  background: #24262a;
+  color: var(--text-primary, #f3f4f6);
+  background: var(--bg-surface-raised, #24262a);
   font-size: 0.78rem;
 }
 
 .mint-browser-tab-icon {
-  color: #34d399;
+  color: var(--interactive-fg, #34d399);
   font-size: 0.58rem;
 }
 
@@ -51,7 +51,7 @@
   align-items: center;
   justify-content: center;
   border: 0;
-  color: #9ca3af;
+  color: var(--text-muted, #9ca3af);
   background: transparent;
 }
 
@@ -64,8 +64,8 @@
 
 .mint-browser-tab-close:hover,
 .mint-browser-new-tab:hover {
-  color: #f9fafb;
-  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary, #f9fafb);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.1));
 }
 
 .mint-browser-new-tab {
@@ -83,8 +83,8 @@
   width: 100%;
   height: 50px;
   padding: 7px 14px 8px;
-  background: #1b1c20;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  background: var(--bg-surface, #1b1c20);
+  border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
 }
 
 .mint-browser-nav-group {
@@ -103,14 +103,14 @@
   flex: 0 0 auto;
   border: 0;
   border-radius: 6px;
-  color: #a7adb8;
+  color: var(--text-secondary, #a7adb8);
   background: transparent;
   font-size: 1.15rem;
 }
 
 .mint-browser-nav-button:hover {
-  color: #f1f5f9;
-  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary, #f1f5f9);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
 }
 
 .mint-browser-address-input {
@@ -121,10 +121,10 @@
   height: 34px;
   gap: 8px;
   padding-left: 11px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
   border-radius: 9px;
-  color: #9ca3af;
-  background: #24262b;
+  color: var(--text-muted, #9ca3af);
+  background: var(--bg-input, #24262b);
 }
 
 .mint-browser-address-wrap {
@@ -138,12 +138,12 @@
 }
 
 .mint-browser-address-input:focus-within {
-  border-color: rgba(52, 211, 153, 0.65);
-  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.12);
+  border-color: var(--accent-border, rgba(52, 211, 153, 0.65));
+  box-shadow: 0 0 0 2px var(--accent-glow, rgba(52, 211, 153, 0.12));
 }
 
 .mint-browser-address-icon {
-  color: #9ca3af;
+  color: var(--text-muted, #9ca3af);
   font-size: 0.95rem;
 }
 
@@ -152,7 +152,7 @@
   flex: 1;
   border: 0;
   outline: 0;
-  color: #f1f5f9;
+  color: var(--text-primary, #f1f5f9);
   background: transparent;
   font: 0.8rem ui-monospace, SFMono-Regular, Menlo, monospace;
 }
@@ -164,14 +164,14 @@
   width: 38px;
   height: 100%;
   border: 0;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
   border-radius: 0 8px 8px 0;
-  color: #34d399;
+  color: var(--interactive-fg, #34d399);
   background: transparent;
 }
 
 .mint-browser-address-input > button:hover {
-  background: rgba(52, 211, 153, 0.12);
+  background: var(--accent-subtle, rgba(52, 211, 153, 0.12));
 }
 
 .mint-browser-address-input svg {

package/src/renderer/src/components/browser-suggestions-popup.css

@@ -3,11 +3,11 @@
   min-height: 52px;
   overflow: hidden;
   padding: 5px 0;
-  border: 1px solid rgba(255, 255, 255, 0.16);
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.16));
   border-radius: 10px;
-  color: #f3f4f6;
-  background: #2a2b30;
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
+  color: var(--text-primary, #f3f4f6);
+  background: var(--bg-overlay, #2a2b30);
+  box-shadow: var(--shadow-lg, 0 12px 30px rgba(0, 0, 0, 0.42));
   font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
 }
 
@@ -20,7 +20,7 @@
   min-height: 38px;
   padding: 7px 12px;
   border: 0;
-  color: #f3f4f6;
+  color: var(--text-primary, #f3f4f6);
   background: transparent;
   text-align: left;
   font: inherit;
@@ -30,11 +30,11 @@
 .browser-suggestions-popup-item:hover,
 .browser-suggestions-popup-item:focus-visible {
   outline: 0;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.1));
 }
 
 .browser-suggestions-popup-icon {
-  color: #aeb4bf;
+  color: var(--text-muted, #aeb4bf);
   font-size: 1rem;
   text-align: center;
 }
@@ -48,7 +48,7 @@
 .browser-suggestions-popup-detail {
   overflow: hidden;
   max-width: 170px;
-  color: #aeb4bf;
+  color: var(--text-muted, #aeb4bf);
   font-size: 0.7rem;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -1,80 +1,5 @@
 /* desktop: 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;
@@ -311,11 +236,14 @@ h1 {
 
 .settings-modal-overlay {
   position: fixed;
-  inset: 0;
+  top: 38px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   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: 1000;
@@ -324,22 +252,11 @@ h1 {
 
 .settings-modal {
   width: min(1180px, 95vw);
-  height: min(780px, 88vh);
+  height: min(780px, calc(100vh - 38px - 48px));
+  max-height: calc(100vh - 38px - 48px);
   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 {
@@ -761,6 +678,17 @@ h1 {
   100% { transform: translate(-60px, -70px) scale(0.9); }
 }
 
+/* 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;
+}
+
+[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);
 }
@@ -995,7 +923,7 @@ h1 {
   .assistant-workspace:not(.workspace-open) .conversation-panel.is-empty .input-area {
     position: absolute;
     top: auto;
-    bottom: 44px;
+    bottom: 16px;
     left: 50%;
     width: min(840px, calc(100% - 64px));
     margin: 0;
@@ -1010,20 +938,12 @@ h1 {
     position: absolute;
     top: auto;
     right: 0;
-    bottom: 44px;
+    bottom: 16px;
     left: 0;
     width: auto;
     margin: 0;
     transform: none;
   }
-
-  .assistant-workspace:not(.workspace-open) .conversation-panel.is-empty .input-disclaimer {
-    position: absolute;
-    right: 32px;
-    bottom: 8px;
-    left: 32px;
-    margin: 0;
-  }
 }
 
 @keyframes toolMenuPopIn {