@compose-market/theme 0.0.75 → 0.0.80

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 (25) hide show
  1. package/dist/agents/styles.d.ts +1 -1
  2. package/dist/agents/styles.d.ts.map +1 -1
  3. package/dist/agents/styles.js +37 -29
  4. package/dist/agents/styles.js.map +1 -1
  5. package/dist/app/styles.d.ts +1 -1
  6. package/dist/app/styles.d.ts.map +1 -1
  7. package/dist/app/styles.js +18 -9
  8. package/dist/app/styles.js.map +1 -1
  9. package/dist/css/agents.css +37 -29
  10. package/dist/css/app.css +18 -9
  11. package/dist/css/index.d.ts +1 -1
  12. package/dist/css/index.d.ts.map +1 -1
  13. package/dist/css/index.js +4 -0
  14. package/dist/css/index.js.map +1 -1
  15. package/dist/css/session.css +17 -10
  16. package/dist/css/shell.css +136 -100
  17. package/dist/session/styles.d.ts +1 -1
  18. package/dist/session/styles.d.ts.map +1 -1
  19. package/dist/session/styles.js +17 -10
  20. package/dist/session/styles.js.map +1 -1
  21. package/dist/shell/styles.d.ts +1 -1
  22. package/dist/shell/styles.d.ts.map +1 -1
  23. package/dist/shell/styles.js +136 -100
  24. package/dist/shell/styles.js.map +1 -1
  25. package/package.json +1 -1
package/dist/css/session.css CHANGED
@@ -43,7 +43,7 @@
43
43
  align-items: flex-start;
44
44
  justify-content: space-between;
45
45
  gap: 1rem;
46
- font-size: 0.76rem;
46
+ font-size: 0.72rem;
47
47
  }
48
48
 
49
49
  .cm-session-menu__row span,
@@ -71,7 +71,10 @@
71
71
  border: 0;
72
72
  background: transparent;
73
73
  color: hsl(var(--foreground));
74
- font-size: 0.86rem;
74
+ font-family: var(--font-mono), monospace;
75
+ font-size: 0.72rem;
76
+ letter-spacing: 0.08em;
77
+ text-transform: uppercase;
75
78
  cursor: pointer;
76
79
  transition: background-color 180ms ease, color 180ms ease;
77
80
  }
@@ -82,7 +85,7 @@
82
85
 
83
86
  .cm-session-modal {
84
87
  max-width: 34rem;
85
- border-radius: 0.65rem;
88
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
86
89
  }
87
90
 
88
91
  .cm-session-modal__title-wrap,
@@ -106,9 +109,10 @@
106
109
  .cm-session-section__label,
107
110
  .cm-session-manage__header {
108
111
  color: hsl(var(--muted-foreground));
109
- font-size: 0.78rem;
112
+ font-family: var(--font-mono), monospace;
113
+ font-size: 0.68rem;
110
114
  font-weight: 700;
111
- letter-spacing: 0.06em;
115
+ letter-spacing: 0.12em;
112
116
  text-transform: uppercase;
113
117
  }
114
118
 
@@ -121,11 +125,14 @@
121
125
  .cm-session-choice {
122
126
  min-height: 2.3rem;
123
127
  padding: 0.45rem 0.6rem;
124
- border-radius: 0.45rem;
128
+ border-radius: var(--radius, 0.25rem);
125
129
  border: 1px solid hsl(var(--border));
126
130
  background: hsl(var(--muted));
127
131
  color: hsl(var(--foreground));
128
- font-size: 0.82rem;
132
+ font-family: var(--font-mono), monospace;
133
+ font-size: 0.72rem;
134
+ letter-spacing: 0.08em;
135
+ text-transform: uppercase;
129
136
  cursor: pointer;
130
137
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
131
138
  }
@@ -141,7 +148,7 @@
141
148
  display: grid;
142
149
  gap: 0.45rem;
143
150
  padding: 0.9rem 1rem;
144
- border-radius: 0.55rem;
151
+ border-radius: var(--radius, 0.25rem);
145
152
  border: 1px solid hsl(var(--border));
146
153
  background: hsl(var(--muted) / 0.45);
147
154
  }
@@ -192,7 +199,7 @@
192
199
  min-height: 9rem;
193
200
  padding: 1rem;
194
201
  border: 1px dashed hsl(var(--border));
195
- border-radius: 0.65rem;
202
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
196
203
  color: hsl(var(--muted-foreground));
197
204
  text-align: center;
198
205
  }
@@ -237,7 +244,7 @@
237
244
  display: inline-flex;
238
245
  align-items: center;
239
246
  justify-content: center;
240
- border-radius: 0.65rem;
247
+ border-radius: var(--radius, 0.25rem);
241
248
  border: 1px solid hsl(var(--border));
