@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/css/settings/plugins.css

@@ -83,7 +83,7 @@
     gap: 12px;
     padding: 18px 20px;
     border-top: 1px solid var(--border);
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--bg-surface-soft);
 }
 
 .plugin-config-panel .setting-row.stacked {
@@ -158,12 +158,12 @@
 
 .plugin-tag.accent {
     background: var(--accent);
-    color: var(--accent-contrast, #fff);
+    color: var(--accent-contrast, var(--text-on-accent));
 }
 
 .plugin-tag.ok {
-    background: color-mix(in srgb, #10b981 16%, transparent);
-    color: #10b981;
+    background: color-mix(in srgb, var(--status-success, #10b981) 16%, transparent);
+    color: var(--status-success, #10b981);
 }
 
 .plugin-tag.info {
@@ -185,9 +185,9 @@
 }
 
 .plugin-status.connected {
-    border-color: color-mix(in srgb, #10b981 30%, transparent);
-    background: color-mix(in srgb, #10b981 12%, transparent);
-    color: #10b981;
+    border-color: color-mix(in srgb, var(--status-success, #10b981) 30%, transparent);
+    background: color-mix(in srgb, var(--status-success, #10b981) 12%, transparent);
+    color: var(--status-success, #10b981);
 }
 
 .plugin-status::before {
@@ -219,7 +219,7 @@
 
 .btn-icon.is-active {
     background: var(--accent);
-    color: var(--accent-contrast, #fff);
+    color: var(--accent-contrast, var(--text-on-accent));
 }
 
 .btn-icon.danger {

package/src/renderer/shared/css/settings/profile.css

@@ -197,7 +197,7 @@
 
 .crop-viewport {
     position: relative;
-    border-radius: 4px;
+    border-radius: var(--radius-2xs, 4px);
     overflow: hidden;
     cursor: grab;
     user-select: none;
@@ -245,28 +245,28 @@
     top: 4px;
     left: 4px;
     border-width: 3px 0 0 3px;
-    border-top-left-radius: 3px;
+    border-top-left-radius: var(--radius-2xs, 4px);
 }
 
 .crop-bracket-tr {
     top: 4px;
     right: 4px;
     border-width: 3px 3px 0 0;
-    border-top-right-radius: 3px;
+    border-top-right-radius: var(--radius-2xs, 4px);
 }
 
 .crop-bracket-bl {
     bottom: 4px;
     left: 4px;
     border-width: 0 0 3px 3px;
-    border-bottom-left-radius: 3px;
+    border-bottom-left-radius: var(--radius-2xs, 4px);
 }
 
 .crop-bracket-br {
     bottom: 4px;
     right: 4px;
     border-width: 0 3px 3px 0;
-    border-bottom-right-radius: 3px;
+    border-bottom-right-radius: var(--radius-2xs, 4px);
 }
 
 .crop-hint-drag {

package/src/renderer/shared/css/settings/theme.css

@@ -154,7 +154,7 @@
 .theme-segmented-swatch {
     width: 18px;
     height: 5px;
-    border-radius: 3px;
+    border-radius: var(--radius-2xs, 4px);
 }
 
 .theme-segmented-btn:hover {
@@ -303,12 +303,18 @@
 
 .theme-preset-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 12px;
     width: 100%;
 }
 
-@media (max-width: 680px) {
+@media (max-width: 900px) {
+    .theme-preset-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 580px) {
     .theme-preset-grid {
         grid-template-columns: 1fr;
     }
@@ -356,7 +362,7 @@
 .preset-mini-window {
     width: 100%;
     height: 100%;
-    border-radius: 6px;
+    border-radius: var(--radius-xs, 6px);
     padding: 6px 8px;
     box-sizing: border-box;
     display: flex;
@@ -397,7 +403,7 @@
     font-weight: 700;
     line-height: 1;
     padding: 2px 6px;
-    border-radius: 4px;
+    border-radius: var(--radius-2xs, 4px);
 }
 
 .preset-mini-body {
@@ -424,13 +430,13 @@
 .preset-mini-line-main {
     height: 4px;
     width: 80%;
-    border-radius: 2px;
+    border-radius: var(--radius-2xs, 4px);
 }
 
 .preset-mini-line-accent {
     height: 3px;
     width: 45%;
-    border-radius: 2px;
+    border-radius: var(--radius-2xs, 4px);
 }
 
 .theme-preset-meta {
@@ -467,7 +473,7 @@
     height: 18px;
     border-radius: 50%;
     background: var(--accent);
-    color: var(--accent-contrast, #ffffff);
+    color: var(--accent-contrast, var(--text-on-accent));
 }
 
 .theme-preset-desc,
@@ -509,12 +515,18 @@
 /* Color Mode Cards Grid */
 .color-mode-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(5, 1fr);
     gap: 10px;
     width: 100%;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 860px) {
+    .color-mode-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 600px) {
     .color-mode-grid {
         grid-template-columns: repeat(2, 1fr);
     }
@@ -560,7 +572,7 @@
 
 .color-mode-card.active .mode-card-icon {
     background: var(--accent);
-    color: var(--accent-contrast, #ffffff);
+    color: var(--accent-contrast, var(--text-on-accent));
 }
 
 .mode-card-text {
@@ -588,7 +600,7 @@
     height: 18px;
     border-radius: 50%;
     background: var(--accent);
-    color: var(--accent-contrast, #ffffff);
+    color: var(--accent-contrast, var(--text-on-accent));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -747,63 +759,63 @@
 /* ─── Light Mode Overrides for Theme & Controls ─────────────────────────── */
 
 [data-theme="light"] .pill-segmented {
-    background: #f1f5f9;
-    border: 1px solid rgba(15, 23, 42, 0.08);
+    background: var(--bg-surface-hover);
+    border: 1px solid var(--border-subtle);
 }
 
 [data-theme="light"] .pill-segmented-btn {
-    color: #475569;
+    color: var(--text-secondary);
 }
 
 [data-theme="light"] .pill-segmented-btn:hover {
-    color: #0f172a;
-    background: rgba(255, 255, 255, 0.6);
+    color: var(--text-primary);
+    background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
 }
 
 [data-theme="light"] .pill-segmented-btn.active {
-    background: #ffffff;
+    background: var(--bg-surface);
     border-color: transparent;
-    color: #047857;
+    color: var(--interactive-fg);
     font-weight: 600;
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(16, 185, 129, 0.3);
+    box-shadow: var(--shadow-sm), 0 0 0 1px var(--accent-border);
 }
 
 [data-theme="light"] .section-current-badge {
-    background: #f1f5f9;
-    color: #475569;
-    border: 1px solid rgba(15, 23, 42, 0.08);
+    background: var(--bg-surface-hover);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-subtle);
 }
 
 [data-theme="light"] .theme-preset-card {
-    background: #ffffff;
-    border: 1px solid rgba(15, 23, 42, 0.12);
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+    background: var(--bg-surface);
+    border: 1px solid var(--border-default);
+    box-shadow: var(--shadow-xs);
 }
 
 [data-theme="light"] .theme-preset-card:hover {
-    border-color: rgba(15, 23, 42, 0.24);
-    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+    border-color: var(--border-strong);
+    box-shadow: var(--shadow-md);
 }
 
 [data-theme="light"] .theme-preset-card.active {
     border-color: var(--accent);
-    background: #ffffff;
-    box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(16, 185, 129, 0.15);
+    background: var(--bg-surface);
+    box-shadow: 0 0 0 1px var(--accent), 0 4px 14px var(--accent-subtle);
 }
 
 [data-theme="light"] .surface-card {
-    background: #ffffff;
-    border: 1px solid rgba(15, 23, 42, 0.12);
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+    background: var(--bg-surface);
+    border: 1px solid var(--border-default);
+    box-shadow: var(--shadow-xs);
 }
 
 [data-theme="light"] .surface-card:hover {
-    background: #f8fafc;
-    border-color: rgba(15, 23, 42, 0.24);
+    background: var(--bg-surface-soft);
+    border-color: var(--border-strong);
 }
 
 [data-theme="light"] .surface-card.active {
     border-color: var(--accent);
-    background: #ffffff;
-    box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgba(16, 185, 129, 0.1);
+    background: var(--bg-surface);
+    box-shadow: 0 0 0 1px var(--accent), 0 2px 8px var(--accent-subtle);
 }

package/src/renderer/shared/css/slash-choice.css

@@ -16,7 +16,7 @@
   color: var(--text-main, #e8e8e8);
   background: var(--panel-bg, #252525);
   border: 1px solid var(--border, #343434);
-  border-radius: 18px;
+  border-radius: var(--radius-xl, 18px);
   font-family: var(--font-sans, Inter, system-ui, sans-serif);
   box-shadow: none;
 }
@@ -58,7 +58,7 @@
   text-align: left;
   background: transparent;
   border: 0;
-  border-radius: 4px;
+  border-radius: var(--radius-2xs, 4px);
   cursor: pointer;
   font: inherit;
   font-size: 13px;

package/src/renderer/shared/css/slash-suggestions.css

@@ -12,7 +12,7 @@
   color: var(--text-main);
   background: var(--panel-bg);
   border: 1px solid var(--border-default, var(--border));
-  border-radius: 18px;
+  border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
   font-family: var(--font-sans, Inter, system-ui, sans-serif);
 }
@@ -45,7 +45,7 @@
   min-height: 32px;
   padding: 6px 8px;
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: transparent;
   text-align: start;
   font: inherit;
@@ -62,7 +62,7 @@
 .slash-suggestions-empty { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; color: var(--text-muted); font-size: 13px; }
 .slash-suggestions-hint { padding: 7px 12px; border-top: 1px solid var(--border-default, var(--border)); color: var(--text-muted); font-size: 10px; }
 @media (max-width: 760px) {
-  #chat-form > .slash-suggestions-popup { max-height: min(34dvh, 280px); border-radius: 16px; }
+  #chat-form > .slash-suggestions-popup { max-height: min(34dvh, 280px); border-radius: var(--radius-xl); }
   .slash-suggestion-item { min-height: 40px; }
   .slash-cmd-name { max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
 }

package/src/renderer/shared/css/sources-block.css

@@ -3,6 +3,11 @@
   max-width: 100%;
 }
 
+.sources-block:has(.source-links-popover) {
+  position: relative;
+  z-index: 50;
+}
+
 .source-card-group {
   position: relative;
   display: flex;
@@ -13,6 +18,11 @@
   box-sizing: border-box;
 }
 
+.source-card-group.is-open,
+.source-card-group:has(.source-links-popover) {
+  z-index: 50;
+}
+
 .source-card {
   display: flex;
   flex-direction: column;
@@ -28,9 +38,36 @@
   min-width: 0;
 }
 
+.source-links-popover,
 .source-card-group > .source-links-popover {
-  width: 260px;
+  width: 280px;
+  max-width: min(320px, calc(100vw - 32px));
+  max-height: 320px;
   box-sizing: border-box;
+  overflow: hidden;
+}
+
+.source-links-popover-list {
+  max-height: 260px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.source-links-popover-list::-webkit-scrollbar {
+  width: 5px;
+}
+
+.source-links-popover-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.source-links-popover-list::-webkit-scrollbar-thumb {
+  background: var(--border-default, rgba(255, 255, 255, 0.15));
+  border-radius: 9999px;
+}
+
+.source-links-popover-list::-webkit-scrollbar-thumb:hover {
+  background: var(--border-strong, rgba(255, 255, 255, 0.3));
 }
 
 .sources-more-button {
@@ -78,8 +115,10 @@
     inset: 0;
   }
 
+  .source-links-popover,
   .source-card-group > .source-links-popover {
-    width: 100%;
+    width: 280px;
+    max-width: calc(100vw - 24px);
   }
 
   .sources-more-button {

package/src/renderer/shared/css/tools-panel.css

@@ -1,6 +1,6 @@
-.tools-panel-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 32px; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-xs, 6px); background: var(--surface-bg); color: var(--text-main); font: inherit; font-size: 12px; cursor: pointer; }
+.tools-panel-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 32px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface-bg); color: var(--text-main); font: inherit; font-size: 12px; cursor: pointer; }
 .tools-panel-toggle > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
-.tools-panel-toggle:hover, .tools-panel-toggle.is-open { background: var(--surface-strong); color: var(--accent); }
+.tools-panel-toggle:hover, .tools-panel-toggle.is-open { background: var(--surface-strong); color: var(--text-main); border-color: var(--border-strong, var(--border)); }
 .tools-panel-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .tools-task-count { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent-subtle, var(--surface-strong)); color: var(--accent); font-size: 10px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
 .mint-titlebar-icon-button.tools-panel-toggle { width: auto; min-width: 32px; }

package/src/renderer/shared/css/ui-tailwind.css

@@ -12,8 +12,16 @@
   --color-input: var(--border-default);
   --color-accent: var(--bg-surface-hover);
   --color-accent-foreground: var(--text-main);
-  --color-secondary: var(--bg-surface-soft);
-  --color-secondary-foreground: var(--text-main);
+  --color-secondary: var(--btn-gray-bg, var(--bg-surface-soft));
+  --color-secondary-foreground: var(--btn-gray-fg, var(--text-main));
   --color-muted-foreground: var(--text-muted);
   --color-ring: var(--accent);
+  --radius-2xs: var(--radius-2xs);
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
 }

package/src/renderer/shared/css/veo-studio.css

@@ -1002,7 +1002,7 @@
 .veo-studio-fablemint-notice span code {
   font-size: 0.85em;
   padding: 1px 5px;
-  border-radius: 4px;
+  border-radius: var(--radius-2xs, 4px);
   background: var(--input-bg, rgba(255, 255, 255, 0.06));
   border: 1px solid var(--border-subtle);
 }
@@ -1018,7 +1018,7 @@
 .veo-studio-fablemint-notice pre {
   margin: 6px 0 0;
   padding: 10px 12px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm, 8px);
   background: var(--input-bg, rgba(255, 255, 255, 0.04));
   border: 1px solid var(--border-subtle);
   font-size: 0.78rem;

package/src/renderer/shared/css/viewed-images.css

@@ -1,15 +1,104 @@
 .viewed-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; max-width: 680px; margin: 12px 0; }
 .viewed-image { min-width: 0; margin: 0; }
 .viewed-image:only-child { max-width: 420px; }
-.viewed-image-button { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-surface-soft); cursor: zoom-in; }
+.viewed-image-button { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; background: var(--bg-surface-soft); cursor: zoom-in; }
 .viewed-image-button img { display: block; width: 100%; height: 260px; object-fit: contain; }
 .viewed-image figcaption { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
-.viewed-image-error { margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); font-size: 13px; }
-.viewed-image-dialog { box-sizing: border-box; width: fit-content; max-width: 96vw; max-height: 94dvh; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-overlay); color: var(--text-main); }
+.viewed-image-error { margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); color: var(--text-muted); font-size: 13px; }
+.viewed-image-dialog { box-sizing: border-box; width: fit-content; max-width: 96vw; max-height: 94dvh; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-2xl, 22px); background: var(--bg-overlay); color: var(--text-main); }
 .viewed-image-dialog::backdrop { background: rgba(0, 0, 0, .75); }
 .viewed-image-dialog header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
 .viewed-image-dialog header span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-.viewed-image-dialog button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface-soft); color: var(--text-main); cursor: pointer; }
+.viewed-image-dialog button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--bg-surface-soft); color: var(--text-main); cursor: pointer; }
 .viewed-image-dialog > img { display: block; max-width: 100%; max-height: calc(94dvh - 86px); object-fit: contain; }
 .viewed-image-button:focus-visible, .viewed-image-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
 @media (max-width: 480px) { .viewed-image-button img { height: 220px; } }
+
+/* ── Activity Inline Image Preview ── */
+.agent-activity-inline-preview {
+  margin: 6px 0 10px 28px;
+}
+
+.agent-activity-subitem-preview {
+  margin: 4px 10px 8px 24px;
+}
+
+.viewed-image-inline {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  max-width: 340px;
+}
+
+.viewed-image-inline-btn {
+  position: relative;
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius-lg, 14px);
+  overflow: hidden;
+  background: color-mix(in srgb, var(--panel-soft, #1e293b) 60%, black);
+  cursor: zoom-in;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              border-color 0.2s ease,
+              box-shadow 0.2s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.viewed-image-inline-btn:hover {
+  transform: translateY(-2px);
+  border-color: var(--accent, #10b981);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 12px color-mix(in srgb, var(--accent, #10b981) 25%, transparent);
+}
+
+.viewed-image-inline-btn img {
+  display: block;
+  max-width: 100%;
+  max-height: 160px;
+  min-height: 60px;
+  object-fit: contain;
+  background: repeating-conic-gradient(rgba(255, 255, 255, 0.03) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
+  transition: transform 0.25s ease;
+}
+
+.viewed-image-inline-btn:hover img {
+  transform: scale(1.02);
+}
+
+.viewed-image-inline-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 6px 8px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.viewed-image-inline-btn:hover .viewed-image-inline-overlay {
+  opacity: 1;
+}
+
+.viewed-image-inline-badge {
+  font-size: 11px;
+  font-weight: 500;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+  padding: 2px 7px;
+  border-radius: var(--radius-xs, 6px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.viewed-image-inline-status {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-sm, 8px);
+  font-size: 12px;
+  color: var(--text-muted);
+}

package/src/renderer/shared/css/workspace-file-info.css

@@ -0,0 +1,12 @@
+.workspace-file-info { width: 100%; padding: 32px 20px; color: var(--text-main); }
+.workspace-file-info > svg { color: var(--accent); }
+.workspace-file-info h2 { margin: 16px 0 8px; font-size: 16px; overflow-wrap: anywhere; }
+.workspace-file-info p { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
+.workspace-file-info dl { margin: 24px 0; font-size: 12px; }
+.workspace-file-info dt { margin-top: 14px; color: var(--text-muted); }
+.workspace-file-info dd { margin: 4px 0 0; overflow-wrap: anywhere; }
+.workspace-file-info button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--surface-bg); color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
+.workspace-file-info button:hover:not(:disabled) { background: var(--surface-strong); }
+.workspace-file-info button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.workspace-file-info button:disabled { opacity: .5; cursor: default; }
+.workspace-file-info .workspace-file-info-error { color: var(--status-error); }

package/src/renderer/shared/css/workspace-media-preview.css

@@ -0,0 +1,13 @@
+.workspace-pdf-preview { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--text-main); }
+.workspace-pdf-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px; flex-shrink: 0; border-bottom: 1px solid var(--border); font-size: 12px; }
+.workspace-pdf-controls button, .workspace-pdf-pages > button { min-height: 30px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-xs, 6px); background: var(--surface-bg); color: var(--text-main); font: inherit; cursor: pointer; }
+.workspace-pdf-controls button:disabled { opacity: .4; cursor: default; }
+.workspace-pdf-controls button:hover:not(:disabled) { color: var(--accent); background: var(--surface-strong); }
+.workspace-pdf-controls button:focus-visible, .workspace-pdf-pages > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.workspace-pdf-pages { flex: 1; min-height: 0; padding: 16px; overflow: auto; }
+.workspace-pdf-pages canvas { display: block; margin-inline: auto; }
+.workspace-pdf-pages > p { color: var(--text-muted); font-size: 12px; }
+.workspace-media-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 100%; min-height: 180px; padding: 20px; overflow: auto; }
+.workspace-media-preview audio { width: 100%; }
+.workspace-media-preview video { width: 100%; max-height: 100%; object-fit: contain; }
+.workspace-media-preview .workspace-media-error, .workspace-pdf-pages .workspace-media-error { color: var(--status-error); font-size: 12px; line-height: 1.6; }

package/src/renderer/shared/env.d.ts

@@ -0,0 +1,9 @@
+declare module 'react-dom' {
+  export function createPortal(children: any, container: any, key?: any): any;
+  export function flushSync<R>(fn: () => R): R;
+}
+
+declare module 'react-dom/server' {
+  export function renderToStaticMarkup(element: any): string;
+  export function renderToString(element: any): string;
+}