anentrypoint-design 0.0.157 → 0.0.160

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 (7) hide show
  1. package/app-shell.css +26 -14
  2. package/colors_and_type.css +2 -1
  3. package/dist/247420.css +28 -15
  4. package/dist/247420.js +10 -10
  5. package/package.json +1 -1
  6. package/src/components/content.js +4 -1
  7. package/src/components/shell.js +26 -21
package/app-shell.css CHANGED
@@ -186,14 +186,18 @@ pre .n { color: var(--green-2); }
186
186
 
187
187
  .app-topbar {
188
188
  position: sticky; top: 0; z-index: var(--z-header);
189
- display: grid; grid-template-columns: auto 1fr auto;
189
+ display: flex; flex-wrap: wrap;
190
190
  align-items: center; gap: var(--space-4);
191
191
  min-height: var(--app-topbar-h);
192
192
  padding: 10px var(--pad-x);
193
193
  background: color-mix(in oklab, var(--bg) 88%, transparent);
194
194
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
195
195
  }
196
- .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); }
196
+ .app-topbar > .brand { flex: 0 0 auto; }
197
+ .app-topbar > .app-search { flex: 1 1 auto; }
198
+ .app-topbar > nav { margin-left: auto; }
199
+ .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
200
+ .app-topbar nav a { flex: 0 0 auto; }
197
201
  .app-topbar nav a {
198
202
  color: var(--fg-2);
199
203
  padding: 12px 14px;
@@ -748,21 +752,23 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
748
752
  Mobile Portrait Breakpoint (480px and below)
749
753
  ────────────────────────────────────────────────────────────────────── */
750
754
  @media (max-width: 480px) {
751
- /* App Layout — drawer handled in 900px block below */
752
- .app-body { grid-template-columns: 1fr !important; }
753
- .app-body.no-side { grid-template-columns: 1fr; }
755
+ /* App Layout: single-column + drawer is handled once in the ≤900px block;
756
+ no need to re-declare grid-template-columns here (was a redundant !important). */
754
757
 
755
- /* Topbar Navigation */
758
+ /* Topbar Navigation: stack the nav onto its own full-width row below the
759
+ brand and let it scroll horizontally. The brand stays on the first row;
760
+ nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */
756
761
  .app-topbar {
757
- grid-template-columns: 1fr auto;
758
762
  gap: var(--space-2); padding: 12px var(--space-3);
759
763
  }
760
- .app-topbar nav a {
761
- padding: 12px 10px;
762
- min-height: 44px;
764
+ .app-topbar > nav {
765
+ flex: 1 1 100%; margin-left: 0; order: 3;
766
+ display: flex; gap: 2px; flex-wrap: nowrap;
767
+ overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
763
768
  }
764
- .app-topbar nav {
765
- display: none; /* Hide full nav on very small screens */
769
+ .app-topbar nav::-webkit-scrollbar { display: none; }
770
+ .app-topbar nav a {
771
+ flex: 0 0 auto; padding: 10px 12px; min-height: 44px; white-space: nowrap;
766
772
  }
767
773
  .brand { font-size: var(--fs-tiny); font-weight: 600; }
768
774
 
@@ -1851,7 +1857,8 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
1851
1857
  border-radius: 50%; flex-shrink: 0;
1852
1858
  }
1853
1859
  .aicat-meta { display: flex; flex-direction: column; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
1854
- .aicat-meta .name { color: var(--mascot); font-weight: 600; }
1860
+ .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
1861
+ [data-theme="dark"] .aicat-meta .name, [data-theme="ink"] .aicat-meta .name { color: var(--mascot); }
1855
1862
 
1856
1863
  /* ============================================================
1857
1864
  Sidebar polish: hide zero-count badges; tonal active state;
@@ -2561,7 +2568,12 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
2561
2568
  padding: 10px 12px;
2562
2569
  }
2563
2570
  .app-side .group { width: 100%; }
2564
- .app-crumb { display: none; }
2571
+ /* Keep the crumb on mobile — apps mount contextual controls (model picker,
2572
+ actions, live status) in crumb-right, so hiding it strands them. Collapse
2573
+ the breadcrumb trail/leaf instead and let the right cluster wrap. */
2574
+ .app-crumb { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 8px 12px; }
2575
+ .app-crumb > .sep, .app-crumb > span:not(.crumb-right):not(.leaf) { display: none; }
2576
+ .app-crumb .crumb-right { margin-left: 0; }
2565
2577
  .chat-head { padding: var(--space-2) var(--space-3) var(--space-2); margin-bottom: var(--space-2); }
2566
2578
  .app-main { padding-left: var(--space-3); padding-right: var(--space-3); }
2567
2579
  }
package/colors_and_type.css CHANGED
@@ -31,6 +31,7 @@
31
31
  --mascot: #E84B8A;
32
32
  --mascot-2: #FF3CA7;
33
33
  --mascot-tint: #F5D2DF;
34
+ --mascot-deep: #B81F63;
34
35
 
35
36
  /* Signals */
36
37
  --sun: #F5C344;
@@ -51,7 +52,7 @@
51
52
 
52
53
  --accent: var(--green);
53
54
  --accent-fg: var(--paper);
54
- --accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
55
+ --accent-tint: color-mix(in oklab, var(--accent) 26%, var(--bg));
55
56
 
56
57
  --panel-bg: var(--bg);
57
58
  --panel-bg-2: var(--bg-2);
package/dist/247420.css CHANGED
@@ -33,6 +33,7 @@
33
33
  --mascot: #E84B8A;
34
34
  --mascot-2: #FF3CA7;
35
35
  --mascot-tint: #F5D2DF;
36
+ --mascot-deep: #B81F63;
36
37
 
37
38
  /* Signals */
38
39
  --sun: #F5C344;
@@ -53,7 +54,7 @@
53
54
 
54
55
  --accent: var(--green);
55
56
  --accent-fg: var(--paper);
56
- --accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
57
+ --accent-tint: color-mix(in oklab, var(--accent) 26%, var(--bg));
57
58
 
58
59
  --panel-bg: var(--bg);
59
60
  --panel-bg-2: var(--bg-2);
@@ -517,14 +518,18 @@
517
518
 
518
519
  .ds-247420 .app-topbar {
519
520
  position: sticky; top: 0; z-index: var(--z-header);
520
- display: grid; grid-template-columns: auto 1fr auto;
521
+ display: flex; flex-wrap: wrap;
521
522
  align-items: center; gap: var(--space-4);
522
523
  min-height: var(--app-topbar-h);
523
524
  padding: 10px var(--pad-x);
524
525
  background: color-mix(in oklab, var(--bg) 88%, transparent);
525
526
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
526
527
  }
527
- .ds-247420 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); }
528
+ .ds-247420 .app-topbar > .brand { flex: 0 0 auto; }
529
+ .ds-247420 .app-topbar > .app-search { flex: 1 1 auto; }
530
+ .ds-247420 .app-topbar > nav { margin-left: auto; }
531
+ .ds-247420 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
532
+ .ds-247420 .app-topbar nav a { flex: 0 0 auto; }
528
533
  .ds-247420 .app-topbar nav a {
529
534
  color: var(--fg-2);
530
535
  padding: 12px 14px;
@@ -1079,21 +1084,23 @@
1079
1084
  Mobile Portrait Breakpoint (480px and below)
1080
1085
  ────────────────────────────────────────────────────────────────────── */
1081
1086
  @media (max-width: 480px) {
1082
- /* App Layout — drawer handled in 900px block below */
1083
- .ds-247420 .app-body { grid-template-columns: 1fr !important; }
1084
- .ds-247420 .app-body.no-side { grid-template-columns: 1fr; }
1087
+ /* App Layout: single-column + drawer is handled once in the ≤900px block;
1088
+ no need to re-declare grid-template-columns here (was a redundant !important). */
1085
1089
 
1086
- /* Topbar Navigation */
1090
+ /* Topbar Navigation: stack the nav onto its own full-width row below the
1091
+ brand and let it scroll horizontally. The brand stays on the first row;
1092
+ nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */
1087
1093
  .ds-247420 .app-topbar {
1088
- grid-template-columns: 1fr auto;
1089
1094
  gap: var(--space-2); padding: 12px var(--space-3);
1090
1095
  }
1091
- .ds-247420 .app-topbar nav a {
1092
- padding: 12px 10px;
1093
- min-height: 44px;
1096
+ .ds-247420 .app-topbar > nav {
1097
+ flex: 1 1 100%; margin-left: 0; order: 3;
1098
+ display: flex; gap: 2px; flex-wrap: nowrap;
1099
+ overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
1094
1100
  }
1095
- .ds-247420 .app-topbar nav {
1096
- display: none; /* Hide full nav on very small screens */
1101
+ .ds-247420 .app-topbar nav::-webkit-scrollbar { display: none; }
1102
+ .ds-247420 .app-topbar nav a {
1103
+ flex: 0 0 auto; padding: 10px 12px; min-height: 44px; white-space: nowrap;
1097
1104
  }
1098
1105
  .ds-247420 .brand { font-size: var(--fs-tiny); font-weight: 600; }
1099
1106
 
@@ -2182,7 +2189,8 @@
2182
2189
  border-radius: 50%; flex-shrink: 0;
2183
2190
  }
2184
2191
  .ds-247420 .aicat-meta { display: flex; flex-direction: column; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
2185
- .ds-247420 .aicat-meta .name { color: var(--mascot); font-weight: 600; }
2192
+ .ds-247420 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
2193
+ .ds-247420[data-theme="dark"] .aicat-meta .name, .ds-247420[data-theme="ink"] .aicat-meta .name { color: var(--mascot); }
2186
2194
 
2187
2195
  /* ============================================================
2188
2196
  Sidebar polish: hide zero-count badges; tonal active state;
@@ -2883,7 +2891,12 @@
2883
2891
  padding: 10px 12px;
2884
2892
  }
2885
2893
  .ds-247420 .app-side .group { width: 100%; }
2886
- .ds-247420 .app-crumb { display: none; }
2894
+ /* Keep the crumb on mobile — apps mount contextual controls (model picker,
2895
+ actions, live status) in crumb-right, so hiding it strands them. Collapse
2896
+ the breadcrumb trail/leaf instead and let the right cluster wrap. */
2897
+ .ds-247420 .app-crumb { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 8px 12px; }
2898
+ .ds-247420 .app-crumb > .sep, .ds-247420 .app-crumb > span:not(.crumb-right):not(.leaf) { display: none; }
2899
+ .ds-247420 .app-crumb .crumb-right { margin-left: 0; }
2887
2900
  .ds-247420 .chat-head { padding: var(--space-2) var(--space-3) var(--space-2); margin-bottom: var(--space-2); }
2888
2901
  .ds-247420 .app-main { padding-left: var(--space-3); padding-right: var(--space-3); }
2889
2902
  }