anentrypoint-design 0.0.234 → 0.0.236

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 CHANGED
@@ -486,6 +486,9 @@ body.canvas-host { background: transparent !important; }
486
486
  .ds-badge.tone-error { background: var(--flame); color: var(--on-color); }
487
487
  .ds-badge.tone-success { background: var(--green-tint); color: var(--green-deep); }
488
488
  .ds-badge.tone-neutral { background: var(--bg-3); color: var(--fg-2); }
489
+ .ds-badge.tone-blue { background: var(--accent-tint); color: var(--accent-ink); }
490
+ .ds-badge.tone-orange { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
491
+ .ds-badge.tone-yellow { background: var(--sun); color: var(--ink); }
489
492
 
490
493
  .chip {
491
494
  display: inline-flex; align-items: center; gap: 6px;
@@ -509,6 +512,20 @@ body.canvas-host { background: transparent !important; }
509
512
  .chip.tone-ok { background: var(--green-tint); color: var(--green-deep); }
510
513
  .chip.tone-miss { background: var(--flame); color: var(--on-color); }
511
514
  .chip.tone-neutral { background: var(--bg-3); color: var(--fg-2); }
515
+ .chip.tone-blue { background: var(--accent-tint); color: var(--accent-ink); }
516
+ .chip.tone-orange { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
517
+ .chip.tone-yellow { background: var(--sun); color: var(--ink); }
518
+
519
+ /* ds-pill — plain neutral chip, distinct from the toned .ds-badge/.chip family
520
+ (gmsniff's .pill: a bare rounded label with no semantic tone). */
521
+ .ds-pill {
522
+ display: inline-block;
523
+ padding: 1px 7px;
524
+ border-radius: var(--r-pill);
525
+ font-size: var(--fs-micro);
526
+ background: var(--bg-3); color: var(--fg-2);
527
+ margin: 1px;
528
+ }
512
529
 
513
530
  .glyph {
514
531
  display: inline-flex; align-items: center; justify-content: center;
@@ -3505,7 +3522,11 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
3505
3522
  /* Expand/collapse is meaningless on the icon strip. */
3506
3523
  .ws-rail-toggle { display: none; }
3507
3524
  .ws-rail-foot { display: flex; justify-content: center; }
3508
- .ws-sessions { inset: 0 auto 0 var(--ws-rail-w-collapsed); }
3525
+ /* The 1100px rule's closed-state translateX(-110%) was sized for left:0;
3526
+ once left shifts to the collapsed rail width, -110% no longer clears the
3527
+ viewport and leaves a sliver of the "closed" drawer visible on screen. */
3528
+ .ws-sessions { inset: 0 auto 0 var(--ws-rail-w-collapsed); transform: translateX(calc(-100% - var(--ws-rail-w-collapsed))); }
3529
+ .ws-shell.ws-sessions-open .ws-sessions { transform: translateX(0); }
3509
3530
  .ws-content { grid-area: content; padding-left: var(--ws-rail-w-collapsed); }
3510
3531
  /* The Crumb's narrow collapse elsewhere keys on the .app @container, which
3511
3532
  does not exist inside WorkspaceShell - mirror it here so the crumb bar
@@ -3583,3 +3604,105 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
3583
3604
  .app-status { display: none; }
3584
3605
  .ws-main { overflow: visible; height: auto; }
3585
3606
  }
3607
+
3608
+ /* ============================================================
3609
+ Data density — dense observability/dashboard primitives (ported from the
3610
+ gmsniff GUI). Components: PhaseWalk, TreeNode, BarRow, StatTile/StatsGrid,
3611
+ SubGrid, SessionRow, DevRow, LiveLog/LiveLogEntry. src/components/data-density.js.
3612
+ All colors derive from colors_and_type.css tokens — see lint-tokens.mjs.
3613
+ ============================================================ */
3614
+
3615
+ /* --danger-surface: semantic surface for a deviation/error callout background
3616
+ (gmsniff's #3a1a1a dark-red-tinted panel). Derived from --warn so it always
3617
+ reads as "danger" against the active theme instead of a baked literal. */
3618
+ :root {
3619
+ --danger-surface: color-mix(in oklab, var(--warn) 14%, var(--bg));
3620
+ }
3621
+
3622
+ /* PhaseWalk */
3623
+ .ds-phasewalk { display: inline-flex; gap: 2px; vertical-align: middle; }
3624
+ .ds-phasewalk-seg {
3625
+ width: 18px; height: 10px; border-radius: 2px;
3626
+ background: var(--bg-3); position: relative;
3627
+ }
3628
+ .ds-phasewalk-seg.is-reached { background: var(--success); }
3629
+ .ds-phasewalk-seg.is-gap { background: var(--warn); }
3630
+ .ds-phasewalk-lbl {
3631
+ position: absolute; top: -15px; left: 0;
3632
+ font-size: var(--fs-micro); color: var(--fg-3); white-space: nowrap;
3633
+ }
3634
+
3635
+ /* TreeNode */
3636
+ .ds-tree-node {
3637
+ padding: 5px 10px; border-left: var(--bw-rule) solid var(--bg-3);
3638
+ margin: 2px 0 2px 16px; font-size: var(--fs-tiny);
3639
+ }
3640
+ .ds-tree-node.is-phase { border-color: var(--accent); background: var(--bg-3); font-weight: 600; }
3641
+ .ds-tree-node.is-deviation { border-color: var(--warn); background: var(--danger-surface); color: var(--warn); }
3642
+ .ds-tree-node.is-mutable-resolve { border-color: var(--success); }
3643
+ .ds-tree-node.is-prd-add { border-color: var(--sun); }
3644
+ .ds-tree-node-ts { margin-right: 8px; color: var(--fg-3); }
3645
+ .ds-tree-node-pills { margin-left: 6px; }
3646
+ .ds-tree-node-reason { margin-top: 2px; color: var(--fg-2); }
3647
+ .ds-tree-node-deviation { margin-top: 2px; }
3648
+ .ds-tree-node-residuals { margin-top: 2px; color: var(--fg-3); }
3649
+
3650
+ /* BarRow */
3651
+ .ds-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-tiny); }
3652
+ .ds-bar-row-label { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
3653
+ .ds-bar-bg { flex: 1; background: var(--bg-3); border-radius: 2px; height: 6px; overflow: hidden; }
3654
+ .ds-bar-fill { background: var(--accent); height: 100%; border-radius: 2px; }
3655
+ .ds-bar-row-value { flex-shrink: 0; color: var(--fg-2); }
3656
+
3657
+ /* StatTile / StatsGrid */
3658
+ .ds-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
3659
+ .ds-stats-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
3660
+ .ds-stat { background: var(--bg-3); border-radius: 4px; padding: 10px 12px; }
3661
+ .ds-stat-val { font-size: 22px; font-weight: 700; color: var(--accent-ink); }
3662
+ .ds-stat-val.rate-big { font-size: 32px; color: var(--success); }
3663
+ .ds-stat-val.err-rate { font-size: 32px; color: var(--warn); }
3664
+ .ds-stat-lbl { font-size: var(--fs-micro); color: var(--fg-3); margin-top: 2px; }
3665
+
3666
+ /* SubGrid */
3667
+ .ds-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 8px; }
3668
+ .ds-sub-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
3669
+ .ds-sub-btn {
3670
+ padding: 6px 10px; background: var(--bg-3); border: var(--bw-hair) solid var(--bg-3);
3671
+ border-radius: 4px; font-size: var(--fs-tiny); cursor: pointer; color: var(--fg);
3672
+ text-align: left; font-family: var(--ff-body);
3673
+ }
3674
+ .ds-sub-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
3675
+ .ds-sub-btn span { display: block; font-size: 18px; font-weight: 700; color: var(--accent-ink); }
3676
+
3677
+ /* SessionRow */
3678
+ .ds-session-row {
3679
+ display: flex; align-items: center; gap: 8px; padding: 6px 10px;
3680
+ border-bottom: var(--bw-hair) solid var(--bg-3); cursor: pointer;
3681
+ }
3682
+ .ds-session-row:hover { background: var(--bg-3); }
3683
+ .ds-session-row-id {
3684
+ font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--accent-ink);
3685
+ width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
3686
+ }
3687
+ .ds-session-row-counts { font-size: var(--fs-micro); color: var(--fg-3); width: 280px; }
3688
+ .ds-session-row-devcnt { color: var(--warn); font-weight: 600; }
3689
+ .ds-session-row-span { font-size: var(--fs-micro); color: var(--fg-3); }
3690
+
3691
+ /* DevRow */
3692
+ .ds-dev-row {
3693
+ background: var(--danger-surface); border-left: var(--bw-chunk) solid var(--warn);
3694
+ padding: 8px 12px; margin: 4px 0; border-radius: 3px; font-size: var(--fs-tiny);
3695
+ }
3696
+ .ds-dev-row strong { color: var(--warn); }
3697
+
3698
+ /* LiveLog */
3699
+ .ds-live-log {
3700
+ height: calc(100vh - 200px); overflow-y: auto;
3701
+ font-family: var(--ff-mono); font-size: var(--fs-micro); line-height: 1.5;
3702
+ }
3703
+ .ds-live-log-empty { height: auto; padding: var(--space-3); color: var(--fg-3); }
3704
+ .ds-live-log-entry { padding: 2px 8px; border-bottom: var(--bw-hair) solid var(--bg-3); }
3705
+ .ds-live-log-entry:hover { background: var(--bg-3); }
3706
+ .ds-live-log-ts { margin-right: 6px; color: var(--fg-3); }
3707
+ .ds-live-log-subtag { margin-right: 6px; padding: 0 5px; border-radius: 2px; font-size: var(--fs-micro); }
3708
+ .ds-live-log-preview { margin-left: 6px; color: var(--fg-3); }
package/dist/247420.css CHANGED
@@ -986,6 +986,9 @@
986
986
  .ds-247420 .ds-badge.tone-error { background: var(--flame); color: var(--on-color); }
987
987
  .ds-247420 .ds-badge.tone-success { background: var(--green-tint); color: var(--green-deep); }
988
988
  .ds-247420 .ds-badge.tone-neutral { background: var(--bg-3); color: var(--fg-2); }
989
+ .ds-247420 .ds-badge.tone-blue { background: var(--accent-tint); color: var(--accent-ink); }
990
+ .ds-247420 .ds-badge.tone-orange { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
991
+ .ds-247420 .ds-badge.tone-yellow { background: var(--sun); color: var(--ink); }
989
992
 
990
993
  .ds-247420 .chip {
991
994
  display: inline-flex; align-items: center; gap: 6px;
@@ -1009,6 +1012,20 @@
1009
1012
  .ds-247420 .chip.tone-ok { background: var(--green-tint); color: var(--green-deep); }
1010
1013
  .ds-247420 .chip.tone-miss { background: var(--flame); color: var(--on-color); }
1011
1014
  .ds-247420 .chip.tone-neutral { background: var(--bg-3); color: var(--fg-2); }
1015
+ .ds-247420 .chip.tone-blue { background: var(--accent-tint); color: var(--accent-ink); }
1016
+ .ds-247420 .chip.tone-orange { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
1017
+ .ds-247420 .chip.tone-yellow { background: var(--sun); color: var(--ink); }
1018
+
1019
+ /* ds-pill — plain neutral chip, distinct from the toned .ds-badge/.chip family
1020
+ (gmsniff's .pill: a bare rounded label with no semantic tone). */
1021
+ .ds-247420 .ds-pill {
1022
+ display: inline-block;
1023
+ padding: 1px 7px;
1024
+ border-radius: var(--r-pill);
1025
+ font-size: var(--fs-micro);
1026
+ background: var(--bg-3); color: var(--fg-2);
1027
+ margin: 1px;
1028
+ }
1012
1029
 
1013
1030
  .ds-247420 .glyph {
1014
1031
  display: inline-flex; align-items: center; justify-content: center;
@@ -3996,7 +4013,11 @@
3996
4013
  /* Expand/collapse is meaningless on the icon strip. */
3997
4014
  .ds-247420 .ws-rail-toggle { display: none; }
3998
4015
  .ds-247420 .ws-rail-foot { display: flex; justify-content: center; }
3999
- .ds-247420 .ws-sessions { inset: 0 auto 0 var(--ws-rail-w-collapsed); }
4016
+ /* The 1100px rule's closed-state translateX(-110%) was sized for left:0;
4017
+ once left shifts to the collapsed rail width, -110% no longer clears the
4018
+ viewport and leaves a sliver of the "closed" drawer visible on screen. */
4019
+ .ds-247420 .ws-sessions { inset: 0 auto 0 var(--ws-rail-w-collapsed); transform: translateX(calc(-100% - var(--ws-rail-w-collapsed))); }
4020
+ .ds-247420 .ws-shell.ws-sessions-open .ws-sessions { transform: translateX(0); }
4000
4021
  .ds-247420 .ws-content { grid-area: content; padding-left: var(--ws-rail-w-collapsed); }
4001
4022
  /* The Crumb's narrow collapse elsewhere keys on the .app @container, which
4002
4023
  does not exist inside WorkspaceShell - mirror it here so the crumb bar
@@ -4075,6 +4096,108 @@
4075
4096
  .ds-247420 .ws-main { overflow: visible; height: auto; }
4076
4097
  }
4077
4098
 
4099
+ /* ============================================================
4100
+ Data density — dense observability/dashboard primitives (ported from the
4101
+ gmsniff GUI). Components: PhaseWalk, TreeNode, BarRow, StatTile/StatsGrid,
4102
+ SubGrid, SessionRow, DevRow, LiveLog/LiveLogEntry. src/components/data-density.js.
4103
+ All colors derive from colors_and_type.css tokens — see lint-tokens.mjs.
4104
+ ============================================================ */
4105
+
4106
+ /* --danger-surface: semantic surface for a deviation/error callout background
4107
+ (gmsniff's #3a1a1a dark-red-tinted panel). Derived from --warn so it always
4108
+ reads as "danger" against the active theme instead of a baked literal. */
4109
+ .ds-247420 {
4110
+ --danger-surface: color-mix(in oklab, var(--warn) 14%, var(--bg));
4111
+ }
4112
+
4113
+ /* PhaseWalk */
4114
+ .ds-247420 .ds-phasewalk { display: inline-flex; gap: 2px; vertical-align: middle; }
4115
+ .ds-247420 .ds-phasewalk-seg {
4116
+ width: 18px; height: 10px; border-radius: 2px;
4117
+ background: var(--bg-3); position: relative;
4118
+ }
4119
+ .ds-247420 .ds-phasewalk-seg.is-reached { background: var(--success); }
4120
+ .ds-247420 .ds-phasewalk-seg.is-gap { background: var(--warn); }
4121
+ .ds-247420 .ds-phasewalk-lbl {
4122
+ position: absolute; top: -15px; left: 0;
4123
+ font-size: var(--fs-micro); color: var(--fg-3); white-space: nowrap;
4124
+ }
4125
+
4126
+ /* TreeNode */
4127
+ .ds-247420 .ds-tree-node {
4128
+ padding: 5px 10px; border-left: var(--bw-rule) solid var(--bg-3);
4129
+ margin: 2px 0 2px 16px; font-size: var(--fs-tiny);
4130
+ }
4131
+ .ds-247420 .ds-tree-node.is-phase { border-color: var(--accent); background: var(--bg-3); font-weight: 600; }
4132
+ .ds-247420 .ds-tree-node.is-deviation { border-color: var(--warn); background: var(--danger-surface); color: var(--warn); }
4133
+ .ds-247420 .ds-tree-node.is-mutable-resolve { border-color: var(--success); }
4134
+ .ds-247420 .ds-tree-node.is-prd-add { border-color: var(--sun); }
4135
+ .ds-247420 .ds-tree-node-ts { margin-right: 8px; color: var(--fg-3); }
4136
+ .ds-247420 .ds-tree-node-pills { margin-left: 6px; }
4137
+ .ds-247420 .ds-tree-node-reason { margin-top: 2px; color: var(--fg-2); }
4138
+ .ds-247420 .ds-tree-node-deviation { margin-top: 2px; }
4139
+ .ds-247420 .ds-tree-node-residuals { margin-top: 2px; color: var(--fg-3); }
4140
+
4141
+ /* BarRow */
4142
+ .ds-247420 .ds-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-tiny); }
4143
+ .ds-247420 .ds-bar-row-label { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4144
+ .ds-247420 .ds-bar-bg { flex: 1; background: var(--bg-3); border-radius: 2px; height: 6px; overflow: hidden; }
4145
+ .ds-247420 .ds-bar-fill { background: var(--accent); height: 100%; border-radius: 2px; }
4146
+ .ds-247420 .ds-bar-row-value { flex-shrink: 0; color: var(--fg-2); }
4147
+
4148
+ /* StatTile / StatsGrid */
4149
+ .ds-247420 .ds-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
4150
+ .ds-247420 .ds-stats-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
4151
+ .ds-247420 .ds-stat { background: var(--bg-3); border-radius: 4px; padding: 10px 12px; }
4152
+ .ds-247420 .ds-stat-val { font-size: 22px; font-weight: 700; color: var(--accent-ink); }
4153
+ .ds-247420 .ds-stat-val.rate-big { font-size: 32px; color: var(--success); }
4154
+ .ds-247420 .ds-stat-val.err-rate { font-size: 32px; color: var(--warn); }
4155
+ .ds-247420 .ds-stat-lbl { font-size: var(--fs-micro); color: var(--fg-3); margin-top: 2px; }
4156
+
4157
+ /* SubGrid */
4158
+ .ds-247420 .ds-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 8px; }
4159
+ .ds-247420 .ds-sub-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
4160
+ .ds-247420 .ds-sub-btn {
4161
+ padding: 6px 10px; background: var(--bg-3); border: var(--bw-hair) solid var(--bg-3);
4162
+ border-radius: 4px; font-size: var(--fs-tiny); cursor: pointer; color: var(--fg);
4163
+ text-align: left; font-family: var(--ff-body);
4164
+ }
4165
+ .ds-247420 .ds-sub-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
4166
+ .ds-247420 .ds-sub-btn span { display: block; font-size: 18px; font-weight: 700; color: var(--accent-ink); }
4167
+
4168
+ /* SessionRow */
4169
+ .ds-247420 .ds-session-row {
4170
+ display: flex; align-items: center; gap: 8px; padding: 6px 10px;
4171
+ border-bottom: var(--bw-hair) solid var(--bg-3); cursor: pointer;
4172
+ }
4173
+ .ds-247420 .ds-session-row:hover { background: var(--bg-3); }
4174
+ .ds-247420 .ds-session-row-id {
4175
+ font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--accent-ink);
4176
+ width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
4177
+ }
4178
+ .ds-247420 .ds-session-row-counts { font-size: var(--fs-micro); color: var(--fg-3); width: 280px; }
4179
+ .ds-247420 .ds-session-row-devcnt { color: var(--warn); font-weight: 600; }
4180
+ .ds-247420 .ds-session-row-span { font-size: var(--fs-micro); color: var(--fg-3); }
4181
+
4182
+ /* DevRow */
4183
+ .ds-247420 .ds-dev-row {
4184
+ background: var(--danger-surface); border-left: var(--bw-chunk) solid var(--warn);
4185
+ padding: 8px 12px; margin: 4px 0; border-radius: 3px; font-size: var(--fs-tiny);
4186
+ }
4187
+ .ds-247420 .ds-dev-row strong { color: var(--warn); }
4188
+
4189
+ /* LiveLog */
4190
+ .ds-247420 .ds-live-log {
4191
+ height: calc(100vh - 200px); overflow-y: auto;
4192
+ font-family: var(--ff-mono); font-size: var(--fs-micro); line-height: 1.5;
4193
+ }
4194
+ .ds-247420 .ds-live-log-empty { height: auto; padding: var(--space-3); color: var(--fg-3); }
4195
+ .ds-247420 .ds-live-log-entry { padding: 2px 8px; border-bottom: var(--bw-hair) solid var(--bg-3); }
4196
+ .ds-247420 .ds-live-log-entry:hover { background: var(--bg-3); }
4197
+ .ds-247420 .ds-live-log-ts { margin-right: 6px; color: var(--fg-3); }
4198
+ .ds-247420 .ds-live-log-subtag { margin-right: 6px; padding: 0 5px; border-radius: 2px; font-size: var(--fs-micro); }
4199
+ .ds-247420 .ds-live-log-preview { margin-left: 6px; color: var(--fg-3); }
4200
+
4078
4201
  /* community.css */
4079
4202
  /* ============================================================
4080
4203
  247420 design system — community surface (Discord-style chat)