242
249
  background: transparent;
243
250
  color: hsl(var(--muted-foreground));
package/dist/css/shell.css CHANGED
@@ -4,13 +4,14 @@
4
4
  */
5
5
 
6
6
  :root {
7
- --cm-shell-glow-primary: hsl(var(--primary) / 0.32);
8
- --cm-shell-glow-accent: hsl(314 100% 64% / 0.18);
9
- --cm-shell-surface: linear-gradient(180deg, hsl(var(--card) / 0.9), hsl(var(--background) / 0.92));
10
- --cm-shell-border: hsl(var(--border) / 0.78);
7
+ --cm-shell-glow-primary: hsl(var(--primary) / 0.24);
8
+ --cm-shell-glow-accent: hsl(var(--accent) / 0.14);
9
+ --cm-shell-surface:
10
+ linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.82));
11
+ --cm-shell-border: hsl(var(--border) / 0.92);
11
12
  --cm-shell-shadow:
12
- 0 24px 72px hsl(240 30% 2% / 0.45),
13
- inset 0 1px 0 hsl(0 0% 100% / 0.05);
13
+ 0 16px 48px hsl(240 30% 2% / 0.38),
14
+ inset 0 1px 0 hsl(0 0% 100% / 0.04);
14
15
  }
15
16
 
16
17
  .cm-shell-stack {
@@ -31,27 +32,31 @@
31
32
  align-items: center;
32
33
  justify-content: center;
33
34
  gap: 0.55rem;
34
- min-height: 2.5rem;
35
- padding: 0 1rem;
36
- border-radius: 0.55rem;
37
- border: 1px solid transparent;
38
- background: transparent;
35
+ min-height: 2.3rem;
36
+ padding: 0 0.95rem;
37
+ border-radius: var(--radius, 0.25rem);
38
+ border: 1px solid hsl(var(--border) / 0.88);
39
+ background: hsl(var(--card) / 0.92);
39
40
  color: hsl(var(--foreground));
40
- font-family: var(--font-sans), sans-serif;
41
- font-size: 0.9rem;
41
+ font-family: var(--font-mono), monospace;
42
+ font-size: 0.76rem;
42
43
  font-weight: 600;
44
+ letter-spacing: 0.08em;
43
45
  line-height: 1;
46
+ text-transform: uppercase;
44
47
  cursor: pointer;
45
48
  transition:
46
- transform 180ms ease,
47
- background-color 180ms ease,
49
+ transform 160ms ease,
50
+ background-color 160ms ease,
48
51
  border-color 180ms ease,
49
52
  color 180ms ease,
50
53
  box-shadow 180ms ease;
54
+ box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.03);
51
55
  }
52
56
 
53
57
  .cm-shell-button:hover:not(:disabled) {
54
58
  transform: translateY(-1px);
59
+ border-color: hsl(var(--primary) / 0.38);
55
60
  }
56
61
 
