pi-studio 0.9.38 → 0.9.39

package/client/studio.css

@@ -91,6 +91,10 @@
       overflow: visible;
     }
 
+    .export-preview-controls[hidden] {
+      display: none !important;
+    }
+
     .export-preview-trigger {
       display: inline-flex;
       align-items: center;
@@ -2932,6 +2936,10 @@
       gap: 8px;
     }
 
+    .response-wrap[hidden] {
+      display: none !important;
+    }
+
     .response-actions {
       display: flex;
       flex-direction: column;
@@ -2967,6 +2975,251 @@
       padding: 0;
     }
 
+    #critiqueView.quarto-preview-host {
+      flex: 1 1 auto;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding: 0;
+      font-family: var(--font-ui);
+    }
+
+    .quarto-preview-shell {
+      flex: 1 1 auto;
+      min-width: 0;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      background: var(--panel);
+    }
+
+    .quarto-preview-toolbar {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 8px 10px;
+      border-bottom: 1px solid var(--panel-border);
+      background: var(--panel-2);
+      color: var(--studio-info-text, var(--muted));
+      font-size: 12px;
+      line-height: 1.3;
+    }
+
+    .quarto-preview-title-group {
+      min-width: 0;
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+      overflow: hidden;
+    }
+
+    .quarto-preview-title {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--text);
+      font-weight: 700;
+    }
+
+    .quarto-preview-subtitle {
+      flex: 0 0 auto;
+      color: var(--studio-info-text, var(--muted));
+      white-space: nowrap;
+    }
+
+    .quarto-preview-actions,
+    .quarto-preview-card-actions {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .quarto-preview-actions {
+      flex: 0 0 auto;
+      justify-content: flex-end;
+    }
+
+    .quarto-preview-actions button,
+    .quarto-preview-card-actions button {
+      min-height: 28px;
+      padding: 5px 8px;
+      font-size: 12px;
+    }
+
+    .quarto-preview-card-actions .quarto-preview-primary {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: var(--accent-contrast);
+      font-weight: 650;
+    }
+
+    .quarto-preview-card-actions .quarto-preview-primary:not(:disabled):hover {
+      filter: brightness(0.95);
+      background: var(--accent);
+    }
+
+    .quarto-preview-frame {
+      display: block;
+      flex: 1 1 auto;
+      width: 100%;
+      min-width: 0;
+      min-height: 360px;
+      border: 0;
+      background: #fff;
+    }
+
+    .quarto-preview-dirty-warning,
+    .quarto-preview-error,
+    .quarto-preview-note,
+    .quarto-preview-safety-note {
+      border: 1px solid var(--control-border);
+      border-radius: 8px;
+      padding: 9px 11px;
+      font-size: 12px;
+      line-height: 1.45;
+    }
+
+    .quarto-preview-dirty-warning {
+      flex: 0 0 auto;
+      border-color: color-mix(in srgb, var(--warn) 48%, var(--control-border));
+      background: color-mix(in srgb, var(--warn) 10%, var(--panel));
+      color: var(--text);
+    }
+
+    .quarto-preview-shell > .quarto-preview-dirty-warning {
+      border-width: 0 0 1px;
+      border-radius: 0;
+      padding: 7px 10px;
+    }
+
+    .quarto-preview-error {
+      border-color: color-mix(in srgb, var(--error) 50%, var(--control-border));
+      background: color-mix(in srgb, var(--error) 9%, var(--panel));
+      color: var(--text);
+    }
+
+    .quarto-preview-note,
+    .quarto-preview-safety-note {
+      background: var(--panel-2);
+      color: var(--studio-info-text, var(--muted));
+    }
+
+    .quarto-preview-card {
+      width: min(100%, 720px);
+      max-height: 100%;
+      margin: auto;
+      padding: clamp(20px, 5vw, 42px);
+      overflow: auto;
+      color: var(--text);
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    .quarto-preview-card-centered {
+      text-align: center;
+    }
+
+    .quarto-preview-card h2 {
+      margin: 0 0 10px;
+      color: var(--text);
+      font-size: 18px;
+    }
+
+    .quarto-preview-card p {
+      margin: 8px 0 14px;
+    }
+
+    .quarto-preview-card > .quarto-preview-dirty-warning,
+    .quarto-preview-card > .quarto-preview-error,
+    .quarto-preview-card > .quarto-preview-note,
+    .quarto-preview-card > .quarto-preview-safety-note {
+      margin: 12px 0;
+      text-align: left;
+    }
+
+    .quarto-preview-log-details {
+      margin-top: 14px;
+      text-align: left;
+      color: var(--studio-info-text, var(--muted));
+    }
+
+    .quarto-preview-log-details summary {
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .quarto-preview-log-details pre,
+    .quarto-preview-live-log pre {
+      margin: 8px 0 0;
+      padding: 10px;
+      overflow: auto;
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--editor-bg, var(--panel-2));
+      color: var(--text);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      line-height: 1.4;
+      text-align: left;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+
+    .quarto-preview-log-details pre {
+      max-height: min(34vh, 360px);
+    }
+
+    .quarto-preview-live-log {
+      flex: 0 1 34%;
+      min-height: 100px;
+      padding: 0 10px 10px;
+      overflow: auto;
+      border-top: 1px solid var(--panel-border);
+      background: var(--panel-2);
+    }
+
+    .quarto-preview-live-log pre {
+      height: 100%;
+      max-height: 100%;
+    }
+
+    .quarto-preview-spinner {
+      width: 24px;
+      height: 24px;
+      margin: 0 auto 14px;
+      border: 3px solid var(--control-border);
+      border-top-color: var(--accent);
+      border-radius: 999px;
+      animation: quarto-preview-spin 0.8s linear infinite;
+    }
+
+    @keyframes quarto-preview-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    @container (max-width: 620px) {
+      .quarto-preview-toolbar,
+      .quarto-preview-title-group {
+        align-items: stretch;
+        flex-direction: column;
+      }
+
+      .quarto-preview-actions {
+        justify-content: flex-start;
+      }
+
+      .quarto-preview-subtitle {
+        white-space: normal;
+      }
+    }
+
     .git-changes-panel {
       display: flex;
       flex-direction: column;