anentrypoint-design 0.0.296 → 0.0.298
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app-shell.css +11 -6
- package/chat.css +21 -20
- package/dist/247420.css +64 -54
- package/dist/247420.js +14 -14
- package/package.json +1 -1
- package/src/components/agent-chat.js +13 -8
- package/src/components/sessions.js +2 -2
- package/src/components/shell.js +1 -1
package/dist/247420.css
CHANGED
|
@@ -1127,7 +1127,7 @@
|
|
|
1127
1127
|
.ds-247420 .glyph {
|
|
1128
1128
|
display: inline-flex; align-items: center; justify-content: center;
|
|
1129
1129
|
width: 18px; height: 18px;
|
|
1130
|
-
font-family: var(--ff-mono); font-size:
|
|
1130
|
+
font-family: var(--ff-mono); font-size: var(--fs-tiny);
|
|
1131
1131
|
opacity: 0.8;
|
|
1132
1132
|
}
|
|
1133
1133
|
|
|
@@ -1222,7 +1222,7 @@
|
|
|
1222
1222
|
font-family: var(--ff-mono);
|
|
1223
1223
|
font-size: var(--fs-sm);
|
|
1224
1224
|
line-height: var(--lh-snug);
|
|
1225
|
-
margin-top:
|
|
1225
|
+
margin-top: var(--space-2);
|
|
1226
1226
|
padding: 10px 12px;
|
|
1227
1227
|
background: var(--bg);
|
|
1228
1228
|
border-radius: var(--r-1);
|
|
@@ -1696,7 +1696,7 @@
|
|
|
1696
1696
|
|
|
1697
1697
|
/* Field char counter (TextField maxLength) */
|
|
1698
1698
|
.ds-247420 .ds-field-count {
|
|
1699
|
-
font-size: var(--fs-tiny,
|
|
1699
|
+
font-size: var(--fs-tiny, 13px);
|
|
1700
1700
|
color: var(--fg-3, var(--fg-2));
|
|
1701
1701
|
text-align: right;
|
|
1702
1702
|
}
|
|
@@ -2144,7 +2144,11 @@
|
|
|
2144
2144
|
Shared by FileRow/FileCell (.is-marked) and the file/session select-all +
|
|
2145
2145
|
SessionCard select (aria-checked true/mixed) since the bundle concatenates
|
|
2146
2146
|
all CSS. Replaces the old [x]/[ ] bracket text - no glyphs, AT keeps the
|
|
2147
|
-
role=checkbox/aria-checked name+state.
|
|
2147
|
+
role=checkbox/aria-checked name+state.
|
|
2148
|
+
See also .ds-check in editor-primitives.css — a separate native-input
|
|
2149
|
+
checkbox family for form/settings contexts; intentionally distinct
|
|
2150
|
+
rendering (native vs CSS-drawn), do not let one drift toward the other
|
|
2151
|
+
by accident. */
|
|
2148
2152
|
.ds-247420 .ds-check-box {
|
|
2149
2153
|
width: 15px; height: 15px; box-sizing: border-box; flex: 0 0 auto; position: relative;
|
|
2150
2154
|
border: 1.5px solid var(--fg-3); border-radius: var(--r-0);
|
|
@@ -2295,7 +2299,7 @@
|
|
|
2295
2299
|
/* Stage — the scrollable content column. */
|
|
2296
2300
|
.ds-247420 .ds-file-stage {
|
|
2297
2301
|
display: flex; flex-direction: column; gap: var(--space-3);
|
|
2298
|
-
width: 100%; max-width:
|
|
2302
|
+
width: 100%; max-width: var(--measure-wide); margin: 0 auto;
|
|
2299
2303
|
padding: var(--space-2) var(--space-3) var(--space-4);
|
|
2300
2304
|
}
|
|
2301
2305
|
/* When the stage is the app-main child, the shell already supplies top
|
|
@@ -2304,7 +2308,7 @@
|
|
|
2304
2308
|
.ds-247420 .app-main .ds-file-stage { padding-top: 0; }
|
|
2305
2309
|
|
|
2306
2310
|
/* Full-width files stack: the stage's space-3 vertical beat without its
|
|
2307
|
-
|
|
2311
|
+
--measure-wide cap/auto-margins, so the roots / toolbar / bulkbar / uploads / grid
|
|
2308
2312
|
bands keep one consistent rhythm instead of touching edge-to-edge. Carries
|
|
2309
2313
|
the same side/bottom padding as .ds-file-stage (top collapses the same way
|
|
2310
2314
|
when mounted directly under .app-main, which already supplies top padding)
|
|
@@ -3248,6 +3252,7 @@
|
|
|
3248
3252
|
.ds-247420 .ds-select {
|
|
3249
3253
|
width: 100%;
|
|
3250
3254
|
min-width: 0;
|
|
3255
|
+
min-height: 32px; /* shared control floor with .btn/.btn-primary/.btn-ghost */
|
|
3251
3256
|
padding: 10px 30px 10px 14px; /* right gap clears the chevron */
|
|
3252
3257
|
background: var(--bg-2);
|
|
3253
3258
|
border: 0;
|
|
@@ -6905,7 +6910,7 @@
|
|
|
6905
6910
|
}
|
|
6906
6911
|
.ds-247420 .agentchat-jump.show { display: inline-flex; }
|
|
6907
6912
|
.ds-247420 .agentchat-jump:hover { background: var(--bg-3); }
|
|
6908
|
-
.ds-247420 .agentchat-jump:focus-visible { outline:
|
|
6913
|
+
.ds-247420 .agentchat-jump:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
6909
6914
|
|
|
6910
6915
|
/* Streaming caret: a thin blinking bar at the live edge of an assistant turn. */
|
|
6911
6916
|
.ds-247420 .chat-stream-caret {
|
|
@@ -6927,7 +6932,7 @@
|
|
|
6927
6932
|
}
|
|
6928
6933
|
.ds-247420 .chat-msg-action-label { font-size: var(--fs-tiny); }
|
|
6929
6934
|
.ds-247420 .chat-msg-action:hover { background: var(--bg-2); color: var(--fg); }
|
|
6930
|
-
.ds-247420 .chat-msg-action:focus-visible { outline:
|
|
6935
|
+
.ds-247420 .chat-msg-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
|
|
6931
6936
|
|
|
6932
6937
|
/* Empty state: a fresh thread is an invitation, not a void. */
|
|
6933
6938
|
.ds-247420 .agentchat-empty {
|
|
@@ -6961,7 +6966,7 @@
|
|
|
6961
6966
|
color: var(--fg-2, var(--fg));
|
|
6962
6967
|
}
|
|
6963
6968
|
.ds-247420 .agentchat-empty-suggestion:hover, .ds-247420 .chat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
|
|
6964
|
-
.ds-247420 .agentchat-empty-suggestion:focus-visible, .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset:
|
|
6969
|
+
.ds-247420 .agentchat-empty-suggestion:focus-visible, .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: var(--focus-offset); }
|
|
6965
6970
|
|
|
6966
6971
|
/* Guided install path in the empty state: copy line + monospaced command rows
|
|
6967
6972
|
(each with its own copy button) + a recheck button. No animation. */
|
|
@@ -6994,7 +6999,7 @@
|
|
|
6994
6999
|
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
6995
7000
|
}
|
|
6996
7001
|
.ds-247420 .agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
|
|
6997
|
-
.ds-247420 .agentchat-install-copy:focus-visible { outline:
|
|
7002
|
+
.ds-247420 .agentchat-install-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
6998
7003
|
.ds-247420 .agentchat-install-actions { display: flex; justify-content: flex-start; }
|
|
6999
7004
|
|
|
7000
7005
|
/* Host-supplied transcript export actions riding the controls row. */
|
|
@@ -7005,7 +7010,7 @@
|
|
|
7005
7010
|
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
7006
7011
|
}
|
|
7007
7012
|
.ds-247420 .agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
|
|
7008
|
-
.ds-247420 .agentchat-export-act:focus-visible { outline:
|
|
7013
|
+
.ds-247420 .agentchat-export-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7009
7014
|
|
|
7010
7015
|
/* "working" tail: a long silent tool call shouldn't read as frozen. */
|
|
7011
7016
|
.ds-247420 .agentchat-working {
|
|
@@ -7135,7 +7140,7 @@
|
|
|
7135
7140
|
/* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
|
|
7136
7141
|
radius/focus-ring); only the rail layout + touch floor live here. */
|
|
7137
7142
|
.ds-247420 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
|
|
7138
|
-
.ds-247420 .ds-session-new:focus-visible { outline:
|
|
7143
|
+
.ds-247420 .ds-session-new:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
7139
7144
|
/* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
|
|
7140
7145
|
@media (pointer: coarse) {
|
|
7141
7146
|
.ds-247420 .ds-session-new { width: 44px; min-height: 44px; }
|
|
@@ -7154,7 +7159,7 @@
|
|
|
7154
7159
|
cursor: pointer; text-align: left; color: var(--fg);
|
|
7155
7160
|
}
|
|
7156
7161
|
.ds-247420 .ds-session-row:hover { background: var(--bg-2); }
|
|
7157
|
-
.ds-247420 .ds-session-row:focus-visible { outline:
|
|
7162
|
+
.ds-247420 .ds-session-row:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
|
|
7158
7163
|
.ds-247420 .ds-session-row.active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
|
|
7159
7164
|
.ds-247420 .ds-session-row.rail-green::before, .ds-247420 .ds-session-row.rail-purple::before, .ds-247420 .ds-session-row.rail-flame::before {
|
|
7160
7165
|
content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-hair);
|
|
@@ -7248,7 +7253,7 @@
|
|
|
7248
7253
|
}
|
|
7249
7254
|
.ds-247420 .chat-code-block:hover .chat-code-copy, .ds-247420 .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
|
|
7250
7255
|
.ds-247420 .chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
|
|
7251
|
-
.ds-247420 .chat-code-copy:focus-visible { outline:
|
|
7256
|
+
.ds-247420 .chat-code-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
|
|
7252
7257
|
/* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
|
|
7253
7258
|
.ds-247420 .chat-code-head .spread { flex: 1; }
|
|
7254
7259
|
.ds-247420 .chat-code-copy-head { position: static; opacity: 1; }
|
|
@@ -7343,7 +7348,7 @@
|
|
|
7343
7348
|
cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
7344
7349
|
}
|
|
7345
7350
|
.ds-247420 .ds-dash-errors-toggle.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
|
|
7346
|
-
.ds-247420 .ds-dash-errors-toggle:focus-visible { outline:
|
|
7351
|
+
.ds-247420 .ds-dash-errors-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7347
7352
|
|
|
7348
7353
|
/* --- C3: per-card select checkbox. --- */
|
|
7349
7354
|
.ds-247420 .ds-dash-select {
|
|
@@ -7353,7 +7358,7 @@
|
|
|
7353
7358
|
font-family: var(--ff-mono); font-size: var(--fs-sm);
|
|
7354
7359
|
}
|
|
7355
7360
|
.ds-247420 .ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
|
|
7356
|
-
.ds-247420 .ds-dash-select:focus-visible { outline:
|
|
7361
|
+
.ds-247420 .ds-dash-select:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7357
7362
|
|
|
7358
7363
|
/* --- C5: active dashboard card (current conversation). --- */
|
|
7359
7364
|
.ds-247420 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
|
|
@@ -7375,7 +7380,7 @@
|
|
|
7375
7380
|
|
|
7376
7381
|
/* --- E1: inline file preview pane (split view, non-modal). --- */
|
|
7377
7382
|
.ds-247420 .ds-preview-pane { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
|
|
7378
|
-
.ds-247420 .ds-preview-pane:focus-visible { outline:
|
|
7383
|
+
.ds-247420 .ds-preview-pane:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
|
|
7379
7384
|
.ds-247420 .ds-preview-pane .ds-preview-body { flex: 1; min-height: 0; overflow: auto; }
|
|
7380
7385
|
.ds-247420 .ds-preview-pane-empty { align-items: center; justify-content: center; color: var(--fg-3); font-size: var(--fs-sm); }
|
|
7381
7386
|
.ds-247420 .ds-preview-code-wrap { display: flex; flex-direction: column; min-height: 0; }
|
|
@@ -7392,7 +7397,7 @@
|
|
|
7392
7397
|
border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
|
|
7393
7398
|
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
7394
7399
|
}
|
|
7395
|
-
.ds-247420 .ds-file-more-btn:focus-visible { outline:
|
|
7400
|
+
.ds-247420 .ds-file-more-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7396
7401
|
/* --- D3: locked/no-access file row. --- */
|
|
7397
7402
|
.ds-247420 .ds-file-row.is-locked { opacity: .6; }
|
|
7398
7403
|
|
|
@@ -7405,7 +7410,7 @@
|
|
|
7405
7410
|
}
|
|
7406
7411
|
.ds-247420 .ds-roots-tab:hover { background: var(--bg-2); color: var(--fg); }
|
|
7407
7412
|
.ds-247420 .ds-roots-tab.active { background: var(--bg); color: var(--fg); }
|
|
7408
|
-
.ds-247420 .ds-roots-tab:focus-visible { outline:
|
|
7413
|
+
.ds-247420 .ds-roots-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7409
7414
|
|
|
7410
7415
|
/* --- H4: touch targets. On a coarse pointer / narrow screen the hover-revealed
|
|
7411
7416
|
action rows are made permanently visible and small controls floor to 44px so
|
|
@@ -7413,6 +7418,7 @@
|
|
|
7413
7418
|
@media (pointer: coarse), (max-width: 640px) {
|
|
7414
7419
|
.ds-247420 .chat-msg-actions { opacity: 1; }
|
|
7415
7420
|
.ds-247420 .chat-code-copy { opacity: 1; }
|
|
7421
|
+
.ds-247420 .chat-tool-copy { opacity: 1; min-width: 44px; min-height: 44px; }
|
|
7416
7422
|
.ds-247420 .chat-msg-action { min-width: 44px; height: 44px; }
|
|
7417
7423
|
.ds-247420 .ds-dash-select { min-width: 44px; min-height: 44px; }
|
|
7418
7424
|
.ds-247420 .ds-file-more-btn, .ds-247420 .ds-roots-tab, .ds-247420 .ds-dash-errors-toggle { min-height: 44px; }
|
|
@@ -7437,7 +7443,7 @@
|
|
|
7437
7443
|
color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
|
|
7438
7444
|
}
|
|
7439
7445
|
.ds-247420 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
|
|
7440
|
-
.ds-247420 .ds-session-meta-copy:focus-visible { outline:
|
|
7446
|
+
.ds-247420 .ds-session-meta-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7441
7447
|
@media (pointer: coarse), (max-width: 640px) {
|
|
7442
7448
|
.ds-247420 .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
|
|
7443
7449
|
}
|
|
@@ -7465,7 +7471,7 @@
|
|
|
7465
7471
|
}
|
|
7466
7472
|
|
|
7467
7473
|
/* Drag-over ring: token accent, never a hex. */
|
|
7468
|
-
.ds-247420 .chat-composer.dragover { outline:
|
|
7474
|
+
.ds-247420 .chat-composer.dragover { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); border-radius: var(--r-2); }
|
|
7469
7475
|
|
|
7470
7476
|
/* Per-bit composer context: only the bit that owns a control is a button. */
|
|
7471
7477
|
.ds-247420 .chat-composer-context-bit {
|
|
@@ -7506,7 +7512,7 @@
|
|
|
7506
7512
|
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
7507
7513
|
}
|
|
7508
7514
|
.ds-247420 .agentchat-earlier-btn:hover { background: var(--bg-2); color: var(--fg); }
|
|
7509
|
-
.ds-247420 .agentchat-earlier-btn:focus-visible { outline:
|
|
7515
|
+
.ds-247420 .agentchat-earlier-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7510
7516
|
@media (pointer: coarse) {
|
|
7511
7517
|
.ds-247420 .agentchat-earlier-btn { min-height: 44px; }
|
|
7512
7518
|
}
|
|
@@ -7614,7 +7620,7 @@
|
|
|
7614
7620
|
}
|
|
7615
7621
|
.ds-247420 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
|
|
7616
7622
|
.ds-247420 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
|
|
7617
|
-
.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline:
|
|
7623
|
+
.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
|
|
7618
7624
|
.ds-247420 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
|
|
7619
7625
|
.ds-247420 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
|
|
7620
7626
|
.ds-247420 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
@@ -7641,7 +7647,7 @@
|
|
|
7641
7647
|
.ds-247420 .chat-tool-section-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); }
|
|
7642
7648
|
.ds-247420 .chat-tool-copy { position: static; opacity: 0; }
|
|
7643
7649
|
.ds-247420 .chat-tool-section:hover .chat-tool-copy, .ds-247420 .chat-tool-section:focus-within .chat-tool-copy { opacity: 1; }
|
|
7644
|
-
.ds-247420 .chat-tool-copy:focus-visible { outline:
|
|
7650
|
+
.ds-247420 .chat-tool-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
|
|
7645
7651
|
.ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
|
|
7646
7652
|
.ds-247420 .chat-tool-pre.is-error { color: var(--flame); }
|
|
7647
7653
|
.ds-247420 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
|
|
@@ -7705,10 +7711,10 @@
|
|
|
7705
7711
|
.ds-247420 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
|
|
7706
7712
|
.ds-247420 .ds-dash-selectall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-tiny); color: var(--fg-2); cursor: pointer; background: none; border: none; padding: var(--space-1); }
|
|
7707
7713
|
.ds-247420 .ds-dash-selectall:hover { color: var(--fg); }
|
|
7708
|
-
.ds-247420 .ds-dash-selectall:focus-visible { outline:
|
|
7714
|
+
.ds-247420 .ds-dash-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7709
7715
|
.ds-247420 .ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
|
|
7710
7716
|
.ds-247420 .ds-dash-clear:hover { color: var(--fg); }
|
|
7711
|
-
.ds-247420 .ds-dash-clear:focus-visible { outline:
|
|
7717
|
+
.ds-247420 .ds-dash-clear:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-radius: var(--r-1); }
|
|
7712
7718
|
|
|
7713
7719
|
/* Conversation-rail loading skeleton (cold ccsniff walk). */
|
|
7714
7720
|
.ds-247420 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }
|
|
@@ -7821,7 +7827,7 @@
|
|
|
7821
7827
|
margin: 0; border-radius: 0; box-shadow: none;
|
|
7822
7828
|
background: var(--panel-1);
|
|
7823
7829
|
color: var(--panel-text);
|
|
7824
|
-
font: var(--fs-tiny, 12px)/var(--lh-base, 1.
|
|
7830
|
+
font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
|
|
7825
7831
|
overflow: hidden;
|
|
7826
7832
|
}
|
|
7827
7833
|
.ds-247420 .ds-ep-panel-head {
|
|
@@ -7881,7 +7887,7 @@
|
|
|
7881
7887
|
background: var(--panel-1);
|
|
7882
7888
|
color: var(--panel-text);
|
|
7883
7889
|
border-bottom: 1px solid var(--rule);
|
|
7884
|
-
font: var(--fs-tiny, 12px)/var(--lh-base, 1.
|
|
7890
|
+
font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
|
|
7885
7891
|
}
|
|
7886
7892
|
.ds-247420 .ds-ep-toolbar.dense { padding: 2px 4px; gap: 2px; }
|
|
7887
7893
|
.ds-247420 .ds-ep-toolbar-leading,
|
|
@@ -7957,11 +7963,11 @@
|
|
|
7957
7963
|
.ds-247420 .ds-ep-tree {
|
|
7958
7964
|
display: flex; flex-direction: column;
|
|
7959
7965
|
color: var(--panel-text);
|
|
7960
|
-
font: var(--fs-tiny, 12px)/var(--lh-base, 1.
|
|
7966
|
+
font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
|
|
7961
7967
|
overflow: auto;
|
|
7962
7968
|
}
|
|
7963
7969
|
.ds-247420 .ds-ep-tree-item { display: flex; flex-direction: column; }
|
|
7964
|
-
.ds-247420 .ds-ep-tree-item:focus-visible { outline:
|
|
7970
|
+
.ds-247420 .ds-ep-tree-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
7965
7971
|
.ds-247420 .ds-ep-tree-row {
|
|
7966
7972
|
display: flex; align-items: center; gap: 6px;
|
|
7967
7973
|
padding: 4px 8px 4px 0;
|
|
@@ -7997,7 +8003,7 @@
|
|
|
7997
8003
|
display: flex; flex-direction: column; gap: 6px;
|
|
7998
8004
|
padding: 8px;
|
|
7999
8005
|
color: var(--panel-text);
|
|
8000
|
-
font: var(--fs-tiny, 12px)/var(--lh-base, 1.
|
|
8006
|
+
font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
|
|
8001
8007
|
}
|
|
8002
8008
|
.ds-247420 .ds-ep-propfield {
|
|
8003
8009
|
display: grid;
|
|
@@ -8225,8 +8231,8 @@
|
|
|
8225
8231
|
.ds-247420 .ds-ep-json-node[open] > .ds-ep-json-sum::before { content: '-'; }
|
|
8226
8232
|
.ds-247420 .ds-ep-json-sum:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
|
|
8227
8233
|
.ds-247420 .ds-ep-json-sum:focus-visible {
|
|
8228
|
-
outline:
|
|
8229
|
-
outline-offset: -
|
|
8234
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8235
|
+
outline-offset: calc(var(--focus-offset) * -1);
|
|
8230
8236
|
}
|
|
8231
8237
|
.ds-247420 .ds-ep-json-tag {
|
|
8232
8238
|
margin-left: var(--space-1, 4px);
|
|
@@ -8250,8 +8256,8 @@
|
|
|
8250
8256
|
.ds-247420 .ds-ep-json-copy:hover { opacity: 1; border-color: var(--accent); }
|
|
8251
8257
|
.ds-247420 .ds-ep-json-copy.copied { color: var(--green-2, var(--green)); border-color: var(--green-2, var(--green)); opacity: 1; }
|
|
8252
8258
|
.ds-247420 .ds-ep-json-copy:focus-visible {
|
|
8253
|
-
outline:
|
|
8254
|
-
outline-offset:
|
|
8259
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8260
|
+
outline-offset: var(--focus-offset);
|
|
8255
8261
|
opacity: 1;
|
|
8256
8262
|
}
|
|
8257
8263
|
|
|
@@ -8506,8 +8512,8 @@
|
|
|
8506
8512
|
.ds-247420 .ds-ep-resize:focus-visible,
|
|
8507
8513
|
.ds-247420 .ds-ep-dialog-btn:focus-visible,
|
|
8508
8514
|
.ds-247420 .ds-ep-pager-btn:focus-visible {
|
|
8509
|
-
outline:
|
|
8510
|
-
outline-offset:
|
|
8515
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8516
|
+
outline-offset: var(--focus-offset);
|
|
8511
8517
|
}
|
|
8512
8518
|
|
|
8513
8519
|
/* ---------------------------------------------------------------
|
|
@@ -8558,13 +8564,17 @@
|
|
|
8558
8564
|
.ds-247420 .ds-ep-iconbtn:focus-visible,
|
|
8559
8565
|
.ds-247420 .ds-ep-iconbtn-group button:focus-visible,
|
|
8560
8566
|
.ds-247420 .ds-ep-resize:focus-visible {
|
|
8561
|
-
outline:
|
|
8562
|
-
outline-offset:
|
|
8567
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8568
|
+
outline-offset: var(--focus-offset);
|
|
8563
8569
|
border-radius: var(--r-1);
|
|
8564
8570
|
}
|
|
8565
8571
|
|
|
8566
8572
|
/* ---------------------------------------------------------------
|
|
8567
8573
|
Form primitives — Checkbox, Radio, RadioGroup, Toggle, Field
|
|
8574
|
+
See also .ds-check-box in app-shell.css — a separate CSS-drawn
|
|
8575
|
+
multi-select checkbox family for FileRow/FileCell/SessionCard
|
|
8576
|
+
row selection; intentionally distinct rendering (CSS-drawn vs
|
|
8577
|
+
native), do not let one drift toward the other by accident.
|
|
8568
8578
|
--------------------------------------------------------------- */
|
|
8569
8579
|
.ds-247420 .ds-check-row,
|
|
8570
8580
|
.ds-247420 .ds-radio-row,
|
|
@@ -8587,8 +8597,8 @@
|
|
|
8587
8597
|
cursor: inherit;
|
|
8588
8598
|
}
|
|
8589
8599
|
.ds-247420 .ds-check:focus-visible, .ds-247420 .ds-radio:focus-visible {
|
|
8590
|
-
outline:
|
|
8591
|
-
outline-offset:
|
|
8600
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8601
|
+
outline-offset: var(--focus-offset);
|
|
8592
8602
|
}
|
|
8593
8603
|
|
|
8594
8604
|
.ds-247420 .ds-check-label, .ds-247420 .ds-radio-label, .ds-247420 .ds-toggle-label {
|
|
@@ -8632,8 +8642,8 @@
|
|
|
8632
8642
|
transform: translateX(20px);
|
|
8633
8643
|
}
|
|
8634
8644
|
.ds-247420 .ds-toggle:focus-visible {
|
|
8635
|
-
outline:
|
|
8636
|
-
outline-offset:
|
|
8645
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8646
|
+
outline-offset: var(--focus-offset);
|
|
8637
8647
|
}
|
|
8638
8648
|
.ds-247420 .ds-toggle:disabled { cursor: not-allowed; }
|
|
8639
8649
|
|
|
@@ -8747,8 +8757,8 @@
|
|
|
8747
8757
|
outline: none;
|
|
8748
8758
|
}
|
|
8749
8759
|
.ds-247420 .ds-dropdown-item:focus-visible {
|
|
8750
|
-
outline:
|
|
8751
|
-
outline-offset: -
|
|
8760
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8761
|
+
outline-offset: calc(var(--focus-offset) * -1);
|
|
8752
8762
|
}
|
|
8753
8763
|
.ds-247420 .ds-dropdown-item[aria-disabled="true"] {
|
|
8754
8764
|
opacity: 0.5;
|
|
@@ -8791,11 +8801,11 @@
|
|
|
8791
8801
|
cursor: grab; font: 14px/1 var(--ff-mono, monospace); letter-spacing: -2px;
|
|
8792
8802
|
touch-action: none; user-select: none;
|
|
8793
8803
|
}
|
|
8794
|
-
.ds-247420 .ds-reorder-handle:focus-visible { outline:
|
|
8804
|
+
.ds-247420 .ds-reorder-handle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
8795
8805
|
.ds-247420 .ds-reorder-handle:active { cursor: grabbing; }
|
|
8796
8806
|
.ds-247420[data-dragging="true"] { opacity: 0.6; cursor: grabbing; transform: scale(0.98); }
|
|
8797
8807
|
.ds-247420[data-drop-target-active="true"] {
|
|
8798
|
-
outline: 2px dashed var(--focus-ring, var(--accent)); outline-offset:
|
|
8808
|
+
outline: 2px dashed var(--focus-ring, var(--accent)); outline-offset: var(--focus-offset);
|
|
8799
8809
|
background: color-mix(in srgb, var(--accent) 8%, var(--panel-1));
|
|
8800
8810
|
}
|
|
8801
8811
|
.ds-247420 .ds-reorder-insertion-line {
|
|
@@ -9001,7 +9011,7 @@
|
|
|
9001
9011
|
border: 1px solid var(--rule); border-radius: var(--r-1, 10px);
|
|
9002
9012
|
padding: var(--space-1, 4px) var(--space-2, 8px); font: inherit;
|
|
9003
9013
|
}
|
|
9004
|
-
.ds-247420 .ov-set-control:focus-visible { outline:
|
|
9014
|
+
.ds-247420 .ov-set-control:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-color: var(--accent-ink); }
|
|
9005
9015
|
.ds-247420 input.ov-set-control[type="range"] { padding: 0; accent-color: var(--accent); }
|
|
9006
9016
|
.ds-247420 .ov-set-toggle { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
|
|
9007
9017
|
.ds-247420 .ov-set-btn {
|
|
@@ -9026,7 +9036,7 @@
|
|
|
9026
9036
|
overflow: hidden;
|
|
9027
9037
|
}
|
|
9028
9038
|
.ds-247420 .ov-auth-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3); border-bottom: 1px solid var(--rule); }
|
|
9029
|
-
.ds-247420 .ov-auth-title { margin: 0; font-size: var(--fs-
|
|
9039
|
+
.ds-247420 .ov-auth-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
|
|
9030
9040
|
.ds-247420 .ov-auth-x { border: none; background: transparent; color: var(--fg-2, var(--fg)); font-size: 22px; line-height: 1; cursor: pointer; }
|
|
9031
9041
|
.ds-247420 .ov-auth-x:hover { color: var(--fg); }
|
|
9032
9042
|
.ds-247420 .ov-auth-tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; }
|
|
@@ -9034,11 +9044,11 @@
|
|
|
9034
9044
|
.ds-247420 .ov-auth-tab:hover { color: var(--fg); }
|
|
9035
9045
|
.ds-247420 .ov-auth-tab.is-active { background: var(--bg-2); color: var(--fg); font-weight: 700; }
|
|
9036
9046
|
.ds-247420 .ov-auth-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
|
|
9037
|
-
.ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-
|
|
9047
|
+
.ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-tiny); color: var(--fg-2, var(--fg)); }
|
|
9038
9048
|
.ds-247420 .ov-auth-input { padding: var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
|
|
9039
9049
|
.ds-247420 .ov-auth-primary { padding: var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
|
|
9040
9050
|
.ds-247420 .ov-auth-primary:disabled { opacity: .6; cursor: progress; }
|
|
9041
|
-
.ds-247420 .ov-auth-error { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); border-radius: var(--r-1); background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); font-size: var(--fs-
|
|
9051
|
+
.ds-247420 .ov-auth-error { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); border-radius: var(--r-1); background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); font-size: var(--fs-tiny); }
|
|
9042
9052
|
|
|
9043
9053
|
/* VideoLightbox — ov-lightbox-* */
|
|
9044
9054
|
.ds-247420 .ov-lightbox-backdrop {
|
|
@@ -9050,7 +9060,7 @@
|
|
|
9050
9060
|
.ds-247420 .ov-lightbox-x:hover { background: color-mix(in oklab, var(--on-color) 24%, transparent); }
|
|
9051
9061
|
.ds-247420 .ov-lightbox-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 92vw; max-height: 90vh; }
|
|
9052
9062
|
.ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; /* true black media letterbox, intentional */ }
|
|
9053
|
-
.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-
|
|
9063
|
+
.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-tiny); opacity: .85; }
|
|
9054
9064
|
|
|
9055
9065
|
/* ---------------------------------------------------------------
|
|
9056
9066
|
Editor-primitive scrollbars — thin, dark, themed so docked panels
|
|
@@ -9098,7 +9108,7 @@
|
|
|
9098
9108
|
}
|
|
9099
9109
|
.ds-247420 .ds-input-color::-webkit-color-swatch-wrapper { padding: 2px; }
|
|
9100
9110
|
.ds-247420 .ds-input-color::-webkit-color-swatch { border: none; border-radius: var(--r-hair); }
|
|
9101
|
-
.ds-247420 .ds-input-color:focus-visible { outline:
|
|
9111
|
+
.ds-247420 .ds-input-color:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
9102
9112
|
.ds-247420 .ds-input-check {
|
|
9103
9113
|
appearance: none; -webkit-appearance: none;
|
|
9104
9114
|
width: 16px; height: 16px; flex-shrink: 0;
|
|
@@ -9111,7 +9121,7 @@
|
|
|
9111
9121
|
width: 4px; height: 8px; border: solid var(--accent-fg);
|
|
9112
9122
|
border-width: 0 2px 2px 0; transform: rotate(45deg);
|
|
9113
9123
|
}
|
|
9114
|
-
.ds-247420 .ds-input-check:focus-visible { outline:
|
|
9124
|
+
.ds-247420 .ds-input-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
9115
9125
|
|
|
9116
9126
|
/* ---------------------------------------------------------------
|
|
9117
9127
|
Tree drag-reparent affordance — clear drop target + dragging row.
|