57
62
  .cm-shell-button:disabled {
@@ -61,42 +66,45 @@
61
66
 
62
67
  .cm-shell-button--primary {
63
68
  background:
64
- linear-gradient(135deg, hsl(var(--primary) / 0.9), hsl(314 100% 64% / 0.78));
69
+ linear-gradient(180deg, hsl(var(--primary)), hsl(188 95% 39%));
65
70
  color: hsl(var(--primary-foreground));
66
- border-color: hsl(var(--primary) / 0.42);
67
- box-shadow: 0 0 24px var(--cm-shell-glow-primary);
71
+ border-color: hsl(var(--primary) / 0.56);
72
+ box-shadow:
73
+ 0 0 0 1px hsl(var(--primary) / 0.16),
74
+ 0 0 20px var(--cm-shell-glow-primary);
68
75
  }
69
76
 
70
77
  .cm-shell-button--primary:hover:not(:disabled) {
71
78
  box-shadow:
72
- 0 0 30px var(--cm-shell-glow-primary),
73
- 0 0 22px var(--cm-shell-glow-accent);
79
+ 0 0 0 1px hsl(var(--primary) / 0.18),
80
+ 0 0 24px var(--cm-shell-glow-primary),
81
+ 0 0 18px var(--cm-shell-glow-accent);
74
82
  }
75
83
 
76
84
  .cm-shell-button--secondary {
77
- background: hsl(var(--muted) / 0.32);
85
+ background: hsl(var(--muted) / 0.28);
78
86
  border-color: hsl(var(--border) / 0.88);
79
87
  }
80
88
 
81
89
  .cm-shell-button--secondary:hover:not(:disabled) {
82
- border-color: hsl(var(--primary) / 0.4);
83
- background: hsl(var(--muted) / 0.52);
90
+ background: hsl(var(--muted) / 0.54);
84
91
  }
85
92
 
86
93
  .cm-shell-button--ghost {
87
94
  background: transparent;
88
95
  border-color: transparent;
89
96
  color: hsl(var(--muted-foreground));
97
+ box-shadow: none;
90
98
  }
91
99
 
92
100
  .cm-shell-button--ghost:hover:not(:disabled) {
93
101
  color: hsl(var(--foreground));
94
- background: hsl(var(--muted) / 0.2);
102
+ background: hsl(var(--muted) / 0.24);
95
103
  }
96
104
 
97
105
  .cm-shell-button--danger {
98
106
  background: hsl(var(--destructive) / 0.12);
99
- border-color: hsl(var(--destructive) / 0.3);
107
+ border-color: hsl(var(--destructive) / 0.42);
100
108
  color: hsl(var(--destructive-foreground));
101
109
  }
102
110
 
@@ -106,17 +114,18 @@
106
114
 
107
115
  .cm-shell-button--sm {
108
116
  min-height: 2rem;
109
- padding: 0 0.8rem;
110
- font-size: 0.78rem;
117
+ padding: 0 0.75rem;
118
+ font-size: 0.7rem;
111
119
  }
112
120
 
113
121
  .cm-shell-button--lg {
114
- min-height: 2.9rem;
115
- padding: 0 1.15rem;
122
+ min-height: 2.65rem;
123
+ padding: 0 1.1rem;
124
+ font-size: 0.82rem;
116
125
  }
117
126
 
118
127
  .cm-shell-button--icon {
119
- width: 2.5rem;
128
+ width: 2.3rem;
120
129
  padding: 0;
121
130
  }
122
131
 
@@ -124,14 +133,15 @@
124
133
  display: inline-flex;
125
134
  align-items: center;
126
135
  gap: 0.45rem;
127
- min-height: 1.9rem;
128
- padding: 0 0.8rem;
136
+ min-height: 1.75rem;
137
+ padding: 0 0.72rem;
129
138
  border-radius: 999px;
130
- border: 1px solid hsl(var(--border) / 0.72);
131
- background: hsl(var(--muted) / 0.28);
139
+ border: 1px solid hsl(var(--primary) / 0.18);
140
+ background: linear-gradient(180deg, hsl(var(--card) / 0.94), hsl(var(--muted) / 0.3));
132
141
  color: hsl(var(--muted-foreground));
133
- font-size: 0.76rem;
134
- letter-spacing: 0.02em;
142
+ font-family: var(--font-mono), monospace;
143
+ font-size: 0.68rem;
144
+ letter-spacing: 0.08em;
135
145
  text-transform: uppercase;
136
146
  }
137
147
 
@@ -142,15 +152,15 @@
142
152
 
143
153
  .cm-shell-panel {
144
154
  border: 1px solid var(--cm-shell-border);
145
- border-radius: 1rem;
155
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
146
156
  background: var(--cm-shell-surface);
147
157
  box-shadow: var(--cm-shell-shadow);
148
- backdrop-filter: blur(14px);
158
+ backdrop-filter: blur(16px);
149
159
  }
150
160
 
151
161
  .cm-shell-panel--muted {
152
162
  background:
153
- linear-gradient(180deg, hsl(var(--muted) / 0.38), hsl(var(--background) / 0.84));
163
+ linear-gradient(180deg, hsl(var(--muted) / 0.34), hsl(var(--background) / 0.9));
154
164
  }
155
165
 
156
166
  .cm-shell-panel--ghost {
@@ -159,7 +169,7 @@
159
169
  }
160
170
 
161
171
  .cm-shell-panel__body {
162
- padding: 1.2rem;
172
+ padding: 1rem;
163
173
  }
164
174
 
165
175
  .cm-shell-page-header {
@@ -167,34 +177,36 @@
167
177
  align-items: flex-start;
168
178
  justify-content: space-between;
169
179
  gap: 1rem;
170
- padding: 1.35rem 1.45rem;
180
+ padding: 1rem 1.1rem;
171
181
  }
172
182
 
173
183
  .cm-shell-page-header__copy {
174
184
  display: flex;
175
185
  flex-direction: column;
176
- gap: 0.45rem;
186
+ gap: 0.32rem;
177
187
  }
178
188
 
179
189
  .cm-shell-page-header__eyebrow {
180
190
  color: hsl(var(--primary));
181
191
  font-family: var(--font-mono), monospace;
182
- font-size: 0.76rem;
183
- letter-spacing: 0.16em;
192
+ font-size: 0.68rem;
193
+ letter-spacing: 0.18em;
184
194
  text-transform: uppercase;
185
195
  }
186
196
 
