pi-studio 0.9.0 → 0.9.2

package/client/studio.css

@@ -59,6 +59,30 @@
       flex-wrap: wrap;
     }
 
+    .zen-mode-btn {
+      font-weight: inherit;
+      white-space: nowrap;
+    }
+
+    body.studio-zen-mode > header {
+      padding: 8px 12px;
+    }
+
+    body.studio-zen-mode .app-subtitle {
+      display: none;
+    }
+
+    body.studio-zen-mode > header .controls > :not(#zenModeBtn) {
+      display: none !important;
+    }
+
+    body.studio-zen-mode #zenModeBtn {
+      background: var(--panel);
+      border-color: var(--control-border);
+      color: var(--text);
+      font-weight: inherit;
+    }
+
     .export-preview-controls {
       position: relative;
       display: inline-flex;
@@ -465,6 +489,11 @@
       background: var(--reference-badge-bg, var(--panel));
     }
 
+    body.studio-zen-mode .reference-meta,
+    body.studio-zen-mode #responseActions {
+      display: none !important;
+    }
+
     body.studio-ui-refresh #rightPane .reference-meta .source-badge {
       border-color: var(--border-subtle);
       color: var(--studio-info-text, var(--muted));
@@ -1479,6 +1508,14 @@
       font-size: 12px;
     }
 
