pressship 0.1.13 → 0.1.14

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.
Files changed (10) hide show
  1. package/assets/web/app.js +1003 -106
  2. package/assets/web/style.css +2416 -964
  3. package/dist/web/release.js +10 -6
  4. package/dist/web/release.js.map +1 -1
  5. package/dist/web/server.d.ts +7 -0
  6. package/dist/web/server.js +76 -42
  7. package/dist/web/server.js.map +1 -1
  8. package/dist/web/version-state.js +14 -10
  9. package/dist/web/version-state.js.map +1 -1
  10. package/package.json +1 -1
package/assets/web/style.css CHANGED
@@ -109,6 +109,58 @@ body {
109
109
  -moz-osx-font-smoothing: grayscale;
110
110
  }
111
111
 
112
+ body.is-initial-route-loading {
113
+ overflow: hidden;
114
+ }
115
+
116
+ .ps-initial-route-loader {
117
+ position: fixed;
118
+ inset: 0;
119
+ z-index: 100200;
120
+ display: grid;
121
+ place-items: center;
122
+ padding: 32px;
123
+ background: var(--wp-body-bg);
124
+ color: var(--wp-text);
125
+ }
126
+
127
+ .ps-initial-route-loader-card {
128
+ display: grid;
129
+ justify-items: center;
130
+ gap: 12px;
131
+ width: min(340px, calc(100vw - 48px));
132
+ padding: 28px;
133
+ border: 1px solid var(--wp-border);
134
+ border-radius: var(--wp-radius-l);
135
+ background: var(--wp-surface);
136
+ box-shadow: var(--wp-shadow-md);
137
+ text-align: center;
138
+ }
139
+
140
+ .ps-initial-route-loader-card img {
141
+ width: 36px;
142
+ height: 36px;
143
+ object-fit: contain;
144
+ }
145
+
146
+ .ps-initial-route-loader-card .dashicons {
147
+ width: 24px;
148
+ height: 24px;
149
+ color: var(--wp-admin-theme-color);
150
+ animation: ps-spin 1s linear infinite;
151
+ }
152
+
153
+ .ps-initial-route-loader-card strong {
154
+ color: var(--wp-heading);
155
+ font-size: 15px;
156
+ line-height: 1.25;
157
+ }
158
+
159
+ .ps-initial-route-loader-card p {
160
+ margin: -4px 0 0;
161
+ color: var(--wp-text-soft);
162
+ }
163
+
112
164
  button,
113
165
  input,
114
166
  select,
@@ -562,7 +614,7 @@ kbd {
562
614
  align-items: center;
563
615
  flex-wrap: wrap;
564
616
  gap: 8px 12px;
565
- padding: 0 0 4px;
617
+ padding: 8px 0 4px;
566
618
  }
567
619
 
568
620
  .wrap h1,
@@ -2668,12 +2720,21 @@ body[data-active-view="studio"] #notice-stack {
2668
2720
  .studio-root {
2669
2721
  position: relative;
2670
2722
  display: grid;
2671
- grid-template-rows: 35px minmax(0, 1fr);
2723
+ grid-template-rows: 35px minmax(0, 1fr) 22px;
2672
2724
  background: #1e1e1e;
2673
2725
  color: #cccccc;
2674
2726
  }
2675
2727
 
2728
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) {
2729
+ color-scheme: dark;
2730
+ }
2731
+
2732
+ .studio-root[data-theme="light"]:not(.studio-empty-root) {
2733
+ color-scheme: light;
2734
+ }
2735
+
2676
2736
  .studio-empty-root {
2737
+ color-scheme: light;
2677
2738
  grid-template-rows: 1fr;
2678
2739
  overflow: auto;
2679
2740
  background: var(--wp-body-bg);
@@ -2912,6 +2973,7 @@ body[data-active-view="studio"] #notice-stack {
2912
2973
  .studio-title {
2913
2974
  align-items: baseline;
2914
2975
  display: flex;
2976
+ flex: 1 1 auto;
2915
2977
  gap: 10px;
2916
2978
  min-width: 0;
2917
2979
  }
@@ -2937,8 +2999,10 @@ body[data-active-view="studio"] #notice-stack {
2937
2999
  .studio-title-actions {
2938
3000
  align-items: center;
2939
3001
  display: flex;
3002
+ flex: 0 1 auto;
2940
3003
  gap: 6px;
2941
3004
  margin-left: auto;
3005
+ min-width: 0;
2942
3006
  }
2943
3007
 
2944
3008
  .studio-action-button,
@@ -2983,6 +3047,58 @@ body[data-active-view="studio"] #notice-stack {
2983
3047
  pointer-events: none;
2984
3048
  }
2985
3049
 
