@say8425/cc-statusline 2.2.0 → 3.1.0
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/README.md +13 -27
- package/dist/index.js +458 -22
- package/dist/viewer/index.html +199 -0
- package/dist/viewer/main.js +2842 -0
- package/package.json +8 -5
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>cc-statusline diff</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
--vd-bg: #141415;
|
|
10
|
+
--vd-inset: #070707;
|
|
11
|
+
--vd-fg: #adadb1;
|
|
12
|
+
--vd-fg-muted: #84848a;
|
|
13
|
+
--vd-border: #070707;
|
|
14
|
+
--vd-accent: #009fff;
|
|
15
|
+
--vd-hover: color-mix(in srgb, #009fff 12%, #141415);
|
|
16
|
+
--vd-radius: 6px;
|
|
17
|
+
}
|
|
18
|
+
html, body {
|
|
19
|
+
margin: 0; height: 100%;
|
|
20
|
+
background: var(--vd-bg); color: var(--vd-fg);
|
|
21
|
+
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
22
|
+
}
|
|
23
|
+
#app {
|
|
24
|
+
display: grid;
|
|
25
|
+
grid-template-columns: 300px 1fr;
|
|
26
|
+
grid-template-rows: auto 1fr;
|
|
27
|
+
height: 100vh;
|
|
28
|
+
}
|
|
29
|
+
#toolbar {
|
|
30
|
+
grid-column: 1 / 3;
|
|
31
|
+
grid-row: 1;
|
|
32
|
+
display: flex; align-items: center;
|
|
33
|
+
padding: 8px 12px;
|
|
34
|
+
border-bottom: 1px solid var(--vd-border);
|
|
35
|
+
font-size: 13px;
|
|
36
|
+
}
|
|
37
|
+
.tb-left, .tb-right { display: flex; align-items: center; gap: 8px; }
|
|
38
|
+
.tb-right { margin-left: auto; }
|
|
39
|
+
/* One control height for every toolbar widget — without it, line-height:
|
|
40
|
+
normal + differing paddings yield 25/26/26.5/27px mismatches. */
|
|
41
|
+
#toolbar button,
|
|
42
|
+
#toolbar select {
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
height: 26px;
|
|
45
|
+
background: var(--vd-inset);
|
|
46
|
+
color: var(--vd-fg);
|
|
47
|
+
border: 1px solid var(--vd-border);
|
|
48
|
+
border-radius: var(--vd-radius);
|
|
49
|
+
padding: 0 10px;
|
|
50
|
+
font: inherit;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
}
|
|
53
|
+
#toolbar button { display: inline-flex; align-items: center; }
|
|
54
|
+
#toolbar button:hover,
|
|
55
|
+
#toolbar select:hover { background: var(--vd-hover); }
|
|
56
|
+
#toolbar select {
|
|
57
|
+
appearance: none;
|
|
58
|
+
-webkit-appearance: none;
|
|
59
|
+
padding-right: 26px;
|
|
60
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2384848a' stroke-width='1.5' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
|
|
61
|
+
background-repeat: no-repeat;
|
|
62
|
+
background-position: right 8px center;
|
|
63
|
+
}
|
|
64
|
+
/* Segmented control (Pierre-style): inset pill, active segment raised */
|
|
65
|
+
#toolbar .tb-seg {
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
height: 26px;
|
|
68
|
+
display: inline-flex; align-items: center; gap: 2px; padding: 2px;
|
|
69
|
+
background: var(--vd-inset);
|
|
70
|
+
border: 1px solid var(--vd-border);
|
|
71
|
+
border-radius: var(--vd-radius);
|
|
72
|
+
}
|
|
73
|
+
#toolbar .tb-seg button {
|
|
74
|
+
height: 20px; /* 26 - 2px border - 4px container padding */
|
|
75
|
+
background: transparent;
|
|
76
|
+
border: 0;
|
|
77
|
+
border-radius: 4px;
|
|
78
|
+
color: var(--vd-fg-muted);
|
|
79
|
+
padding: 0 10px;
|
|
80
|
+
transition: background-color .15s, color .15s;
|
|
81
|
+
}
|
|
82
|
+
#toolbar .tb-seg button:hover { background: transparent; color: var(--vd-fg); }
|
|
83
|
+
#toolbar .tb-seg button[aria-pressed="true"] {
|
|
84
|
+
background: #2a2a2c;
|
|
85
|
+
color: var(--vd-fg);
|
|
86
|
+
}
|
|
87
|
+
#toolbar #refresh { padding: 0 7px; }
|
|
88
|
+
#toolbar #find-open { padding: 0 7px; }
|
|
89
|
+
/* Hide the toolbar search button while the find bar is already open (redundant affordance). */
|
|
90
|
+
#toolbar:has(#find-bar:not([hidden])) #find-open { display: none; }
|
|
91
|
+
/* In-app find bar (opens on Cmd/Ctrl+F). Sits in the toolbar; hidden by default. */
|
|
92
|
+
#toolbar .tb-find {
|
|
93
|
+
box-sizing: border-box; height: 26px;
|
|
94
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
95
|
+
margin-left: 8px; padding: 0 8px;
|
|
96
|
+
background: var(--vd-inset);
|
|
97
|
+
border: 1px solid var(--vd-border); border-radius: var(--vd-radius);
|
|
98
|
+
}
|
|
99
|
+
#toolbar .tb-find[hidden] { display: none; }
|
|
100
|
+
#toolbar #find-input {
|
|
101
|
+
height: 20px; min-width: 160px;
|
|
102
|
+
background: transparent; border: 0; outline: none;
|
|
103
|
+
color: var(--vd-fg); font: inherit;
|
|
104
|
+
}
|
|
105
|
+
#toolbar #find-count {
|
|
106
|
+
color: var(--vd-fg-muted); font-variant-numeric: tabular-nums;
|
|
107
|
+
min-width: 34px; text-align: right;
|
|
108
|
+
}
|
|
109
|
+
#toolbar .tb-find button {
|
|
110
|
+
box-sizing: border-box; height: 20px; padding: 0 6px;
|
|
111
|
+
background: transparent; border: 0; border-radius: 4px;
|
|
112
|
+
color: var(--vd-fg-muted); cursor: pointer; display: inline-flex; align-items: center;
|
|
113
|
+
}
|
|
114
|
+
#toolbar .tb-find button:hover { background: transparent; color: var(--vd-fg); }
|
|
115
|
+
#toolbar .tb-find button:disabled { opacity: .4; cursor: default; }
|
|
116
|
+
#toolbar label {
|
|
117
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
118
|
+
color: var(--vd-fg);
|
|
119
|
+
}
|
|
120
|
+
#toolbar input[type="checkbox"] { accent-color: var(--vd-accent); }
|
|
121
|
+
#toolbar :focus-visible { outline: 2px solid var(--vd-accent); outline-offset: 1px; }
|
|
122
|
+
.tb-overflow { position: relative; }
|
|
123
|
+
#overflow-btn { line-height: 1; }
|
|
124
|
+
#overflow-menu {
|
|
125
|
+
position: absolute;
|
|
126
|
+
top: calc(100% + 6px);
|
|
127
|
+
right: 0;
|
|
128
|
+
z-index: 10;
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
gap: 10px;
|
|
132
|
+
min-width: 180px;
|
|
133
|
+
padding: 12px;
|
|
134
|
+
background: var(--vd-bg);
|
|
135
|
+
border: 1px solid var(--vd-border);
|
|
136
|
+
border-radius: var(--vd-radius);
|
|
137
|
+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
|
|
138
|
+
}
|
|
139
|
+
#overflow-menu[hidden] { display: none; }
|
|
140
|
+
#overflow-menu label { white-space: nowrap; cursor: pointer; }
|
|
141
|
+
#tree {
|
|
142
|
+
grid-row: 2; grid-column: 1;
|
|
143
|
+
overflow: auto;
|
|
144
|
+
padding-top: 8px;
|
|
145
|
+
border-right: 1px solid var(--vd-border);
|
|
146
|
+
}
|
|
147
|
+
#diff { grid-row: 2; grid-column: 2; overflow: auto; }
|
|
148
|
+
#app[data-tree-side="right"] { grid-template-columns: 1fr 300px; }
|
|
149
|
+
#app[data-tree-side="right"] #tree {
|
|
150
|
+
grid-column: 2;
|
|
151
|
+
border-right: 0;
|
|
152
|
+
border-left: 1px solid var(--vd-border);
|
|
153
|
+
}
|
|
154
|
+
#app[data-tree-side="right"] #diff { grid-column: 1; }
|
|
155
|
+
#status, #empty { color: var(--vd-fg-muted); }
|
|
156
|
+
#empty { padding: 24px; }
|
|
157
|
+
</style>
|
|
158
|
+
</head>
|
|
159
|
+
<body>
|
|
160
|
+
<div id="app">
|
|
161
|
+
<div id="toolbar">
|
|
162
|
+
<div class="tb-left">
|
|
163
|
+
<select id="diff-mode">
|
|
164
|
+
<option value="working">Working tree</option>
|
|
165
|
+
<option value="base" disabled>vs base</option>
|
|
166
|
+
</select>
|
|
167
|
+
<div class="tb-seg" id="diff-style-group" role="group" aria-label="Diff style">
|
|
168
|
+
<button type="button" data-style="unified" aria-pressed="true">Unified</button>
|
|
169
|
+
<button type="button" data-style="split" aria-pressed="false">Split</button>
|
|
170
|
+
</div>
|
|
171
|
+
<button id="refresh" type="button" aria-label="Refresh" title="Refresh"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></button>
|
|
172
|
+
<span id="status"></span>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="tb-right">
|
|
175
|
+
<button id="find-open" type="button" aria-label="Search (⌘F / Ctrl+F)" title="Search (⌘F / Ctrl+F)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></button>
|
|
176
|
+
<div id="find-bar" class="tb-find" hidden role="search">
|
|
177
|
+
<input id="find-input" type="text" placeholder="Search diff" aria-label="Search diff" autocomplete="off" spellcheck="false" />
|
|
178
|
+
<span id="find-count" aria-live="polite"></span>
|
|
179
|
+
<button id="find-prev" type="button" aria-label="Previous match" title="Previous (Shift+Enter)">↑</button>
|
|
180
|
+
<button id="find-next" type="button" aria-label="Next match" title="Next (Enter)">↓</button>
|
|
181
|
+
<button id="find-close" type="button" aria-label="Close search" title="Close (Esc)">✕</button>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="tb-overflow">
|
|
184
|
+
<button id="overflow-btn" type="button" aria-haspopup="true" aria-expanded="false" aria-label="More options">⋯</button>
|
|
185
|
+
<div id="overflow-menu" hidden>
|
|
186
|
+
<label><input type="checkbox" id="toggle-untracked" /> Include untracked</label>
|
|
187
|
+
<label><input type="checkbox" id="toggle-watch" /> Watch</label>
|
|
188
|
+
<label><input type="checkbox" id="toggle-flatten" /> Flatten</label>
|
|
189
|
+
<label><input type="checkbox" id="toggle-tree-side" /> 파일트리 오른쪽</label>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
<div id="tree"></div>
|
|
195
|
+
<div id="diff"></div>
|
|
196
|
+
</div>
|
|
197
|
+
<script type="module" src="/main.js"></script>
|
|
198
|
+
</body>
|
|
199
|
+
</html>
|