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/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: 13px;
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: 8px;
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, 12px);
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: 920px; margin: 0 auto;
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
- 920px cap/auto-margins, so the roots / toolbar / bulkbar / uploads / grid
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: 2px solid var(--accent-ink); outline-offset: 2px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
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: 2px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: 2px; }
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: 2px solid var(--accent-ink); outline-offset: -2px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: -2px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: -2px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
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: 2px solid var(--accent-ink); outline-offset: 1px; }
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: 2px solid var(--accent-ink); outline-offset: 1px; border-radius: var(--r-1); }
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.4) var(--ff-mono, monospace);
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.4) var(--ff-mono, monospace);
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.4) var(--ff-mono, monospace);
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: 2px solid var(--accent-ink); outline-offset: 2px; }
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.4) var(--ff-mono, monospace);
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: 2px solid var(--accent-ink);
8229
- outline-offset: -2px;
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: 2px solid var(--accent-ink);
8254
- outline-offset: 2px;
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: 2px solid var(--accent-ink);
8510
- outline-offset: 2px;
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: 2px solid var(--accent-ink);
8562
- outline-offset: 2px;
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: 2px solid var(--accent-ink);
8591
- outline-offset: 2px;
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: 2px solid var(--accent-ink);
8636
- outline-offset: 2px;
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: 2px solid var(--accent-ink);
8751
- outline-offset: -2px;
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: 2px solid var(--accent-ink); outline-offset: 2px; }
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: 2px;
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: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent-ink); }
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-2, 16px); font-weight: 700; }
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-0, 12px); color: var(--fg-2, var(--fg)); }
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-0, 12px); }
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-0, 12px); opacity: .85; }
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: 2px solid var(--accent-ink); outline-offset: 2px; }
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: 2px solid var(--accent-ink); outline-offset: 2px; }
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.