3050
+ .studio-theme-switch {
3051
+ align-items: center;
3052
+ display: inline-flex;
3053
+ gap: 7px;
3054
+ height: 26px;
3055
+ border: 1px solid #3c3c3c;
3056
+ border-radius: 2px;
3057
+ background: #252526;
3058
+ color: #cccccc;
3059
+ cursor: pointer;
3060
+ font-size: 12px;
3061
+ padding: 0 8px;
3062
+ }
3063
+
3064
+ .studio-theme-switch:hover,
3065
+ .studio-theme-switch:focus-visible {
3066
+ background: #2d2d2d;
3067
+ color: #ffffff;
3068
+ outline: none;
3069
+ }
3070
+
3071
+ .studio-theme-switch > .dashicons {
3072
+ font-size: 14px;
3073
+ width: 14px;
3074
+ height: 14px;
3075
+ }
3076
+
3077
+ .studio-theme-switch-track {
3078
+ position: relative;
3079
+ width: 30px;
3080
+ height: 16px;
3081
+ border: 1px solid #4b4b4b;
3082
+ border-radius: 999px;
3083
+ background: #181818;
3084
+ }
3085
+
3086
+ .studio-theme-switch-track span {
3087
+ position: absolute;
3088
+ top: 2px;
3089
+ left: 2px;
3090
+ width: 10px;
3091
+ height: 10px;
3092
+ border-radius: 999px;
3093
+ background: #cccccc;
3094
+ transition: transform 0.16s ease, background 0.16s ease;
3095
+ }
3096
+
3097
+ .studio-theme-switch[aria-checked="true"] .studio-theme-switch-track span {
3098
+ background: #ffffff;
3099
+ transform: translateX(14px);
3100
+ }
3101
+
2986
3102
  .studio-main {
2987
3103
  display: grid;
2988
3104
  grid-template-columns:
@@ -3481,15 +3597,15 @@ body.is-studio-resizing-v iframe {
3481
3597
  align-items: center;
3482
3598
  display: inline-flex;
3483
3599
  gap: 6px;
3484
- height: 32px;
3600
+ height: 26px;
3485
3601
  border: 1px solid #3858e9;
3486
- border-radius: 3px;
3602
+ border-radius: 2px;
3487
3603
  background: #3858e9;
3488
3604
  color: #ffffff;
3489
3605
  cursor: pointer;
3490
3606
  font-size: 12px;
3491
3607
  font-weight: 600;
3492
- padding: 0 12px;
3608
+ padding: 0 10px;
3493
3609
  }
3494
3610
 
3495
3611
  .studio-play-tab-button:hover,
@@ -3515,7 +3631,7 @@ body.is-studio-resizing-v iframe {
3515
3631
  align-items: center;
3516
3632
  display: inline-flex;
3517
3633
  gap: 6px;
3518
- min-width: 122px;
3634
+ min-width: 0;
3519
3635
  color: #9da1a6;
3520
3636
  font-size: 12px;
3521
3637
  white-space: nowrap;
@@ -4364,14 +4480,24 @@ body.is-studio-resizing-v iframe {
4364
4480
  width: 34px;
4365
4481
  height: 34px;
4366
4482
  border-radius: var(--wp-radius-l);
4367
- background: transparent;
4368
- box-shadow: none;
4483
+ border: 1px solid rgba(255, 255, 255, 0.16);
4484
+ background: var(--studio-provider-icon-surface, #f2f2f7);
4485
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
4369
4486
  }
4370
4487
 
4371
4488
  .studio-ai-avatar.is-harness .studio-ai-avatar-icon {
4372
4489
  width: 32px;
4373
4490
  height: 32px;
4374
4491
  border-radius: var(--wp-radius-l);
4492
+ object-fit: contain;
4493
+ }
4494
+
4495
+ .studio-ai-avatar.is-harness .studio-ai-avatar-icon.is-provider-icon {
4496
+ width: 20px;
4497
+ height: 20px;
4498
+ border-radius: 0;
4499
+ filter: var(--studio-provider-icon-filter, none);
4500
+ opacity: 0.92;
4375
4501
  }
4376
4502
 
4377
4503
  .studio-ai-avatar-lg {
@@ -4385,6 +4511,11 @@ body.is-studio-resizing-v iframe {
4385
4511
  border-radius: 12px;
4386
4512
  }
4387
4513
 
4514
+ .studio-ai-avatar-lg.is-harness .studio-ai-avatar-icon.is-provider-icon {
4515
+ width: 34px;
4516
+ height: 34px;
4517
+ }
4518
+
4388
4519
  .studio-ai-avatar-lg .dashicons {
4389
4520
  font-size: 28px;
4390
4521
  height: 28px;
@@ -4447,7 +4578,7 @@ body.is-studio-resizing-v iframe {
4447
4578
  overflow: auto;
4448
4579
  padding: 14px 12px;
4449
4580
  background: #f6f7f7;
4450
- scroll-behavior: smooth;
4581
+ scroll-behavior: auto;
4451
4582
  }
4452
4583
 
4453
4584
  .studio-ai-empty,
@@ -5142,1313 +5273,2634 @@ body.is-studio-resizing-v iframe {
5142
5273
  }
5143
5274
 
5144
5275
  /* ===================================================================
5145
- * Responsive
5276
+ * Studio workbench — VS Code-style shell
5146
5277
  * =================================================================== */
5147
5278
 
5148
- @media screen and (max-width: 1200px) {
5149
- #dashboard-widgets {
5150
- grid-template-columns: 1fr;
5151
- }
5279
+ .studio-root {
5280
+ --studio-vscode-bg: #1e1e1e;
5281
+ --studio-vscode-side-bg: #252526;
5282
+ --studio-vscode-title-bg: #181818;
5283
+ --studio-vscode-activity-bg: #181818;
5284
+ --studio-vscode-tab-bg: #2d2d2d;
5285
+ --studio-vscode-border: #2b2b2b;
5286
+ --studio-vscode-border-strong: #3c3c3c;
5287
+ --studio-vscode-text: #cccccc;
5288
+ --studio-vscode-muted: #9da1a6;
5289
+ --studio-vscode-active: #ffffff;
5290
+ --studio-vscode-focus: #0078d4;
5291
+ --studio-vscode-status: #007acc;
5292
+ --studio-vscode-hover: #2a2d2e;
5293
+ --studio-vscode-segment-active: #37373d;
5294
+ --studio-provider-icon-surface: #f2f2f7;
5295
+ --studio-provider-icon-filter: none;
5296
+ }
5297
+
5298
+ .studio-root[data-theme="light"] {
5299
+ --studio-vscode-bg: #ffffff;
5300
+ --studio-vscode-side-bg: #f6f8fa;
5301
+ --studio-vscode-title-bg: #f6f8fa;
5302
+ --studio-vscode-activity-bg: #f6f8fa;
5303
+ --studio-vscode-tab-bg: #eaeef2;
5304
+ --studio-vscode-border: #d0d7de;
5305
+ --studio-vscode-border-strong: #afb8c1;
5306
+ --studio-vscode-text: #24292f;
5307
+ --studio-vscode-muted: #57606a;
5308
+ --studio-vscode-active: #111827;
5309
+ --studio-vscode-focus: #0969da;
5310
+ --studio-vscode-status: #0969da;
5311
+ --studio-vscode-hover: #eaeef2;
5312
+ --studio-vscode-segment-active: #ffffff;
5313
+ --studio-provider-icon-surface: #ffffff;
5152
5314
  }
5153
5315
 
5154
- @media screen and (max-width: 960px) {
5155
- .ab-command {
5156
- min-width: auto;
5157
- }
5158
- .ab-command-label,
5159
- .ab-kbd {
5160
- display: none;
5161
- }
5316
+ .studio-titlebar {
5317
+ border-bottom-color: var(--studio-vscode-border);
5318
+ background: var(--studio-vscode-title-bg);
5319
+ }
5162
5320
 
5163
- .ps-welcome-panel .welcome-panel-header {
5164
- padding: 30px 28px 42px;
5165
- }
5321
+ .studio-layout-button {
5322
+ align-items: center;
5323
+ display: inline-flex;
5324
+ justify-content: center;
5325
+ width: 28px;
5326
+ height: 26px;
5327
+ border: 1px solid transparent;
5328
+ border-radius: 3px;
5329
+ background: transparent;
5330
+ color: var(--studio-vscode-muted);
5331
+ cursor: pointer;
5332
+ }
5166
5333
 
5167
- .ps-welcome-panel h2 {
5168
- font-size: 34px;
5169
- }
5334
+ .studio-layout-button .dashicons {
5335
+ font-size: 15px;
5336
+ width: 15px;
5337
+ height: 15px;
5338
+ }
5170
5339
 
5171
- .ps-welcome-panel .welcome-panel-header p {
5172
- font-size: 16px;
5173
- }
5340
+ .studio-layout-button:hover,
5341
+ .studio-layout-button:focus-visible,
5342
+ .studio-layout-button.is-active {
5343
+ background: #2a2d2e;
5344
+ color: var(--studio-vscode-active);
5345
+ outline: none;
5346
+ }
5174
5347
 
5175
- .ps-welcome-panel .welcome-panel-column-container {
5176
- grid-template-columns: 1fr;
5177
- gap: 20px;
5178
- }
5348
+ .studio-main {
5349
+ grid-template-columns:
5350
+ 48px
5351
+ var(--studio-files-width, 260px)
5352
+ 6px
5353
+ minmax(0, 1fr)
5354
+ 6px
5355
+ var(--studio-ai-width, 330px);
5356
+ background: var(--studio-vscode-bg);
5357
+ }
5179
5358
 
5180
- .studio-main {
5181
- grid-template-columns:
5182
- var(--studio-files-width, 260px)
5183
- 6px
5184
- minmax(0, 1fr)
5185
- 6px
5186
- var(--studio-ai-width, 330px);
5187
- }
5359
+ .studio-root.is-files-collapsed.has-secondary-sidebar .studio-main {
5360
+ grid-template-columns: 48px minmax(0, 1fr) 6px var(--studio-ai-width, 330px);
5361
+ }
5188
5362
 
5189
- .studio-preview-empty {
5190
- gap: 18px;
5191
- padding: 24px;
5192
- }
5363
+ .studio-root.has-files.is-secondary-sidebar-collapsed .studio-main {
5364
+ grid-template-columns: 48px var(--studio-files-width, 260px) 6px minmax(0, 1fr);
5365
+ }
5193
5366
 
5194
- .studio-preview-shell {
5195
- width: min(300px, 44vw);
5196
- min-width: 220px;
5197
- }
5367
+ .studio-root.is-files-collapsed.is-secondary-sidebar-collapsed .studio-main {
5368
+ grid-template-columns: 48px minmax(0, 1fr);
5369
+ }
5198
5370
 
5199
- .studio-preview-empty-copy {
5200
- max-width: 280px;
5201
- }
5371
+ .studio-root .studio-resizer-h {
5372
+ border-color: var(--studio-vscode-border);
5373
+ background: var(--studio-vscode-bg);
5202
5374
  }
5203
5375
 
5204
- @media screen and (max-width: 782px) {
5205
- :root {
5206
- --wp-admin--admin-bar--height: 46px;
5207
- --wp-sidebar-width: 190px;
5208
- }
5376
+ .studio-root .studio-resizer-v {
5377
+ border-color: var(--studio-vscode-border);
5378
+ background: var(--studio-vscode-bg);
5379
+ }
5209
5380
 
5210
- body {
5211
- min-width: 0;
5212
- }
5381
+ .studio-activitybar {
5382
+ display: flex;
5383
+ flex-direction: column;
5384
+ align-items: stretch;
5385
+ min-width: 0;
5386
+ min-height: 0;
5387
+ border-right: 1px solid var(--studio-vscode-border);
5388
+ background: var(--studio-vscode-activity-bg);
5389
+ }
5213
5390
 
5214
- .ab-brand-name {
5215
- font-size: 15px;
5216
- }
5391
+ .studio-activitybar-primary,
5392
+ .studio-activitybar-secondary {
5393
+ display: grid;
5394
+ gap: 2px;
5395
+ padding: 6px 0;
5396
+ }
5217
5397
 
5218
- #adminmenuback,
5219
- #adminmenuwrap,
5220
- #adminmenu {
5221
- position: relative;
5222
- width: 100%;
5223
- height: auto;
5224
- }
5398
+ .studio-activitybar-secondary {
5399
+ margin-top: auto;
5400
+ }
5225
5401
 
5226
- #adminmenuback {
5227
- display: none;
5228
- }
5402
+ .studio-activity-button {
5403
+ position: relative;
5404
+ display: grid;
5405
+ place-items: center;
5406
+ width: 48px;
5407
+ height: 48px;
5408
+ border: 0;
5409
+ background: transparent;
5410
+ color: #858585;
5411
+ cursor: pointer;
5412
+ }
5229
5413
 
5230
- #adminmenuwrap {
5231
- position: relative;
5232
- top: 0;
5233
- }
5414
+ .studio-activity-button::before {
5415
+ content: "";
5416
+ position: absolute;
5417
+ left: 0;
5418
+ top: 8px;
5419
+ bottom: 8px;
5420
+ width: 2px;
5421
+ background: transparent;
5422
+ }
5234
5423
 
5235
- #wpcontent {
5236
- margin-left: 0;
5237
- padding-left: 12px;
5238
- padding-right: 12px;
5239
- }
5424
+ .studio-activity-button .dashicons {
5425
+ font-size: 22px;
5426
+ width: 22px;
5427
+ height: 22px;
5428
+ }
5240
5429
 
5241
- body[data-active-view="studio"] #wpcontent {
5242
- padding-left: 0;
5243
- padding-right: 0;
5244
- }
5430
+ .studio-activity-button:hover,
5431
+ .studio-activity-button:focus-visible {
5432
+ color: var(--studio-vscode-active);
5433
+ outline: none;
5434
+ }
5245
5435
 
5246
- .ps-settings-row {
5247
- grid-template-columns: 1fr;
5248
- }
5436
+ .studio-activity-button.is-active {
5437
+ color: var(--studio-vscode-active);
5438
+ }
5249
5439
 
5250
- .inline-form {
5251
- display: flex;
5252
- margin-top: 8px;
5253
- width: 100%;
5254
- }
5440
+ .studio-activity-button.is-active::before {
5441
+ background: var(--studio-vscode-active);
5442
+ }
5255
5443
 
5256
- .inline-form input[type="text"] {
5257
- width: 100%;
5444
+ .studio-pane-header,
5445
+ .studio-secondary-header {
5446
+ align-items: center;
5447
+ display: flex;
5448
+ justify-content: space-between;
5449
+ gap: 8px;
5450
+ min-height: 35px;
5451
+ border-bottom: 1px solid var(--studio-vscode-border);
5452
+ background: var(--studio-vscode-side-bg);
5453
+ color: var(--studio-vscode-text);
5454
+ padding: 0 8px 0 12px;
5455
+ }
5456
+
5457
+ .studio-pane-header strong,
5458
+ .studio-secondary-header strong {
5459
+ overflow: hidden;
5460
+ color: var(--studio-vscode-active);
5461
+ font-size: 11px;
5462
+ font-weight: 500;
5463
+ letter-spacing: 0.04em;
5464
+ text-overflow: ellipsis;
5465
+ text-transform: uppercase;
5466
+ white-space: nowrap;
5467
+ }
5468
+
5469
+ .studio-pane-action {
5470
+ display: inline-grid;
5471
+ place-items: center;
5472
+ width: 24px;
5473
+ height: 24px;
5474
+ border: 0;
5475
+ border-radius: 3px;
5476
+ background: transparent;
5477
+ color: var(--studio-vscode-muted);
5478
+ cursor: pointer;
5479
+ }
5480
+
5481
+ .studio-pane-action .dashicons {
5482
+ font-size: 14px;
5483
+ width: 14px;
5484
+ height: 14px;
5485
+ }
5486
+
5487
+ .studio-pane-action:hover,
5488
+ .studio-pane-action:focus-visible {
5489
+ background: #37373d;
5490
+ color: var(--studio-vscode-active);
5491
+ outline: none;
5492
+ }
5493
+
5494
+ .studio-files {
5495
+ grid-template-rows: 35px minmax(0, 1fr);
5496
+ border-right: 1px solid var(--studio-vscode-border);
5497
+ background: var(--studio-vscode-side-bg);
5498
+ color: var(--studio-vscode-text);
5499
+ }
5500
+
5501
+ .studio-file-list {
5502
+ padding: 4px 0 8px;
5503
+ }
5504
+
5505
+ .studio-muted {
5506
+ color: var(--studio-vscode-muted);
5507
+ padding: 8px 12px;
5508
+ }
5509
+
5510
+ .studio-tree {
5511
+ gap: 0;
5512
+ }
5513
+
5514
+ .studio-tree-row {
5515
+ min-height: 22px;
5516
+ padding: 2px 8px 2px calc(8px + (var(--depth, 0) * 16px));
5517
+ color: var(--studio-vscode-text);
5518
+ font-size: 12px;
5519
+ }
5520
+
5521
+ .studio-tree-arrow,
5522
+ .studio-tree-indent,
5523
+ .studio-tree-icon {
5524
+ color: #c5c5c5;
5525
+ }
5526
+
5527
+ .studio-tree-row:hover,
5528
+ .studio-tree-row:focus-visible {
5529
+ background: #2a2d2e;
5530
+ color: var(--studio-vscode-active);
5531
+ outline: none;
5532
+ }
5533
+
5534
+ .studio-tree-folder.has-current > .studio-tree-folder-row {
5535
+ color: var(--studio-vscode-active);
5536
+ }
5537
+
5538
+ .studio-tree-file-row.is-current {
5539
+ background: #37373d;
5540
+ box-shadow: none;
5541
+ color: var(--studio-vscode-active);
5542
+ font-weight: 500;
5543
+ }
5544
+
5545
+ .studio-tree-file-row.has-check-errors {
5546
+ box-shadow: inset 2px 0 0 #f14c4c;
5547
+ }
5548
+
5549
+ .studio-tree-folder.has-ai-changes > .studio-tree-folder-row .studio-tree-label,
5550
+ .studio-tree-file-row.has-ai-changes .studio-tree-label {
5551
+ color: #9cdcfe;
5552
+ }
5553
+
5554
+ .studio-workbench {
5555
+ background: var(--studio-vscode-bg);
5556
+ }
5557
+
5558
+ .studio-tabs {
5559
+ height: 35px;
5560
+ border-bottom-color: var(--studio-vscode-border);
5561
+ background: var(--studio-vscode-bg);
5562
+ padding: 0;
5563
+ }
5564
+
5565
+ .studio-tablist {
5566
+ align-self: stretch;
5567
+ display: flex;
5568
+ flex: 1 1 auto;
5569
+ height: 35px;
5570
+ min-width: 0;
5571
+ border: 0;
5572
+ border-radius: 0;
5573
+ background: transparent;
5574
+ overflow: hidden;
5575
+ }
5576
+
5577
+ .studio-pinned-tabs,
5578
+ .studio-file-tabs {
5579
+ align-self: stretch;
5580
+ display: inline-flex;
5581
+ min-width: 0;
5582
+ }
5583
+
5584
+ .studio-pinned-tabs {
5585
+ flex: 0 0 auto;
5586
+ }
5587
+
5588
+ .studio-file-tabs {
5589
+ flex: 1 1 auto;
5590
+ overflow-x: auto;
5591
+ overflow-y: hidden;
5592
+ scrollbar-width: thin;
5593
+ }
5594
+
5595
+ .studio-file-tabs-empty {
5596
+ align-items: center;
5597
+ display: inline-flex;
5598
+ height: 35px;
5599
+ min-width: 0;
5600
+ padding: 0 12px;
5601
+ border-right: 1px solid var(--studio-vscode-border);
5602
+ color: #858585;
5603
+ font-size: 12px;
5604
+ white-space: nowrap;
5605
+ }
5606
+
5607
+ .studio-tab-button {
5608
+ height: 35px;
5609
+ min-width: 118px;
5610
+ max-width: min(280px, 32vw);
5611
+ border-right: 1px solid var(--studio-vscode-border);
5612
+ background: var(--studio-vscode-tab-bg);
5613
+ color: var(--studio-vscode-muted);
5614
+ font-size: 12px;
5615
+ }
5616
+
5617
+ .studio-tab-pinned {
5618
+ justify-content: center;
5619
+ grid-template-columns: 18px;
5620
+ min-width: 42px;
5621
+ max-width: 42px;
5622
+ padding: 0;
5623
+ }
5624
+
5625
+ .studio-tab-pinned > span:nth-child(2),
5626
+ .studio-tab-pinned small {
5627
+ position: absolute;
5628
+ width: 1px;
5629
+ height: 1px;
5630
+ overflow: hidden;
5631
+ clip: rect(0 0 0 0);
5632
+ clip-path: inset(50%);
5633
+ white-space: nowrap;
5634
+ }
5635
+
5636
+ .studio-file-tab-wrap {
5637
+ position: relative;
5638
+ align-self: stretch;
5639
+ display: inline-flex;
5640
+ flex: 0 0 auto;
5641
+ min-width: 0;
5642
+ }
5643
+
5644
+ .studio-file-tab-wrap .studio-tab-button {
5645
+ padding-right: 28px;
5646
+ }
5647
+
5648
+ .studio-tab-close {
5649
+ position: absolute;
5650
+ right: 4px;
5651
+ top: 50%;
5652
+ display: grid;
5653
+ place-items: center;
5654
+ width: 20px;
5655
+ height: 20px;
5656
+ border: 0;
5657
+ border-radius: 3px;
5658
+ background: transparent;
5659
+ color: #858585;
5660
+ cursor: pointer;
5661
+ opacity: 0;
5662
+ transform: translateY(-50%);
5663
+ }
5664
+
5665
+ .studio-file-tab-wrap:hover .studio-tab-close,
5666
+ .studio-file-tab-wrap:focus-within .studio-tab-close,
5667
+ .studio-file-tab-wrap .studio-tab-button.is-active + .studio-tab-close {
5668
+ opacity: 1;
5669
+ }
5670
+
5671
+ .studio-tab-close .dashicons {
5672
+ font-size: 13px;
5673
+ width: 13px;
5674
+ height: 13px;
5675
+ }
5676
+
5677
+ .studio-tab-close:hover,
5678
+ .studio-tab-close:focus-visible {
5679
+ background: #3c3c3c;
5680
+ color: #ffffff;
5681
+ outline: none;
5682
+ }
5683
+
5684
+ .studio-tab-button:hover,
5685
+ .studio-tab-button:focus-visible {
5686
+ background: #333333;
5687
+ }
5688
+
5689
+ .studio-tab-button.is-active {
5690
+ background: var(--studio-vscode-bg);
5691
+ box-shadow: inset 0 1px 0 var(--studio-vscode-focus);
5692
+ color: var(--studio-vscode-active);
5693
+ }
5694
+
5695
+ .studio-play-tab-button {
5696
+ height: 26px;
5697
+ border-color: var(--studio-vscode-focus);
5698
+ border-radius: 2px;
5699
+ background: var(--studio-vscode-focus);
5700
+ }
5701
+
5702
+ .studio-title-actions .studio-play-tab-button {
5703
+ flex: 0 0 auto;
5704
+ }
5705
+
5706
+ .studio-title-actions .studio-preview-state {
5707
+ height: 26px;
5708
+ padding: 0 2px;
5709
+ }
5710
+
5711
+ .studio-preview-state,
5712
+ #studio-editor-status {
5713
+ color: var(--studio-vscode-muted);
5714
+ }
5715
+
5716
+ .studio-ai {
5717
+ border-left: 1px solid var(--studio-vscode-border);
5718
+ background: var(--studio-vscode-side-bg);
5719
+ color: var(--studio-vscode-text);
5720
+ }
5721
+
5722
+ .studio-secondary-header {
5723
+ flex: 0 0 auto;
5724
+ }
5725
+
5726
+ .studio-sidebar-tabs.ps-segmented {
5727
+ align-self: stretch;
5728
+ margin: 0;
5729
+ padding: 4px;
5730
+ border: 0;
5731
+ border-bottom: 1px solid var(--studio-vscode-border);
5732
+ border-radius: 0;
5733
+ background: var(--studio-vscode-side-bg);
5734
+ }
5735
+
5736
+ .ps-segmented-option {
5737
+ border-radius: 3px;
5738
+ color: var(--studio-vscode-muted);
5739
+ }
5740
+
5741
+ .ps-segmented-option:hover,
5742
+ .ps-segmented-option:focus-visible {
5743
+ background: var(--studio-vscode-hover);
5744
+ color: var(--studio-vscode-active);
5745
+ outline: none;
5746
+ }
5747
+
5748
+ .ps-segmented-option.is-active {
5749
+ background: var(--studio-vscode-segment-active);
5750
+ color: var(--studio-vscode-active);
5751
+ box-shadow: none;
5752
+ }
5753
+
5754
+ .studio-ai-header,
5755
+ .studio-ai-context,
5756
+ .studio-ai-composer {
5757
+ border-color: var(--studio-vscode-border);
5758
+ background: var(--studio-vscode-side-bg);
5759
+ color: var(--studio-vscode-text);
5760
+ }
5761
+
5762
+ .studio-ai-header {
5763
+ background: #2d2d2d;
5764
+ }
5765
+
5766
+ .studio-ai-agent strong,
5767
+ .studio-ai-reply header span,
5768
+ .studio-ai-bubble header span,
5769
+ .studio-ai-empty strong {
5770
+ color: var(--studio-vscode-active);
5771
+ }
5772
+
5773
+ .studio-ai-status,
5774
+ .studio-ai-context-chip,
5775
+ .studio-ai-empty,
5776
+ .studio-ai-empty small {
5777
+ color: var(--studio-vscode-muted);
5778
+ }
5779
+
5780
+ .studio-ai-context-chip,
5781
+ .studio-ai-suggestion,
5782
+ .studio-ai-bubble,
5783
+ .studio-ai-change-card,
5784
+ .studio-ai-input-shell,
5785
+ .studio-ai-state,
5786
+ .studio-ai-message-system {
5787
+ border-color: var(--studio-vscode-border-strong);
5788
+ background: #1f1f1f;
5789
+ color: var(--studio-vscode-text);
5790
+ }
5791
+
5792
+ .studio-ai-messages {
5793
+ background: #1e1e1e;
5794
+ }
5795
+
5796
+ .studio-ai-suggestion:hover,
5797
+ .studio-ai-suggestion:focus-visible,
5798
+ .studio-ai-change:hover,
5799
+ .studio-ai-change:focus-visible,
5800
+ .studio-ai-change-action:hover,
5801
+ .studio-ai-change-action:focus-visible {
5802
+ background: #2a2d2e;
5803
+ color: var(--studio-vscode-active);
5804
+ }
5805
+
5806
+ .studio-ai-changes {
5807
+ border-bottom-color: var(--studio-vscode-border);
5808
+ background: #1f2937;
5809
+ }
5810
+
5811
+ .studio-ai-composer textarea {
5812
+ color: var(--studio-vscode-text);
5813
+ }
5814
+
5815
+ .studio-root[data-theme="dark"] .studio-ai-reply p,
5816
+ .studio-root[data-theme="dark"] .studio-ai-markdown,
5817
+ .studio-root[data-theme="dark"] .studio-ai-markdown h1,
5818
+ .studio-root[data-theme="dark"] .studio-ai-markdown h2,
5819
+ .studio-root[data-theme="dark"] .studio-ai-markdown h3,
5820
+ .studio-root[data-theme="dark"] .studio-ai-markdown h4,
5821
+ .studio-root[data-theme="dark"] .studio-ai-markdown h5,
5822
+ .studio-root[data-theme="dark"] .studio-ai-markdown h6,
5823
+ .studio-root[data-theme="dark"] .studio-ai-bubble p {
5824
+ color: var(--studio-vscode-text);
5825
+ }
5826
+
5827
+ .studio-root[data-theme="dark"] .studio-ai-markdown blockquote,
5828
+ .studio-root[data-theme="dark"] .studio-ai-reply header time,
5829
+ .studio-root[data-theme="dark"] .studio-ai-bubble header time {
5830
+ color: var(--studio-vscode-muted);
5831
+ }
5832
+
5833
+ .studio-root[data-theme="dark"] .studio-ai-markdown code,
5834
+ .studio-root[data-theme="dark"] .studio-ai-markdown pre,
5835
+ .studio-root[data-theme="dark"] .studio-ai-markdown th {
5836
+ border-color: var(--studio-vscode-border-strong);
5837
+ background: #181818;
5838
+ color: var(--studio-vscode-text);
5839
+ }
5840
+
5841
+ .studio-root[data-theme="dark"] .studio-ai-reply ::selection,
5842
+ .studio-root[data-theme="dark"] .studio-ai-bubble ::selection,
5843
+ .studio-root[data-theme="dark"] .studio-ai-composer textarea::selection {
5844
+ background: rgba(0, 120, 212, 0.55);
5845
+ color: var(--studio-vscode-active);
5846
+ }
5847
+
5848
+ .studio-root[data-theme="dark"] .studio-ai-input-shell.is-disabled {
5849
+ border-color: var(--studio-vscode-border-strong);
5850
+ background: #252526;
5851
+ opacity: 1;
5852
+ }
5853
+
5854
+ .studio-root[data-theme="dark"] .studio-ai-input-shell.is-disabled textarea,
5855
+ .studio-root[data-theme="dark"] .studio-ai-composer textarea:disabled {
5856
+ color: var(--studio-vscode-muted);
5857
+ -webkit-text-fill-color: var(--studio-vscode-muted);
5858
+ }
5859
+
5860
+ .studio-root[data-theme="dark"] .studio-ai-composer textarea::placeholder,
5861
+ .studio-root[data-theme="dark"] .studio-ai-composer textarea:disabled::placeholder {
5862
+ color: var(--studio-vscode-muted);
5863
+ opacity: 1;
5864
+ }
5865
+
5866
+ .studio-root[data-theme="dark"] .studio-ai-hint kbd {
5867
+ border-color: var(--studio-vscode-border-strong);
5868
+ background: #252526;
5869
+ color: var(--studio-vscode-muted);
5870
+ }
5871
+
5872
+ .studio-root[data-theme="dark"] .studio-ai-send-button:disabled {
5873
+ border-color: var(--studio-vscode-border-strong);
5874
+ background: #252526;
5875
+ color: var(--studio-vscode-muted);
5876
+ opacity: 1;
5877
+ }
5878
+
5879
+ .studio-ai-input-shell:focus-within {
5880
+ border-color: var(--studio-vscode-focus);
5881
+ box-shadow: 0 0 0 1px var(--studio-vscode-focus);
5882
+ }
5883
+
5884
+ .studio-statusbar {
5885
+ align-items: center;
5886
+ display: flex;
5887
+ gap: 14px;
5888
+ min-width: 0;
5889
+ min-height: 22px;
5890
+ overflow: hidden;
5891
+ background: var(--studio-vscode-status);
5892
+ color: #ffffff;
5893
+ font-size: 11px;
5894
+ padding: 0 10px;
5895
+ }
5896
+
5897
+ .studio-statusbar span {
5898
+ align-items: center;
5899
+ display: inline-flex;
5900
+ gap: 5px;
5901
+ min-width: 0;
5902
+ overflow: hidden;
5903
+ text-overflow: ellipsis;
5904
+ white-space: nowrap;
5905
+ }
5906
+
5907
+ .studio-statusbar .dashicons {
5908
+ font-size: 13px;
5909
+ width: 13px;
5910
+ height: 13px;
5911
+ }
5912
+
5913
+ .studio-statusbar-spacer {
5914
+ flex: 1 1 auto;
5915
+ }
5916
+
5917
+ .studio-root .studio-playground-version-backdrop {
5918
+ inset: 35px 0 22px;
5919
+ }
5920
+
5921
+ /* ===================================================================
5922
+ * Responsive
5923
+ * =================================================================== */
5924
+
5925
+ @media screen and (max-width: 1200px) {
5926
+ #dashboard-widgets {
5927
+ grid-template-columns: 1fr;
5928
+ }
5929
+ }
5930
+
5931
+ @media screen and (max-width: 960px) {
5932
+ .ab-command {
5933
+ min-width: auto;
5934
+ }
5935
+ .ab-command-label,
5936
+ .ab-kbd {
5937
+ display: none;
5938
+ }
5939
+
5940
+ .ps-welcome-panel .welcome-panel-header {
5941
+ padding: 30px 28px 42px;
5942
+ }
5943
+
5944
+ .ps-welcome-panel h2 {
5945
+ font-size: 34px;
5946
+ }
5947
+
5948
+ .ps-welcome-panel .welcome-panel-header p {
5949
+ font-size: 16px;
5950
+ }
5951
+
5952
+ .ps-welcome-panel .welcome-panel-column-container {
5953
+ grid-template-columns: 1fr;
5954
+ gap: 20px;
5955
+ }
5956
+
5957
+ .studio-main {
5958
+ grid-template-columns:
5959
+ 48px
5960
+ var(--studio-files-width, 260px)
5961
+ 6px
5962
+ minmax(0, 1fr)
5963
+ 6px
5964
+ var(--studio-ai-width, 330px);
5965
+ }
5966
+
5967
+ .studio-root.is-files-collapsed.has-secondary-sidebar .studio-main {
5968
+ grid-template-columns: 48px minmax(0, 1fr) 6px var(--studio-ai-width, 330px);
5969
+ }
5970
+
5971
+ .studio-root.has-files.is-secondary-sidebar-collapsed .studio-main {
5972
+ grid-template-columns: 48px var(--studio-files-width, 260px) 6px minmax(0, 1fr);
5973
+ }
5974
+
5975
+ .studio-root.is-files-collapsed.is-secondary-sidebar-collapsed .studio-main {
5976
+ grid-template-columns: 48px minmax(0, 1fr);
5977
+ }
5978
+
5979
+ .studio-preview-empty {
5980
+ gap: 18px;
5981
+ padding: 24px;
5982
+ }
5983
+
5984
+ .studio-preview-shell {
5985
+ width: min(300px, 44vw);
5986
+ min-width: 220px;
5987
+ }
5988
+
5989
+ .studio-preview-empty-copy {
5990
+ max-width: 280px;
5991
+ }
5992
+ }
5993
+
5994
+ @media screen and (max-width: 782px) {
5995
+ :root {
5996
+ --wp-admin--admin-bar--height: 46px;
5997
+ --wp-sidebar-width: 190px;
5998
+ }
5999
+
6000
+ body {
6001
+ min-width: 0;
6002
+ }
6003
+
6004
+ .ab-brand-name {
6005
+ font-size: 15px;
6006
+ }
6007
+
6008
+ #adminmenuback,
6009
+ #adminmenuwrap,
6010
+ #adminmenu {
6011
+ position: relative;
6012
+ width: 100%;
6013
+ height: auto;
6014
+ }
6015
+
6016
+ #adminmenuback {
6017
+ display: none;
6018
+ }
6019
+
6020
+ #adminmenuwrap {
6021
+ position: relative;
6022
+ top: 0;
6023
+ }
6024
+
6025
+ #wpcontent {
6026
+ margin-left: 0;
6027
+ padding-left: 12px;
6028
+ padding-right: 12px;
6029
+ }
6030
+
6031
+ body[data-active-view="studio"] #wpcontent {
6032
+ padding-left: 0;
6033
+ padding-right: 0;
6034
+ }
6035
+
6036
+ .studio-main,
6037
+ .studio-root.has-files.has-secondary-sidebar .studio-main,
6038
+ .studio-root.is-files-collapsed.has-secondary-sidebar .studio-main,
6039
+ .studio-root.has-files.is-secondary-sidebar-collapsed .studio-main,
6040
+ .studio-root.is-files-collapsed.is-secondary-sidebar-collapsed .studio-main {
6041
+ position: relative;
6042
+ grid-template-columns: 48px minmax(0, 1fr);
6043
+ }
6044
+
6045
+ .studio-main > .studio-resizer-h {
6046
+ display: none;
6047
+ }
6048
+
6049
+ .studio-files,
6050
+ .studio-ai {
6051
+ position: absolute;
6052
+ top: 0;
6053
+ bottom: 0;
6054
+ z-index: 12;
6055
+ width: min(320px, calc(100vw - 72px));
6056
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
6057
+ }
6058
+
6059
+ .studio-files {
6060
+ left: 48px;
6061
+ }
6062
+
6063
+ .studio-ai {
6064
+ right: 0;
6065
+ }
6066
+
6067
+ .studio-title-actions .studio-icon-button span:last-child,
6068
+ .studio-title-actions .studio-action-button span:last-child,
6069
+ .studio-title-actions .studio-play-tab-button span:last-child,
6070
+ .studio-title-actions .studio-theme-switch-label {
6071
+ display: none;
6072
+ }
6073
+
6074
+ .studio-title-actions .studio-preview-state {
6075
+ display: none;
6076
+ }
6077
+
6078
+ .studio-title-actions .studio-theme-switch {
6079
+ padding: 0 6px;
6080
+ }
6081
+
6082
+ .ps-settings-row {
6083
+ grid-template-columns: 1fr;
6084
+ }
6085
+
6086
+ .inline-form {
6087
+ display: flex;
6088
+ margin-top: 8px;
6089
+ width: 100%;
6090
+ }
6091
+
6092
+ .inline-form input[type="text"] {
6093
+ width: 100%;
6094
+ }
6095
+
6096
+ .ps-welcome-panel .welcome-panel-header {
6097
+ padding: 24px 20px 32px;
6098
+ }
6099
+
6100
+ .ps-welcome-panel h2 {
6101
+ font-size: 28px;
6102
+ }
6103
+
6104
+ .ps-welcome-panel .welcome-panel-header p {
6105
+ font-size: 14px;
6106
+ }
6107
+
6108
+ .ps-welcome-panel .welcome-panel-column-container {
6109
+ padding: 18px;
6110
+ }
6111
+
6112
+ .ps-welcome-panel .welcome-panel-column {
6113
+ grid-template-columns: 44px minmax(0, 1fr);
6114
+ gap: 14px;
6115
+ }
6116
+
6117
+ .ps-welcome-icon,
6118
+ .ps-skeleton-welcome-icon {
6119
+ width: 44px;
6120
+ height: 44px;
6121
+ }
6122
+
6123
+ .ps-welcome-icon .dashicons {
6124
+ font-size: 20px;
6125
+ width: 20px;
6126
+ height: 20px;
6127
+ }
6128
+
6129
+ .ps-dashboard-widgets-wrap {
6130
+ margin: 0;
6131
+ }
6132
+
6133
+ #dashboard-widgets .meta-box-sortables {
6134
+ margin: 0 0 16px;
6135
+ }
6136
+
6137
+ #dashboard-widgets .postbox-header {
6138
+ align-items: center;
6139
+ }
6140
+
6141
+ .ps-postbox-actions {
6142
+ padding: 8px 10px 8px 0;
6143
+ }
6144
+
6145
+ .ps-plugin-row {
6146
+ grid-template-columns: 1fr;
6147
+ gap: 6px;
6148
+ }
6149
+
6150
+ .ps-plugin-meta {
6151
+ justify-content: flex-start;
6152
+ }
6153
+
6154
+ .studio-empty-state {
6155
+ grid-template-columns: 1fr;
6156
+ align-content: start;
6157
+ gap: 18px;
6158
+ max-width: 100%;
6159
+ padding: 28px 16px;
6160
+ }
6161
+
6162
+ .studio-empty-copy h1 {
6163
+ font-size: 26px;
6164
+ }
6165
+
6166
+ .studio-empty-panel {
6167
+ align-self: stretch;
6168
+ }
6169
+
6170
+ .studio-empty-picker {
6171
+ grid-template-columns: 1fr;
6172
+ max-width: none;
6173
+ }
6174
+
6175
+ .studio-empty-footer {
6176
+ justify-self: start;
6177
+ text-align: left;
6178
+ }
6179
+
6180
+ .studio-preview-empty {
6181
+ align-content: center;
6182
+ display: grid;
6183
+ gap: 18px;
6184
+ justify-items: center;
6185
+ text-align: center;
6186
+ }
6187
+
6188
+ .studio-preview-shell {
6189
+ width: min(360px, 100%);
6190
+ min-width: 0;
6191
+ }
6192
+
6193
+ .studio-preview-empty-copy {
6194
+ justify-items: center;
6195
+ }
6196
+
6197
+ .studio-title {
6198
+ display: none;
6199
+ }
6200
+
6201
+ .widefat thead {
6202
+ display: none;
6203
+ }
6204
+
6205
+ .widefat tbody tr {
6206
+ display: block;
6207
+ padding: 8px 0;
6208
+ border-bottom: 1px solid var(--wp-border);
6209
+ }
6210
+
6211
+ .widefat tbody td {
6212
+ display: grid;
6213
+ grid-template-columns: 112px minmax(0, 1fr);
6214
+ gap: 10px;
6215
+ border: 0;
6216
+ padding: 6px 14px;
6217
+ }
6218
+
6219
+ .widefat tbody td::before {
6220
+ content: attr(data-colname);
6221
+ color: var(--wp-text-soft);
6222
+ font-weight: 600;
6223
+ }
6224
+
6225
+ .widefat tbody td.column-primary {
6226
+ display: block;
6227
+ }
6228
+
6229
+ .widefat tbody td.column-primary::before {
6230
+ content: none;
6231
+ }
6232
+
6233
+ .row-actions {
6234
+ opacity: 1;
6235
+ visibility: visible;
6236
+ }
6237
+
6238
+ #detail-panel {
6239
+ width: 100%;
6240
+ }
6241
+ }
6242
+
6243
+ /* View transitions for modern browsers */
6244
+ @supports (view-transition-name: root) {
6245
+ ::view-transition-old(root),
6246
+ ::view-transition-new(root) {
6247
+ animation-duration: 0.18s;
6248
+ }
6249
+ }
6250
+
6251
+ @keyframes ps-spin {
6252
+ to {
6253
+ transform: rotate(360deg);
5258
6254
  }
6255
+ }
6256
+
6257
+ code {
6258
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
6259
+ font-size: 12px;
6260
+ color: var(--wp-text);
6261
+ background: var(--wp-surface-soft);
6262
+ padding: 1px 6px;
6263
+ border-radius: var(--wp-radius-s);
6264
+ border: 1px solid var(--wp-border-soft);
6265
+ }
6266
+
6267
+ td code {
6268
+ font-size: 12px;
6269
+ background: transparent;
6270
+ border: 0;
6271
+ padding: 0;
6272
+ color: var(--wp-text-soft);
6273
+ }
6274
+
6275
+ .version-line {
6276
+ margin-top: 4px;
6277
+ font-size: 12px;
6278
+ color: var(--wp-text);
6279
+ }
6280
+
6281
+ .subsubsub .count {
6282
+ color: inherit;
6283
+ font-weight: 500;
6284
+ margin-left: 2px;
6285
+ }
6286
+
6287
+ .ul-disc {
6288
+ margin: 6px 0 12px 18px;
6289
+ padding: 0;
6290
+ list-style: disc outside;
6291
+ }
6292
+
6293
+ .ul-disc li {
6294
+ margin: 2px 0;
6295
+ }
6296
+
6297
+ /* ===================================================================
6298
+ * Plugin card grid (WP 7.0 plugin-card pattern)
6299
+ * =================================================================== */
6300
+
6301
+ .ps-card-shell {
6302
+ margin-top: 14px;
6303
+ }
6304
+
6305
+ .ps-card-toolbar {
6306
+ align-items: center;
6307
+ display: flex;
6308
+ justify-content: space-between;
6309
+ gap: 12px;
6310
+ margin: 0 0 14px;
6311
+ color: var(--wp-text-soft);
6312
+ font-size: 13px;
6313
+ }
6314
+
6315
+ .ps-card-toolbar-count {
6316
+ align-items: center;
6317
+ display: inline-flex;
6318
+ gap: 8px;
6319
+ font-weight: 500;
6320
+ color: var(--wp-heading);
6321
+ }
6322
+
6323
+ .ps-card-toolbar-count .dashicons {
6324
+ color: var(--wp-text-muted);
6325
+ }
6326
+
6327
+ .ps-card-toolbar-hint {
6328
+ color: var(--wp-text-muted);
6329
+ font-size: 12px;
6330
+ }
6331
+
6332
+ .ps-plugin-card-grid {
6333
+ display: grid;
6334
+ gap: 16px;
6335
+ grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
6336
+ align-items: stretch;
6337
+ }
6338
+
6339
+ .ps-plugin-card {
6340
+ display: flex;
6341
+ flex-direction: column;
6342
+ gap: 12px;
6343
+ padding: 18px 18px 16px;
6344
+ border: 1px solid var(--wp-border);
6345
+ border-radius: var(--wp-radius-m);
6346
+ background: var(--wp-surface);
6347
+ box-shadow: var(--wp-shadow-sm);
6348
+ transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
6349
+ position: relative;
6350
+ }
6351
+
6352
+ .ps-plugin-card:hover {
6353
+ box-shadow: var(--wp-shadow-md);
6354
+ transform: translateY(-1px);
6355
+ border-color: var(--wp-border-strong);
6356
+ }
6357
+
6358
+ .ps-plugin-card.is-missing {
6359
+ opacity: 0.72;
6360
+ border-style: dashed;
6361
+ }
6362
+
6363
+ .ps-plugin-card-header {
6364
+ display: flex;
6365
+ gap: 12px;
6366
+ align-items: flex-start;
6367
+ }
6368
+
6369
+ .ps-plugin-card-icon {
6370
+ flex: 0 0 auto;
6371
+ width: 44px;
6372
+ height: 44px;
6373
+ border-radius: var(--wp-radius-m);
6374
+ background: linear-gradient(135deg, var(--wp-admin-theme-color), var(--wp-admin-theme-color-darker-20));
6375
+ color: #ffffff;
6376
+ display: inline-flex;
6377
+ align-items: center;
6378
+ justify-content: center;
6379
+ font-weight: 600;
6380
+ font-size: 14px;
6381
+ letter-spacing: 0.02em;
6382
+ }
6383
+
6384
+ .ps-plugin-card-title {
6385
+ flex: 1 1 auto;
6386
+ min-width: 0;
6387
+ }
6388
+
6389
+ .ps-plugin-card-title h2 {
6390
+ font-size: 15px;
6391
+ font-weight: 600;
6392
+ margin: 0;
6393
+ color: var(--wp-heading);
6394
+ word-break: break-word;
6395
+ }
6396
+
6397
+ .ps-plugin-card-link {
6398
+ background: none;
6399
+ border: 0;
6400
+ padding: 0;
6401
+ color: var(--wp-admin-theme-color);
6402
+ cursor: pointer;
6403
+ font: inherit;
6404
+ text-align: left;
6405
+ }
6406
+
6407
+ .ps-plugin-card-link:hover,
6408
+ .ps-plugin-card-link:focus-visible {
6409
+ color: var(--wp-admin-theme-color-darker-10);
6410
+ text-decoration: underline;
6411
+ outline: none;
6412
+ }
6413
+
6414
+ .ps-plugin-card-byline {
6415
+ margin: 2px 0 0;
6416
+ font-size: 12px;
6417
+ color: var(--wp-text-muted);
6418
+ white-space: nowrap;
6419
+ overflow: hidden;
6420
+ text-overflow: ellipsis;
6421
+ }
6422
+
6423
+ .ps-plugin-card-status {
6424
+ display: flex;
6425
+ flex-wrap: wrap;
6426
+ gap: 5px;
6427
+ }
6428
+
6429
+ .ps-plugin-card-meta {
6430
+ display: grid;
6431
+ gap: 8px 16px;
6432
+ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
6433
+ margin: 0;
6434
+ font-size: 12px;
6435
+ }
6436
+
6437
+ .ps-plugin-card-meta dt {
6438
+ color: var(--wp-text-muted);
6439
+ text-transform: uppercase;
6440
+ letter-spacing: 0.04em;
6441
+ font-size: 11px;
6442
+ margin: 0;
6443
+ }
6444
+
6445
+ .ps-plugin-card-meta dd {
6446
+ margin: 1px 0 0;
6447
+ color: var(--wp-heading);
6448
+ font-weight: 500;
6449
+ font-size: 13px;
6450
+ }
6451
+
6452
+ .ps-plugin-card-path {
6453
+ display: block;
6454
+ max-width: 100%;
6455
+ overflow: hidden;
6456
+ text-overflow: ellipsis;
6457
+ white-space: nowrap;
6458
+ background: var(--wp-surface-soft);
6459
+ border: 1px solid var(--wp-border-soft);
6460
+ border-radius: var(--wp-radius-s);
6461
+ color: var(--wp-text-soft);
6462
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
6463
+ font-size: 11px;
6464
+ padding: 4px 8px;
6465
+ }
6466
+
6467
+ .ps-plugin-card-footer {
6468
+ display: flex;
6469
+ flex-wrap: wrap;
6470
+ align-items: center;
6471
+ gap: 8px;
6472
+ margin-top: auto;
6473
+ }
6474
+
6475
+ .ps-plugin-card-primary {
6476
+ align-items: center;
6477
+ display: inline-flex;
6478
+ gap: 6px;
6479
+ }
6480
+
6481
+ .ps-plugin-card-secondary {
6482
+ background: transparent;
6483
+ border: 0;
6484
+ padding: 0;
6485
+ color: var(--wp-admin-theme-color);
6486
+ cursor: pointer;
6487
+ font: inherit;
6488
+ font-size: 12px;
6489
+ }
6490
+
6491
+ .ps-plugin-card-secondary:hover,
6492
+ .ps-plugin-card-secondary:focus-visible {
6493
+ color: var(--wp-admin-theme-color-darker-10);
6494
+ text-decoration: underline;
6495
+ outline: none;
6496
+ }
6497
+
6498
+ .ps-plugin-card-secondary[disabled] {
6499
+ opacity: 0.45;
6500
+ cursor: not-allowed;
6501
+ pointer-events: none;
6502
+ }
6503
+
6504
+ .ps-plugin-card-muted {
6505
+ color: var(--wp-text-muted);
6506
+ }
6507
+
6508
+ /* Kebab menu */
6509
+
6510
+ .ps-kebab-wrap {
6511
+ position: relative;
6512
+ margin-left: auto;
6513
+ }
6514
+
6515
+ .ps-kebab-button {
6516
+ display: inline-flex;
6517
+ align-items: center;
6518
+ justify-content: center;
6519
+ width: 28px;
6520
+ height: 28px;
6521
+ border: 1px solid transparent;
6522
+ border-radius: var(--wp-radius-m);
6523
+ background: transparent;
6524
+ color: var(--wp-text-soft);
6525
+ cursor: pointer;
6526
+ }
6527
+
6528
+ .ps-kebab-button:hover,
6529
+ .ps-kebab-button:focus-visible {
6530
+ background: var(--wp-surface-soft);
6531
+ border-color: var(--wp-border);
6532
+ outline: none;
6533
+ }
6534
+
6535
+ .ps-kebab-menu {
6536
+ position: absolute;
6537
+ right: 0;
6538
+ top: calc(100% + 4px);
6539
+ min-width: 200px;
6540
+ background: var(--wp-surface);
6541
+ border: 1px solid var(--wp-border-strong);
6542
+ border-radius: var(--wp-radius-m);
6543
+ box-shadow: var(--wp-shadow-lg);
6544
+ padding: 4px;
6545
+ z-index: 30;
6546
+ display: flex;
6547
+ flex-direction: column;
6548
+ }
5259
6549
 
