pi-studio 0.9.5 → 0.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/client/studio.css CHANGED
@@ -177,7 +177,8 @@
177
177
  }
178
178
 
179
179
  #sendRunBtn,
180
- #queueSteerBtn {
180
+ #queueSteerBtn,
181
+ #sendReplBtn {
181
182
  min-width: 10rem;
182
183
  display: inline-flex;
183
184
  justify-content: center;
@@ -190,8 +191,9 @@
190
191
  align-items: center;
191
192
  }
192
193
 
193
- #sendRunBtn:not(:disabled):not(.request-stop-active),
194
+ #sendRunBtn:not(:disabled):not(.request-stop-active):not(.repl-secondary-action),
194
195
  #queueSteerBtn:not(:disabled),
196
+ #sendReplBtn.repl-primary-action:not(:disabled),
195
197
  #loadResponseBtn:not(:disabled):not([hidden]) {
196
198
  background: var(--accent);
197
199
  border-color: var(--accent);
@@ -199,8 +201,9 @@
199
201
  font-weight: 600;
200
202
  }
201
203
 
202
- #sendRunBtn:not(:disabled):not(.request-stop-active):hover,
204
+ #sendRunBtn:not(:disabled):not(.request-stop-active):not(.repl-secondary-action):hover,
203
205
  #queueSteerBtn:not(:disabled):hover,
206
+ #sendReplBtn.repl-primary-action:not(:disabled):hover,
204
207
  #loadResponseBtn:not(:disabled):not([hidden]):hover {
205
208
  filter: brightness(0.95);
206
209
  }
@@ -546,12 +549,33 @@
546
549
  min-width: 0;
547
550
  }
548
551
 
552
+ .source-actions-row[hidden],
553
+ .studio-refresh-action-line[hidden] {
554
+ display: none !important;
555
+ }
556
+
549
557
  .source-actions button,
550
558
  .source-actions select {
551
559
  padding: 6px 9px;
552
560
  font-size: 12px;
553
561
  }
554
562
 
563
+ .source-actions select {
564
+ border-color: transparent;
565
+ background: transparent;
566
+ }
567
+
568
+ .source-actions select:not(:disabled):hover,
569
+ .source-actions select:focus {
570
+ border-color: transparent;
571
+ background: var(--studio-header-action-hover-bg, var(--panel-2));
572
+ }
573
+
574
+ #sendReplBtn[hidden],
575
+ #replSendModeSelect[hidden] {
576
+ display: none !important;
577
+ }
578
+
555
579
  .resource-dir-btn {
556
580
  padding: 4px 10px;
557
581
  font-size: 12px;
@@ -1611,7 +1635,8 @@
1611
1635
  background: #fff;
1612
1636
  }
1613
1637
 
1614
- body.studio-pdf-focus-open {
1638
+ body.studio-pdf-focus-open,
1639
+ body.studio-html-focus-open {
1615
1640
  overflow: hidden;
1616
1641
  }
1617
1642
 
@@ -2091,6 +2116,31 @@
2091
2116
  box-shadow: 0 1px 2px var(--shadow-color);
2092
2117
  }
2093
2118
 
2119
+ .rendered-markdown .studio-html-artifact-shell.is-focused {
2120
+ position: fixed;
2121
+ top: 50%;
2122
+ left: 50%;
2123
+ z-index: 71;
2124
+ width: min(96vw, 1440px);
2125
+ height: min(92vh, 1080px);
2126
+ min-height: 420px;
2127
+ margin: 0;
2128
+ transform: translate(-50%, -50%);
2129
+ border-radius: 14px;
2130
+ box-shadow: 0 24px 70px var(--shadow-color);
2131
+ }
2132
+
2133
+ .rendered-markdown .studio-html-artifact-shell.is-focused:fullscreen {
2134
+ top: 0;
2135
+ left: 0;
2136
+ width: 100vw;
2137
+ height: 100vh;
2138
+ min-height: 100vh;
2139
+ transform: none;
2140
+ border: 0;
2141
+ border-radius: 0;
2142
+ }
2143
+
2094
2144
  .rendered-markdown .studio-html-artifact-toolbar {
2095
2145
  display: flex;
2096
2146
  align-items: center;
@@ -2105,6 +2155,20 @@
2105
2155
  line-height: 1.25;
2106
2156
  }
