AyronSantos
12d419de7c
Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages. DESIGN SYSTEM: - Created PRODUCT.md (5 design principles, WCAG 2.1 AA target) - Created DESIGN.md (34 color tokens, 6 radius scale, full component spec) - Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion) ACCESSIBILITY: - 33 aria-labels across 7 pages (was ~13) - 63 <label> elements (was ~30) - 6 <main> landmarks + role=navigation on all sidebars - Esc to close modals on 4 pages - Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat THEMING: - 216 hardcoded colors replaced with var() references - 449 !important removed from dark-mode.css - Dark mode script unified (was duplicated 9x inline) - All modals converted to .modal-overlay + .modal design system classes CHAT: - Error states for messages (.msg.erro, .msg.enviando) - Connection status indicator - Confirmation modal before finalizar - Input bar reorganized (3 visible actions, + menu) - Right panel accordions - Send button disabled when empty - Touch targets 44px on mobile CLIENT DETAIL: - Tabs/badges/sub-tabs use CSS classes instead of inline styles - 'Iniciar Conversa' button now primary action - alert() replaced with inline feedback - Modal converted to design system classes CLIENT LIST: - Modal moved inside <body> (was HTML-invalid) - alert() replaced with inline feedback - Modal uses .show pattern SETTINGS: - 4 modals converted to design system classes - 14 alert() calls replaced with inline feedback - fecharModal() uses classList instead of style.display ROUTES: - border-radius normalized, hardcoded colors fixed Score progression: Chat: 23 → 32/40 Client List: 32 → 35/40 Client Detail: 26 → 30/40 Settings: 29 → 35/40 Routes: 37 → 38/40 Audit (project): 14/20 → 17/20
50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
|
|
export const LIVE_BROWSER_SCRIPT_PARTS = Object.freeze([
|
|
Object.freeze({ name: 'session-state', file: 'live-browser-session.js' }),
|
|
Object.freeze({ name: 'dom-helpers', file: 'live-browser-dom.js' }),
|
|
Object.freeze({ name: 'browser-ui', file: 'live-browser.js' }),
|
|
]);
|
|
|
|
export function resolveLiveBrowserScriptParts(scriptsDir, parts = LIVE_BROWSER_SCRIPT_PARTS) {
|
|
if (!scriptsDir) throw new Error('scriptsDir is required');
|
|
return parts.map((part, index) => ({
|
|
...part,
|
|
index,
|
|
path: path.join(scriptsDir, part.file),
|
|
}));
|
|
}
|
|
|
|
export function assertLiveBrowserScriptParts(parts, exists = fs.existsSync) {
|
|
for (const part of parts) {
|
|
if (!exists(part.path)) {
|
|
throw new Error(`Live browser script part missing: ${part.name} (${part.path})`);
|
|
}
|
|
}
|
|
return parts;
|
|
}
|
|
|
|
export function readLiveBrowserScriptParts(parts, readFile = (filePath) => fs.readFileSync(filePath, 'utf-8')) {
|
|
return parts.map((part) => ({
|
|
...part,
|
|
source: readFile(part.path),
|
|
}));
|
|
}
|
|
|
|
export function assembleLiveBrowserScript({ token, port, vocabulary, parts }) {
|
|
const prelude =
|
|
`window.__IMPECCABLE_TOKEN__ = '${token}';\n` +
|
|
`window.__IMPECCABLE_PORT__ = ${port};\n` +
|
|
// Canonical command vocabulary (values + labels + icons). live-browser.js
|
|
// builds its action picker from this instead of an inline copy.
|
|
`window.__IMPECCABLE_VOCAB__ = ${JSON.stringify(vocabulary)};\n`;
|
|
|
|
const body = parts.map((part) => {
|
|
const file = part.file || path.basename(part.path || '');
|
|
return `// --- impeccable live script part: ${part.name} (${file}) ---\n${part.source}`;
|
|
}).join('\n');
|
|
|
|
return prelude + body;
|
|
}
|