+    .rendered-markdown .studio-pdf-card-title-group {
+      min-width: 0;
+      flex: 1 1 auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
     .rendered-markdown .studio-pdf-card-title {
       min-width: 0;
       overflow: hidden;
@@ -1488,12 +1525,72 @@
       color: var(--text);
     }
 
-    .rendered-markdown .studio-pdf-card-link {
+    .rendered-markdown .studio-pdf-card-actions {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .rendered-markdown .studio-pdf-card-link,
+    .rendered-markdown .studio-pdf-card-action {
       flex: 0 0 auto;
       font-size: 12px;
       font-weight: 600;
     }
 
+    .rendered-markdown a.studio-pdf-card-link {
+      min-height: 29px;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 7px;
+      border: 1px solid transparent;
+      border-radius: 7px;
+      color: var(--studio-info-text, var(--muted));
+      text-decoration: none;
+      line-height: 1.2;
+    }
+
+    .rendered-markdown a.studio-pdf-card-link:hover,
+    .rendered-markdown a.studio-pdf-card-link:focus-visible {
+      background: var(--panel);
+      color: var(--text);
+      border-color: var(--control-border);
+      text-decoration: none;
+    }
+
+    .rendered-markdown button.studio-pdf-card-action {
+      min-height: 0;
+      padding: 3px 7px;
+      border-radius: 7px;
+      background: transparent;
+      color: var(--studio-info-text, var(--muted));
+      border-color: transparent;
+      line-height: 1.2;
+    }
+
+    .rendered-markdown button.studio-pdf-card-action:not(:disabled):hover,
+    .rendered-markdown button.studio-pdf-card-action:focus-visible {
+      background: var(--panel);
+      color: var(--text);
+      border-color: var(--control-border);
+    }
+
+    .rendered-markdown button.studio-pdf-card-focus {
+      width: 29px;
+      min-width: 29px;
+      min-height: 29px;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .rendered-markdown button.studio-pdf-card-focus .studio-refresh-icon {
+      width: 15px;
+      height: 15px;
+    }
+
     .rendered-markdown .studio-pdf-card-caption {
       padding: 8px 10px 0;
       color: var(--studio-info-text, var(--muted));
@@ -1514,6 +1611,162 @@
       background: #fff;
     }
 
+    body.studio-pdf-focus-open {
+      overflow: hidden;
+    }
+
+    .studio-pdf-focus-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 70;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: clamp(12px, 2.4vw, 28px);
+      background: var(--backdrop-bg);
+      backdrop-filter: blur(3px);
+    }
+
+    .studio-pdf-focus-overlay[hidden] {
+      display: none !important;
+    }
+
+    .studio-pdf-focus-dialog {
+      width: min(96vw, 1440px);
+      height: min(92vh, 1080px);
+      min-height: 420px;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid var(--panel-border);
+      border-radius: 14px;
+      background: var(--panel);
+      box-shadow: 0 24px 70px var(--shadow-color);
+      overflow: hidden;
+    }
+
+    .studio-pdf-focus-dialog:fullscreen {
+      width: 100vw;
+      height: 100vh;
+      border-radius: 0;
+      border: 0;
+    }
+
+    .studio-pdf-focus-header {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 9px 12px;
+      border-bottom: 1px solid var(--panel-border);
+      background: var(--panel-2);
+    }
+
+    .studio-pdf-focus-title-group {
+      min-width: 0;
+      flex: 1 1 auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .studio-pdf-focus-title {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    .studio-pdf-focus-actions {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .studio-pdf-focus-link,
+    .studio-pdf-focus-btn {
+      font-size: 12px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .studio-pdf-focus-link {
+      min-height: 29px;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 8px;
+      border: 1px solid transparent;
+      border-radius: 8px;
+      color: var(--studio-info-text, var(--muted));
+      text-decoration: none;
+    }
+
+    .studio-pdf-focus-link:hover,
+    .studio-pdf-focus-link:focus-visible {
+      background: var(--panel);
+      border-color: var(--control-border);
+      color: var(--text);
+      text-decoration: none;
+    }
+
+    .studio-pdf-focus-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 8px;
+      border-radius: 8px;
+      background: transparent;
+      border-color: transparent;
+      color: var(--studio-info-text, var(--muted));
+    }
+
+    .studio-pdf-focus-btn:not(:disabled):hover,
+    .studio-pdf-focus-btn:focus-visible {
+      background: var(--panel);
+      border-color: var(--control-border);
+      color: var(--text);
+    }
+
+    .studio-pdf-focus-btn .studio-refresh-icon {
+      width: 14px;
+      height: 14px;
+    }
+
+    .studio-pdf-focus-fullscreen,
+    .studio-pdf-focus-close {
+      width: 29px;
+      min-width: 29px;
+      min-height: 29px;
+      padding: 0;
+      justify-content: center;
+      gap: 0;
+    }
+
+    .studio-pdf-focus-fullscreen .studio-refresh-icon,
+    .studio-pdf-focus-close .studio-refresh-icon {
+      width: 15px;
+      height: 15px;
+    }
+
+    .studio-pdf-focus-frame-slot {
+      flex: 1 1 auto;
+      min-height: 0;
+      display: flex;
+    }
+
+    .studio-pdf-focus-frame {
+      flex: 1 1 auto;
+      width: 100%;
+      min-height: 0;
+      height: auto !important;
+      border: 0;
+      background: #fff;
+    }
+
     .rendered-markdown .studio-html-artifact-shell {
       display: flex;
       flex-direction: column;
@@ -2292,7 +2545,8 @@
       background: var(--error-soft);
     }
 
-    .repl-journal {
+    .repl-journal,
+    .repl-mirror {
       border: 1px solid var(--panel-border);
       border-radius: 10px;
       background: var(--panel-2);
@@ -2302,7 +2556,12 @@
       gap: 10px;
     }
 
-    .repl-journal-compact {
+    .repl-mirror {
+      background: var(--panel);
+    }
+
+    .repl-journal-compact,
+    .repl-mirror-compact {
       padding: 7px 9px;
       background: var(--panel);
     }
@@ -2367,65 +2626,159 @@
       justify-content: flex-end;
     }
 
+    .repl-journal-compact-actions,
+    .repl-studio-below-actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .repl-studio-below-actions {
+      margin-top: -4px;
+    }
+
     .repl-journal-list {
+      --repl-studio-prompt-width: 3.2em;
+      --repl-studio-column-gap: 8px;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 0;
+      border: 1px solid var(--panel-border);
+      border-radius: 10px;
+      background: var(--panel);
+      padding: 10px 12px;
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
     }
 
     .repl-journal-card {
-      border: 1px solid var(--border-subtle);
-      border-radius: 9px;
-      background: var(--panel);
-      padding: 10px;
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 1px;
     }
 
-    .repl-journal-card-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-wrap: wrap;
+    .repl-studio-entry {
+      position: relative;
+      padding: 2px 8.5em 6px 0;
+      background: transparent;
     }
 
-    .repl-journal-section {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
+    .repl-studio-entry:last-child {
+      padding-bottom: 2px;
+    }
+
+    .repl-studio-entry:has(.repl-studio-output-row) {
+      padding-bottom: 6px;
     }
 
-    .repl-journal-label {
+    .repl-studio-entry-meta {
+      position: absolute;
+      top: 3px;
+      right: 0;
+      max-width: 8.1em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       color: var(--muted);
       font-size: 11px;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
+      line-height: 1.25;
+      opacity: 0.55;
+      text-align: right;
     }
 
-    .repl-journal-prose,
-    .repl-journal-code,
-    .repl-journal-output {
-      margin: 0;
-      border-radius: 7px;
-      padding: 8px 10px;
-      background: var(--panel-2);
-      color: var(--text);
+    .repl-studio-banner {
+      margin: 0 0 8px;
+      padding: 0 0 8px;
+      border-bottom: 1px solid var(--border-subtle);
+      color: var(--muted);
+      font-family: var(--font-mono);
+      font-size: var(--studio-working-font-size);
+      line-height: 1.45;
       white-space: pre-wrap;
-      overflow-wrap: anywhere;
     }
 
-    .repl-journal-code,
-    .repl-journal-output {
+    .repl-studio-code-row,
+    .repl-studio-output-row {
+      display: grid;
+      grid-template-columns: var(--repl-studio-prompt-width) minmax(0, 1fr);
+      gap: var(--repl-studio-column-gap);
+      align-items: start;
+    }
+
+    .repl-studio-prompt,
+    .repl-studio-output-label {
+      font-family: var(--font-mono);
+      font-size: var(--studio-working-font-size);
+      line-height: 1.45;
+      text-align: right;
+      user-select: none;
+    }
+
+    .repl-studio-output-label {
+      color: var(--muted);
+      opacity: 0.82;
+    }
+
+    .repl-studio-input,
+    .repl-studio-output {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      color: var(--text);
       font-family: var(--font-mono);
       font-size: var(--studio-working-font-size);
       line-height: 1.45;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      box-shadow: none;
+    }
+
+    .repl-studio-output-row {
+      margin-top: 2px;
     }
 
-    .repl-journal-prose {
+    .repl-studio-output {
+      color: var(--text);
+    }
+
+    #rightPane .repl-journal-list .repl-studio-input,
+    #rightPane .repl-journal-list .repl-studio-output,
+    #rightPane .repl-journal-list .repl-studio-code,
+    #rightPane .repl-journal-list .repl-studio-input.response-markdown-highlight,
+    #rightPane .repl-journal-list .repl-studio-code.response-markdown-highlight {
+      margin: 0 !important;
+      padding: 0 !important;
+      border: 0 !important;
+      border-radius: 0 !important;
+      background: transparent !important;
+      box-shadow: none !important;
+      font-size: var(--studio-working-font-size) !important;
+      line-height: 1.45 !important;
+    }
+
+    .repl-studio-note {
+      margin-left: calc(var(--repl-studio-prompt-width) + var(--repl-studio-column-gap));
+      color: var(--text);
       font-size: 13px;
       line-height: 1.45;
+      white-space: pre-wrap;
+    }
+
+    .repl-studio-empty,
+    .repl-studio-pending {
+      margin-left: calc(var(--repl-studio-prompt-width) + var(--repl-studio-column-gap));
+      color: var(--muted);
+      font-size: 12px;
+      font-style: italic;
+    }
+
+    .repl-journal-card-header,
+    .repl-journal-section,
+    .repl-journal-label,
+    .repl-journal-prose,
+    .repl-journal-code,
+    .repl-journal-output {
+      /* Kept for exported/older markup compatibility. */
     }
 
     footer {
@@ -2566,6 +2919,18 @@
       background: var(--panel);
     }
 
+    body.studio-zen-mode footer {
+      min-height: 28px;
+      padding: 5px 12px;
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: "status";
+    }
+
+    body.studio-zen-mode .footer-meta,
+    body.studio-zen-mode .shortcut-hint {
+      display: none !important;
+    }
+
     body.scratchpad-open {
       overflow: hidden;
     }
@@ -2997,6 +3362,10 @@
       gap: 5px;
     }
 
+    body.studio-ui-refresh.studio-zen-mode > header {
+      padding: 7px 12px;
+    }
+
     body.studio-ui-refresh > header button,
     body.studio-ui-refresh > header .file-label,
     body.studio-ui-refresh #responseActions button,
@@ -3110,7 +3479,7 @@
       flex: 0 0 1px;
     }
 
-    body.studio-ui-refresh .studio-refresh-icon {
+    .studio-refresh-icon {
       width: 15px;
       height: 15px;
       stroke: currentColor;
@@ -3250,6 +3619,21 @@
       border-radius: 8px;
     }
 
+    body.studio-zen-mode #reviewNotesBtn,
+    body.studio-zen-mode #outlineBtn,
+    body.studio-zen-mode #scratchpadBtn,
+    body.studio-zen-mode #exportPreviewControls,
+    body.studio-zen-mode #exportPdfBtn,
+    body.studio-zen-mode .studio-refresh-tool-tab,
+    body.studio-zen-mode .studio-refresh-toolbar-state,
+    body.studio-zen-mode .studio-refresh-toolbar-actions .studio-refresh-action-line:nth-child(n+2),
+    body.studio-zen-mode .source-actions-row:nth-child(n+2),
+    body.studio-zen-mode #copyDraftBtn,
+    body.studio-zen-mode #openCompanionBtn,
+    body.studio-zen-mode #sendEditorBtn {
+      display: none !important;
+    }
+
     body.studio-ui-refresh #reviewNotesBtn,
     body.studio-ui-refresh #outlineBtn,
     body.studio-ui-refresh #scratchpadBtn,