@acertijosapps/electron-viewer 0.0.0-stage → 1.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/LICENSE +20 -0
- package/README.md +247 -2
- package/bin/electron-viewer.js +112 -0
- package/lib/cdp.js +112 -0
- package/lib/electron.js +920 -0
- package/mcp/server.js +418 -0
- package/media/viewer.jpg +0 -0
- package/package.json +59 -4
- package/public/index.html +63 -0
- package/public/style.css +246 -0
- package/public/viewer.js +507 -0
- package/server.js +428 -0
package/public/style.css
ADDED
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #f3f3f1;
|
|
3
|
+
--surface: #ffffff;
|
|
4
|
+
--border: #d9d9d4;
|
|
5
|
+
--text: #1d1d1b;
|
|
6
|
+
--muted: #6b6b66;
|
|
7
|
+
--accent: #2f6f4f;
|
|
8
|
+
--accent-text: #ffffff;
|
|
9
|
+
--stage: #e6e6e2;
|
|
10
|
+
color-scheme: light dark;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@media (prefers-color-scheme: dark) {
|
|
14
|
+
:root {
|
|
15
|
+
--bg: #171716;
|
|
16
|
+
--surface: #222220;
|
|
17
|
+
--border: #3a3a37;
|
|
18
|
+
--text: #ececea;
|
|
19
|
+
--muted: #9a9a94;
|
|
20
|
+
--accent: #5fae86;
|
|
21
|
+
--accent-text: #0f1a14;
|
|
22
|
+
--stage: #0f0f0e;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
* {
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
[hidden] {
|
|
31
|
+
display: none !important;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
html,
|
|
35
|
+
body {
|
|
36
|
+
height: 100%;
|
|
37
|
+
margin: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
body {
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
background: var(--bg);
|
|
44
|
+
color: var(--text);
|
|
45
|
+
font: 13px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.bar {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-wrap: wrap;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 8px;
|
|
53
|
+
padding: 8px 12px;
|
|
54
|
+
border-bottom: 1px solid var(--border);
|
|
55
|
+
background: var(--surface);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
select,
|
|
59
|
+
button {
|
|
60
|
+
height: 30px;
|
|
61
|
+
border: 1px solid var(--border);
|
|
62
|
+
border-radius: 6px;
|
|
63
|
+
background: var(--surface);
|
|
64
|
+
color: var(--text);
|
|
65
|
+
font: inherit;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
select {
|
|
69
|
+
min-width: 0;
|
|
70
|
+
max-width: 320px;
|
|
71
|
+
padding: 0 6px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.controls {
|
|
75
|
+
justify-content: center;
|
|
76
|
+
gap: 12px;
|
|
77
|
+
border-top: 1px solid var(--border);
|
|
78
|
+
border-bottom: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
button.primary {
|
|
82
|
+
padding: 0 14px;
|
|
83
|
+
border-color: var(--accent);
|
|
84
|
+
background: var(--accent);
|
|
85
|
+
color: var(--accent-text);
|
|
86
|
+
cursor: pointer;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
button:disabled {
|
|
90
|
+
opacity: 0.5;
|
|
91
|
+
cursor: default;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.group {
|
|
95
|
+
display: flex;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.group button {
|
|
99
|
+
min-width: 34px;
|
|
100
|
+
padding: 0 10px;
|
|
101
|
+
border-radius: 0;
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.group button + button {
|
|
106
|
+
margin-left: -1px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.group button:first-child {
|
|
110
|
+
border-radius: 6px 0 0 6px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.group button:last-child {
|
|
114
|
+
border-radius: 0 6px 6px 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.group button:hover {
|
|
118
|
+
background: var(--bg);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.group button[aria-pressed='true'] {
|
|
122
|
+
position: relative;
|
|
123
|
+
border-color: var(--accent);
|
|
124
|
+
background: var(--accent);
|
|
125
|
+
color: var(--accent-text);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.group svg {
|
|
129
|
+
display: block;
|
|
130
|
+
width: 16px;
|
|
131
|
+
height: 16px;
|
|
132
|
+
fill: none;
|
|
133
|
+
stroke: currentColor;
|
|
134
|
+
stroke-width: 2;
|
|
135
|
+
stroke-linecap: round;
|
|
136
|
+
stroke-linejoin: round;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
#status {
|
|
140
|
+
min-width: 0;
|
|
141
|
+
margin-left: auto;
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
color: var(--muted);
|
|
144
|
+
font-variant-numeric: tabular-nums;
|
|
145
|
+
text-overflow: ellipsis;
|
|
146
|
+
white-space: nowrap;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
#stage {
|
|
150
|
+
position: relative;
|
|
151
|
+
flex: 1;
|
|
152
|
+
min-height: 0;
|
|
153
|
+
padding: 12px;
|
|
154
|
+
background: var(--stage);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
#screen {
|
|
158
|
+
display: block;
|
|
159
|
+
width: 100%;
|
|
160
|
+
height: 100%;
|
|
161
|
+
object-fit: contain;
|
|
162
|
+
touch-action: none;
|
|
163
|
+
cursor: default;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
#placeholder {
|
|
167
|
+
position: absolute;
|
|
168
|
+
inset: 0;
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-direction: column;
|
|
171
|
+
align-items: center;
|
|
172
|
+
justify-content: center;
|
|
173
|
+
gap: 12px;
|
|
174
|
+
color: var(--muted);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
#placeholder p {
|
|
178
|
+
margin: 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Recibe el teclado (y el texto de IME o dictado) mientras se usa la app; no se ve. */
|
|
182
|
+
#keys {
|
|
183
|
+
position: absolute;
|
|
184
|
+
top: 0;
|
|
185
|
+
left: 0;
|
|
186
|
+
width: 1px;
|
|
187
|
+
height: 1px;
|
|
188
|
+
padding: 0;
|
|
189
|
+
border: 0;
|
|
190
|
+
opacity: 0;
|
|
191
|
+
resize: none;
|
|
192
|
+
pointer-events: none;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
#stage:focus-within #screen {
|
|
196
|
+
outline: 2px solid var(--accent);
|
|
197
|
+
outline-offset: -2px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.group select {
|
|
201
|
+
border-radius: 6px;
|
|
202
|
+
cursor: pointer;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
#placeholder form {
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: center;
|
|
208
|
+
gap: 8px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
#placeholder input {
|
|
212
|
+
width: 80px;
|
|
213
|
+
height: 30px;
|
|
214
|
+
padding: 0 6px;
|
|
215
|
+
border: 1px solid var(--border);
|
|
216
|
+
border-radius: 6px;
|
|
217
|
+
background: var(--surface);
|
|
218
|
+
color: var(--text);
|
|
219
|
+
font: inherit;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
#placeholder form button {
|
|
223
|
+
padding: 0 12px;
|
|
224
|
+
cursor: pointer;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
#placeholder code {
|
|
228
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
229
|
+
font-size: 12px;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* Tooltip propio: el panel de navegador de algunas apps no muestra el de `title`. */
|
|
233
|
+
#tip {
|
|
234
|
+
position: fixed;
|
|
235
|
+
z-index: 10;
|
|
236
|
+
max-width: min(320px, calc(100vw - 16px));
|
|
237
|
+
padding: 5px 8px;
|
|
238
|
+
border: 1px solid var(--border);
|
|
239
|
+
border-radius: 6px;
|
|
240
|
+
background: var(--text);
|
|
241
|
+
color: var(--bg);
|
|
242
|
+
font-size: 12px;
|
|
243
|
+
line-height: 1.35;
|
|
244
|
+
pointer-events: none;
|
|
245
|
+
white-space: normal;
|
|
246
|
+
}
|