187
197
  .cm-shell-page-header__title {
188
198
  color: hsl(var(--foreground));
189
199
  font-family: var(--font-display), sans-serif;
190
- font-size: clamp(1.2rem, 2vw, 1.65rem);
191
- letter-spacing: 0.02em;
200
+ font-size: clamp(1.12rem, 1.65vw, 1.52rem);
201
+ letter-spacing: 0.04em;
202
+ line-height: 1.02;
192
203
  }
193
204
 
194
205
  .cm-shell-page-header__subtitle {
195
206
  color: hsl(var(--muted-foreground));
196
- font-size: 0.92rem;
197
- max-width: 56rem;
207
+ font-size: 0.88rem;
208
+ line-height: 1.45;
209
+ max-width: 48rem;
198
210
  }
199
211
 
200
212
  .cm-shell-stat-grid {
@@ -207,34 +219,36 @@
207
219
  display: flex;
208
220
  flex-direction: column;
209
221
  gap: 0.25rem;
210
- padding: 0.9rem 1rem;
222
+ padding: 0.85rem 0.9rem;
211
223
  }
212
224
 
213
225
  .cm-shell-stat__label {
214
226
  color: hsl(var(--muted-foreground));
215
- font-size: 0.76rem;
216
- letter-spacing: 0.08em;
227
+ font-family: var(--font-mono), monospace;
228
+ font-size: 0.66rem;
229
+ letter-spacing: 0.12em;
217
230
  text-transform: uppercase;
218
231
  }
219
232
 
220
233
  .cm-shell-stat__value {
221
234
  color: hsl(var(--foreground));
222
235
  font-family: var(--font-display), sans-serif;
223
- font-size: 1.1rem;
236
+ font-size: 1rem;
237
+ letter-spacing: 0.04em;
224
238
  }
225
239
 
226
240
  .cm-shell-stat__hint {
227
241
  color: hsl(var(--muted-foreground));
228
- font-size: 0.78rem;
242
+ font-size: 0.74rem;
229
243
  }
230
244
 
231
245
  .cm-shell-tab-strip {
232
246
  display: inline-flex;
233
247
  align-items: center;
234
248
  gap: 0.35rem;
235
- padding: 0.35rem;
249
+ padding: 0.25rem;
236
250
  border: 1px solid hsl(var(--border) / 0.75);
237
- border-radius: 999px;
251
+ border-radius: var(--radius, 0.25rem);
238
252
  background: hsl(var(--muted) / 0.16);
239
253
  }
240
254
 
@@ -242,15 +256,15 @@
242
256
  display: inline-flex;
243
257
  align-items: center;
244
258
  gap: 0.5rem;
245
- min-height: 2.35rem;
246
- padding: 0 1rem;
247
- border-radius: 999px;
259
+ min-height: 2.1rem;
260
+ padding: 0 0.85rem;
261
+ border-radius: calc(var(--radius, 0.25rem) - 1px);
248
262
  border: 1px solid transparent;
249
263
  background: transparent;
250
264
  color: hsl(var(--muted-foreground));
251
265
  font-family: var(--font-mono), monospace;
252
- font-size: 0.76rem;
253
- letter-spacing: 0.08em;
266
+ font-size: 0.68rem;
267
+ letter-spacing: 0.12em;
254
268
  text-transform: uppercase;
255
269
  cursor: pointer;
256
270
  transition:
@@ -262,21 +276,25 @@
262
276
 
263
277
  .cm-shell-tab:hover {
264
278
  color: hsl(var(--foreground));
279
+ border-color: hsl(var(--primary) / 0.18);
265
280
  }
266
281
 
267
282
  .cm-shell-tab[data-active="true"] {
268
- background: linear-gradient(135deg, hsl(var(--primary) / 0.22), hsl(314 100% 64% / 0.18));
269
- border-color: hsl(var(--primary) / 0.34);
283
+ background:
284
+ linear-gradient(180deg, hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.1));
285
+ border-color: hsl(var(--primary) / 0.36);
270
286
  color: hsl(var(--foreground));
271
- box-shadow: 0 0 22px hsl(var(--primary) / 0.18);
287
+ box-shadow:
288
+ inset 0 1px 0 hsl(var(--primary) / 0.16),
289
+ 0 0 18px hsl(var(--primary) / 0.14);
272
290
  }
273
291
 
274
292
  .cm-shell-notice {
275
293
  display: flex;
276
294
  align-items: center;
277
295
  gap: 0.7rem;
278
- padding: 0.9rem 1rem;
279
- border-radius: 0.9rem;
296
+ padding: 0.8rem 0.95rem;
297
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
280
298
  border: 1px solid;
281
299
  }
282
300
 
@@ -309,7 +327,7 @@
309
327
  align-items: center;
310
328
  justify-content: space-between;
311
329
  gap: 1rem;
312
- padding: 1rem 1.15rem;
330
+ padding: 0.95rem 1rem;
313
331
  }
