pi-studio 0.9.16 → 0.9.18

package/client/studio.css

@@ -1530,6 +1530,98 @@
       background: var(--table-alt-bg);
     }
 
+    .delimited-preview {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      max-width: 100%;
+    }
+
+    .delimited-preview-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      color: var(--text);
+    }
+
+    .delimited-preview-header strong {
+      display: block;
+      font-size: 0.95rem;
+      font-weight: 650;
+    }
+
+    .delimited-preview-header span {
+      display: block;
+      margin-top: 2px;
+      color: var(--muted);
+      font-size: 0.82rem;
+    }
+
+    .delimited-preview-table-wrap {
+      max-width: 100%;
+      overflow: auto;
+      border: 1px solid var(--md-table-border);
+      border-radius: 10px;
+      background: var(--panel);
+    }
+
+    .rendered-markdown .delimited-preview-table-wrap table {
+      display: table;
+      width: max-content;
+      min-width: 100%;
+      margin: 0;
+      border-collapse: separate;
+      border-spacing: 0;
+    }
+
+    .rendered-markdown .delimited-preview-table-wrap th,
+    .rendered-markdown .delimited-preview-table-wrap td {
+      max-width: 420px;
+      padding: 7px 10px;
+      vertical-align: top;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      border-top: 0;
+      border-left: 0;
+    }
+
+    .rendered-markdown .delimited-preview-table-wrap thead th {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background: var(--panel-2);
+    }
+
+    .rendered-markdown .delimited-preview-row-number {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+      width: 1%;
+      min-width: 44px;
+      color: var(--muted);
+      text-align: right;
+      background: var(--panel-2);
+    }
+
+    .rendered-markdown .delimited-preview-table-wrap thead .delimited-preview-row-number {
+      z-index: 3;
+    }
+
+    .delimited-preview-empty,
+    .delimited-preview-empty-cell {
+      color: var(--muted);
+    }
+
+    .delimited-preview-notice {
+      margin: 0;
+    }
+
+    .delimited-preview-truncation {
+      color: var(--muted);
+      font-weight: 700;
+    }
+
     .rendered-markdown hr {
       border: 0;
       border-top: 1px solid var(--md-hr);
@@ -1738,7 +1830,8 @@
     }
 
     body.studio-pdf-focus-open,
-    body.studio-html-focus-open {
+    body.studio-html-focus-open,
+    body.studio-image-focus-open {
       overflow: hidden;
     }
 
@@ -1894,6 +1987,82 @@
       background: #fff;
     }
 
+    .studio-image-focus-dialog {
+      background: var(--panel);
+    }
+
+    .studio-image-focus-actions {
+      gap: 6px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+
+    .studio-image-focus-zoom-btn {
+      min-height: 29px;
+      padding: 4px 8px;
+    }
+
+    .studio-image-focus-zoom-label {
+      min-width: 44px;
+      text-align: center;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 12px;
+      font-weight: 650;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .studio-image-focus-slot {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow: auto;
+      display: flex;
+      background:
+        linear-gradient(45deg, color-mix(in srgb, var(--panel) 92%, white) 25%, transparent 25%),
+        linear-gradient(-45deg, color-mix(in srgb, var(--panel) 92%, white) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--panel) 92%, white) 75%),
+        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--panel) 92%, white) 75%),
+        var(--panel);
+      background-size: 28px 28px;
+      background-position: 0 0, 0 14px, 14px -14px, -14px 0;
+    }
+
+    .studio-image-focus-slot.is-fit {
+      align-items: center;
+      justify-content: center;
+      padding: 12px;
+      overflow: hidden;
+    }
+
+    .studio-image-focus-slot.is-zoomed {
+      align-items: flex-start;
+      justify-content: flex-start;
+      padding: 18px;
+    }
+
+    .studio-image-focus-img {
+      display: block;
+      flex: 0 0 auto;
+      object-fit: contain;
+      box-shadow: 0 8px 28px color-mix(in srgb, var(--shadow-color) 65%, transparent);
+      background: transparent;
+    }
+
+    .studio-image-focus-slot.is-zoomed .studio-image-focus-img {
+      margin: auto;
+    }
+
+    .rendered-markdown img.studio-image-focus-target,
+    .trace-image-card img.studio-image-focus-target {
+      cursor: zoom-in;
+    }
+
+    .rendered-markdown img.studio-image-focus-target:focus-visible,
+    .trace-image-card img.studio-image-focus-target:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 3px;
+      border-radius: 4px;
+    }
+
     body.studio-quiz-open {
       overflow: hidden;
     }
@@ -3791,6 +3960,11 @@
       background: var(--panel);
     }
 