5260
- .ps-welcome-panel .welcome-panel-header {
5261
- padding: 24px 20px 32px;
5262
- }
6550
+ .ps-kebab-menu[hidden] {
6551
+ display: none;
6552
+ }
5263
6553
 
5264
- .ps-welcome-panel h2 {
5265
- font-size: 28px;
5266
- }
6554
+ .ps-kebab-menu button {
6555
+ display: inline-flex;
6556
+ align-items: center;
6557
+ gap: 8px;
6558
+ padding: 6px 8px;
6559
+ border: 0;
6560
+ background: transparent;
6561
+ border-radius: var(--wp-radius-s);
6562
+ color: var(--wp-text);
6563
+ cursor: pointer;
6564
+ font: inherit;
6565
+ text-align: left;
6566
+ }
5267
6567
 
5268
- .ps-welcome-panel .welcome-panel-header p {
5269
- font-size: 14px;
5270
- }
6568
+ .ps-kebab-menu button:hover,
6569
+ .ps-kebab-menu button:focus-visible {
6570
+ background: var(--wp-surface-soft);
6571
+ outline: none;
6572
+ }
5271
6573
 
5272
- .ps-welcome-panel .welcome-panel-column-container {
5273
- padding: 18px;
5274
- }
6574
+ .ps-kebab-menu-danger {
6575
+ color: var(--wp-error);
6576
+ }
5275
6577
 
