feat: comprehensive design system overhaul

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
This commit is contained in:
2026-06-23 16:58:12 +00:00
parent cf720c37a1
commit 12d419de7c
113 changed files with 52423 additions and 951 deletions
@@ -0,0 +1,123 @@
/**
* Browser-side durable session helpers for Impeccable live mode.
*
* Kept separate from live-browser.js so recovery state can be tested without
* booting the full overlay UI. Served before live-browser.js and attached to
* window.__IMPECCABLE_LIVE_SESSION__.
*/
(function (root) {
'use strict';
function createLiveBrowserSessionState({ prefix, storage, idFactory }) {
if (!prefix) throw new Error('prefix required');
const store = storage || root.localStorage;
const makeId = idFactory || function () { return Math.random().toString(16).slice(2, 10); };
const sessionKey = prefix + '-session';
const handledKey = sessionKey + '-handled';
const scrollKey = sessionKey + '-scroll';
let checkpointRevision = 0;
const owner = makeId();
function safeRead(key) {
try { return store.getItem(key); } catch { return null; }
}
function safeWrite(key, value) {
try { store.setItem(key, value); } catch { /* quota exceeded or private mode */ }
}
function safeRemove(key) {
try { store.removeItem(key); } catch { /* unavailable storage */ }
}
function loadSession() {
try {
const raw = safeRead(sessionKey);
if (!raw) return null;
const parsed = JSON.parse(raw);
if (Number.isInteger(parsed.checkpointRevision)) {
checkpointRevision = Math.max(checkpointRevision, parsed.checkpointRevision);
}
return parsed;
} catch { return null; }
}
function saveSession(session) {
if (!session || !session.id) return;
const payload = {
...session,
checkpointRevision,
};
safeWrite(sessionKey, JSON.stringify(payload));
}
function clearSession() {
safeRemove(sessionKey);
}
function nextCheckpointRevision() {
checkpointRevision += 1;
const existing = loadSession();
if (existing?.id) saveSession(existing);
return checkpointRevision;
}
function seedCheckpointRevision(value) {
if (Number.isInteger(value)) checkpointRevision = Math.max(checkpointRevision, value);
return checkpointRevision;
}
function currentCheckpointRevision() {
return checkpointRevision;
}
function markHandled(id) {
if (!id) return;
safeWrite(handledKey, id);
}
function isHandled(id) {
return !!id && safeRead(handledKey) === id;
}
function clearHandled() {
safeRemove(handledKey);
}
function writeScrollY(y) {
safeWrite(scrollKey, String(y));
}
function readScrollY() {
const raw = safeRead(scrollKey);
if (raw == null) return null;
const n = parseFloat(raw);
return isFinite(n) ? n : null;
}
function clearScrollY() {
safeRemove(scrollKey);
}
return {
owner,
sessionKey,
handledKey,
scrollKey,
saveSession,
loadSession,
clearSession,
nextCheckpointRevision,
seedCheckpointRevision,
currentCheckpointRevision,
markHandled,
isHandled,
clearHandled,
writeScrollY,
readScrollY,
clearScrollY,
};
}
root.__IMPECCABLE_LIVE_SESSION__ = { createLiveBrowserSessionState };
})(typeof window !== 'undefined' ? window : globalThis);