314
332
 
315
333
  .cm-shell-banner__copy {
@@ -320,12 +338,15 @@
320
338
 
321
339
  .cm-shell-banner__title {
322
340
  color: hsl(var(--foreground));
323
- font-weight: 700;
341
+ font-family: var(--font-display), sans-serif;
342
+ font-size: 0.98rem;
343
+ letter-spacing: 0.03em;
324
344
  }
325
345
 
326
346
  .cm-shell-banner__subtitle {
327
347
  color: hsl(var(--muted-foreground));
328
- font-size: 0.9rem;
348
+ font-size: 0.84rem;
349
+ line-height: 1.45;
329
350
  }
330
351
 
331
352
  .cm-shell-empty {
@@ -335,7 +356,7 @@
335
356
  justify-content: center;
336
357
  gap: 0.75rem;
337
358
  min-height: 18rem;
338
- padding: 2.4rem 1.5rem;
359
+ padding: 2rem 1.25rem;
339
360
  text-align: center;
340
361
  }
341
362
 
@@ -346,12 +367,14 @@
346
367
  .cm-shell-empty__title {
347
368
  color: hsl(var(--foreground));
348
369
  font-family: var(--font-display), sans-serif;
349
- font-size: 1.2rem;
370
+ font-size: 1.08rem;
371
+ letter-spacing: 0.04em;
350
372
  }
351
373
 
352
374
  .cm-shell-empty__description {
353
375
  color: hsl(var(--muted-foreground));
354
376
  max-width: 38rem;
377
+ line-height: 1.55;
355
378
  }
356
379
 
357
380
  .cm-shell-modal-overlay {
@@ -360,9 +383,9 @@
360
383
  display: flex;
361
384
  align-items: center;
362
385
  justify-content: center;
363
- padding: 1.5rem;
364
- background: hsl(240 30% 2% / 0.68);
365
- backdrop-filter: blur(10px);
386
+ padding: 1rem;
387
+ background: hsl(240 30% 2% / 0.8);
388
+ backdrop-filter: blur(12px);
366
389
  z-index: 100;
367
390
  }
368
391
 
@@ -370,7 +393,7 @@
370
393
  width: min(100%, 46rem);
371
394
  max-height: min(90vh, 56rem);
372
395
  overflow: auto;
373
- border-radius: 0.65rem;
396
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
374
397
  }
375
398
 
376
399
  .cm-shell-modal__header {
@@ -378,23 +401,25 @@
378
401
  align-items: flex-start;
379
402
  justify-content: space-between;
380
403
  gap: 1rem;
381
- padding: 1.25rem 1.3rem 0;
404
+ padding: 1rem 1rem 0;
382
405
  }
383
406
 
384
407
  .cm-shell-modal__title {
385
408
  color: hsl(var(--foreground));
386
409
  font-family: var(--font-display), sans-serif;
387
- font-size: 1.1rem;
410
+ font-size: 1rem;
411
+ letter-spacing: 0.04em;
388
412
  }
389
413
 
390
414
  .cm-shell-modal__subtitle {
391
415
  color: hsl(var(--muted-foreground));
392
- font-size: 0.92rem;
393
- margin-top: 0.35rem;
416
+ font-size: 0.84rem;
417
+ margin-top: 0.3rem;
418
+ line-height: 1.45;
394
419
  }
395
420
 
396
421
  .cm-shell-modal__body {
397
- padding: 1.2rem 1.3rem 1.3rem;
422
+ padding: 1rem;
398
423
  }
399
424
 
400
425
  @media (max-width: 720px) {
@@ -416,15 +441,18 @@
416
441
 
417
442
  /* ── Form Controls ── */
418
443
  .cm-form-group {
419
- margin-bottom: 16px;
444
+ margin-bottom: 14px;
420
445
  }
421
446
 
422
447
  .cm-form-group label {
423
448
  display: block;
424
449
  margin-bottom: 6px;
425
- font-size: 13px;
450
+ font-family: var(--font-mono), monospace;
451
+ font-size: 11px;
426
452
  color: hsl(var(--muted-foreground));
427
- font-weight: 500;
453
+ font-weight: 600;
454
+ letter-spacing: 0.12em;
455
+ text-transform: uppercase;
428
456
  }
429
457
 
430
458
  .cm-form-input,
@@ -432,13 +460,13 @@
432
460
  .cm-form-select {
433
461
  width: 100%;
434
462
  padding: 10px 12px;
435
- background: hsl(var(--muted));
463
+ background: hsl(var(--input) / 0.92);
436
464
  border: 1px solid hsl(var(--border));
437
- border-radius: 6px;
465
+ border-radius: var(--radius, 0.25rem);
438
466
  color: hsl(var(--foreground));
439
467
  font-size: 14px;
440
468
  font-family: var(--font-sans), sans-serif;
441
- transition: border-color 0.2s;
469
+ transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
442
470
  }
443
471
 
444
472
  .cm-form-input:focus,
@@ -446,6 +474,8 @@
446
474
  .cm-form-select:focus {
447
475
  outline: none;
448
476
  border-color: hsl(var(--primary));
477
+ box-shadow: 0 0 0 1px hsl(var(--primary) / 0.24);
478
+ background: hsl(var(--background) / 0.96);
449
479
  }
450
480
 
451
481
  .cm-form-input:disabled,
@@ -509,27 +539,31 @@
509
539
  }