5276
- .ps-welcome-panel .welcome-panel-column {
5277
- grid-template-columns: 44px minmax(0, 1fr);
5278
- gap: 14px;
5279
- }
6578
+ .ps-kebab-menu-danger:hover,
6579
+ .ps-kebab-menu-danger:focus-visible {
6580
+ background: var(--wp-error-bg);
6581
+ color: var(--wp-error);
6582
+ }
5280
6583
 
5281
- .ps-welcome-icon,
5282
- .ps-skeleton-welcome-icon {
5283
- width: 44px;
5284
- height: 44px;
5285
- }
6584
+ /* ===================================================================
6585
+ * Release management board (top-level view)
6586
+ * =================================================================== */
5286
6587
 
5287
- .ps-welcome-icon .dashicons {
5288
- font-size: 20px;
5289
- width: 20px;
5290
- height: 20px;
5291
- }
6588
+ .ps-release-board-shell {
6589
+ margin-top: 14px;
6590
+ }
5292
6591
 
5293
- .ps-dashboard-widgets-wrap {
5294
- margin: 0;
5295
- }
6592
+ .ps-release-board {
6593
+ display: grid;
6594
+ gap: 16px;
6595
+ grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
6596
+ }
5296
6597
 
5297
- #dashboard-widgets .meta-box-sortables {
5298
- margin: 0 0 16px;
5299
- }
6598
+ .ps-release-board-card {
6599
+ display: flex;
6600
+ flex-direction: column;
6601
+ gap: 12px;
6602
+ background: var(--wp-surface);
6603
+ border: 1px solid var(--wp-border);
6604
+ border-radius: var(--wp-radius-m);
6605
+ box-shadow: var(--wp-shadow-sm);
6606
+ padding: 18px;
6607
+ }
5300
6608
 
5301
- #dashboard-widgets .postbox-header {
5302
- align-items: center;
5303
- }
6609
+ .ps-release-board-card.is-blocked {
6610
+ border-color: var(--wp-error);
6611
+ }
5304
6612
 
5305
- .ps-postbox-actions {
5306
- padding: 8px 10px 8px 0;
5307
- }
6613
+ .ps-release-board-card.is-missing {
6614
+ border-style: dashed;
6615
+ opacity: 0.72;
6616
+ }
5308
6617
 
5309
- .ps-plugin-row {
5310
- grid-template-columns: 1fr;
5311
- gap: 6px;
5312
- }
6618
+ .ps-release-board-card-header {
6619
+ display: flex;
6620
+ align-items: center;
6621
+ gap: 12px;
6622
+ }
5313
6623
 
5314
- .ps-plugin-meta {
5315
- justify-content: flex-start;
5316
- }
6624
+ .ps-release-board-title h2 {
6625
+ font-size: 15px;
6626
+ margin: 0;
6627
+ color: var(--wp-heading);
6628
+ }
5317
6629
 
5318
- .studio-main {
5319
- grid-template-columns: 1fr;
5320
- grid-template-rows: 170px minmax(0, 1fr) 320px;
5321
- }
6630
+ .ps-release-board-status {
6631
+ margin-left: auto;
6632
+ display: flex;
6633
+ flex-wrap: wrap;
6634
+ gap: 4px;
6635
+ }
5322
6636
 
5323
- .studio-resizer-h {
5324
- display: none;
5325
- }
6637
+ .ps-release-board-meta {
6638
+ display: grid;
6639
+ gap: 6px 16px;
6640
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
6641
+ margin: 0;
6642
+ padding: 8px 10px;
6643
+ background: var(--wp-surface-soft);
6644
+ border: 1px solid var(--wp-border-soft);
6645
+ border-radius: var(--wp-radius-s);
6646
+ }
5326
6647
 
5327
- .studio-empty-state {
5328
- grid-template-columns: 1fr;
5329
- align-content: start;
5330
- gap: 18px;
5331
- max-width: 100%;
5332
- padding: 28px 16px;
5333
- }
6648
+ .ps-release-board-meta-row {
6649
+ margin: 0;
6650
+ display: flex;
6651
+ flex-direction: column;
6652
+ }
5334
6653
 
5335
- .studio-empty-copy h1 {
5336
- font-size: 26px;
5337
- }
6654
+ .ps-release-board-meta-row dt {
6655
+ font-size: 11px;
6656
+ color: var(--wp-text-muted);
6657
+ text-transform: uppercase;
6658
+ letter-spacing: 0.04em;
6659
+ }
5338
6660
 
5339
- .studio-empty-panel {
5340
- align-self: stretch;
5341
- }
6661
+ .ps-release-board-meta-row dd {
6662
+ margin: 0;
6663
+ font-size: 13px;
6664
+ color: var(--wp-heading);
6665
+ font-weight: 500;
6666
+ }
5342
6667
 
5343
- .studio-empty-picker {
5344
- grid-template-columns: 1fr;
5345
- max-width: none;
5346
- }
6668
+ .ps-release-board-messages {
6669
+ margin: 0;
6670
+ padding: 0 0 0 16px;
6671
+ font-size: 12px;
6672
+ color: var(--wp-text-soft);
6673
+ }
6674
+
6675
+ .ps-release-board-card-footer {
6676
+ display: flex;
6677
+ align-items: center;
6678
+ gap: 10px;
6679
+ margin-top: auto;
6680
+ }
6681
+
6682
+ /* ===================================================================
6683
+ * Studio sidebar segmented tabs (AI Helper ⟷ Release)
6684
+ * =================================================================== */
6685
+
6686
+ .studio-sidebar-tabs.ps-segmented {
6687
+ display: inline-flex;
6688
+ align-self: stretch;
6689
+ margin: 0;
6690
+ padding: 4px;
6691
+ background: var(--studio-vscode-side-bg);
6692
+ border: 0;
6693
+ border-bottom: 1px solid var(--studio-vscode-border);
6694
+ border-radius: 0;
6695
+ gap: 2px;
6696
+ }
6697
+
6698
+ .ps-segmented-option {
6699
+ flex: 1;
6700
+ display: inline-flex;
6701
+ align-items: center;
6702
+ justify-content: center;
6703
+ gap: 6px;
6704
+ padding: 6px 10px;
6705
+ border: 0;
6706
+ border-radius: 3px;
6707
+ background: transparent;
6708
+ color: var(--studio-vscode-muted);
6709
+ cursor: pointer;
6710
+ font: inherit;
6711
+ font-size: 12px;
6712
+ font-weight: 500;
6713
+ transition: background 0.12s ease, color 0.12s ease;
6714
+ }
6715
+
6716
+ .ps-segmented-option:hover,
6717
+ .ps-segmented-option:focus-visible {
6718
+ background: var(--studio-vscode-hover);
6719
+ color: var(--studio-vscode-active);
6720
+ outline: none;
6721
+ }
6722
+
6723
+ .ps-segmented-option.is-active {
6724
+ background: var(--studio-vscode-segment-active);
6725
+ color: var(--studio-vscode-active);
6726
+ box-shadow: none;
6727
+ }
6728
+
6729
+ .ps-segmented-option.is-active .dashicons {
6730
+ color: inherit;
6731
+ }
6732
+
6733
+ .studio-sidebar-pane {
6734
+ display: flex;
6735
+ flex-direction: column;
6736
+ flex: 1 1 auto;
6737
+ min-height: 0;
6738
+ }
6739
+
6740
+ /* ===================================================================
6741
+ * Release funnel (Studio right sidebar) — WP 7.0 Modern
6742
+ *
6743
+ * Visual rules:
6744
+ * - Step card is always neutral surface (--wp-surface) with hairline
6745
+ * --wp-border. Status is communicated via inline pills only.
6746
+ * - Hairline 1px connector along the left in --wp-border-soft.
6747
+ * - Sticky step headers get a subtle 1px bottom border when scrolled
6748
+ * (no shadow). 12px rhythm between steps, 8px gutter inside steps.
6749
+ * - All inline buttons use .button-small (28px). Dashicons sit left.
6750
+ * =================================================================== */
6751
+
6752
+ .studio-release-pane {
6753
+ display: flex;
6754
+ flex-direction: column;
6755
+ flex: 1 1 auto;
6756
+ min-height: 0;
6757
+ padding: 8px 12px 12px;
6758
+ gap: 8px;
6759
+ overflow-y: auto;
6760
+ scrollbar-gutter: stable;
6761
+ font-size: 12px;
6762
+ color: var(--wp-text-soft);
6763
+ }
5347
6764
 
5348
- .studio-empty-footer {
5349
- justify-self: start;
5350
- text-align: left;
5351
- }
6765
+ .studio-release-empty {
6766
+ display: flex;
6767
+ flex-direction: column;
6768
+ align-items: center;
6769
+ justify-content: center;
6770
+ text-align: center;
6771
+ padding: 24px 14px;
6772
+ color: var(--wp-text-soft);
6773
+ gap: 6px;
6774
+ }
5352
6775
 
5353
- .studio-preview-empty {
5354
- align-content: center;
5355
- display: grid;
5356
- gap: 18px;
5357
- justify-items: center;
5358
- text-align: center;
5359
- }
6776
+ .studio-release-empty .dashicons {
6777
+ font-size: 24px;
6778
+ width: 24px;
6779
+ height: 24px;
6780
+ color: var(--wp-text-muted);
6781
+ }
5360
6782
 
5361
- .studio-preview-shell {
5362
- width: min(360px, 100%);
5363
- min-width: 0;
5364
- }
6783
+ .studio-release-empty strong {
6784
+ color: var(--wp-heading);
6785
+ font-size: 13px;
6786
+ font-weight: 600;
6787
+ }
5365
6788
 
5366
- .studio-preview-empty-copy {
5367
- justify-items: center;
5368
- }
6789
+ .studio-release-empty p {
6790
+ margin: 0;
6791
+ font-size: 12px;
6792
+ }
5369
6793
 
5370
- .studio-files {
5371
- border-right: 0;
5372
- border-bottom: 1px solid #dcdcde;
5373
- }
6794
+ .studio-release-header {
6795
+ display: flex;
6796
+ align-items: center;
6797
+ justify-content: space-between;
6798
+ padding: 4px 2px 2px;
6799
+ }
5374
6800
 
5375
- .studio-ai {
5376
- border-left: 0;
5377
- border-top: 1px solid #dcdcde;
5378
- }
6801
+ .studio-release-title {
6802
+ min-width: 0;
6803
+ display: flex;
6804
+ flex-direction: column;
6805
+ gap: 1px;
6806
+ }
5379
6807
 
5380
- .studio-title {
5381
- display: none;
5382
- }
6808
+ .studio-release-title strong {
6809
+ display: block;
6810
+ font-size: 12px;
6811
+ text-transform: uppercase;
6812
+ letter-spacing: 0.06em;
6813
+ color: var(--wp-heading);
6814
+ }
5383
6815
 
5384
- .widefat thead {
5385
- display: none;
5386
- }
6816
+ .studio-release-title small {
6817
+ color: var(--wp-text-muted);
6818
+ font-size: 11px;
6819
+ overflow: hidden;
6820
+ text-overflow: ellipsis;
6821
+ white-space: nowrap;
6822
+ }
5387
6823
 
5388
- .widefat tbody tr {
5389
- display: block;
5390
- padding: 8px 0;
5391
- border-bottom: 1px solid var(--wp-border);
5392
- }
6824
+ .ps-release-funnel {
6825
+ margin: 0;
6826
+ padding: 0 0 0 18px;
6827
+ list-style: none;
6828
+ display: flex;
6829
+ flex-direction: column;
6830
+ gap: 12px;
6831
+ position: relative;
6832
+ }
5393
6833
 
