@wonderwhy-er/desktop-commander 0.2.35 → 0.2.37

package/dist/ui/file-preview/styles.css

@@ -0,0 +1,764 @@
+/*
+ * Global UI design tokens and base element styling shared by all MCP tool apps. It establishes color, spacing, typography, and accessibility-friendly defaults.
+ */
+:root {
+  color-scheme: light dark;
+  --bg: transparent;
+  --panel: var(--color-background-primary, Canvas);
+  --panel-subtle: var(--color-background-tertiary, ButtonFace);
+  --panel-muted: var(--color-background-muted, ButtonFace);
+  --text: var(--color-text-primary, CanvasText);
+  --text-secondary: var(--color-text-secondary, CanvasText);
+  --muted: var(--color-text-tertiary, GrayText);
+  --border: var(--color-border-default, GrayText);
+  --accent: var(--color-accent-primary, LinkText);
+  --accent-hover: var(--color-accent-primary-hover, var(--accent));
+  --accent-soft: var(--color-accent-subtle, var(--panel-subtle));
+  --focus-ring: var(--color-border-focused, var(--accent));
+  --shadow-sm: var(--shadow-sm, none);
+  --success-bg: var(--color-background-success, var(--panel-subtle));
+  --success-border: var(--color-border-success, var(--border));
+  --success-text: var(--color-text-success, var(--text));
+  --error-bg: var(--color-background-danger, var(--panel-subtle));
+  --error-border: var(--color-border-danger, var(--border));
+  --error-text: var(--color-text-danger, var(--text));
+  --warning-bg: var(--color-background-warning, var(--panel-subtle));
+  --warning-border: var(--color-border-warning, var(--border));
+  --warning-text: var(--color-text-warning, var(--text));
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans, system-ui, sans-serif);
+  max-height: 32px;
+  overflow: hidden;
+}
+
+body.dc-ready {
+  max-height: none;
+  overflow: visible;
+}
+
+#app {
+  min-height: 0;
+}
+
+.shell {
+  max-width: none;
+  margin: 0;
+  padding: 6px;
+}
+
+.tool-shell.collapsed .panel {
+  display: none;
+}
+
+.hidden {
+  display: none !important;
+}
+
+
+/*
+ * Reusable styles for the shared tool header component. It provides consistent spacing, alignment, and action presentation across apps.
+ */
+.toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel);
+  margin-bottom: 0;
+  box-shadow: var(--shadow-sm);
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.meta-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.file-pill {
+  width: 52px;
+  height: 20px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+  text-align: center;
+}
+
+.file-pill--md {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border);
+}
+
+.file-pill--html {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border);
+}
+
+.file-pill--json {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border);
+}
+
+.file-pill--text {
+  background: transparent;
+  color: var(--muted);
+  border-color: var(--border);
+}
+
+.meta-text {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  min-width: 0;
+  gap: 8px;
+}
+
+.filename {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 460px;
+  font-size: 12px;
+}
+
+.filepath {
+  color: var(--muted);
+  font-size: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 360px;
+}
+
+.meta-badges {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.badge {
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  color: var(--muted);
+  padding: 2px 7px;
+  font-size: 10px;
+  background: var(--panel-subtle);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-left: 8px;
+  border-left: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+
+.icon-button {
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--muted);
+  border-radius: 9px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
+}
+
+.icon-button svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.icon-button:hover {
+  background: var(--panel-muted);
+  border-color: var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+.icon-button:active {
+  transform: translateY(1px);
+}
+
+.icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.icon-button:focus-visible {
+  outline: 2px solid var(--border);
+  outline-offset: 2px;
+}
+
+.icon-button--secondary {
+  border-color: var(--border);
+  background: var(--panel-subtle);
+  color: var(--text-secondary);
+}
+
+@media (max-width: 720px) {
+  .shell {
+    padding: 12px;
+  }
+
+  .toolbar {
+    gap: 8px;
+  }
+
+  .meta {
+    gap: 8px;
+  }
+
+  .actions {
+    padding-left: 6px;
+  }
+
+  .meta-badges {
+    display: none;
+  }
+
+  .meta-text {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+  }
+
+  .filename,
+  .filepath {
+    max-width: 100%;
+  }
+}
+
+
+/*
+ * App-specific styling for File Preview — tuned to blend with Claude's UI.
+ */
+:root {
+  --code-bg: var(--panel);
+  --code-text: var(--color-text-primary, var(--text));
+  --hljs-keyword: var(--color-text-accent, #8b5cf6);
+  --hljs-string: var(--color-text-success, #059669);
+  --hljs-comment: var(--color-text-tertiary, #94a3b8);
+  --hljs-type: var(--color-text-info, #0f766e);
+  --hljs-number: var(--color-text-warning, #b45309);
+  --hljs-attr: var(--color-text-info, #2563eb);
+  --hljs-built-in: var(--color-text-accent, #6366f1);
+  --hljs-tag: var(--color-text-info, #0ea5a8);
+  --content-height: min(82vh, 920px);
+  --markdown-text: var(--text);
+  --markdown-muted: var(--text-secondary);
+  --inline-code-bg: var(--panel-subtle);
+  --inline-code-border: var(--border);
+  --inline-code-text: var(--text);
+  --notice-bg: var(--warning-bg);
+  --notice-border: var(--warning-border);
+  --notice-text: var(--warning-text);
+}
+
+/* ── Compact row ── */
+
+.compact-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 2px;
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1;
+  user-select: none;
+}
+
+.compact-row--ready {
+  cursor: pointer;
+  border-radius: 8px;
+  transition: color 150ms ease;
+}
+
+.compact-row--ready:hover { color: var(--text-secondary); }
+.compact-row--ready:hover .compact-chevron { color: var(--text-secondary); }
+
+.compact-chevron {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+  color: var(--muted);
+  flex-shrink: 0;
+  transition: transform 200ms ease, color 150ms ease;
+}
+
+.tool-shell.expanded .compact-chevron { transform: rotate(90deg); }
+
+.compact-label { color: inherit; }
+.compact-filename { color: var(--text-secondary); font-weight: 500; }
+.compact-row--ready .compact-label::after { content: ' · '; }
+
+.compact-row--loading {
+  animation: fade-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes fade-pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+/* ── Panel (Claude-style card) ── */
+
+.panel {
+  margin-top: 6px;
+  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  border-radius: 16px;
+  background: var(--panel);
+  overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+  .panel {
+    background: color-mix(in srgb, var(--panel), white 6%);
+  }
+}
+
+[data-theme="dark"] .panel {
+  background: color-mix(in srgb, var(--panel), white 6%);
+}
+
+.tool-shell.collapsed .panel { display: none; }
+
+/* ── Top bar ── */
+
+.panel-topbar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
+}
+
+.panel-breadcrumb {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
+}
+
+.breadcrumb-sep {
+  color: color-mix(in srgb, var(--muted) 50%, transparent);
+  margin: 0 2px;
+}
+
+.panel-topbar-actions {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.panel-action {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+  background: none;
+  border: none;
+  border-radius: 8px;
+  padding: 5px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 150ms ease, background 150ms ease;
+  line-height: 1.4;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.panel-action:hover {
+  color: var(--text);
+  background: var(--panel-subtle);
+}
+
+.panel-action:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.panel-action svg { flex-shrink: 0; opacity: 0.7; }
+.panel-action:hover svg { opacity: 1; }
+
+/* ── Footer ── */
+
+.panel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
+  font-size: 12px;
+  color: var(--muted);
+  letter-spacing: 0.01em;
+}
+
+.footer-comment-btn {
+  margin-left: auto;
+}
+
+/* ── Selection hint (floating tooltip near selection) ── */
+
+.selection-hint {
+  position: absolute;
+  z-index: 10;
+  padding: 4px 10px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  background: var(--panel);
+  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.selection-hint.visible {
+  opacity: 1;
+}
+
+/* ── Content areas ── */
+
+.panel-content-wrapper {
+  max-height: var(--content-height);
+  overflow: auto;
+  position: relative;
+}
+
+.panel-content {
+  min-height: 0;
+}
+
+.source-content .code-viewer { height: 100%; overflow: auto; }
+.html-content .html-rendered-frame { min-height: 300px; height: var(--content-height); }
+.markdown-content { overflow: auto; padding: 0 4px 0 0; }
+
+.image-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, color-mix(in oklab, var(--panel) 86%, var(--panel-muted) 14%), var(--panel));
+  padding: 16px;
+}
+
+.image-preview {
+  width: 100%;
+  height: var(--content-height);
+  max-width: 920px;
+  max-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.notice {
+  background: var(--notice-bg);
+  color: var(--notice-text);
+  padding: 10px 16px;
+  font-size: 13px;
+}
+
+/* ── Load-more banners ── */
+
+.load-lines-banner {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  font-size: 12px;
+  font-family: inherit;
+  color: var(--text-secondary);
+  background: color-mix(in srgb, var(--panel-muted) 40%, transparent);
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  transition: color 150ms ease, background 150ms ease;
+}
+
+#load-before {
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
+}
+
+#load-after {
+  border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
+}
+
+.load-lines-banner:hover {
+  color: var(--text-secondary);
+  background: var(--panel-muted);
+}
+
+.load-lines-banner:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ── Code viewer ── */
+
+.code-viewer {
+  background: transparent;
+  color: var(--code-text);
+  overflow-x: auto;
+  padding: 12px 0;
+  margin: 0;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  line-height: 1.5;
+  font-size: 13px;
+  white-space: pre;
+  border: 0;
+  border-radius: 0;
+}
+
+.code-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+.code-line {
+  transition: background 80ms ease;
+}
+
+.code-line:hover {
+  background: color-mix(in srgb, var(--panel-muted) 50%, transparent);
+}
+
+.code-line.selected {
+  background: color-mix(in srgb, var(--border) 40%, transparent);
+}
+
+.code-line.selected:hover {
+  background: color-mix(in srgb, var(--border) 55%, transparent);
+}
+
+.line-num {
+  padding: 0 12px 0 18px;
+  text-align: right;
+  color: var(--muted);
+  opacity: 0.5;
+  user-select: none;
+  cursor: pointer;
+  vertical-align: top;
+  white-space: nowrap;
+  font-size: 12px;
+  min-width: 2.5em;
+  transition: opacity 120ms ease;
+}
+
+.line-num:hover {
+  opacity: 1;
+  color: var(--text-secondary);
+}
+
+.code-line.selected .line-num {
+  opacity: 0.8;
+}
+
+.line-content {
+  padding: 0 18px 0 8px;
+  white-space: pre;
+  width: 100%;
+}
+
+.code-viewer .hljs {
+  display: block;
+  background: transparent;
+  color: inherit;
+}
+
+/* ── Syntax tokens ── */
+
+.hljs-comment, .hljs-quote { color: var(--hljs-comment); }
+.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-section,
+.hljs-selector-id, .hljs-selector-class, .hljs-doctag, .hljs-regexp { color: var(--hljs-keyword); }
+.hljs-string, .hljs-template-tag, .hljs-template-variable, .hljs-variable { color: var(--hljs-string); }
+.hljs-type, .hljs-params, .hljs-variable.language_ { color: var(--hljs-type); }
+
+.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--hljs-number); }
+.hljs-attr, .hljs-attribute, .hljs-property { color: var(--hljs-attr); }
+.hljs-built_in, .hljs-built-in { color: var(--hljs-built-in); }
+.hljs-tag, .hljs-selector-pseudo, .hljs-selector-attr { color: var(--hljs-tag); }
+.hljs-title, .hljs-title.class_, .hljs-title.function_,
+.hljs-meta, .hljs-meta .hljs-keyword, .hljs-subst,
+.hljs-punctuation, .hljs-operator { color: inherit; }
+
+/* ── Markdown (typographic, airy, Medium-inspired) ── */
+
+.markdown h1, .markdown h2, .markdown h3 { letter-spacing: -.015em; }
+.markdown p { margin: 1em 0; }
+.markdown ul, .markdown ol { margin: .8em 0; padding-left: 1.4rem; }
+
+.markdown-doc {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 32px 28px 36px;
+  line-height: 1.8;
+  color: var(--markdown-text);
+  font-size: 16px;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.markdown-doc h1 {
+  margin: 0 0 24px;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+  color: var(--markdown-text);
+}
+
+.markdown-doc h2 {
+  margin: 36px 0 16px;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--markdown-text);
+}
+
+.markdown-doc h3 {
+  margin: 28px 0 12px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--markdown-text);
+}
+
+.markdown-doc p {
+  font-size: 15px;
+  line-height: 1.75;
+  color: var(--markdown-muted);
+  margin: 0 0 1.2em;
+}
+
+.markdown-doc li {
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--markdown-muted);
+  margin-bottom: 0.3em;
+}
+
+.markdown-doc ul, .markdown-doc ol {
+  margin: 8px 0 20px;
+  padding-left: 1.3em;
+}
+
+.markdown-doc blockquote {
+  margin: 20px 0;
+  padding: 2px 0 2px 20px;
+  border-left: 3px solid color-mix(in srgb, var(--border) 70%, transparent);
+  color: var(--markdown-muted);
+  font-style: italic;
+}
+
+.markdown-doc hr {
+  border: none;
+  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
+  margin: 32px 0;
+}
+
+.markdown-doc img {
+  max-width: 100%;
+  border-radius: 8px;
+  margin: 16px 0;
+}
+
+.markdown-doc code:not(.hljs) {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: .9em;
+  background: var(--inline-code-bg);
+  color: var(--inline-code-text);
+  border: 1px solid var(--inline-code-border);
+  border-radius: 6px;
+  padding: 2px 6px;
+}
+
+.markdown-doc .code-viewer {
+  margin: 14px 0;
+  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  border-radius: 10px;
+}
+
+/* ── HTML frame ── */
+
+.html-rendered-frame {
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  background: var(--panel);
+  display: block;
+  overflow: hidden;
+}
+
+/* ── Responsive ── */
+
+@media (max-width: 720px) {
+  .markdown-doc { padding: 16px; }
+  .markdown-doc h1 { font-size: 27px; }
+  .markdown-doc h2 { font-size: 22px; }
+  .markdown-doc h3 { font-size: 18px; }
+  .markdown-doc p, .markdown-doc li { font-size: 15px; }
+}
+