+    .shortcuts-body:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: -3px;
+    }
+
     .shortcuts-group {
       display: block;
       min-height: auto;
@@ -4336,7 +4510,8 @@
     }
 
     body.studio-ui-refresh .studio-refresh-header-utility {
-      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-columns: minmax(0, 1fr);
+      justify-items: start;
     }
 
     body.studio-ui-refresh .studio-refresh-pane-identity {
@@ -4353,12 +4528,18 @@
       flex-wrap: nowrap;
     }
 
-    body.studio-ui-refresh .studio-refresh-context-group,
-    body.studio-ui-refresh .studio-refresh-utility-left {
+    body.studio-ui-refresh .studio-refresh-context-group {
       overflow: hidden;
       white-space: nowrap;
     }
 
+    body.studio-ui-refresh .studio-refresh-utility-left {
+      overflow: visible;
+      white-space: nowrap;
+      justify-content: flex-start;
+      justify-self: start;
+    }
+
     body.studio-ui-refresh .studio-refresh-title-group {
       position: relative;
       z-index: 2;
@@ -4462,12 +4643,14 @@
       border-color: transparent;
       background: transparent;
       padding: 3px 5px;
-      font-size: 13px;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.25;
       border-radius: 8px;
     }
 
     body.studio-ui-refresh #sourceBadge {
-      color: var(--text);
+      color: var(--studio-info-text, var(--muted));
       max-width: min(34rem, 54vw);
       min-width: 0;
       overflow: hidden;
@@ -4475,7 +4658,6 @@
       white-space: nowrap;
     }
 
-    body.studio-ui-refresh #resourceDirBtn,
     body.studio-ui-refresh #reviewNotesBtn,
     body.studio-ui-refresh #outlineBtn,
     body.studio-ui-refresh #scratchpadBtn,
@@ -4483,11 +4665,19 @@
       color: var(--text);
     }
 
+    body.studio-ui-refresh #resourceDirBtn,
     body.studio-ui-refresh #resourceDirLabel {
       color: var(--studio-info-text, var(--muted));
       font-weight: 400;
     }
 
+    body.studio-ui-refresh #resourceDirBtn:hover,
+    body.studio-ui-refresh #resourceDirLabel:hover {
+      color: var(--text);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
+      border-color: transparent;
+    }
+
     body.studio-ui-refresh #resourceDirInputWrap.visible {
       display: inline-flex;
     }
@@ -4501,9 +4691,11 @@
       border-radius: 999px;
       padding: 2px 7px;
       background: transparent;
-      color: var(--muted);
-      opacity: 0.82;
-      font-weight: 450;
+      color: var(--studio-info-text, var(--muted));
+      opacity: 1;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.25;
     }
 
     body.studio-ui-refresh #syncBadge[hidden] {
@@ -4519,6 +4711,11 @@
       opacity: 0.72;
     }
 
+    body.studio-ui-refresh #syncBadge.out-of-sync::before {
+      background: var(--warning, var(--accent));
+      opacity: 0.95;
+    }
+
     body.studio-ui-refresh #reviewNotesBtn,
     body.studio-ui-refresh #outlineBtn,
     body.studio-ui-refresh #scratchpadBtn,
@@ -4536,9 +4733,10 @@
     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+3),
+    body.studio-zen-mode .studio-refresh-toolbar-actions .studio-refresh-utility-action-line,
     body.studio-zen-mode .source-actions-row:nth-child(n+3),
     body.studio-zen-mode #copyDraftBtn,
+    body.studio-zen-mode #suggestCompletionBtn,
     body.studio-zen-mode #openCompanionBtn,
     body.studio-zen-mode #sendEditorBtn {
       display: none !important;
@@ -4805,6 +5003,19 @@
       width: min(320px, calc(100vw - 48px));
     }
 
+    body.studio-ui-refresh .studio-refresh-title-group .studio-refresh-context-anchor .studio-refresh-chip {
+      color: var(--studio-info-text, var(--muted));
+      font-size: 13px;
+      font-weight: 500;
+      padding: 3px 5px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-context-anchor .studio-refresh-menu {
+      left: 0;
+      right: auto;
+      width: min(360px, calc(100vw - 48px));
+    }
+
     body.studio-ui-refresh .studio-refresh-menu[hidden] {
       display: none !important;
     }
@@ -4852,6 +5063,11 @@
       text-align: left;
     }
 
+    body.studio-ui-refresh .completion-context-option.is-selected {
+      color: var(--text);
+      font-weight: 650;
+    }
+
     body.studio-ui-refresh .studio-refresh-menu-item > button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-menu-item > select:not(:disabled):hover {
       background: var(--studio-header-action-hover-bg, var(--panel-2));