5394
- .widefat tbody td {
5395
- display: grid;
5396
- grid-template-columns: 112px minmax(0, 1fr);
5397
- gap: 10px;
5398
- border: 0;
5399
- padding: 6px 14px;
5400
- }
6834
+ .ps-release-funnel::before {
6835
+ content: "";
6836
+ position: absolute;
6837
+ top: 10px;
6838
+ bottom: 10px;
6839
+ left: 9px;
6840
+ width: 1px;
6841
+ background: var(--wp-border-soft);
6842
+ z-index: 0;
6843
+ }
5401
6844
 
5402
- .widefat tbody td::before {
5403
- content: attr(data-colname);
5404
- color: var(--wp-text-soft);
5405
- font-weight: 600;
5406
- }
6845
+ .ps-release-step {
6846
+ position: relative;
6847
+ border: 1px solid var(--wp-border);
6848
+ border-radius: var(--wp-radius-m);
6849
+ background: var(--wp-surface);
6850
+ box-shadow: var(--wp-shadow-sm);
6851
+ overflow: hidden;
6852
+ }
5407
6853
 
5408
- .widefat tbody td.column-primary {
5409
- display: block;
5410
- }
6854
+ /* Hairline tick from the funnel rail into each step */
6855
+ .ps-release-step-connector {
6856
+ position: absolute;
6857
+ top: 14px;
6858
+ left: -10px;
6859
+ width: 9px;
6860
+ height: 1px;
6861
+ background: var(--wp-border-soft);
6862
+ z-index: 0;
6863
+ }
5411
6864
 
5412
- .widefat tbody td.column-primary::before {
5413
- content: none;
5414
- }
6865
+ .ps-release-step-header {
6866
+ display: flex;
6867
+ align-items: center;
6868
+ gap: 8px;
6869
+ padding: 8px 10px;
6870
+ position: sticky;
6871
+ top: 0;
6872
+ z-index: 2;
6873
+ background: var(--wp-surface);
6874
+ border-bottom: 1px solid transparent;
6875
+ transition: border-color 0.12s ease;
6876
+ }
5415
6877
 
5416
- .row-actions {
5417
- opacity: 1;
5418
- visibility: visible;
5419
- }
6878
+ .studio-release-pane:not(:hover) .ps-release-step-header {
6879
+ /* Keep the rule definition stable for scroll-state detection. */
6880
+ }
5420
6881
 
5421
- #detail-panel {
5422
- width: 100%;
5423
- }
6882
+ .ps-release-step:not(:first-of-type) .ps-release-step-header {
6883
+ border-bottom-color: var(--wp-border-soft);
5424
6884
  }
5425
6885
 
