@ytspar/devbar 1.3.1 → 1.4.1
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 +43 -0
- package/dist/accessibility.d.ts +4 -0
- package/dist/accessibility.d.ts.map +1 -1
- package/dist/accessibility.js +57 -0
- package/dist/accessibility.js.map +1 -1
- package/dist/constants.d.ts +8 -23
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +10 -3
- package/dist/constants.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/modules/index.d.ts +1 -1
- package/dist/modules/index.d.ts.map +1 -1
- package/dist/modules/index.js +1 -0
- package/dist/modules/index.js.map +1 -1
- package/dist/modules/keyboard.d.ts +1 -1
- package/dist/modules/keyboard.d.ts.map +1 -1
- package/dist/modules/keyboard.js +4 -11
- package/dist/modules/keyboard.js.map +1 -1
- package/dist/modules/rendering/buttons.d.ts +19 -0
- package/dist/modules/rendering/buttons.d.ts.map +1 -0
- package/dist/modules/rendering/buttons.js +369 -0
- package/dist/modules/rendering/buttons.js.map +1 -0
- package/dist/modules/rendering/collapsed.d.ts +6 -0
- package/dist/modules/rendering/collapsed.d.ts.map +1 -0
- package/dist/modules/rendering/collapsed.js +124 -0
- package/dist/modules/rendering/collapsed.js.map +1 -0
- package/dist/modules/rendering/common.d.ts +21 -0
- package/dist/modules/rendering/common.d.ts.map +1 -0
- package/dist/modules/rendering/common.js +60 -0
- package/dist/modules/rendering/common.js.map +1 -0
- package/dist/modules/rendering/compact.d.ts +6 -0
- package/dist/modules/rendering/compact.d.ts.map +1 -0
- package/dist/modules/rendering/compact.js +107 -0
- package/dist/modules/rendering/compact.js.map +1 -0
- package/dist/modules/rendering/console.d.ts +7 -0
- package/dist/modules/rendering/console.d.ts.map +1 -0
- package/dist/modules/rendering/console.js +78 -0
- package/dist/modules/rendering/console.js.map +1 -0
- package/dist/modules/rendering/expanded.d.ts +13 -0
- package/dist/modules/rendering/expanded.d.ts.map +1 -0
- package/dist/modules/rendering/expanded.js +439 -0
- package/dist/modules/rendering/expanded.js.map +1 -0
- package/dist/modules/rendering/index.d.ts +22 -0
- package/dist/modules/rendering/index.d.ts.map +1 -0
- package/dist/modules/rendering/index.js +109 -0
- package/dist/modules/rendering/index.js.map +1 -0
- package/dist/modules/rendering/modals.d.ts +9 -0
- package/dist/modules/rendering/modals.d.ts.map +1 -0
- package/dist/modules/rendering/modals.js +1068 -0
- package/dist/modules/rendering/modals.js.map +1 -0
- package/dist/modules/rendering/settings.d.ts +6 -0
- package/dist/modules/rendering/settings.d.ts.map +1 -0
- package/dist/modules/rendering/settings.js +605 -0
- package/dist/modules/rendering/settings.js.map +1 -0
- package/dist/modules/rendering.d.ts +15 -16
- package/dist/modules/rendering.d.ts.map +1 -1
- package/dist/modules/rendering.js +15 -2919
- package/dist/modules/rendering.js.map +1 -1
- package/dist/modules/screenshot.d.ts +11 -2
- package/dist/modules/screenshot.d.ts.map +1 -1
- package/dist/modules/screenshot.js +32 -29
- package/dist/modules/screenshot.js.map +1 -1
- package/dist/modules/tooltips.d.ts +7 -5
- package/dist/modules/tooltips.d.ts.map +1 -1
- package/dist/modules/tooltips.js +133 -157
- package/dist/modules/tooltips.js.map +1 -1
- package/dist/modules/types.d.ts +7 -0
- package/dist/modules/types.d.ts.map +1 -1
- package/dist/modules/types.js +14 -1
- package/dist/modules/types.js.map +1 -1
- package/dist/modules/websocket.d.ts.map +1 -1
- package/dist/modules/websocket.js +334 -264
- package/dist/modules/websocket.js.map +1 -1
- package/dist/ui/buttons.d.ts.map +1 -1
- package/dist/ui/buttons.js +11 -9
- package/dist/ui/buttons.js.map +1 -1
- package/dist/ui/cards.js +3 -3
- package/dist/ui/cards.js.map +1 -1
- package/dist/ui/icons.d.ts +13 -0
- package/dist/ui/icons.d.ts.map +1 -1
- package/dist/ui/icons.js +24 -3
- package/dist/ui/icons.js.map +1 -1
- package/dist/ui/index.d.ts +1 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/modals.d.ts +3 -2
- package/dist/ui/modals.d.ts.map +1 -1
- package/dist/ui/modals.js +28 -26
- package/dist/ui/modals.js.map +1 -1
- package/package.json +3 -4
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Button creator functions used by both compact and expanded modes.
|
|
3
|
+
*/
|
|
4
|
+
import { BUTTON_COLORS, CSS_COLORS, withAlpha } from '../../constants.js';
|
|
5
|
+
import { resolveSaveLocation } from '../../settings.js';
|
|
6
|
+
import { createSvgIcon, getButtonStyles } from '../../ui/index.js';
|
|
7
|
+
import { preloadAxe } from '../../accessibility.js';
|
|
8
|
+
import { copyPathToClipboard, handleA11yAudit, handleDocumentOutline, handlePageSchema, showDesignReviewConfirmation, } from '../screenshot.js';
|
|
9
|
+
import { attachButtonTooltip, attachTextTooltip, } from '../tooltips.js';
|
|
10
|
+
import { closeAllModals } from '../types.js';
|
|
11
|
+
export function createConsoleBadge(state, type, count, color) {
|
|
12
|
+
const labelMap = { error: 'error', warn: 'warning', info: 'info' };
|
|
13
|
+
const label = labelMap[type];
|
|
14
|
+
const isActive = state.consoleFilter === type;
|
|
15
|
+
const badge = document.createElement('span');
|
|
16
|
+
badge.className = 'devbar-badge';
|
|
17
|
+
Object.assign(badge.style, {
|
|
18
|
+
display: 'flex',
|
|
19
|
+
alignItems: 'center',
|
|
20
|
+
justifyContent: 'center',
|
|
21
|
+
minWidth: '18px',
|
|
22
|
+
height: '18px',
|
|
23
|
+
padding: '0 5px',
|
|
24
|
+
borderRadius: '9999px',
|
|
25
|
+
backgroundColor: isActive ? color : withAlpha(color, 90),
|
|
26
|
+
color: '#fff',
|
|
27
|
+
fontSize: '0.625rem',
|
|
28
|
+
fontWeight: '600',
|
|
29
|
+
cursor: 'pointer',
|
|
30
|
+
boxShadow: isActive ? `0 0 8px ${withAlpha(color, 80)}` : 'none',
|
|
31
|
+
});
|
|
32
|
+
badge.textContent = count > 99 ? '99+' : String(count);
|
|
33
|
+
attachTextTooltip(state, badge, () => `${count} console ${label}${count === 1 ? '' : 's'} (click to view)`);
|
|
34
|
+
badge.onclick = () => {
|
|
35
|
+
const newFilter = state.consoleFilter === type ? null : type;
|
|
36
|
+
closeAllModals(state);
|
|
37
|
+
state.consoleFilter = newFilter;
|
|
38
|
+
state.render();
|
|
39
|
+
};
|
|
40
|
+
return badge;
|
|
41
|
+
}
|
|
42
|
+
export function createScreenshotButton(state, accentColor) {
|
|
43
|
+
const btn = document.createElement('button');
|
|
44
|
+
btn.type = 'button';
|
|
45
|
+
btn.setAttribute('aria-label', 'Screenshot');
|
|
46
|
+
const hasSuccessState = state.copiedToClipboard || state.copiedPath || state.lastScreenshot;
|
|
47
|
+
const isDisabled = state.capturing;
|
|
48
|
+
const effectiveSave = resolveSaveLocation(state.options.saveLocation, state.sweetlinkConnected);
|
|
49
|
+
// Grey out only when effective save is 'local' but sweetlink not connected (explicit 'local' setting)
|
|
50
|
+
const isGreyedOut = effectiveSave === 'local' && !state.sweetlinkConnected && !hasSuccessState;
|
|
51
|
+
// Attach HTML tooltip
|
|
52
|
+
attachButtonTooltip(state, btn, accentColor, (tooltip, h) => {
|
|
53
|
+
if (state.copiedToClipboard) {
|
|
54
|
+
h.addSuccess('Copied to clipboard!');
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (state.copiedPath) {
|
|
58
|
+
h.addSuccess('Path copied to clipboard!');
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
if (state.lastScreenshot) {
|
|
62
|
+
const screenshotPath = state.lastScreenshot;
|
|
63
|
+
const isDownloaded = screenshotPath.endsWith('downloaded');
|
|
64
|
+
if (isDownloaded) {
|
|
65
|
+
h.addSuccess('Screenshot downloaded!');
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
h.addSuccess('Screenshot saved!', screenshotPath);
|
|
69
|
+
const copyLink = document.createElement('div');
|
|
70
|
+
Object.assign(copyLink.style, {
|
|
71
|
+
color: accentColor,
|
|
72
|
+
cursor: 'pointer',
|
|
73
|
+
fontSize: '0.625rem',
|
|
74
|
+
marginTop: '6px',
|
|
75
|
+
opacity: '0.8',
|
|
76
|
+
transition: 'opacity 150ms',
|
|
77
|
+
});
|
|
78
|
+
copyLink.textContent = 'copy path';
|
|
79
|
+
copyLink.onmouseenter = () => {
|
|
80
|
+
copyLink.style.opacity = '1';
|
|
81
|
+
};
|
|
82
|
+
copyLink.onmouseleave = () => {
|
|
83
|
+
copyLink.style.opacity = '0.8';
|
|
84
|
+
};
|
|
85
|
+
copyLink.onclick = async (e) => {
|
|
86
|
+
e.stopPropagation();
|
|
87
|
+
try {
|
|
88
|
+
await navigator.clipboard.writeText(screenshotPath);
|
|
89
|
+
copyLink.textContent = '\u2713 copied!';
|
|
90
|
+
copyLink.style.cursor = 'default';
|
|
91
|
+
copyLink.onclick = null;
|
|
92
|
+
}
|
|
93
|
+
catch {
|
|
94
|
+
copyLink.textContent = '\u00d7 failed to copy';
|
|
95
|
+
copyLink.style.color = CSS_COLORS.error;
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
tooltip.appendChild(copyLink);
|
|
99
|
+
}
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
h.addTitle('Screenshot');
|
|
103
|
+
h.addSectionHeader('Actions');
|
|
104
|
+
if (effectiveSave === 'local' && !state.sweetlinkConnected) {
|
|
105
|
+
h.addShortcut('Shift+Click', 'Copy to clipboard');
|
|
106
|
+
h.addWarning('Sweetlink not connected. Switch save method to Auto or Download.');
|
|
107
|
+
}
|
|
108
|
+
else {
|
|
109
|
+
const saveLabel = effectiveSave === 'local' ? 'Save to file' : 'Download';
|
|
110
|
+
h.addShortcut('Click', saveLabel);
|
|
111
|
+
h.addShortcut('Shift+Click', 'Copy to clipboard');
|
|
112
|
+
h.addSectionHeader('Keyboard');
|
|
113
|
+
h.addShortcut('Cmd or Ctrl+Shift+S', saveLabel);
|
|
114
|
+
h.addShortcut('Cmd or Ctrl+Shift+C', 'Copy');
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
Object.assign(btn.style, {
|
|
118
|
+
display: 'flex',
|
|
119
|
+
alignItems: 'center',
|
|
120
|
+
justifyContent: 'center',
|
|
121
|
+
width: '22px',
|
|
122
|
+
height: '22px',
|
|
123
|
+
minWidth: '22px',
|
|
124
|
+
minHeight: '22px',
|
|
125
|
+
flexShrink: '0',
|
|
126
|
+
borderRadius: '50%',
|
|
127
|
+
border: '1px solid',
|
|
128
|
+
borderColor: hasSuccessState ? accentColor : withAlpha(accentColor, 50),
|
|
129
|
+
backgroundColor: hasSuccessState ? withAlpha(accentColor, 20) : 'transparent',
|
|
130
|
+
color: hasSuccessState ? accentColor : withAlpha(accentColor, 60),
|
|
131
|
+
cursor: !isDisabled ? 'pointer' : 'not-allowed',
|
|
132
|
+
opacity: isGreyedOut ? '0.4' : '1',
|
|
133
|
+
transition: 'all 150ms',
|
|
134
|
+
});
|
|
135
|
+
btn.disabled = isDisabled;
|
|
136
|
+
btn.onclick = (e) => {
|
|
137
|
+
// If we have a saved screenshot path, clicking copies the path
|
|
138
|
+
if (state.lastScreenshot && !e.shiftKey) {
|
|
139
|
+
copyPathToClipboard(state, state.lastScreenshot);
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
state.handleScreenshot(e.shiftKey);
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
// Button content
|
|
146
|
+
if (state.copiedToClipboard || state.copiedPath || state.lastScreenshot) {
|
|
147
|
+
btn.textContent = '\u2713';
|
|
148
|
+
btn.style.fontSize = '0.6rem';
|
|
149
|
+
}
|
|
150
|
+
else if (state.capturing) {
|
|
151
|
+
btn.textContent = '...';
|
|
152
|
+
btn.style.fontSize = '0.5rem';
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
// Camera icon SVG
|
|
156
|
+
btn.appendChild(createSvgIcon('M19.844 7.938H7.938v11.905m0 11.113v11.906h11.905m23.019-11.906v11.906H30.956m11.906-23.018V7.938H30.956', {
|
|
157
|
+
viewBox: '0 0 50.8 50.8',
|
|
158
|
+
stroke: true,
|
|
159
|
+
strokeWidth: '4',
|
|
160
|
+
children: [{ type: 'circle', cx: '25.4', cy: '25.4', r: '8.731' }],
|
|
161
|
+
}));
|
|
162
|
+
}
|
|
163
|
+
return btn;
|
|
164
|
+
}
|
|
165
|
+
export function createAIReviewButton(state) {
|
|
166
|
+
const btn = document.createElement('button');
|
|
167
|
+
btn.type = 'button';
|
|
168
|
+
btn.setAttribute('aria-label', 'AI Design Review');
|
|
169
|
+
const hasError = !!state.designReviewError;
|
|
170
|
+
const isActive = state.designReviewInProgress || !!state.lastDesignReview || hasError;
|
|
171
|
+
const isDisabled = state.designReviewInProgress || !state.sweetlinkConnected;
|
|
172
|
+
// Use error color (red) when there's an error, otherwise normal review color
|
|
173
|
+
const buttonColor = hasError ? CSS_COLORS.error : BUTTON_COLORS.review;
|
|
174
|
+
// Attach HTML tooltip
|
|
175
|
+
attachButtonTooltip(state, btn, buttonColor, (_tooltip, h) => {
|
|
176
|
+
if (state.designReviewInProgress) {
|
|
177
|
+
h.addProgress('AI Design Review in progress...');
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
if (state.designReviewError) {
|
|
181
|
+
h.addError('Design review failed', state.designReviewError);
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
if (state.lastDesignReview) {
|
|
185
|
+
h.addSuccess('Design review saved!', state.lastDesignReview);
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
h.addTitle('AI Design Review');
|
|
189
|
+
h.addDescription('Captures screenshot and sends to Claude for design analysis.');
|
|
190
|
+
h.addSectionHeader('Requirements');
|
|
191
|
+
h.addShortcut('API Key', 'ANTHROPIC_API_KEY');
|
|
192
|
+
if (!state.sweetlinkConnected) {
|
|
193
|
+
h.addWarning('Sweetlink not connected');
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
Object.assign(btn.style, getButtonStyles(buttonColor, isActive, isDisabled));
|
|
197
|
+
if (!state.sweetlinkConnected)
|
|
198
|
+
btn.style.opacity = '0.5';
|
|
199
|
+
btn.disabled = isDisabled;
|
|
200
|
+
btn.onclick = () => showDesignReviewConfirmation(state);
|
|
201
|
+
if (state.designReviewInProgress) {
|
|
202
|
+
btn.textContent = '~';
|
|
203
|
+
btn.style.fontSize = '0.5rem';
|
|
204
|
+
btn.style.animation = 'pulse 1s infinite';
|
|
205
|
+
}
|
|
206
|
+
else if (state.designReviewError) {
|
|
207
|
+
// Show 'x' for error state
|
|
208
|
+
btn.textContent = '\u00D7';
|
|
209
|
+
btn.style.fontSize = '0.875rem';
|
|
210
|
+
btn.style.fontWeight = 'bold';
|
|
211
|
+
}
|
|
212
|
+
else if (state.lastDesignReview) {
|
|
213
|
+
btn.textContent = 'v';
|
|
214
|
+
btn.style.fontSize = '0.5rem';
|
|
215
|
+
}
|
|
216
|
+
else {
|
|
217
|
+
btn.appendChild(createSvgIcon('M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z', { fill: true }));
|
|
218
|
+
}
|
|
219
|
+
return btn;
|
|
220
|
+
}
|
|
221
|
+
export function createOutlineButton(state) {
|
|
222
|
+
const btn = document.createElement('button');
|
|
223
|
+
btn.type = 'button';
|
|
224
|
+
btn.setAttribute('aria-label', 'Document Outline');
|
|
225
|
+
const isActive = state.showOutlineModal || !!state.lastOutline;
|
|
226
|
+
// Attach HTML tooltip
|
|
227
|
+
attachButtonTooltip(state, btn, BUTTON_COLORS.outline, (_tooltip, h) => {
|
|
228
|
+
if (state.lastOutline) {
|
|
229
|
+
const isDownloaded = state.lastOutline.endsWith('downloaded');
|
|
230
|
+
h.addSuccess(isDownloaded ? 'Outline downloaded!' : 'Outline saved!', isDownloaded ? undefined : state.lastOutline);
|
|
231
|
+
return;
|
|
232
|
+
}
|
|
233
|
+
h.addTitle('Document Outline');
|
|
234
|
+
h.addDescription('View page heading structure and save as markdown.');
|
|
235
|
+
if (state.options.saveLocation === 'local' && !state.sweetlinkConnected) {
|
|
236
|
+
h.addWarning('Sweetlink not connected. Switch save method to Auto or Download.');
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
Object.assign(btn.style, getButtonStyles(BUTTON_COLORS.outline, isActive, false));
|
|
240
|
+
btn.onclick = () => handleDocumentOutline(state);
|
|
241
|
+
if (state.lastOutline) {
|
|
242
|
+
btn.textContent = 'v';
|
|
243
|
+
btn.style.fontSize = '0.5rem';
|
|
244
|
+
}
|
|
245
|
+
else {
|
|
246
|
+
btn.appendChild(createSvgIcon('M3 4h18v2H3V4zm0 7h12v2H3v-2zm0 7h18v2H3v-2z', { fill: true }));
|
|
247
|
+
}
|
|
248
|
+
return btn;
|
|
249
|
+
}
|
|
250
|
+
export function createSchemaButton(state) {
|
|
251
|
+
const btn = document.createElement('button');
|
|
252
|
+
btn.type = 'button';
|
|
253
|
+
btn.setAttribute('aria-label', 'Page Schema');
|
|
254
|
+
const isActive = state.showSchemaModal || !!state.lastSchema;
|
|
255
|
+
// Attach HTML tooltip
|
|
256
|
+
attachButtonTooltip(state, btn, BUTTON_COLORS.schema, (_tooltip, h) => {
|
|
257
|
+
if (state.lastSchema) {
|
|
258
|
+
const isDownloaded = state.lastSchema.endsWith('downloaded');
|
|
259
|
+
h.addSuccess(isDownloaded ? 'Schema downloaded!' : 'Schema saved!', isDownloaded ? undefined : state.lastSchema);
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
262
|
+
h.addTitle('Page Schema');
|
|
263
|
+
h.addDescription('View JSON-LD, Open Graph, and other structured data.');
|
|
264
|
+
if (state.options.saveLocation === 'local' && !state.sweetlinkConnected) {
|
|
265
|
+
h.addWarning('Sweetlink not connected. Switch save method to Auto or Download.');
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
Object.assign(btn.style, getButtonStyles(BUTTON_COLORS.schema, isActive, false));
|
|
269
|
+
btn.onclick = () => handlePageSchema(state);
|
|
270
|
+
if (state.lastSchema) {
|
|
271
|
+
btn.textContent = 'v';
|
|
272
|
+
btn.style.fontSize = '0.5rem';
|
|
273
|
+
}
|
|
274
|
+
else {
|
|
275
|
+
btn.appendChild(createSvgIcon('M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z', { fill: true }));
|
|
276
|
+
}
|
|
277
|
+
return btn;
|
|
278
|
+
}
|
|
279
|
+
export function createA11yButton(state) {
|
|
280
|
+
const btn = document.createElement('button');
|
|
281
|
+
btn.type = 'button';
|
|
282
|
+
btn.setAttribute('aria-label', 'Accessibility Audit');
|
|
283
|
+
const isActive = state.showA11yModal || !!state.lastA11yAudit;
|
|
284
|
+
attachButtonTooltip(state, btn, BUTTON_COLORS.a11y, (_tooltip, h) => {
|
|
285
|
+
if (state.lastA11yAudit) {
|
|
286
|
+
const isDownloaded = state.lastA11yAudit.endsWith('downloaded');
|
|
287
|
+
h.addSuccess(isDownloaded ? 'A11y report downloaded!' : 'A11y report saved!', isDownloaded ? undefined : state.lastA11yAudit);
|
|
288
|
+
return;
|
|
289
|
+
}
|
|
290
|
+
h.addTitle('Accessibility Audit');
|
|
291
|
+
h.addDescription('Run axe-core audit to check WCAG compliance.');
|
|
292
|
+
if (state.options.saveLocation === 'local' && !state.sweetlinkConnected) {
|
|
293
|
+
h.addWarning('Sweetlink not connected. Switch save method to Auto or Download.');
|
|
294
|
+
}
|
|
295
|
+
});
|
|
296
|
+
// Preload axe-core on hover
|
|
297
|
+
btn.addEventListener('mouseenter', () => preloadAxe(), { once: true });
|
|
298
|
+
Object.assign(btn.style, getButtonStyles(BUTTON_COLORS.a11y, isActive, false));
|
|
299
|
+
btn.onclick = () => handleA11yAudit(state);
|
|
300
|
+
if (state.lastA11yAudit) {
|
|
301
|
+
btn.textContent = 'v';
|
|
302
|
+
btn.style.fontSize = '0.5rem';
|
|
303
|
+
}
|
|
304
|
+
else {
|
|
305
|
+
// Accessibility/shield icon
|
|
306
|
+
btn.appendChild(createSvgIcon('M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z', { fill: true }));
|
|
307
|
+
}
|
|
308
|
+
return btn;
|
|
309
|
+
}
|
|
310
|
+
/**
|
|
311
|
+
* Create the settings gear button.
|
|
312
|
+
*/
|
|
313
|
+
export function createSettingsButton(state) {
|
|
314
|
+
const btn = document.createElement('button');
|
|
315
|
+
btn.type = 'button';
|
|
316
|
+
btn.setAttribute('data-testid', 'devbar-settings-button');
|
|
317
|
+
btn.setAttribute('aria-label', 'Settings');
|
|
318
|
+
// Attach HTML tooltip
|
|
319
|
+
attachButtonTooltip(state, btn, CSS_COLORS.textSecondary, (_tooltip, h) => {
|
|
320
|
+
h.addTitle('Settings');
|
|
321
|
+
h.addSectionHeader('Keyboard');
|
|
322
|
+
h.addShortcut('Cmd or Ctrl+Shift+M', 'Toggle compact mode');
|
|
323
|
+
});
|
|
324
|
+
const isActive = state.showSettingsPopover;
|
|
325
|
+
const color = CSS_COLORS.textSecondary;
|
|
326
|
+
Object.assign(btn.style, getButtonStyles(color, isActive, false));
|
|
327
|
+
btn.onclick = () => {
|
|
328
|
+
const wasOpen = state.showSettingsPopover;
|
|
329
|
+
closeAllModals(state);
|
|
330
|
+
state.showSettingsPopover = !wasOpen;
|
|
331
|
+
state.render();
|
|
332
|
+
};
|
|
333
|
+
// Gear icon SVG
|
|
334
|
+
btn.appendChild(createSvgIcon('M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', { stroke: true, children: [{ type: 'circle', cx: '12', cy: '12', r: '3' }] }));
|
|
335
|
+
return btn;
|
|
336
|
+
}
|
|
337
|
+
/**
|
|
338
|
+
* Create the compact mode toggle button with chevron icon.
|
|
339
|
+
*/
|
|
340
|
+
export function createCompactToggleButton(state) {
|
|
341
|
+
const btn = document.createElement('button');
|
|
342
|
+
btn.type = 'button';
|
|
343
|
+
btn.setAttribute('aria-label', state.compactMode ? 'Switch to expanded mode' : 'Switch to compact mode');
|
|
344
|
+
const isCompact = state.compactMode;
|
|
345
|
+
const { accentColor } = state.options;
|
|
346
|
+
const iconColor = CSS_COLORS.textSecondary;
|
|
347
|
+
Object.assign(btn.style, getButtonStyles(iconColor, false, false));
|
|
348
|
+
btn.style.borderColor = withAlpha(accentColor, 38);
|
|
349
|
+
attachTextTooltip(state, btn, () => (isCompact ? 'Expand (Cmd or Ctrl+Shift+M)' : 'Compact (Cmd or Ctrl+Shift+M)'), {
|
|
350
|
+
onEnter: () => {
|
|
351
|
+
btn.style.borderColor = accentColor;
|
|
352
|
+
btn.style.backgroundColor = withAlpha(accentColor, 13);
|
|
353
|
+
btn.style.color = iconColor;
|
|
354
|
+
},
|
|
355
|
+
onLeave: () => {
|
|
356
|
+
btn.style.borderColor = withAlpha(accentColor, 38);
|
|
357
|
+
btn.style.backgroundColor = 'transparent';
|
|
358
|
+
btn.style.color = withAlpha(iconColor, 60);
|
|
359
|
+
},
|
|
360
|
+
});
|
|
361
|
+
btn.onclick = () => {
|
|
362
|
+
state.toggleCompactMode();
|
|
363
|
+
};
|
|
364
|
+
// Chevron icon SVG - points right when expanded, left when compact
|
|
365
|
+
const chevronPoints = isCompact ? '9 18 15 12 9 6' : '15 18 9 12 15 6';
|
|
366
|
+
btn.appendChild(createSvgIcon('', { stroke: true, children: [{ type: 'polyline', points: chevronPoints }] }));
|
|
367
|
+
return btn;
|
|
368
|
+
}
|
|
369
|
+
//# sourceMappingURL=buttons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"buttons.js","sourceRoot":"","sources":["../../../src/modules/rendering/buttons.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapsed.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/collapsed.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,aAAa,CAAC;AAE9D,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAgJxD"}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Collapsed state rendering for the DevBar.
|
|
3
|
+
*/
|
|
4
|
+
import { CSS_COLORS, withAlpha } from '../../constants.js';
|
|
5
|
+
import { attachTextTooltip } from '../tooltips.js';
|
|
6
|
+
export function renderCollapsed(state) {
|
|
7
|
+
if (!state.container)
|
|
8
|
+
return;
|
|
9
|
+
const { position, accentColor } = state.options;
|
|
10
|
+
const { errorCount, warningCount } = state.getLogCounts();
|
|
11
|
+
// Use captured dot position if available, otherwise fall back to preset positions
|
|
12
|
+
// The 13px offset accounts for half the collapsed circle diameter (26px / 2)
|
|
13
|
+
let posStyle;
|
|
14
|
+
if (state.lastDotPosition) {
|
|
15
|
+
// Position based on where the dot actually was
|
|
16
|
+
const isTop = position.startsWith('top');
|
|
17
|
+
posStyle = isTop
|
|
18
|
+
? { top: `${state.lastDotPosition.top - 13}px`, left: `${state.lastDotPosition.left - 13}px` }
|
|
19
|
+
: {
|
|
20
|
+
bottom: `${state.lastDotPosition.bottom - 13}px`,
|
|
21
|
+
left: `${state.lastDotPosition.left - 13}px`,
|
|
22
|
+
};
|
|
23
|
+
// Clear after use so expand doesn't re-use stale values
|
|
24
|
+
state.lastDotPosition = null;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
// Fallback preset positions for when no dot position was captured
|
|
28
|
+
const collapsedPositions = {
|
|
29
|
+
'bottom-left': { bottom: '27px', left: '86px' },
|
|
30
|
+
'bottom-right': { bottom: '27px', right: '29px' },
|
|
31
|
+
'top-left': { top: '27px', left: '86px' },
|
|
32
|
+
'top-right': { top: '27px', right: '29px' },
|
|
33
|
+
'bottom-center': { bottom: '19px', left: '50%', transform: 'translateX(-50%)' },
|
|
34
|
+
};
|
|
35
|
+
posStyle = collapsedPositions[position] ?? collapsedPositions['bottom-left'];
|
|
36
|
+
}
|
|
37
|
+
const wrapper = state.container;
|
|
38
|
+
wrapper.className = 'devbar-collapse';
|
|
39
|
+
state.resetPositionStyles(wrapper);
|
|
40
|
+
// Set CSS variable for accent color (used by pulse animation)
|
|
41
|
+
wrapper.style.setProperty('--devbar-color-accent', accentColor);
|
|
42
|
+
Object.assign(wrapper.style, {
|
|
43
|
+
position: 'fixed',
|
|
44
|
+
...posStyle,
|
|
45
|
+
zIndex: '9999',
|
|
46
|
+
backgroundColor: 'var(--devbar-color-bg-card)',
|
|
47
|
+
border: `1px solid ${accentColor}`,
|
|
48
|
+
borderRadius: '50%',
|
|
49
|
+
color: accentColor,
|
|
50
|
+
boxShadow: `0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px ${withAlpha(accentColor, 10)}`,
|
|
51
|
+
backdropFilter: 'blur(8px)',
|
|
52
|
+
WebkitBackdropFilter: 'blur(8px)',
|
|
53
|
+
cursor: 'pointer',
|
|
54
|
+
display: 'flex',
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
justifyContent: 'center',
|
|
57
|
+
width: '26px',
|
|
58
|
+
height: '26px',
|
|
59
|
+
boxSizing: 'border-box',
|
|
60
|
+
animation: 'devbar-collapse 150ms ease-out, devbar-collapsed-pulse 2s ease-in-out 0.2s 3',
|
|
61
|
+
});
|
|
62
|
+
wrapper.onclick = () => {
|
|
63
|
+
state.collapsed = false;
|
|
64
|
+
state.debug.state('Expanded DevBar');
|
|
65
|
+
state.render();
|
|
66
|
+
};
|
|
67
|
+
// Create inner container for dot + chevron
|
|
68
|
+
const innerContainer = document.createElement('span');
|
|
69
|
+
Object.assign(innerContainer.style, {
|
|
70
|
+
display: 'flex',
|
|
71
|
+
alignItems: 'center',
|
|
72
|
+
justifyContent: 'center',
|
|
73
|
+
position: 'relative',
|
|
74
|
+
});
|
|
75
|
+
// Connection indicator dot (same size as in expanded state)
|
|
76
|
+
const dot = document.createElement('span');
|
|
77
|
+
Object.assign(dot.style, {
|
|
78
|
+
width: '6px',
|
|
79
|
+
height: '6px',
|
|
80
|
+
borderRadius: '50%',
|
|
81
|
+
backgroundColor: state.sweetlinkConnected ? CSS_COLORS.primary : CSS_COLORS.textMuted,
|
|
82
|
+
boxShadow: state.sweetlinkConnected ? `0 0 6px ${CSS_COLORS.primary}` : 'none',
|
|
83
|
+
transition: 'transform 150ms ease-out, opacity 150ms ease-out',
|
|
84
|
+
});
|
|
85
|
+
innerContainer.appendChild(dot);
|
|
86
|
+
// Expand chevron indicator (appears on hover)
|
|
87
|
+
const chevron = document.createElement('span');
|
|
88
|
+
Object.assign(chevron.style, {
|
|
89
|
+
position: 'absolute',
|
|
90
|
+
width: '100%',
|
|
91
|
+
height: '100%',
|
|
92
|
+
display: 'flex',
|
|
93
|
+
alignItems: 'center',
|
|
94
|
+
justifyContent: 'center',
|
|
95
|
+
opacity: '0',
|
|
96
|
+
transition: 'opacity 150ms ease-out',
|
|
97
|
+
fontSize: '10px',
|
|
98
|
+
color: accentColor,
|
|
99
|
+
});
|
|
100
|
+
chevron.textContent = '\u2197';
|
|
101
|
+
innerContainer.appendChild(chevron);
|
|
102
|
+
attachTextTooltip(state, wrapper, () => `Click to expand DevBar${state.sweetlinkConnected ? ' (Sweetlink connected)' : ' (Sweetlink not connected)'}${errorCount > 0 ? `\n${errorCount} console error${errorCount === 1 ? '' : 's'}` : ''}`, {
|
|
103
|
+
onEnter: () => {
|
|
104
|
+
dot.style.opacity = '0';
|
|
105
|
+
dot.style.transform = 'scale(0)';
|
|
106
|
+
chevron.style.opacity = '1';
|
|
107
|
+
},
|
|
108
|
+
onLeave: () => {
|
|
109
|
+
dot.style.opacity = '1';
|
|
110
|
+
dot.style.transform = 'scale(1)';
|
|
111
|
+
chevron.style.opacity = '0';
|
|
112
|
+
},
|
|
113
|
+
});
|
|
114
|
+
wrapper.appendChild(innerContainer);
|
|
115
|
+
// Error badge (absolute, top-right of circle, shifted left if warning badge exists)
|
|
116
|
+
if (errorCount > 0) {
|
|
117
|
+
wrapper.appendChild(state.createCollapsedBadge(errorCount, 'rgba(239, 68, 68, 0.95)', warningCount > 0 ? '12px' : '-6px'));
|
|
118
|
+
}
|
|
119
|
+
// Warning badge (absolute, top-right)
|
|
120
|
+
if (warningCount > 0) {
|
|
121
|
+
wrapper.appendChild(state.createCollapsedBadge(warningCount, 'rgba(245, 158, 11, 0.95)', '-6px'));
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
//# sourceMappingURL=collapsed.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapsed.js","sourceRoot":"","sources":["../../../src/modules/rendering/collapsed.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Common helpers shared across rendering sub-modules.
|
|
3
|
+
*/
|
|
4
|
+
import type { DevBarState } from '../types.js';
|
|
5
|
+
/**
|
|
6
|
+
* Capture the center of an element's bounding rect as a dot position.
|
|
7
|
+
* Used to animate the collapsed circle to the same spot as the connection dot.
|
|
8
|
+
*/
|
|
9
|
+
export declare function captureDotPosition(state: DevBarState, element: Element): void;
|
|
10
|
+
/**
|
|
11
|
+
* Create the connection indicator (outer wrapper + inner colored dot).
|
|
12
|
+
* The caller is responsible for attaching tooltip and click handlers, since
|
|
13
|
+
* those differ between compact and expanded modes.
|
|
14
|
+
*/
|
|
15
|
+
export declare function createConnectionIndicator(state: DevBarState): HTMLSpanElement;
|
|
16
|
+
/** Prevents re-entrant render calls during rapid clicks */
|
|
17
|
+
export declare let renderGuard: boolean;
|
|
18
|
+
export declare function setRenderGuard(value: boolean): void;
|
|
19
|
+
/** Remove all child nodes from an element. */
|
|
20
|
+
export declare function clearChildren(el: HTMLElement): void;
|
|
21
|
+
//# sourceMappingURL=common.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAO7E;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,WAAW,GAAG,eAAe,CA4B7E;AAED,2DAA2D;AAC3D,eAAO,IAAI,WAAW,SAAQ,CAAC;AAE/B,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAEnD;AAED,8CAA8C;AAC9C,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAInD"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Common helpers shared across rendering sub-modules.
|
|
3
|
+
*/
|
|
4
|
+
import { CSS_COLORS } from '../../constants.js';
|
|
5
|
+
/**
|
|
6
|
+
* Capture the center of an element's bounding rect as a dot position.
|
|
7
|
+
* Used to animate the collapsed circle to the same spot as the connection dot.
|
|
8
|
+
*/
|
|
9
|
+
export function captureDotPosition(state, element) {
|
|
10
|
+
const rect = element.getBoundingClientRect();
|
|
11
|
+
state.lastDotPosition = {
|
|
12
|
+
left: rect.left + rect.width / 2,
|
|
13
|
+
top: rect.top + rect.height / 2,
|
|
14
|
+
bottom: window.innerHeight - (rect.top + rect.height / 2),
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Create the connection indicator (outer wrapper + inner colored dot).
|
|
19
|
+
* The caller is responsible for attaching tooltip and click handlers, since
|
|
20
|
+
* those differ between compact and expanded modes.
|
|
21
|
+
*/
|
|
22
|
+
export function createConnectionIndicator(state) {
|
|
23
|
+
const connIndicator = document.createElement('span');
|
|
24
|
+
connIndicator.className = 'devbar-clickable';
|
|
25
|
+
Object.assign(connIndicator.style, {
|
|
26
|
+
width: '12px',
|
|
27
|
+
height: '12px',
|
|
28
|
+
borderRadius: '50%',
|
|
29
|
+
backgroundColor: 'transparent',
|
|
30
|
+
display: 'flex',
|
|
31
|
+
alignItems: 'center',
|
|
32
|
+
justifyContent: 'center',
|
|
33
|
+
cursor: 'pointer',
|
|
34
|
+
flexShrink: '0',
|
|
35
|
+
});
|
|
36
|
+
const connDot = document.createElement('span');
|
|
37
|
+
connDot.className = 'devbar-conn-dot';
|
|
38
|
+
Object.assign(connDot.style, {
|
|
39
|
+
width: '6px',
|
|
40
|
+
height: '6px',
|
|
41
|
+
borderRadius: '50%',
|
|
42
|
+
backgroundColor: state.sweetlinkConnected ? CSS_COLORS.primary : CSS_COLORS.textMuted,
|
|
43
|
+
boxShadow: state.sweetlinkConnected ? `0 0 6px ${CSS_COLORS.primary}` : 'none',
|
|
44
|
+
transition: 'all 300ms',
|
|
45
|
+
});
|
|
46
|
+
connIndicator.appendChild(connDot);
|
|
47
|
+
return connIndicator;
|
|
48
|
+
}
|
|
49
|
+
/** Prevents re-entrant render calls during rapid clicks */
|
|
50
|
+
export let renderGuard = false;
|
|
51
|
+
export function setRenderGuard(value) {
|
|
52
|
+
renderGuard = value;
|
|
53
|
+
}
|
|
54
|
+
/** Remove all child nodes from an element. */
|
|
55
|
+
export function clearChildren(el) {
|
|
56
|
+
while (el.firstChild) {
|
|
57
|
+
el.removeChild(el.firstChild);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../src/modules/rendering/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAkB,EAAE,OAAgB;IACrE,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC7C,KAAK,CAAC,eAAe,GAAG;QACtB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC;QAChC,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;KAC1D,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAAC,KAAkB;IAC1D,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACrD,aAAa,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC7C,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE;QACjC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,aAAa;QAC9B,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,GAAG;KAChB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,SAAS,GAAG,iBAAiB,CAAC;IACtC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;QAC3B,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS;QACrF,SAAS,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM;QAC9E,UAAU,EAAE,WAAW;KACxB,CAAC,CAAC;IACH,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,2DAA2D;AAC3D,MAAM,CAAC,IAAI,WAAW,GAAG,KAAK,CAAC;AAE/B,MAAM,UAAU,cAAc,CAAC,KAAc;IAC3C,WAAW,GAAG,KAAK,CAAC;AACtB,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,aAAa,CAAC,EAAe;IAC3C,OAAO,EAAE,CAAC,UAAU,EAAE,CAAC;QACrB,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;AACH,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"compact.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/compact.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,aAAa,CAAC;AAI9D,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CA+GtD"}
|