2107
2157
 
2158
+ .rendered-markdown .studio-html-artifact-shell.is-focused .studio-html-artifact-toolbar {
2159
+ gap: 12px;
2160
+ padding: 9px 12px;
2161
+ border-bottom-color: var(--panel-border);
2162
+ }
2163
+
2164
+ .rendered-markdown .studio-html-artifact-title-group {
2165
+ min-width: 0;
2166
+ flex: 1 1 auto;
2167
+ display: inline-flex;
2168
+ align-items: center;
2169
+ gap: 8px;
2170
+ }
2171
+
2108
2172
  .rendered-markdown .studio-html-artifact-label {
2109
2173
  min-width: 0;
2110
2174
  overflow: hidden;
@@ -2114,6 +2178,48 @@
2114
2178
  font-weight: 600;
2115
2179
  }
2116
2180
 
2181
+ .rendered-markdown .studio-html-artifact-focus-btn,
2182
+ .rendered-markdown .studio-html-artifact-fullscreen-btn {
2183
+ flex: 0 0 auto;
2184
+ display: inline-flex;
2185
+ align-items: center;
2186
+ justify-content: center;
2187
+ width: 26px;
2188
+ min-width: 26px;
2189
+ height: 26px;
2190
+ padding: 0;
2191
+ border: 1px solid transparent;
2192
+ border-radius: 8px;
2193
+ background: transparent;
2194
+ color: var(--studio-info-text, var(--muted));
2195
+ }
2196
+
2197
+ .rendered-markdown .studio-html-artifact-shell.is-focused .studio-html-artifact-focus-btn,
2198
+ .rendered-markdown .studio-html-artifact-shell.is-focused .studio-html-artifact-fullscreen-btn {
2199
+ width: 29px;
2200
+ min-width: 29px;
2201
+ height: 29px;
2202
+ }
2203
+
2204
+ .rendered-markdown .studio-html-artifact-fullscreen-btn[hidden] {
2205
+ display: none !important;
2206
+ }
2207
+
2208
+ .rendered-markdown .studio-html-artifact-focus-btn:not(:disabled):hover,
2209
+ .rendered-markdown .studio-html-artifact-focus-btn:focus-visible,
2210
+ .rendered-markdown .studio-html-artifact-fullscreen-btn:not(:disabled):hover,
2211
+ .rendered-markdown .studio-html-artifact-fullscreen-btn:focus-visible {
2212
+ background: var(--panel);
2213
+ border-color: var(--control-border);
2214
+ color: var(--text);
2215
+ }
2216
+
2217
+ .rendered-markdown .studio-html-artifact-focus-btn .studio-refresh-icon,
2218
+ .rendered-markdown .studio-html-artifact-fullscreen-btn .studio-refresh-icon {
2219
+ width: 14px;
2220
+ height: 14px;
2221
+ }
2222
+
2117
2223
  .rendered-markdown .studio-html-artifact-tools {
2118
2224
  flex: 0 0 auto;
2119
2225
  display: inline-flex;
@@ -2180,6 +2286,11 @@
2180
2286
  background: #fff;
2181
2287
  }
2182
2288
 
2289
+ .rendered-markdown .studio-html-artifact-shell.is-focused .studio-html-artifact-frame {
2290
+ min-height: 0;
2291
+ height: auto !important;
2292
+ }
2293
+
2183
2294
  .rendered-markdown .studio-html-artifact-shell.is-height-capped .studio-html-artifact-toolbar {
2184
2295
  border-bottom-color: var(--control-border);
2185
2296
  }
@@ -2780,11 +2891,11 @@
2780
2891
  cursor: pointer;
2781
2892
  user-select: none;
2782
2893
  list-style: none;
2783
- border: 1px solid var(--control-border);
2894
+ border: 1px solid transparent;
2784
2895
  border-radius: 6px;
2785
2896
  padding: 4px 10px;
2786
2897
  color: var(--text);
2787
- background: var(--button-bg, var(--panel-2));
2898
+ background: transparent;
2788
2899
  }
2789
2900
 
2790
2901
  .repl-more-controls summary::-webkit-details-marker {
@@ -2798,9 +2909,19 @@
2798
2909
  font-size: 11px;
2799
2910
  }
