cli-jaw 1.2.6 → 1.2.9

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.
@@ -0,0 +1,210 @@
1
+ /* ─── PABCD State Glow ─── */
2
+ #chatMessages {
3
+ transition: box-shadow 0.4s ease, border-color 0.4s ease;
4
+ }
5
+
6
+ body[data-orc-state] #chatMessages {
7
+ box-shadow: inset 0 0 30px -10px var(--orc-glow);
8
+ border-color: var(--orc-glow);
9
+ }
10
+
11
+ /* Input bar glow line */
12
+ body[data-orc-state] .chat-input-area {
13
+ border-top: 2px solid var(--orc-glow);
14
+ }
15
+
16
+ body:not([data-orc-state]) .chat-input-area {
17
+ border-top: 2px solid transparent;
18
+ transition: border-color 0.4s ease;
19
+ }
20
+
21
+ /* Pulse on transition */
22
+ @keyframes orc-pulse {
23
+ 0% {
24
+ box-shadow: inset 0 0 60px -10px var(--orc-glow);
25
+ }
26
+
27
+ 50% {
28
+ box-shadow: inset 0 0 20px -10px var(--orc-glow);
29
+ }
30
+
31
+ 100% {
32
+ box-shadow: inset 0 0 30px -10px var(--orc-glow);
33
+ }
34
+ }
35
+
36
+ body[data-orc-state].orc-pulse #chatMessages {
37
+ animation: orc-pulse 0.6s ease-out;
38
+ }
39
+
40
+ /* State badge in sidebar */
41
+ .orc-state-badge {
42
+ display: inline-block;
43
+ padding: 2px 8px;
44
+ border-radius: 4px;
45
+ font-size: 10px;
46
+ font-weight: 700;
47
+ font-family: var(--font-mono);
48
+ letter-spacing: 1px;
49
+ background: color-mix(in srgb, var(--orc-glow) 20%, var(--surface));
50
+ color: var(--orc-glow);
51
+ border: 1px solid var(--orc-glow);
52
+ text-transform: uppercase;
53
+ }
54
+
55
+ /* ─── PABCD Roadmap Bar ─── */
56
+ .pabc-roadmap {
57
+ display: none;
58
+ align-items: center;
59
+ background: linear-gradient(135deg, var(--surface) 0%, #14141f 100%);
60
+ border: 1px solid var(--border);
61
+ border-radius: 10px;
62
+ padding: 12px 22px;
63
+ position: relative;
64
+ box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.03);
65
+ overflow: visible;
66
+ }
67
+ .pabc-roadmap.visible {
68
+ display: flex;
69
+ animation: pabc-fadeSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
70
+ }
71
+
72
+ @keyframes pabc-fadeSlideIn {
73
+ from { opacity: 0; transform: translateY(-12px) scale(0.98); }
74
+ to { opacity: 1; transform: translateY(0) scale(1); }
75
+ }
76
+
77
+ .pabc-dot {
78
+ width: 26px; height: 26px;
79
+ border-radius: 50%;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ font-family: var(--font-display, var(--font-mono));
84
+ font-size: 10px;
85
+ font-weight: 700;
86
+ flex-shrink: 0;
87
+ transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
88
+ z-index: 2;
89
+ letter-spacing: 0.5px;
90
+ }
91
+ .pabc-dot.future {
92
+ background: var(--surface, #181825);
93
+ color: var(--text-dim, #6e6e8a);
94
+ border: 1px solid var(--border);
95
+ }
96
+ .pabc-dot.active {
97
+ color: #fff;
98
+ border: 2px solid currentColor;
99
+ box-shadow: 0 0 14px -3px currentColor, 0 0 4px -1px currentColor;
100
+ transform: scale(1.1);
101
+ }
102
+ .pabc-dot.done {
103
+ color: rgba(255,255,255,0.9);
104
+ border: 1px solid rgba(255,255,255,0.1);
105
+ opacity: 0.65;
106
+ }
107
+ .pabc-dot[data-phase="P"].active, .pabc-dot[data-phase="P"].done { background: var(--orc-glow-P); }
108
+ .pabc-dot[data-phase="A"].active, .pabc-dot[data-phase="A"].done { background: var(--orc-glow-A); }
109
+ .pabc-dot[data-phase="B"].active, .pabc-dot[data-phase="B"].done { background: var(--orc-glow-B); }
110
+ .pabc-dot[data-phase="C"].active, .pabc-dot[data-phase="C"].done { background: var(--orc-glow-C); }
111
+
112
+ .pabc-connector {
113
+ flex: 1;
114
+ height: 2px;
115
+ background: linear-gradient(90deg, var(--border) 0%, #2a2a3e 50%, var(--border) 100%);
116
+ min-width: 44px;
117
+ transition: all 0.5s ease;
118
+ border-radius: 1px;
119
+ }
120
+ .pabc-connector.done {
121
+ background: linear-gradient(90deg, var(--text-dim) 0%, #6e6e8a 50%, var(--text-dim) 100%);
122
+ box-shadow: 0 0 6px -2px var(--text-dim);
123
+ }
124
+
125
+ .pabc-center {
126
+ flex-shrink: 0;
127
+ display: flex;
128
+ flex-direction: column;
129
+ align-items: center;
130
+ padding: 0 20px;
131
+ }
132
+ .pabc-brand {
133
+ font-family: var(--font-display, var(--font-mono));
134
+ font-size: 13px;
135
+ font-weight: 700;
136
+ letter-spacing: 4px;
137
+ background: linear-gradient(90deg, var(--orc-glow-P), var(--orc-glow-A), var(--orc-glow-B), var(--orc-glow-C));
138
+ -webkit-background-clip: text;
139
+ -webkit-text-fill-color: transparent;
140
+ background-clip: text;
141
+ filter: brightness(1.1);
142
+ }
143
+ .pabc-tagline {
144
+ font-family: var(--font-mono);
145
+ font-size: 7px;
146
+ color: var(--text-dim, #6e6e8a);
147
+ letter-spacing: 2px;
148
+ text-transform: uppercase;
149
+ margin-top: 2px;
150
+ opacity: 0.7;
151
+ }
152
+
153
+ /* Shark runner */
154
+ .shark-runner {
155
+ width: 36px; height: 24px;
156
+ background: url('/img/shark-sprite.png') 0 0 no-repeat;
157
+ background-size: 360px 24px;
158
+ position: absolute;
159
+ top: -13px;
160
+ left: 22px;
161
+ z-index: 10;
162
+ transition: left 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
163
+ pointer-events: none;
164
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
165
+ display: none;
166
+ }
167
+ .shark-runner.running {
168
+ display: block;
169
+ animation: shark-run 1s steps(10) infinite;
170
+ }
171
+ @keyframes shark-run {
172
+ to { background-position: -360px 0; }
173
+ }
174
+
175
+ /* Shimmer on Done */
176
+ @keyframes pabc-shimmer {
177
+ 0% { opacity: 1; filter: brightness(1); }
178
+ 25% { opacity: 1; filter: brightness(1.4); box-shadow: 0 0 24px rgba(168,85,247,0.2); }
179
+ 100% { opacity: 0; transform: translateY(-8px) scale(0.98); }
180
+ }
181
+ .pabc-roadmap.shimmer-out {
182
+ animation: pabc-shimmer 1s ease-out forwards;
183
+ }
184
+
185
+ /* ─── Light Theme Overrides ─── */
186
+ [data-theme="light"] .pabc-roadmap {
187
+ background: linear-gradient(135deg, var(--surface) 0%, #f0f0f5 100%);
188
+ box-shadow: 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
189
+ }
190
+ [data-theme="light"] .pabc-dot.future {
191
+ background: #eef0f5;
192
+ color: #9a9ab0;
193
+ }
194
+ [data-theme="light"] .pabc-dot.active {
195
+ color: #fff;
196
+ }
197
+ [data-theme="light"] .pabc-dot.done {
198
+ color: #fff;
199
+ border-color: rgba(0,0,0,0.06);
200
+ }
201
+ [data-theme="light"] .pabc-connector {
202
+ background: linear-gradient(90deg, #d8d8e4 0%, #e4e4ef 50%, #d8d8e4 100%);
203
+ }
204
+ [data-theme="light"] .pabc-connector.done {
205
+ background: linear-gradient(90deg, #b0b0c0 0%, #c0c0d0 50%, #b0b0c0 100%);
206
+ box-shadow: none;
207
+ }
208
+ [data-theme="light"] .shark-runner {
209
+ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
210
+ }
@@ -29,6 +29,14 @@
29
29
  --sidebar-left-w: 220px;
30
30
  --sidebar-right-w: 260px;
31
31
  --sidebar-collapsed-w: 48px;
32
+
33
+ /* ─── PABCD State Glow ─── */
34
+ --orc-glow: transparent;
35
+ --orc-glow-P: #3b82f6;
36
+ --orc-glow-A: #f59e0b;
37
+ --orc-glow-B: #22c55e;
38
+ --orc-glow-C: #a855f7;
39
+ --orc-glow-D: transparent;
32
40
  }
33
41
 
34
42
  * {
@@ -81,6 +89,11 @@ body.right-collapsed {
81
89
  --delete-color: #dc2626;
82
90
  --code-label-color: #6e6e8a;
83
91
  --modal-bg: rgba(0, 0, 0, 0.3);
92
+ --orc-glow-P: #2563eb;
93
+ --orc-glow-A: #d97706;
94
+ --orc-glow-B: #16a34a;
95
+ --orc-glow-C: #9333ea;
96
+ --orc-glow-D: transparent;
84
97
  }
85
98
 
86
99
  label {
@@ -139,4 +152,4 @@ textarea:focus-visible,
139
152
  select:focus-visible {
140
153
  outline: 2px solid var(--accent);
141
154
  outline-offset: 1px;
142
- }
155
+ }