510
540
 
511
541
  .cm-nav-btn {
512
- padding: 8px 16px;
542
+ padding: 8px 14px;
513
543
  background: transparent;
514
- border: none;
544
+ border: 1px solid transparent;
515
545
  color: hsl(var(--muted-foreground));
516
546
  cursor: pointer;
517
- border-radius: 6px;
518
- font-size: 14px;
519
- font-weight: 500;
520
- font-family: var(--font-sans), sans-serif;
547
+ border-radius: var(--radius, 0.25rem);
548
+ font-size: 11px;
549
+ font-weight: 600;
550
+ font-family: var(--font-mono), monospace;
551
+ letter-spacing: 0.12em;
552
+ text-transform: uppercase;
521
553
  transition: all 0.2s;
522
554
  }
523
555
 
524
556
  .cm-nav-btn:hover {
525
557
  color: hsl(var(--foreground));
526
558
  background: hsl(var(--muted));
559
+ border-color: hsl(var(--primary) / 0.18);
527
560
  }
528
561
 
529
562
  .cm-nav-btn[data-active="true"],
530
563
  .cm-nav-btn.active {
531
564
  color: hsl(var(--primary));
532
- background: hsl(var(--primary) / 0.15);
565
+ background: hsl(var(--primary) / 0.12);
566
+ border-color: hsl(var(--primary) / 0.28);
533
567
  }
534
568
 
535
569
  /* ── Loading State ── */
@@ -594,10 +628,10 @@
594
628
  display: flex;
595
629
  align-items: center;
596
630
  gap: 12px;
597
- padding: 12px 16px;
631
+ padding: 10px 12px;
598
632
  background: hsl(var(--card));
599
633
  border: 1px solid hsl(var(--border));
600
- border-radius: 8px;
634
+ border-radius: var(--radius, 0.25rem);
601
635
  }
602
636
 
603
637
  .cm-search-bar__icon {
@@ -624,10 +658,12 @@
624
658
  padding: 6px 14px;
625
659
  background: hsl(var(--card));
626
660
  border: 1px solid hsl(var(--border));
627
- border-radius: 16px;
661
+ border-radius: 999px;
628
662
  color: hsl(var(--muted-foreground));
629
- font-size: 13px;
630
- font-family: var(--font-sans), sans-serif;
663
+ font-size: 11px;
664
+ font-family: var(--font-mono), monospace;
665
+ letter-spacing: 0.08em;
666
+ text-transform: uppercase;
631
667
  cursor: pointer;
632
668
  transition: all 0.2s;
633
669
  }
@@ -653,7 +689,7 @@
653
689
  background: transparent;
654
690
  border: 1px solid hsl(var(--border));
655
691
  color: hsl(var(--muted-foreground));
656
- border-radius: 6px;
692
+ border-radius: var(--radius, 0.25rem);
657
693
  cursor: pointer;
658
694
  font-family: var(--font-sans), sans-serif;
659
695
  transition: all 0.2s;
@@ -672,10 +708,10 @@
672
708
  /* ── Settings Section ── */
673
709
  .cm-settings-section {
674
710
  margin-bottom: 24px;
675
- padding: 20px;
711
+ padding: 16px;
676
712
  background: hsl(var(--card));
677
713
  border: 1px solid hsl(var(--border));
678
- border-radius: 8px;
714
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
679
715
  }
680
716
 