2800
2911
 
2912
+ .repl-controls select {
2913
+ border-color: transparent;
2914
+ background: transparent;
2915
+ }
2916
+
2917
+ .repl-controls select:not(:disabled):hover,
2918
+ .repl-controls select:focus,
2919
+ .repl-more-controls summary:hover,
2920
+ .repl-more-controls summary:focus,
2801
2921
  .repl-more-controls[open] summary {
2802
- border-color: var(--accent);
2803
- background: var(--accent-soft);
2922
+ border-color: transparent;
2923
+ background: var(--studio-header-action-hover-bg, var(--panel-2));
2924
+ color: var(--text);
2804
2925
  }
2805
2926
 
2806
2927
  .repl-more-menu {
@@ -3815,11 +3936,15 @@
3815
3936
  }
3816
3937
 
3817
3938
  body.studio-ui-refresh #leftSectionHeader select:hover,
3939
+ body.studio-ui-refresh #leftSectionHeader select:focus,
3818
3940
  body.studio-ui-refresh #leftSectionHeader button:not(:disabled):hover,
3819
3941
  body.studio-ui-refresh #rightSectionHeader select:hover,
3942
+ body.studio-ui-refresh #rightSectionHeader select:focus,
3820
3943
  body.studio-ui-refresh #rightSectionHeader button:not(:disabled):hover,
3821
3944
  body.studio-ui-refresh .studio-refresh-toolbar button:not(:disabled):hover,
3822
- body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover {
3945
+ body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover,
3946
+ body.studio-ui-refresh .studio-refresh-toolbar select:focus {
3947
+ border-color: transparent;
3823
3948
  background: var(--studio-header-action-hover-bg, var(--panel-2));
3824
3949
  }
3825
3950
 
@@ -3939,8 +4064,8 @@
3939
4064
  body.studio-zen-mode #exportPdfBtn,
3940
4065
  body.studio-zen-mode .studio-refresh-tool-tab,
3941
4066
  body.studio-zen-mode .studio-refresh-toolbar-state,
3942
- body.studio-zen-mode .studio-refresh-toolbar-actions .studio-refresh-action-line:nth-child(n+2),
3943
- body.studio-zen-mode .source-actions-row:nth-child(n+2),
4067
+ body.studio-zen-mode .studio-refresh-toolbar-actions .studio-refresh-action-line:nth-child(n+3),
4068
+ body.studio-zen-mode .source-actions-row:nth-child(n+3),
3944
4069
  body.studio-zen-mode #copyDraftBtn,
3945
4070
  body.studio-zen-mode #openCompanionBtn,
3946
4071
  body.studio-zen-mode #sendEditorBtn {
@@ -4097,13 +4222,13 @@
4097
4222
  font-size: 12px;
4098
4223
  }
4099
4224
 
4100
- body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(.request-stop-active),
4225
+ body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(#sendReplBtn):not(.request-stop-active),
4101
4226
  body.studio-ui-refresh .studio-refresh-toolbar select {
4102
4227
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
4103
4228
  font-weight: 500;
4104
4229
  }
4105
4230
 
4106
- body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(.request-stop-active):hover,
4231
+ body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(#sendReplBtn):not(.request-stop-active):hover,
4107
4232
  body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover {
4108
4233
  color: var(--text);
4109
4234
  }
@@ -4229,6 +4354,7 @@
4229
4354
 
4230
4355
  body.studio-ui-refresh #sendRunBtn,
4231
4356
  body.studio-ui-refresh #queueSteerBtn,
4357
+ body.studio-ui-refresh #sendReplBtn,
4232
4358
  body.studio-ui-refresh #loadResponseBtn:not([hidden]) {
4233
4359
  height: 28px;
4234
4360
  min-height: 28px;
@@ -4239,7 +4365,8 @@
4239
4365
  }
4240
4366
 
4241
4367
  body.studio-ui-refresh #sendRunBtn,
4242
- body.studio-ui-refresh #queueSteerBtn {
4368
+ body.studio-ui-refresh #queueSteerBtn,
4369
+ body.studio-ui-refresh #sendReplBtn {
4243
4370
  min-width: 8.6rem;
4244
4371
  }
4245
4372