5426
- /* View transitions for modern browsers */
5427
- @supports (view-transition-name: root) {
5428
- ::view-transition-old(root),
5429
- ::view-transition-new(root) {
5430
- animation-duration: 0.18s;
5431
- }
6886
+ .ps-release-step-marker {
6887
+ display: inline-flex;
6888
+ align-items: center;
6889
+ justify-content: center;
6890
+ width: 20px;
6891
+ height: 20px;
6892
+ border-radius: 50%;
6893
+ background: var(--wp-surface);
6894
+ border: 1px solid var(--wp-border-strong);
6895
+ color: var(--wp-text-soft);
6896
+ font-weight: 600;
6897
+ font-size: 11px;
6898
+ flex: 0 0 auto;
6899
+ font-feature-settings: "tnum" 1;
5432
6900
  }
5433
6901
 
5434
- @keyframes ps-spin {
5435
- to {
5436
- transform: rotate(360deg);
5437
- }
6902
+ .ps-release-step-heading {
6903
+ display: flex;
6904
+ flex-direction: column;
6905
+ min-width: 0;
6906
+ gap: 1px;
5438
6907
  }
5439
6908
 
5440
- code {
5441
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
6909
+ .ps-release-step-heading strong {
5442
6910
  font-size: 12px;
5443
- color: var(--wp-text);
5444
- background: var(--wp-surface-soft);
5445
- padding: 1px 6px;
5446
- border-radius: var(--wp-radius-s);
5447
- border: 1px solid var(--wp-border-soft);
6911
+ color: var(--wp-heading);
6912
+ display: block;
6913
+ font-weight: 600;
6914
+ letter-spacing: 0.01em;
5448
6915
  }
5449
6916
 
5450
- td code {
5451
- font-size: 12px;
5452
- background: transparent;
5453
- border: 0;
5454
- padding: 0;
5455
- color: var(--wp-text-soft);
6917
+ .ps-release-step-heading small {
6918
+ font-size: 11px;
6919
+ color: var(--wp-text-muted);
6920
+ overflow: hidden;
6921
+ text-overflow: ellipsis;
6922
+ white-space: nowrap;
5456
6923
  }
5457
6924
 
5458
- .version-line {
5459
- margin-top: 4px;
6925
+ .ps-release-step-body {
6926
+ position: relative;
6927
+ z-index: 1;
6928
+ display: flex;
6929
+ flex-direction: column;
6930
+ gap: 8px;
6931
+ padding: 8px 10px 10px;
5460
6932
  font-size: 12px;
5461
- color: var(--wp-text);
6933
+ color: var(--wp-text-soft);
6934
+ border-top: 1px solid var(--wp-border-soft);
5462
6935
  }
5463
6936
 
5464
- .subsubsub .count {
5465
- color: inherit;
5466
- font-weight: 500;
5467
- margin-left: 2px;
6937
+ .ps-release-step-grid {
6938
+ display: grid;
6939
+ grid-template-columns: 1fr 1fr;
6940
+ gap: 4px 10px;
6941
+ margin: 0;
5468
6942
  }
5469
6943
 
5470
- .ul-disc {
5471
- margin: 6px 0 12px 18px;
5472
- padding: 0;
5473
- list-style: disc outside;
6944
+ .ps-release-step-grid div {
6945
+ display: flex;
6946
+ flex-direction: column;
6947
+ min-width: 0;
5474
6948
  }
5475
6949
 
5476
- .ul-disc li {
5477
- margin: 2px 0;
6950
+ .ps-release-step-grid dt {
6951
+ font-size: 10px;
6952
+ color: var(--wp-text-muted);
6953
+ text-transform: uppercase;
6954
+ letter-spacing: 0.06em;
5478
6955
  }
5479
6956
 
5480
- /* ===================================================================
5481
- * Plugin card grid (WP 7.0 plugin-card pattern)
5482
- * =================================================================== */
5483
-
5484
- .ps-card-shell {
5485
- margin-top: 14px;
6957
+ .ps-release-step-grid dd {
6958
+ margin: 0;
6959
+ font-size: 12px;
6960
+ color: var(--wp-heading);
6961
+ font-weight: 500;
6962
+ overflow: hidden;
6963
+ text-overflow: ellipsis;
6964
+ white-space: nowrap;
5486
6965
  }
5487
6966
 
5488
- .ps-card-toolbar {
5489
- align-items: center;
6967
+ .ps-release-step-bumps {
5490
6968
  display: flex;
5491
- justify-content: space-between;
5492
- gap: 12px;
5493
- margin: 0 0 14px;
5494
- color: var(--wp-text-soft);
5495
- font-size: 13px;
6969
+ flex-wrap: wrap;
6970
+ gap: 4px;
5496
6971
  }
5497
6972
 
5498
- .ps-card-toolbar-count {
6973
+ .ps-release-step-bumps .button,
6974
+ .ps-release-step-newtag .button,
6975
+ .ps-release-step-custom .button,
6976
+ .ps-release-publish-options .button {
5499
6977
  align-items: center;
5500
6978
  display: inline-flex;
5501
- gap: 8px;
5502
- font-weight: 500;
5503
- color: var(--wp-heading);
6979
+ gap: 4px;
6980
+ min-height: 26px;
6981
+ padding: 0 8px;
6982
+ font-size: 12px;
6983
+ line-height: 1.2;
5504
6984
  }
5505
6985
 
5506
- .ps-card-toolbar-count .dashicons {
5507
- color: var(--wp-text-muted);
6986
+ .ps-release-step-bumps .button .dashicons,
6987
+ .ps-release-step-newtag .button .dashicons,
6988
+ .ps-release-step-custom .button .dashicons,
6989
+ .ps-release-publish-options .button .dashicons,
6990
+ .ps-release-tag-actions .button .dashicons {
6991
+ font-size: 14px;
6992
+ width: 14px;
6993
+ height: 14px;
5508
6994
  }
5509
6995
 
5510
- .ps-card-toolbar-hint {
5511
- color: var(--wp-text-muted);
5512
- font-size: 12px;
6996
+ .ps-release-bump-button.is-busy .dashicons-update {
6997
+ animation: ps-spin 0.85s linear infinite;
5513
6998
  }
5514
6999
 
5515
- .ps-plugin-card-grid {
5516
- display: grid;
5517
- gap: 16px;
5518
- grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
5519
- align-items: stretch;
7000
+ .ps-release-bump-button.is-success {
7001
+ border-color: var(--wp-success);
7002
+ color: var(--wp-success);
5520
7003
  }
5521
7004
 
5522
- .ps-plugin-card {
7005
+ .ps-release-step-custom,
7006
+ .ps-release-step-newtag {
5523
7007
  display: flex;
5524
- flex-direction: column;
5525
- gap: 12px;
5526
- padding: 18px 18px 16px;
5527
- border: 1px solid var(--wp-border);
5528
- border-radius: var(--wp-radius-m);
5529
- background: var(--wp-surface);
5530
- box-shadow: var(--wp-shadow-sm);
5531
- transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
5532
- position: relative;
7008
+ align-items: flex-end;
7009
+ gap: 6px;
5533
7010
  }
5534
7011
 
5535
- .ps-plugin-card:hover {
5536
- box-shadow: var(--wp-shadow-md);
5537
- transform: translateY(-1px);
5538
- border-color: var(--wp-border-strong);
7012
+ .ps-release-step-custom label,
7013
+ .ps-release-step-newtag label {
7014
+ flex: 1 1 auto;
7015
+ display: flex;
7016
+ flex-direction: column;
7017
+ gap: 2px;
7018
+ font-size: 10px;
7019
+ color: var(--wp-text-muted);
7020
+ text-transform: uppercase;
7021
+ letter-spacing: 0.06em;
5539
7022
  }
5540
7023
 
5541
- .ps-plugin-card.is-missing {
5542
- opacity: 0.72;
5543
- border-style: dashed;
7024
+ .ps-release-step-custom input,
7025
+ .ps-release-step-newtag input {
7026
+ padding: 4px 8px;
7027
+ border: 1px solid var(--wp-border-strong);
7028
+ border-radius: var(--wp-radius-s);
7029
+ font-size: 12px;
7030
+ color: var(--wp-heading);
7031
+ background: var(--wp-surface);
7032
+ height: 26px;
7033
+ text-transform: none;
7034
+ letter-spacing: 0;
5544
7035
  }
5545
7036
 
5546
- .ps-plugin-card-header {
5547
- display: flex;
5548
- gap: 12px;
5549
- align-items: flex-start;
7037
+ .ps-release-step-custom input:focus-visible,
7038
+ .ps-release-step-newtag input:focus-visible {
7039
+ outline: none;
7040
+ box-shadow: var(--wp-focus-ring);
7041
+ border-color: var(--wp-admin-theme-color);
5550
7042
  }
5551
7043
 
5552
- .ps-plugin-card-icon {
5553
- flex: 0 0 auto;
5554
- width: 44px;
5555
- height: 44px;
5556
- border-radius: var(--wp-radius-m);
5557
- background: linear-gradient(135deg, var(--wp-admin-theme-color), var(--wp-admin-theme-color-darker-20));
5558
- color: #ffffff;
5559
- display: inline-flex;
7044
+ .ps-release-inline-error {
7045
+ margin: 0;
7046
+ font-size: 11px;
7047
+ color: var(--wp-error);
7048
+ display: flex;
5560
7049
  align-items: center;
5561
- justify-content: center;
5562
- font-weight: 600;
5563
- font-size: 14px;
5564
- letter-spacing: 0.02em;
7050
+ gap: 4px;
5565
7051
  }
5566
7052
 
5567
- .ps-plugin-card-title {
5568
- flex: 1 1 auto;
5569
- min-width: 0;
7053
+ .ps-release-inline-error .dashicons {
7054
+ font-size: 14px;
7055
+ width: 14px;
7056
+ height: 14px;
5570
7057
  }
5571
7058
 
5572
- .ps-plugin-card-title h2 {
5573
- font-size: 15px;
5574
- font-weight: 600;
7059
+ .ps-release-tag-ready,
7060
+ .ps-release-tag-local-note {
7061
+ align-items: center;
7062
+ display: inline-flex;
7063
+ gap: 5px;
5575
7064
  margin: 0;
5576
- color: var(--wp-heading);
5577
- word-break: break-word;
7065
+ color: var(--wp-success);
7066
+ font-size: 11px;
7067
+ font-weight: 600;
5578
7068
  }
5579
7069
 
5580
- .ps-plugin-card-link {
5581
- background: none;
5582
- border: 0;
5583
- padding: 0;
5584
- color: var(--wp-admin-theme-color);
5585
- cursor: pointer;
5586
- font: inherit;
5587
- text-align: left;
7070
+ .ps-release-tag-ready {
7071
+ padding: 6px 8px;
7072
+ border: 1px solid rgba(0, 112, 23, 0.22);
7073
+ border-radius: var(--wp-radius-s);
7074
+ background: var(--wp-success-bg);
5588
7075
  }
5589
7076
 
5590
- .ps-plugin-card-link:hover,
5591
- .ps-plugin-card-link:focus-visible {
5592
- color: var(--wp-admin-theme-color-darker-10);
5593
- text-decoration: underline;
5594
- outline: none;
7077
+ .ps-release-tag-ready .dashicons {
7078
+ font-size: 14px;
7079
+ width: 14px;
7080
+ height: 14px;
5595
7081
  }
5596
7082
 
5597
- .ps-plugin-card-byline {
5598
- margin: 2px 0 0;
5599
- font-size: 12px;
5600
- color: var(--wp-text-muted);
5601
- white-space: nowrap;
5602
- overflow: hidden;
5603
- text-overflow: ellipsis;
7083
+ .ps-release-tag-ready.is-blocked {
7084
+ border-color: rgba(178, 98, 0, 0.26);
7085
+ background: var(--wp-warning-bg);
7086
+ color: var(--wp-warning);
5604
7087
  }
5605
7088
 
5606
- .ps-plugin-card-status {
5607
- display: flex;
5608
- flex-wrap: wrap;
5609
- gap: 5px;
7089
+ .ps-release-switch-conflict {
7090
+ display: grid;
7091
+ gap: 7px;
7092
+ padding: 8px;
7093
+ border: 1px solid var(--wp-warning);
7094
+ border-radius: var(--wp-radius-s);
7095
+ background: var(--wp-warning-bg);
5610
7096
  }
5611
7097
 
5612
- .ps-plugin-card-meta {
5613
- display: grid;
5614
- gap: 8px 16px;
5615
- grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
7098
+ .ps-release-switch-conflict p,
7099
+ .ps-release-conflict-actions {
5616
7100
  margin: 0;
5617
- font-size: 12px;
7101
+ display: flex;
7102
+ align-items: center;
7103
+ gap: 6px;
7104
+ flex-wrap: wrap;
5618
7105
  }
5619
7106
 
5620
- .ps-plugin-card-meta dt {
5621
- color: var(--wp-text-muted);
5622
- text-transform: uppercase;
5623
- letter-spacing: 0.04em;
7107
+ .ps-release-switch-conflict p {
5624
7108
  font-size: 11px;
5625
- margin: 0;
7109
+ color: var(--wp-warning);
5626
7110
  }
5627
7111
 
5628
- .ps-plugin-card-meta dd {
5629
- margin: 1px 0 0;
5630
- color: var(--wp-heading);
5631
- font-weight: 500;
5632
- font-size: 13px;
7112
+ .ps-release-conflict-actions .dashicons {
7113
+ font-size: 14px;
7114
+ width: 14px;
7115
+ height: 14px;
5633
7116
  }
5634
7117
 
5635
- .ps-plugin-card-path {
5636
- display: block;
5637
- max-width: 100%;
5638
- overflow: hidden;
5639
- text-overflow: ellipsis;
5640
- white-space: nowrap;
5641
- background: var(--wp-surface-soft);
7118
+ .ps-release-tag-list {
7119
+ margin: 0;
7120
+ padding: 0;
7121
+ list-style: none;
7122
+ display: flex;
7123
+ flex-direction: column;
5642
7124
  border: 1px solid var(--wp-border-soft);
5643
7125
  border-radius: var(--wp-radius-s);
5644
- color: var(--wp-text-soft);
5645
- font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
5646
- font-size: 11px;
5647
- padding: 4px 8px;
7126
+ background: var(--wp-surface);
7127
+ overflow: hidden;
5648
7128
  }
5649
7129
 
5650
- .ps-plugin-card-footer {
7130
+ .ps-release-tag-row {
5651
7131
  display: flex;
5652
- flex-wrap: wrap;
5653
7132
  align-items: center;
5654
- gap: 8px;
5655
- margin-top: auto;
7133
+ gap: 6px;
7134
+ padding: 5px 8px;
7135
+ border-bottom: 1px solid var(--wp-border-soft);
7136
+ min-height: 30px;
7137
+ }
7138
+
7139
+ .ps-release-tag-row:last-child {
7140
+ border-bottom: 0;
7141
+ }
7142
+
7143
+ .ps-release-tag-row.is-current {
7144
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
7145
+ }
7146
+
7147
+ .ps-release-tag-row.is-switching {
7148
+ opacity: 0.7;
5656
7149
  }
5657
7150
 
5658
- .ps-plugin-card-primary {
5659
- align-items: center;
7151
+ .ps-release-tag-name {
5660
7152
  display: inline-flex;
5661
- gap: 6px;
7153
+ align-items: center;
7154
+ gap: 5px;
7155
+ font-weight: 500;
7156
+ color: var(--wp-heading);
7157
+ flex: 1 1 auto;
7158
+ min-width: 0;
7159
+ font-size: 12px;
5662
7160
  }
5663
7161
 
5664
- .ps-plugin-card-secondary {
5665
- background: transparent;
5666
- border: 0;
5667
- padding: 0;
5668
- color: var(--wp-admin-theme-color);
5669
- cursor: pointer;
5670
- font: inherit;
5671
- font-size: 12px;
7162
+ .ps-release-tag-name .dashicons {
7163
+ color: var(--wp-text-muted);
7164
+ font-size: 14px;
7165
+ width: 14px;
7166
+ height: 14px;
5672
7167
  }
5673
7168
 
5674
- .ps-plugin-card-secondary:hover,
5675
- .ps-plugin-card-secondary:focus-visible {
5676
- color: var(--wp-admin-theme-color-darker-10);
5677
- text-decoration: underline;
5678
- outline: none;
7169
+ .ps-release-tag-current,
7170
+ .ps-release-tag-uncommitted {
7171
+ font-size: 9px;
7172
+ text-transform: uppercase;
7173
+ letter-spacing: 0.06em;
7174
+ padding: 1px 6px;
7175
+ border-radius: 9999px;
7176
+ font-weight: 600;
5679
7177
  }
5680
7178
 
5681
- .ps-plugin-card-secondary[disabled] {
5682
- opacity: 0.45;
5683
- cursor: not-allowed;
5684
- pointer-events: none;
7179
+ .ps-release-tag-current {
7180
+ background: var(--wp-admin-theme-color);
7181
+ color: #ffffff;
5685
7182
  }
5686
7183
 
5687
- .ps-plugin-card-muted {
5688
- color: var(--wp-text-muted);
7184
+ .ps-release-tag-uncommitted {
7185
+ background: var(--wp-warning-bg);
7186
+ color: var(--wp-warning);
5689
7187
  }
5690
7188
 
5691
- /* Kebab menu */
7189
+ .ps-release-tag-spinner {
7190
+ display: inline-flex;
7191
+ align-items: center;
7192
+ gap: 4px;
7193
+ font-size: 10px;
7194
+ color: var(--wp-text-muted);
7195
+ }
5692
7196
 
5693
- .ps-kebab-wrap {
5694
- position: relative;
5695
- margin-left: auto;
7197
+ .ps-release-tag-spinner .dashicons {
7198
+ animation: ps-spin 0.85s linear infinite;
7199
+ font-size: 12px;
7200
+ width: 12px;
7201
+ height: 12px;
5696
7202
  }
5697
7203
 
5698
- .ps-kebab-button {
7204
+ .ps-release-tag-actions {
5699
7205
  display: inline-flex;
5700
- align-items: center;
5701
- justify-content: center;
5702
- width: 28px;
5703
- height: 28px;
5704
- border: 1px solid transparent;
5705
- border-radius: var(--wp-radius-m);
5706
- background: transparent;
5707
- color: var(--wp-text-soft);
5708
- cursor: pointer;
7206
+ gap: 4px;
5709
7207
  }
5710
7208
 
5711
- .ps-kebab-button:hover,
5712
- .ps-kebab-button:focus-visible {
5713
- background: var(--wp-surface-soft);
5714
- border-color: var(--wp-border);
5715
- outline: none;
7209
+ .ps-release-tag-actions .button.is-confirming,
7210
+ .ps-release-confirm-button.is-confirming {
7211
+ background: var(--wp-warning);
7212
+ border-color: var(--wp-warning);
7213
+ color: #ffffff;
5716
7214
  }
5717
7215
 
5718
- .ps-kebab-menu {
5719
- position: absolute;
5720
- right: 0;
5721
- top: calc(100% + 4px);
5722
- min-width: 200px;
5723
- background: var(--wp-surface);
5724
- border: 1px solid var(--wp-border-strong);
5725
- border-radius: var(--wp-radius-m);
5726
- box-shadow: var(--wp-shadow-lg);
5727
- padding: 4px;
5728
- z-index: 30;
5729
- display: flex;
5730
- flex-direction: column;
7216
+ .ps-release-tag-empty {
7217
+ padding: 10px;
7218
+ text-align: center;
7219
+ color: var(--wp-text-muted);
7220
+ font-size: 12px;
5731
7221
  }
5732
7222
 
5733
- .ps-kebab-menu[hidden] {
5734
- display: none;
7223
+ .ps-release-validate-list {
7224
+ margin: 0;
7225
+ padding: 0;
7226
+ list-style: none;
7227
+ display: flex;
7228
+ flex-direction: column;
7229
+ gap: 4px;
5735
7230
  }
5736
7231
 
5737
- .ps-kebab-menu button {
5738
- display: inline-flex;
7232
+ .ps-release-validate-list li {
7233
+ display: grid;
7234
+ grid-template-columns: 1fr auto auto;
5739
7235
  align-items: center;
5740
7236
  gap: 8px;
5741
- padding: 6px 8px;
5742
- border: 0;
5743
- background: transparent;
7237
+ padding: 5px 8px;
7238
+ background: var(--wp-surface);
7239
+ border: 1px solid var(--wp-border-soft);
5744
7240
  border-radius: var(--wp-radius-s);
5745
- color: var(--wp-text);
5746
- cursor: pointer;
5747
- font: inherit;
5748
- text-align: left;
7241
+ font-size: 12px;
7242
+ min-height: 30px;
5749
7243
  }
5750
7244
 
5751
- .ps-kebab-menu button:hover,
5752
- .ps-kebab-menu button:focus-visible {
5753
- background: var(--wp-surface-soft);
5754
- outline: none;
7245
+ .ps-release-validate-list .dashicons {
7246
+ margin-right: 4px;
7247
+ color: var(--wp-text-muted);
7248
+ font-size: 14px;
7249
+ width: 14px;
7250
+ height: 14px;
5755
7251
  }
5756
7252
 
5757
- .ps-kebab-menu-danger {
5758
- color: var(--wp-error);
7253
+ .ps-release-validate-state {
7254
+ font-size: 10px;
7255
+ color: var(--wp-text-muted);
7256
+ text-transform: uppercase;
7257
+ letter-spacing: 0.06em;
5759
7258
  }
5760
7259
 
5761
- .ps-kebab-menu-danger:hover,
5762
- .ps-kebab-menu-danger:focus-visible {
5763
- background: var(--wp-error-bg);
5764
- color: var(--wp-error);
7260
+ .ps-release-publish-guide {
7261
+ display: grid;
7262
+ gap: 3px;
7263
+ padding: 7px 8px;
7264
+ border: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.18);
7265
+ border-radius: var(--wp-radius-s);
7266
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.05);
7267
+ font-size: 11px;
5765
7268
  }
5766
7269
 
5767
- /* ===================================================================
5768
- * Release management board (top-level view)
5769
- * =================================================================== */
7270
+ .ps-release-publish-guide strong {
7271
+ color: var(--wp-heading);
7272
+ font-size: 12px;
7273
+ }
5770
7274
 
5771
- .ps-release-board-shell {
5772
- margin-top: 14px;
7275
+ .ps-release-publish-guide span {
7276
+ color: var(--wp-text-muted);
7277
+ line-height: 1.35;
5773
7278
  }
5774
7279
 
5775
- .ps-release-board {
7280
+ .ps-release-publish-options {
5776
7281
  display: grid;
5777
- gap: 16px;
5778
- grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
7282
+ gap: 6px;
5779
7283
  }
5780
7284
 
5781
- .ps-release-board-card {
5782
- display: flex;
5783
- flex-direction: column;
5784
- gap: 12px;
7285
+ .ps-release-publish-option {
7286
+ width: 100%;
7287
+ min-height: 68px;
7288
+ display: grid;
7289
+ grid-template-columns: 24px minmax(0, 1fr) auto;
7290
+ align-items: center;
7291
+ gap: 8px;
7292
+ padding: 8px;
7293
+ border: 1px solid var(--wp-border-soft);
7294
+ border-radius: var(--wp-radius-s);
5785
7295
  background: var(--wp-surface);
5786
- border: 1px solid var(--wp-border);
5787
- border-radius: var(--wp-radius-m);
5788
- box-shadow: var(--wp-shadow-sm);
5789
- padding: 18px;
7296
+ color: var(--wp-text);
7297
+ text-align: left;
7298
+ cursor: pointer;
5790
7299
  }
5791
7300
 
5792
- .ps-release-board-card.is-blocked {
5793
- border-color: var(--wp-error);
7301
+ .ps-release-publish-option:hover,
7302
+ .ps-release-publish-option:focus-visible {
7303
+ border-color: rgba(var(--wp-admin-theme-color--rgb), 0.45);
7304
+ box-shadow: 0 0 0 1px rgba(var(--wp-admin-theme-color--rgb), 0.12);
7305
+ outline: none;
5794
7306
  }
5795
7307
 
5796
- .ps-release-board-card.is-missing {
5797
- border-style: dashed;
7308
+ .ps-release-publish-option:disabled {
7309
+ cursor: default;
5798
7310
  opacity: 0.72;
5799
7311
  }
5800
7312
 
5801
- .ps-release-board-card-header {
5802
- display: flex;
7313
+ .ps-release-publish-option.is-active,
7314
+ .ps-release-publish-option.is-selected {
7315
+ border-color: var(--wp-admin-theme-color);
7316
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
7317
+ }
7318
+
7319
+ .ps-release-option-icon {
7320
+ width: 24px;
7321
+ height: 24px;
7322
+ display: inline-flex;
5803
7323
  align-items: center;
5804
- gap: 12px;
7324
+ justify-content: center;
7325
+ color: var(--wp-admin-theme-color);
7326
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
7327
+ border-radius: var(--wp-radius-s);
5805
7328
  }
5806
7329
 
5807
- .ps-release-board-title h2 {
7330
+ .ps-release-option-icon.dashicons {
5808
7331
  font-size: 15px;
5809
- margin: 0;
5810
- color: var(--wp-heading);
7332
+ line-height: 1;
5811
7333
  }
5812
7334
 
5813
- .ps-release-board-status {
5814
- margin-left: auto;
7335
+ .ps-release-option-content {
7336
+ min-width: 0;
7337
+ display: grid;
7338
+ gap: 3px;
7339
+ }
7340
+
7341
+ .ps-release-option-title {
5815
7342
  display: flex;
5816
- flex-wrap: wrap;
7343
+ align-items: center;
5817
7344
  gap: 4px;
7345
+ flex-wrap: wrap;
7346
+ color: var(--wp-heading);
7347
+ font-size: 12px;
7348
+ line-height: 1.2;
5818
7349
  }
5819
7350
 
5820
- .ps-release-board-meta {
5821
- display: grid;
5822
- gap: 6px 16px;
5823
- grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
5824
- margin: 0;
5825
- padding: 8px 10px;
5826
- background: var(--wp-surface-soft);
5827
- border: 1px solid var(--wp-border-soft);
5828
- border-radius: var(--wp-radius-s);
7351
+ .ps-release-option-title strong {
7352
+ font-weight: 600;
5829
7353
  }
5830
7354
 
5831
- .ps-release-board-meta-row {
5832
- margin: 0;
5833
- display: flex;
5834
- flex-direction: column;
7355
+ .ps-release-option-title em {
7356
+ font-style: normal;
7357
+ font-size: 9px;
7358
+ text-transform: uppercase;
7359
+ letter-spacing: 0.06em;
7360
+ color: var(--wp-admin-theme-color);
7361
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
7362
+ border-radius: 999px;
7363
+ padding: 1px 5px;
5835
7364
  }
5836
7365
 
5837
- .ps-release-board-meta-row dt {
5838
- font-size: 11px;
7366
+ .ps-release-option-copy {
5839
7367
  color: var(--wp-text-muted);
5840
- text-transform: uppercase;
5841
- letter-spacing: 0.04em;
7368
+ font-size: 11px;
7369
+ line-height: 1.35;
5842
7370
  }
5843
7371
 
5844
- .ps-release-board-meta-row dd {
5845
- margin: 0;
5846
- font-size: 13px;
5847
- color: var(--wp-heading);
5848
- font-weight: 500;
7372
+ .ps-release-option-action {
7373
+ justify-self: end;
7374
+ color: var(--wp-admin-theme-color);
7375
+ font-size: 10px;
7376
+ font-weight: 600;
7377
+ line-height: 1.2;
7378
+ text-align: right;
7379
+ max-width: 58px;
5849
7380
  }
5850
7381
 
5851
- .ps-release-board-messages {
5852
- margin: 0;
5853
- padding: 0 0 0 16px;
5854
- font-size: 12px;
5855
- color: var(--wp-text-soft);
7382
+ .ps-release-publish-summary {
7383
+ padding: 8px;
7384
+ border: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.16);
7385
+ border-radius: var(--wp-radius-s);
7386
+ background: linear-gradient(
7387
+ 180deg,
7388
+ rgba(var(--wp-admin-theme-color--rgb), 0.06),
7389
+ rgba(var(--wp-admin-theme-color--rgb), 0.025)
7390
+ );
7391
+ display: flex;
7392
+ flex-direction: column;
7393
+ gap: 8px;
5856
7394
  }
5857
7395
 
5858
- .ps-release-board-card-footer {
5859
- display: flex;
7396
+ .ps-release-publish-summary.is-running {
7397
+ display: grid;
7398
+ grid-template-columns: 18px minmax(0, 1fr);
5860
7399
  align-items: center;
5861
- gap: 10px;
5862
- margin-top: auto;
5863
7400
  }
5864
7401
 
5865
- /* ===================================================================
5866
- * Studio sidebar segmented tabs (AI Helper ⟷ Release)
5867
- * =================================================================== */
7402
+ .ps-release-publish-summary.is-running .dashicons {
7403
+ animation: ps-spin 0.85s linear infinite;
7404
+ color: var(--wp-admin-theme-color);
7405
+ }
5868
7406
 
5869
- .studio-sidebar-tabs.ps-segmented {
5870
- display: inline-flex;
5871
- align-self: stretch;
5872
- margin: 12px 14px 6px;
5873
- padding: 2px;
5874
- background: var(--wp-surface-soft);
5875
- border: 1px solid var(--wp-border);
5876
- border-radius: var(--wp-radius-m);
5877
- gap: 2px;
7407
+ .ps-release-publish-result {
7408
+ display: grid;
7409
+ grid-template-columns: 22px minmax(0, 1fr);
7410
+ align-items: start;
7411
+ gap: 7px;
5878
7412
  }
5879
7413
 
5880
- .ps-segmented-option {
5881
- flex: 1;
7414
+ .ps-release-publish-result > .dashicons {
7415
+ width: 22px;
7416
+ height: 22px;
5882
7417
  display: inline-flex;
5883
7418
  align-items: center;
5884
7419
  justify-content: center;
5885
- gap: 6px;
5886
- padding: 6px 10px;
5887
- border: 0;
5888
- border-radius: calc(var(--wp-radius-m) - 1px);
5889
- background: transparent;
5890
- color: var(--wp-text-soft);
5891
- cursor: pointer;
5892
- font: inherit;
5893
- font-size: 12px;
5894
- font-weight: 500;
5895
- transition: background 0.12s ease, color 0.12s ease;
7420
+ color: var(--wp-admin-theme-color);
7421
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
7422
+ border-radius: var(--wp-radius-s);
7423
+ font-size: 14px;
5896
7424
  }
5897
7425
 
5898
- .ps-segmented-option:hover {
5899
- color: var(--wp-text);
7426
+ .ps-release-publish-summary p {
7427
+ margin: 0;
7428
+ font-size: 12px;
5900
7429
  }
5901
7430
 
5902
- .ps-segmented-option.is-active {
5903
- background: var(--wp-admin-theme-color);
5904
- color: #ffffff;
5905
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
7431
+ .ps-release-publish-summary strong {
7432
+ color: var(--wp-heading);
5906
7433
  }
5907
7434
 
5908
- .ps-segmented-option.is-active .dashicons {
5909
- color: inherit;
7435
+ .ps-release-publish-summary small {
7436
+ display: block;
7437
+ color: var(--wp-text-muted);
7438
+ font-size: 11px;
7439
+ line-height: 1.35;
5910
7440
  }
5911
7441
 
5912
- .studio-sidebar-pane {
5913
- display: flex;
5914
- flex-direction: column;
5915
- flex: 1 1 auto;
5916
- min-height: 0;
7442
+ .ps-release-step-error {
7443
+ margin: 0;
7444
+ padding: 6px 8px;
7445
+ border-radius: var(--wp-radius-s);
7446
+ background: var(--wp-error-bg);
7447
+ color: var(--wp-error);
7448
+ font-size: 11px;
7449
+ border: 1px solid rgba(204, 24, 24, 0.18);
5917
7450
  }
5918
7451
 
5919
- /* ===================================================================
5920
- * Release funnel (Studio right sidebar) — WP 7.0 Modern
5921
- *
5922
- * Visual rules:
5923
- * - Step card is always neutral surface (--wp-surface) with hairline
5924
- * --wp-border. Status is communicated via inline pills only.
5925
- * - Hairline 1px connector along the left in --wp-border-soft.
5926
- * - Sticky step headers get a subtle 1px bottom border when scrolled
5927
- * (no shadow). 12px rhythm between steps, 8px gutter inside steps.
5928
- * - All inline buttons use .button-small (28px). Dashicons sit left.
5929
- * =================================================================== */
7452
+ .ps-release-step-muted {
7453
+ margin: 0;
7454
+ color: var(--wp-text-muted);
7455
+ font-style: italic;
7456
+ font-size: 11px;
7457
+ }
5930
7458
 
5931
- .studio-release-pane {
5932
- display: flex;
5933
- flex-direction: column;
5934
- flex: 1 1 auto;
5935
- min-height: 0;
5936
- padding: 8px 12px 12px;
5937
- gap: 8px;
5938
- overflow-y: auto;
5939
- scrollbar-gutter: stable;
5940
- font-size: 12px;
5941
- color: var(--wp-text-soft);
7459
+ /* Keep Studio's workbench dark even when later release styles use admin surfaces. */
7460
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) input,
7461
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) select,
7462
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) textarea,
7463
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) button {
7464
+ color-scheme: dark;
5942
7465
  }
5943
7466
 
5944
- .studio-release-empty {
5945
- display: flex;
5946
- flex-direction: column;
5947
- align-items: center;
5948
- justify-content: center;
5949
- text-align: center;
5950
- padding: 24px 14px;
5951
- color: var(--wp-text-soft);
5952
- gap: 6px;
7467
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button,
7468
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-secondary {
7469
+ border-color: var(--studio-vscode-border-strong);
7470
+ background: #252526;
7471
+ color: var(--studio-vscode-text);
5953
7472
  }
5954
7473
 
5955
- .studio-release-empty .dashicons {
5956
- font-size: 24px;
5957
- width: 24px;
5958
- height: 24px;
5959
- color: var(--wp-text-muted);
7474
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button:hover,
7475
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button:focus-visible,
7476
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-secondary:hover,
7477
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-secondary:focus-visible {
7478
+ border-color: #5a5a5a;
7479
+ background: #2d2d2d;
7480
+ color: var(--studio-vscode-active);
5960
7481
  }
5961
7482
 
5962
- .studio-release-empty strong {
5963
- color: var(--wp-heading);
5964
- font-size: 13px;
5965
- font-weight: 600;
7483
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-primary {
7484
+ border-color: var(--studio-vscode-focus);
7485
+ background: var(--studio-vscode-focus);
7486
+ color: #ffffff;
5966
7487
  }
5967
7488
 
5968
- .studio-release-empty p {
5969
- margin: 0;
5970
- font-size: 12px;
7489
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-primary:hover,
7490
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-primary:focus-visible {
7491
+ border-color: #106ebe;
7492
+ background: #106ebe;
7493
+ color: #ffffff;
5971
7494
  }
5972
7495
 
5973
- .studio-release-header {
5974
- display: flex;
5975
- align-items: center;
5976
- justify-content: space-between;
5977
- padding: 4px 2px 2px;
7496
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button:disabled,
7497
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-secondary:disabled,
7498
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-primary:disabled {
7499
+ border-color: #303030;
7500
+ background: #222222;
7501
+ color: #6f7378;
5978
7502
  }
5979
7503
 
5980
- .studio-release-title {
5981
- min-width: 0;
5982
- display: flex;
5983
- flex-direction: column;
5984
- gap: 1px;
7504
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-danger {
7505
+ border-color: #f14c4c;
7506
+ color: #ff8a80;
5985
7507
  }
5986
7508
 
5987
- .studio-release-title strong {
5988
- display: block;
5989
- font-size: 12px;
5990
- text-transform: uppercase;
5991
- letter-spacing: 0.06em;
5992
- color: var(--wp-heading);
7509
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-danger:hover,
7510
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .button-danger:focus-visible {
7511
+ border-color: #f14c4c;
7512
+ background: rgba(241, 76, 76, 0.16);
7513
+ color: #ffb3ad;
5993
7514
  }
5994
7515
 
5995
- .studio-release-title small {
5996
- color: var(--wp-text-muted);
5997
- font-size: 11px;
5998
- overflow: hidden;
5999
- text-overflow: ellipsis;
6000
- white-space: nowrap;
7516
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .studio-release-pane {
7517
+ background: var(--studio-vscode-side-bg);
7518
+ color: var(--studio-vscode-muted);
6001
7519
  }
6002
7520
 
6003
- .ps-release-funnel {
6004
- margin: 0;
6005
- padding: 0 0 0 18px;
6006
- list-style: none;
6007
- display: flex;
6008
- flex-direction: column;
6009
- gap: 12px;
6010
- position: relative;
7521
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .studio-release-empty,
7522
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .studio-release-empty p,
7523
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .studio-release-title small,
7524
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-heading small,
7525
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-body,
7526
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-grid dt,
7527
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-muted,
7528
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-guide span,
7529
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-option-copy,
7530
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-spinner,
7531
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-empty,
7532
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-validate-state,
7533
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-summary small {
7534
+ color: var(--studio-vscode-muted);
6011
7535
  }
6012
7536
 
6013
- .ps-release-funnel::before {
6014
- content: "";
6015
- position: absolute;
6016
- top: 10px;
6017
- bottom: 10px;
6018
- left: 9px;
6019
- width: 1px;
6020
- background: var(--wp-border-soft);
6021
- z-index: 0;
7537
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .studio-release-empty .dashicons,
7538
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-name .dashicons,
7539
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-validate-list .dashicons {
7540
+ color: #858585;
6022
7541
  }
6023
7542
 
6024
- .ps-release-step {
6025
- position: relative;
6026
- border: 1px solid var(--wp-border);
6027
- border-radius: var(--wp-radius-m);
6028
- background: var(--wp-surface);
6029
- box-shadow: var(--wp-shadow-sm);
6030
- overflow: hidden;
7543
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .studio-release-empty strong,
7544
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .studio-release-title strong,
7545
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-heading strong,
7546
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-grid dd,
7547
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-guide strong,
7548
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-option-title,
7549
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-name,
7550
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-summary strong {
7551
+ color: var(--studio-vscode-active);
6031
7552
  }
6032
7553
 
6033
- /* Hairline tick from the funnel rail into each step */
6034
- .ps-release-step-connector {
6035
- position: absolute;
6036
- top: 14px;
6037
- left: -10px;
6038
- width: 9px;
6039
- height: 1px;
6040
- background: var(--wp-border-soft);
6041
- z-index: 0;
7554
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-funnel::before,
7555
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-connector {
7556
+ background: var(--studio-vscode-border-strong);
6042
7557
  }
6043
7558
 
6044
- .ps-release-step-header {
6045
- display: flex;
6046
- align-items: center;
6047
- gap: 8px;
6048
- padding: 8px 10px;
6049
- position: sticky;
6050
- top: 0;
6051
- z-index: 2;
6052
- background: var(--wp-surface);
6053
- border-bottom: 1px solid transparent;
6054
- transition: border-color 0.12s ease;
7559
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step,
7560
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-list,
7561
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-validate-list li,
7562
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-option {
7563
+ border-color: var(--studio-vscode-border-strong);
7564
+ background: #1f1f1f;
7565
+ box-shadow: none;
6055
7566
  }
6056
7567
 
6057
- .studio-release-pane:not(:hover) .ps-release-step-header {
6058
- /* Keep the rule definition stable for scroll-state detection. */
7568
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-guide,
7569
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-option.is-active,
7570
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-option.is-selected {
7571
+ border-color: rgba(76, 194, 255, 0.32);
7572
+ background: rgba(76, 194, 255, 0.08);
6059
7573
  }
6060
7574
 
6061
- .ps-release-step:not(:first-of-type) .ps-release-step-header {
6062
- border-bottom-color: var(--wp-border-soft);
7575
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-summary {
7576
+ border-color: rgba(76, 194, 255, 0.22);
7577
+ background: linear-gradient(180deg, rgba(76, 194, 255, 0.09), rgba(76, 194, 255, 0.035));
6063
7578
  }
6064
7579
 
6065
- .ps-release-step-marker {
6066
- display: inline-flex;
6067
- align-items: center;
6068
- justify-content: center;
6069
- width: 20px;
6070
- height: 20px;
6071
- border-radius: 50%;
6072
- background: var(--wp-surface);
6073
- border: 1px solid var(--wp-border-strong);
6074
- color: var(--wp-text-soft);
6075
- font-weight: 600;
6076
- font-size: 11px;
6077
- flex: 0 0 auto;
6078
- font-feature-settings: "tnum" 1;
7580
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-option:hover,
7581
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-option:focus-visible {
7582
+ border-color: rgba(76, 194, 255, 0.56);
7583
+ box-shadow: 0 0 0 1px rgba(76, 194, 255, 0.1);
6079
7584
  }
6080
7585
 
6081
- .ps-release-step-heading {
6082
- display: flex;
6083
- flex-direction: column;
6084
- min-width: 0;
6085
- gap: 1px;
7586
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-option-icon,
7587
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-publish-result > .dashicons {
7588
+ color: #8bdcff;
7589
+ background: rgba(76, 194, 255, 0.12);
6086
7590
  }
6087
7591
 
6088
- .ps-release-step-heading strong {
6089
- font-size: 12px;
6090
- color: var(--wp-heading);
6091
- display: block;
6092
- font-weight: 600;
6093
- letter-spacing: 0.01em;
7592
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-option-action,
7593
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-option-title em {
7594
+ color: #8bdcff;
6094
7595
  }
6095
7596
 
6096
- .ps-release-step-heading small {
6097
- font-size: 11px;
6098
- color: var(--wp-text-muted);
6099
- overflow: hidden;
6100
- text-overflow: ellipsis;
6101
- white-space: nowrap;
7597
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-option-title em {
7598
+ background: rgba(76, 194, 255, 0.12);
6102
7599
  }
6103
7600
 
6104
- .ps-release-step-body {
6105
- position: relative;
6106
- z-index: 1;
6107
- display: flex;
6108
- flex-direction: column;
6109
- gap: 8px;
6110
- padding: 8px 10px 10px;
6111
- font-size: 12px;
6112
- color: var(--wp-text-soft);
6113
- border-top: 1px solid var(--wp-border-soft);
7601
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-header {
7602
+ background: #252526;
7603
+ border-bottom-color: transparent;
6114
7604
  }
6115
7605
 
6116
- .ps-release-step-grid {
6117
- display: grid;
6118
- grid-template-columns: 1fr 1fr;
6119
- gap: 4px 10px;
6120
- margin: 0;
7606
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step:not(:first-of-type) .ps-release-step-header,
7607
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-body,
7608
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-row {
7609
+ border-color: var(--studio-vscode-border);
6121
7610
  }
6122
7611
 
6123
- .ps-release-step-grid div {
6124
- display: flex;
6125
- flex-direction: column;
6126
- min-width: 0;
7612
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-marker {
7613
+ border-color: var(--studio-vscode-border-strong);
7614
+ background: #2d2d2d;
7615
+ color: var(--studio-vscode-text);
6127
7616
  }
6128
7617
 
6129
- .ps-release-step-grid dt {
6130
- font-size: 10px;
6131
- color: var(--wp-text-muted);
6132
- text-transform: uppercase;
6133
- letter-spacing: 0.06em;
7618
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-custom label,
7619
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-newtag label {
7620
+ color: var(--studio-vscode-muted);
6134
7621
  }
6135
7622
 
6136
- .ps-release-step-grid dd {
6137
- margin: 0;
6138
- font-size: 12px;
6139
- color: var(--wp-heading);
6140
- font-weight: 500;
6141
- overflow: hidden;
6142
- text-overflow: ellipsis;
6143
- white-space: nowrap;
7623
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-custom input,
7624
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-newtag input {
7625
+ border-color: var(--studio-vscode-border-strong);
7626
+ background: var(--studio-vscode-bg);
7627
+ color: var(--studio-vscode-active);
6144
7628
  }
6145
7629
 
6146
- .ps-release-step-bumps {
6147
- display: flex;
6148
- flex-wrap: wrap;
6149
- gap: 4px;
7630
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-custom input:focus-visible,
7631
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-newtag input:focus-visible {
7632
+ border-color: var(--studio-vscode-focus);
7633
+ box-shadow: 0 0 0 1px var(--studio-vscode-focus);
6150
7634
  }
6151
7635
 
6152
- .ps-release-step-bumps .button,
6153
- .ps-release-step-newtag .button,
6154
- .ps-release-step-custom .button,
6155
- .ps-release-publish-options .button {
6156
- align-items: center;
6157
- display: inline-flex;
6158
- gap: 4px;
6159
- min-height: 26px;
6160
- padding: 0 8px;
6161
- font-size: 12px;
6162
- line-height: 1.2;
7636
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-row.is-current {
7637
+ background: rgba(0, 120, 212, 0.16);
6163
7638
  }
6164
7639
 
6165
- .ps-release-step-bumps .button .dashicons,
6166
- .ps-release-step-newtag .button .dashicons,
6167
- .ps-release-step-custom .button .dashicons,
6168
- .ps-release-publish-options .button .dashicons,
6169
- .ps-release-tag-actions .button .dashicons {
6170
- font-size: 14px;
6171
- width: 14px;
6172
- height: 14px;
7640
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-switch-conflict {
7641
+ border-color: rgba(240, 184, 73, 0.56);
7642
+ background: rgba(240, 184, 73, 0.12);
6173
7643
  }
6174
7644
 
6175
- .ps-release-bump-button.is-busy .dashicons-update {
6176
- animation: ps-spin 0.85s linear infinite;
7645
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-switch-conflict p,
7646
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-uncommitted {
7647
+ color: #f0b849;
6177
7648
  }
6178
7649
 
6179
- .ps-release-bump-button.is-success {
6180
- border-color: var(--wp-success);
6181
- color: var(--wp-success);
7650
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-ready,
7651
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-local-note {
7652
+ color: #86efac;
6182
7653
  }
6183
7654
 
6184
- .ps-release-step-custom,
6185
- .ps-release-step-newtag {
6186
- display: flex;
6187
- align-items: flex-end;
6188
- gap: 6px;
7655
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-ready {
7656
+ border-color: rgba(134, 239, 172, 0.26);
7657
+ background: rgba(34, 197, 94, 0.12);
6189
7658
  }
6190
7659
 
6191
- .ps-release-step-custom label,
6192
- .ps-release-step-newtag label {
6193
- flex: 1 1 auto;
6194
- display: flex;
6195
- flex-direction: column;
6196
- gap: 2px;
6197
- font-size: 10px;
6198
- color: var(--wp-text-muted);
6199
- text-transform: uppercase;
6200
- letter-spacing: 0.06em;
7660
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-ready.is-blocked {
7661
+ border-color: rgba(240, 184, 73, 0.32);
7662
+ background: rgba(240, 184, 73, 0.12);
7663
+ color: #f0b849;
6201
7664
  }
6202
7665
 
6203
- .ps-release-step-custom input,
6204
- .ps-release-step-newtag input {
6205
- padding: 4px 8px;
6206
- border: 1px solid var(--wp-border-strong);
6207
- border-radius: var(--wp-radius-s);
6208
- font-size: 12px;
6209
- color: var(--wp-heading);
6210
- background: var(--wp-surface);
6211
- height: 26px;
6212
- text-transform: none;
6213
- letter-spacing: 0;
7666
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-tag-uncommitted {
7667
+ background: rgba(240, 184, 73, 0.16);
6214
7668
  }
6215
7669
 
6216
- .ps-release-step-custom input:focus-visible,
6217
- .ps-release-step-newtag input:focus-visible {
6218
- outline: none;
6219
- box-shadow: var(--wp-focus-ring);
6220
- border-color: var(--wp-admin-theme-color);
7670
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-inline-error,
7671
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-error {
7672
+ color: #ff8a80;
6221
7673
  }
6222
7674
 
6223
- .ps-release-inline-error {
6224
- margin: 0;
6225
- font-size: 11px;
6226
- color: var(--wp-error);
6227
- display: flex;
6228
- align-items: center;
6229
- gap: 4px;
7675
+ .studio-root[data-theme="dark"]:not(.studio-empty-root) .ps-release-step-error {
7676
+ border-color: rgba(241, 76, 76, 0.32);
7677
+ background: rgba(241, 76, 76, 0.14);
6230
7678
  }
6231
7679
 
6232
- .ps-release-inline-error .dashicons {
6233
- font-size: 14px;
6234
- width: 14px;
6235
- height: 14px;
7680
+ /* Light Studio theme */
7681
+ .studio-root[data-theme="light"]:not(.studio-empty-root) input,
7682
+ .studio-root[data-theme="light"]:not(.studio-empty-root) select,
7683
+ .studio-root[data-theme="light"]:not(.studio-empty-root) textarea,
7684
+ .studio-root[data-theme="light"]:not(.studio-empty-root) button {
7685
+ color-scheme: light;
6236
7686
  }
6237
7687
 
6238
- .ps-release-switch-conflict {
6239
- display: grid;
6240
- gap: 7px;
6241
- padding: 8px;
6242
- border: 1px solid var(--wp-warning);
6243
- border-radius: var(--wp-radius-s);
6244
- background: var(--wp-warning-bg);
7688
+ .studio-root[data-theme="light"] {
7689
+ background: var(--studio-vscode-bg);
7690
+ color: var(--studio-vscode-text);
6245
7691
  }
6246
7692
 
6247
- .ps-release-switch-conflict p,
6248
- .ps-release-conflict-actions {
6249
- margin: 0;
6250
- display: flex;
6251
- align-items: center;
6252
- gap: 6px;
6253
- flex-wrap: wrap;
7693
+ .studio-root[data-theme="light"] .studio-title strong,
7694
+ .studio-root[data-theme="light"] .studio-pane-header strong,
7695
+ .studio-root[data-theme="light"] .studio-secondary-header strong,
7696
+ .studio-root[data-theme="light"] .studio-ai-agent strong,
7697
+ .studio-root[data-theme="light"] .studio-ai-reply header span,
7698
+ .studio-root[data-theme="light"] .studio-ai-bubble header span,
7699
+ .studio-root[data-theme="light"] .studio-ai-empty strong {
7700
+ color: var(--studio-vscode-active);
6254
7701
  }
6255
7702
 
6256
- .ps-release-switch-conflict p {
6257
- font-size: 11px;
6258
- color: var(--wp-warning);
7703
+ .studio-root[data-theme="light"] .studio-title span,
7704
+ .studio-root[data-theme="light"] .studio-layout-button,
7705
+ .studio-root[data-theme="light"] .studio-pane-action,
7706
+ .studio-root[data-theme="light"] .studio-preview-state,
7707
+ .studio-root[data-theme="light"] #studio-editor-status,
7708
+ .studio-root[data-theme="light"] .studio-ai-status,
7709
+ .studio-root[data-theme="light"] .studio-ai-empty,
7710
+ .studio-root[data-theme="light"] .studio-ai-empty small,
7711
+ .studio-root[data-theme="light"] .studio-ai-context-chip,
7712
+ .studio-root[data-theme="light"] .studio-file-tabs-empty {
7713
+ color: var(--studio-vscode-muted);
6259
7714
  }
6260
7715
 
6261
- .ps-release-conflict-actions .dashicons {
6262
- font-size: 14px;
6263
- width: 14px;
6264
- height: 14px;
7716
+ .studio-root[data-theme="light"] .studio-titlebar,
7717
+ .studio-root[data-theme="light"] .studio-activitybar,
7718
+ .studio-root[data-theme="light"] .studio-pane-header,
7719
+ .studio-root[data-theme="light"] .studio-secondary-header,
7720
+ .studio-root[data-theme="light"] .studio-files,
7721
+ .studio-root[data-theme="light"] .studio-ai,
7722
+ .studio-root[data-theme="light"] .studio-ai-header,
7723
+ .studio-root[data-theme="light"] .studio-ai-context,
7724
+ .studio-root[data-theme="light"] .studio-ai-composer {
7725
+ border-color: var(--studio-vscode-border);
7726
+ background: var(--studio-vscode-side-bg);
7727
+ color: var(--studio-vscode-text);
6265
7728
  }
6266
7729
 
6267
- .ps-release-tag-list {
6268
- margin: 0;
6269
- padding: 0;
6270
- list-style: none;
6271
- display: flex;
6272
- flex-direction: column;
6273
- border: 1px solid var(--wp-border-soft);
6274
- border-radius: var(--wp-radius-s);
6275
- background: var(--wp-surface);
6276
- overflow: hidden;
7730
+ .studio-root[data-theme="light"] .studio-titlebar,
7731
+ .studio-root[data-theme="light"] .studio-activitybar {
7732
+ background: var(--studio-vscode-title-bg);
6277
7733
  }
6278
7734
 
6279
- .ps-release-tag-row {
6280
- display: flex;
6281
- align-items: center;
6282
- gap: 6px;
6283
- padding: 5px 8px;
6284
- border-bottom: 1px solid var(--wp-border-soft);
6285
- min-height: 30px;
7735
+ .studio-root[data-theme="light"] .studio-action-button,
7736
+ .studio-root[data-theme="light"] .studio-icon-button,
7737
+ .studio-root[data-theme="light"] .studio-theme-switch {
7738
+ border-color: var(--studio-vscode-border-strong);
7739
+ background: #ffffff;
7740
+ color: var(--studio-vscode-text);
6286
7741
  }
6287
7742
 
6288
- .ps-release-tag-row:last-child {
6289
- border-bottom: 0;
7743
+ .studio-root[data-theme="light"] .studio-action-button:hover,
7744
+ .studio-root[data-theme="light"] .studio-icon-button:hover,
7745
+ .studio-root[data-theme="light"] .studio-icon-button[aria-pressed="true"],
7746
+ .studio-root[data-theme="light"] .studio-theme-switch:hover,
7747
+ .studio-root[data-theme="light"] .studio-theme-switch:focus-visible,
7748
+ .studio-root[data-theme="light"] .studio-layout-button:hover,
7749
+ .studio-root[data-theme="light"] .studio-layout-button:focus-visible,
7750
+ .studio-root[data-theme="light"] .studio-layout-button.is-active,
7751
+ .studio-root[data-theme="light"] .studio-pane-action:hover,
7752
+ .studio-root[data-theme="light"] .studio-pane-action:focus-visible,
7753
+ .studio-root[data-theme="light"] .studio-activity-button:hover,
7754
+ .studio-root[data-theme="light"] .studio-activity-button:focus-visible {
7755
+ background: #eaeef2;
7756
+ color: var(--studio-vscode-active);
6290
7757
  }
6291
7758
 
6292
- .ps-release-tag-row.is-current {
6293
- background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
7759
+ .studio-root[data-theme="light"] .studio-action-button:disabled,
7760
+ .studio-root[data-theme="light"] .studio-action-button[aria-disabled="true"],
7761
+ .studio-root[data-theme="light"] .studio-play-tab-button:disabled {
7762
+ border-color: #d8dee4;
7763
+ background: #f6f8fa;
7764
+ color: #8c959f;
6294
7765
  }
6295
7766
 
6296
- .ps-release-tag-row.is-switching {
6297
- opacity: 0.7;
7767
+ .studio-root[data-theme="light"] .studio-theme-switch-track {
7768
+ border-color: #afb8c1;
7769
+ background: #d8dee4;
6298
7770
  }
6299
7771
 
6300
- .ps-release-tag-name {
6301
- display: inline-flex;
6302
- align-items: center;
6303
- gap: 5px;
6304
- font-weight: 500;
6305
- color: var(--wp-heading);
6306
- flex: 1 1 auto;
6307
- min-width: 0;
6308
- font-size: 12px;
7772
+ .studio-root[data-theme="light"] .studio-theme-switch-track span {
7773
+ background: #0969da;
6309
7774
  }
6310
7775
 
6311
- .ps-release-tag-name .dashicons {
6312
- color: var(--wp-text-muted);
6313
- font-size: 14px;
6314
- width: 14px;
6315
- height: 14px;
7776
+ .studio-root[data-theme="light"] .studio-resizer-h,
7777
+ .studio-root[data-theme="light"] .studio-resizer-v {
7778
+ border-color: var(--studio-vscode-border);
7779
+ background: #f6f8fa;
6316
7780
  }
6317
7781
 
6318
- .ps-release-tag-current,
6319
- .ps-release-tag-uncommitted {
6320
- font-size: 9px;
6321
- text-transform: uppercase;
6322
- letter-spacing: 0.06em;
6323
- padding: 1px 6px;
6324
- border-radius: 9999px;
6325
- font-weight: 600;
7782
+ .studio-root[data-theme="light"] .studio-tree-row {
7783
+ color: var(--studio-vscode-text);
6326
7784
  }
6327
7785
 
6328
- .ps-release-tag-current {
6329
- background: var(--wp-admin-theme-color);
6330
- color: #ffffff;
7786
+ .studio-root[data-theme="light"] .studio-tree-arrow,
7787
+ .studio-root[data-theme="light"] .studio-tree-indent,
7788
+ .studio-root[data-theme="light"] .studio-tree-icon {
7789
+ color: #57606a;
6331
7790
  }
6332
7791
 
6333
- .ps-release-tag-uncommitted {
6334
- background: var(--wp-warning-bg);
6335
- color: var(--wp-warning);
7792
+ .studio-root[data-theme="light"] .studio-tree-row:hover,
7793
+ .studio-root[data-theme="light"] .studio-tree-row:focus-visible,
7794
+ .studio-root[data-theme="light"] .studio-tree-file-row.is-current,
7795
+ .studio-root[data-theme="light"] .studio-tree-folder.has-current > .studio-tree-folder-row,
7796
+ .studio-root[data-theme="light"] .studio-tab-button:hover,
7797
+ .studio-root[data-theme="light"] .studio-tab-button:focus-visible,
7798
+ .studio-root[data-theme="light"] .studio-tab-close:hover,
7799
+ .studio-root[data-theme="light"] .studio-tab-close:focus-visible {
7800
+ background: #eaeef2;
7801
+ color: var(--studio-vscode-active);
6336
7802
  }
6337
7803
 
6338
- .ps-release-tag-spinner {
6339
- display: inline-flex;
6340
- align-items: center;
6341
- gap: 4px;
6342
- font-size: 10px;
6343
- color: var(--wp-text-muted);
7804
+ .studio-root[data-theme="light"] .studio-workbench,
7805
+ .studio-root[data-theme="light"] .studio-tabs,
7806
+ .studio-root[data-theme="light"] .studio-panel-body,
7807
+ .studio-root[data-theme="light"] .studio-editor-fallback {
7808
+ background: var(--studio-vscode-bg);
7809
+ color: var(--studio-vscode-text);
6344
7810
  }
6345
7811
 
6346
- .ps-release-tag-spinner .dashicons {
6347
- animation: ps-spin 0.85s linear infinite;
6348
- font-size: 12px;
6349
- width: 12px;
6350
- height: 12px;
7812
+ .studio-root[data-theme="light"] .studio-tab-button {
7813
+ border-color: var(--studio-vscode-border);
7814
+ background: var(--studio-vscode-tab-bg);
7815
+ color: var(--studio-vscode-muted);
6351
7816
  }
6352
7817
 
6353
- .ps-release-tag-actions {
6354
- display: inline-flex;
6355
- gap: 4px;
7818
+ .studio-root[data-theme="light"] .studio-tab-button.is-active {
7819
+ background: var(--studio-vscode-bg);
7820
+ color: var(--studio-vscode-active);
6356
7821
  }
6357
7822
 
6358
- .ps-release-tag-actions .button.is-confirming,
6359
- .ps-release-confirm-button.is-confirming {
6360
- background: var(--wp-warning);
6361
- border-color: var(--wp-warning);
6362
- color: #ffffff;
7823
+ .studio-root[data-theme="light"] .studio-tab-close {
7824
+ color: #57606a;
6363
7825
  }
6364
7826
 
6365
- .ps-release-tag-empty {
6366
- padding: 10px;
6367
- text-align: center;
6368
- color: var(--wp-text-muted);
6369
- font-size: 12px;
7827
+ .studio-root[data-theme="light"] .studio-preview-empty {
7828
+ color: #1a7f37;
6370
7829
  }
6371
7830
 
6372
- .ps-release-validate-list {
6373
- margin: 0;
6374
- padding: 0;
6375
- list-style: none;
6376
- display: flex;
6377
- flex-direction: column;
6378
- gap: 4px;
7831
+ .studio-root[data-theme="light"] .studio-ai-avatar.is-harness {
7832
+ border-color: var(--studio-vscode-border);
7833
+ box-shadow: 0 1px 2px rgba(27, 31, 36, 0.12);
6379
7834
  }
6380
7835
 
6381
- .ps-release-validate-list li {
6382
- display: grid;
6383
- grid-template-columns: 1fr auto auto;
6384
- align-items: center;
6385
- gap: 8px;
6386
- padding: 5px 8px;
6387
- background: var(--wp-surface);
6388
- border: 1px solid var(--wp-border-soft);
6389
- border-radius: var(--wp-radius-s);
6390
- font-size: 12px;
6391
- min-height: 30px;
7836
+ .studio-root[data-theme="light"] .studio-ai-context-chip,
7837
+ .studio-root[data-theme="light"] .studio-ai-suggestion,
7838
+ .studio-root[data-theme="light"] .studio-ai-bubble,
7839
+ .studio-root[data-theme="light"] .studio-ai-change-card,
7840
+ .studio-root[data-theme="light"] .studio-ai-input-shell,
7841
+ .studio-root[data-theme="light"] .studio-ai-state,
7842
+ .studio-root[data-theme="light"] .studio-ai-message-system {
7843
+ border-color: var(--studio-vscode-border);
7844
+ background: #ffffff;
7845
+ color: var(--studio-vscode-text);
6392
7846
  }
6393
7847
 
6394
- .ps-release-validate-list .dashicons {
6395
- margin-right: 4px;
6396
- color: var(--wp-text-muted);
6397
- font-size: 14px;
6398
- width: 14px;
6399
- height: 14px;
7848
+ .studio-root[data-theme="light"] .studio-ai-messages {
7849
+ background: #ffffff;
6400
7850
  }
6401
7851
 
6402
- .ps-release-validate-state {
6403
- font-size: 10px;
6404
- color: var(--wp-text-muted);
6405
- text-transform: uppercase;
6406
- letter-spacing: 0.06em;
7852
+ .studio-root[data-theme="light"] .studio-ai-suggestion:hover,
7853
+ .studio-root[data-theme="light"] .studio-ai-suggestion:focus-visible,
7854
+ .studio-root[data-theme="light"] .studio-ai-change:hover,
7855
+ .studio-root[data-theme="light"] .studio-ai-change:focus-visible,
7856
+ .studio-root[data-theme="light"] .studio-ai-change-action:hover,
7857
+ .studio-root[data-theme="light"] .studio-ai-change-action:focus-visible {
7858
+ background: #eaeef2;
7859
+ color: var(--studio-vscode-active);
6407
7860
  }
6408
7861
 
6409
- .ps-release-publish-options {
6410
- display: flex;
6411
- flex-wrap: wrap;
6412
- gap: 4px;
7862
+ .studio-root[data-theme="light"] .studio-ai-changes,
7863
+ .studio-root[data-theme="light"] .studio-check-notes,
7864
+ .studio-root[data-theme="light"] .studio-terminal,
7865
+ .studio-root[data-theme="light"] .studio-terminal header {
7866
+ border-color: var(--studio-vscode-border);
7867
+ background: #f6f8fa;
7868
+ color: var(--studio-vscode-text);
6413
7869
  }
6414
7870
 
6415
- .ps-release-publish-summary {
6416
- border-top: 1px dashed var(--wp-border-soft);
6417
- padding-top: 8px;
6418
- display: flex;
6419
- flex-direction: column;
6420
- gap: 6px;
7871
+ .studio-root[data-theme="light"] .studio-terminal-output {
7872
+ background: #ffffff;
6421
7873
  }
6422
7874
 
6423
- .ps-release-publish-summary p {
6424
- margin: 0;
6425
- font-size: 12px;
7875
+ .studio-root[data-theme="light"] .terminal-muted,
7876
+ .studio-root[data-theme="light"] .studio-terminal header span,
7877
+ .studio-root[data-theme="light"] .studio-check-notes header span,
7878
+ .studio-root[data-theme="light"] .studio-check-note-line {
7879
+ color: var(--studio-vscode-muted);
6426
7880
  }
6427
7881
 
6428
- .ps-release-publish-summary strong {
6429
- color: var(--wp-heading);
6430
- text-transform: capitalize;
7882
+ .studio-root[data-theme="light"] .terminal-log,
7883
+ .studio-root[data-theme="light"] .studio-check-note,
7884
+ .studio-root[data-theme="light"] .studio-check-notes header,
7885
+ .studio-root[data-theme="light"] .studio-check-note-text strong {
7886
+ color: var(--studio-vscode-text);
6431
7887
  }
6432
7888
 
6433
- .ps-release-publish-summary small {
6434
- display: block;
6435
- color: var(--wp-text-muted);
6436
- font-size: 11px;
7889
+ .studio-root[data-theme="light"] .studio-check-note:hover,
7890
+ .studio-root[data-theme="light"] .studio-check-note:focus-visible {
7891
+ background: #eaeef2;
6437
7892
  }
6438
7893
 
6439
- .ps-release-step-error {
6440
- margin: 0;
6441
- padding: 6px 8px;
6442
- border-radius: var(--wp-radius-s);
6443
- background: var(--wp-error-bg);
6444
- color: var(--wp-error);
6445
- font-size: 11px;
6446
- border: 1px solid rgba(204, 24, 24, 0.18);
7894
+ .studio-root[data-theme="light"] .studio-release-pane {
7895
+ background: var(--studio-vscode-side-bg);
7896
+ color: var(--studio-vscode-muted);
6447
7897
  }
6448
7898
 
6449
- .ps-release-step-muted {
6450
- margin: 0;
6451
- color: var(--wp-text-muted);
6452
- font-style: italic;
6453
- font-size: 11px;
7899
+ .studio-root[data-theme="light"] .ps-release-step,
7900
+ .studio-root[data-theme="light"] .ps-release-step-header,
7901
+ .studio-root[data-theme="light"] .ps-release-tag-list,
7902
+ .studio-root[data-theme="light"] .ps-release-validate-list li {
7903
+ border-color: var(--studio-vscode-border);
7904
+ background: #ffffff;
7905
+ box-shadow: none;
6454
7906
  }