681
717
  .cm-settings-section__title {
package/dist/session/styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const sessionCss = "/**\n * Compose.Market Session Shell\n * @compose-market/theme/css/session\n */\n\n.cm-session-menu {\n position: relative;\n}\n\n.cm-session-trigger {\n border-color: hsl(var(--primary) / 0.35);\n background: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\n}\n\n.cm-session-trigger--active {\n background: hsl(var(--primary) / 0.12);\n}\n\n.cm-session-trigger__mobile {\n display: none;\n}\n\n.cm-session-menu__dropdown {\n position: absolute;\n top: calc(100% + 0.5rem);\n right: 0;\n width: 14.5rem;\n z-index: 60;\n overflow: hidden;\n}\n\n.cm-session-menu__header {\n display: grid;\n gap: 0.35rem;\n padding: 0.8rem 0.9rem;\n border-bottom: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-session-menu__row,\n.cm-session-summary__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n font-size: 0.76rem;\n}\n\n.cm-session-menu__row span,\n.cm-session-summary__row span,\n.cm-session-current__cell span,\n.cm-session-key__cell span {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-session-menu__row strong,\n.cm-session-summary__row strong,\n.cm-session-current__cell strong,\n.cm-session-key__cell strong {\n color: hsl(var(--foreground));\n overflow-wrap: anywhere;\n text-align: right;\n}\n\n.cm-session-menu__item {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.8rem 0.9rem;\n border: 0;\n background: transparent;\n color: hsl(var(--foreground));\n font-size: 0.86rem;\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-menu__item:hover {\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal {\n max-width: 34rem;\n border-radius: 0.65rem;\n}\n\n.cm-session-modal__title-wrap,\n.cm-session-section__label,\n.cm-session-current__title {\n display: inline-flex;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-session-modal__body {\n display: grid;\n gap: 1rem;\n}\n\n.cm-session-section {\n display: grid;\n gap: 0.55rem;\n}\n\n.cm-session-section__label,\n.cm-session-manage__header {\n color: hsl(var(--muted-foreground));\n font-size: 0.78rem;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n\n.cm-session-choice-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 0.55rem;\n}\n\n.cm-session-choice {\n min-height: 2.3rem;\n padding: 0.45rem 0.6rem;\n border-radius: 0.45rem;\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n font-size: 0.82rem;\n cursor: pointer;\n transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-choice.active {\n border-color: hsl(var(--primary));\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.cm-session-summary,\n.cm-session-usage {\n display: grid;\n gap: 0.45rem;\n padding: 0.9rem 1rem;\n border-radius: 0.55rem;\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal__footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding-top: 0.2rem;\n}\n\n.cm-session-current {\n background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 72%);\n border-color: hsl(var(--primary) / 0.35);\n}\n\n.cm-session-current__title {\n color: hsl(var(--primary));\n font-size: 0.82rem;\n font-weight: 700;\n margin-bottom: 0.85rem;\n}\n\n.cm-session-current__grid,\n.cm-session-key__grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0.75rem;\n}\n\n.cm-session-current__cell,\n.cm-session-key__cell {\n display: grid;\n gap: 0.2rem;\n}\n\n.cm-session-manage__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.cm-session-empty {\n display: grid;\n place-items: center;\n gap: 0.45rem;\n min-height: 9rem;\n padding: 1rem;\n border: 1px dashed hsl(var(--border));\n border-radius: 0.65rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-session-empty__action {\n border: 0;\n background: transparent;\n color: hsl(var(--primary));\n cursor: pointer;\n font-size: 0.86rem;\n}\n\n.cm-session-key-list {\n display: grid;\n gap: 0.75rem;\n max-height: 22rem;\n overflow-y: auto;\n padding-right: 0.15rem;\n}\n\n.cm-session-key {\n display: grid;\n gap: 0.65rem;\n}\n\n.cm-session-key__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n}\n\n.cm-session-key__actions {\n display: flex;\n align-items: center;\n gap: 0.35rem;\n}\n\n.cm-session-key__icon {\n width: 2rem;\n height: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.65rem;\n border: 1px solid hsl(var(--border));\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n\n.cm-session-key__icon:hover {\n background: hsl(var(--muted) / 0.45);\n color: hsl(var(--foreground));\n}\n\n.cm-session-key__icon.danger:hover {\n border-color: hsl(var(--destructive) / 0.45);\n color: hsl(var(--destructive));\n}\n\n.cm-session-key__id {\n font-family: var(--font-mono), monospace;\n color: hsl(var(--muted-foreground));\n font-size: 0.72rem;\n overflow-wrap: anywhere;\n}\n\n.cm-session-generated {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 0.6rem;\n}\n\n@media (max-width: 960px) {\n .cm-session-trigger__mobile {\n display: inline;\n }\n}\n\n@media (max-width: 720px) {\n .cm-session-choice-grid,\n .cm-session-current__grid,\n .cm-session-key__grid {\n grid-template-columns: 1fr;\n }\n\n .cm-session-modal {\n max-width: 100%;\n }\n\n .cm-session-modal__footer,\n .cm-session-manage__header {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-session-menu__dropdown {\n width: min(18rem, calc(100vw - 2rem));\n }\n}\n\n@media (max-width: 480px) {\n .cm-session-choice-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n";
1
+ export declare const sessionCss = "/**\n * Compose.Market Session Shell\n * @compose-market/theme/css/session\n */\n\n.cm-session-menu {\n position: relative;\n}\n\n.cm-session-trigger {\n border-color: hsl(var(--primary) / 0.35);\n background: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\n}\n\n.cm-session-trigger--active {\n background: hsl(var(--primary) / 0.12);\n}\n\n.cm-session-trigger__mobile {\n display: none;\n}\n\n.cm-session-menu__dropdown {\n position: absolute;\n top: calc(100% + 0.5rem);\n right: 0;\n width: 14.5rem;\n z-index: 60;\n overflow: hidden;\n}\n\n.cm-session-menu__header {\n display: grid;\n gap: 0.35rem;\n padding: 0.8rem 0.9rem;\n border-bottom: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-session-menu__row,\n.cm-session-summary__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n font-size: 0.72rem;\n}\n\n.cm-session-menu__row span,\n.cm-session-summary__row span,\n.cm-session-current__cell span,\n.cm-session-key__cell span {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-session-menu__row strong,\n.cm-session-summary__row strong,\n.cm-session-current__cell strong,\n.cm-session-key__cell strong {\n color: hsl(var(--foreground));\n overflow-wrap: anywhere;\n text-align: right;\n}\n\n.cm-session-menu__item {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.8rem 0.9rem;\n border: 0;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-menu__item:hover {\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal {\n max-width: 34rem;\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-session-modal__title-wrap,\n.cm-session-section__label,\n.cm-session-current__title {\n display: inline-flex;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-session-modal__body {\n display: grid;\n gap: 1rem;\n}\n\n.cm-session-section {\n display: grid;\n gap: 0.55rem;\n}\n\n.cm-session-section__label,\n.cm-session-manage__header {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-session-choice-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 0.55rem;\n}\n\n.cm-session-choice {\n min-height: 2.3rem;\n padding: 0.45rem 0.6rem;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-choice.active {\n border-color: hsl(var(--primary));\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.cm-session-summary,\n.cm-session-usage {\n display: grid;\n gap: 0.45rem;\n padding: 0.9rem 1rem;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal__footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding-top: 0.2rem;\n}\n\n.cm-session-current {\n background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 72%);\n border-color: hsl(var(--primary) / 0.35);\n}\n\n.cm-session-current__title {\n color: hsl(var(--primary));\n font-size: 0.82rem;\n font-weight: 700;\n margin-bottom: 0.85rem;\n}\n\n.cm-session-current__grid,\n.cm-session-key__grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0.75rem;\n}\n\n.cm-session-current__cell,\n.cm-session-key__cell {\n display: grid;\n gap: 0.2rem;\n}\n\n.cm-session-manage__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.cm-session-empty {\n display: grid;\n place-items: center;\n gap: 0.45rem;\n min-height: 9rem;\n padding: 1rem;\n border: 1px dashed hsl(var(--border));\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-session-empty__action {\n border: 0;\n background: transparent;\n color: hsl(var(--primary));\n cursor: pointer;\n font-size: 0.86rem;\n}\n\n.cm-session-key-list {\n display: grid;\n gap: 0.75rem;\n max-height: 22rem;\n overflow-y: auto;\n padding-right: 0.15rem;\n}\n\n.cm-session-key {\n display: grid;\n gap: 0.65rem;\n}\n\n.cm-session-key__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n}\n\n.cm-session-key__actions {\n display: flex;\n align-items: center;\n gap: 0.35rem;\n}\n\n.cm-session-key__icon {\n width: 2rem;\n height: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n\n.cm-session-key__icon:hover {\n background: hsl(var(--muted) / 0.45);\n color: hsl(var(--foreground));\n}\n\n.cm-session-key__icon.danger:hover {\n border-color: hsl(var(--destructive) / 0.45);\n color: hsl(var(--destructive));\n}\n\n.cm-session-key__id {\n font-family: var(--font-mono), monospace;\n color: hsl(var(--muted-foreground));\n font-size: 0.72rem;\n overflow-wrap: anywhere;\n}\n\n.cm-session-generated {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 0.6rem;\n}\n\n@media (max-width: 960px) {\n .cm-session-trigger__mobile {\n display: inline;\n }\n}\n\n@media (max-width: 720px) {\n .cm-session-choice-grid,\n .cm-session-current__grid,\n .cm-session-key__grid {\n grid-template-columns: 1fr;\n }\n\n .cm-session-modal {\n max-width: 100%;\n }\n\n .cm-session-modal__footer,\n .cm-session-manage__header {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-session-menu__dropdown {\n width: min(18rem, calc(100vw - 2rem));\n }\n}\n\n@media (max-width: 480px) {\n .cm-session-choice-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n";
2
2
  //# sourceMappingURL=styles.d.ts.map
package/dist/session/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,kjMA+StB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,g5MAsTtB,CAAC"}