plura-assistent 1.0.1 → 1.0.4
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 +228 -0
- package/dist/index.js +39 -3
- package/dist/index.mjs +39 -3
- package/package.json +9 -3
- package/src/FONTETEST.txt +1 -0
- package/src/registerContrastBorder.ts +41 -4
package/README.md
ADDED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
# PluraAssistent – Documentação Oficial (BETA 1.0)
|
|
2
|
+
|
|
3
|
+
> **Versão:** BETA 1.0
|
|
4
|
+
> **IA:** Azure OpenAI – modelo `o4-mini`
|
|
5
|
+
> **Licença:** Uso interno ETS
|
|
6
|
+
> **Acesso:** Via *token ETS*
|
|
7
|
+
> **Compatibilidade:** Funciona em **React, Angular, Next.js, Vue** e qualquer projeto que utilize **NPM**
|
|
8
|
+
> **Status:** Em evolução contínua ...
|
|
9
|
+
|
|
10
|
+
O **PluraAssistent** é a biblioteca oficial de acessibilidade e inteligência artificial do ecossistema **Plura**, criada para garantir inclusão, acessibilidade visual e apoio cognitivo dentro das aplicações da ETS.
|
|
11
|
+
|
|
12
|
+
Ele foi projetado para ser integrado com **mínimo esforço**:
|
|
13
|
+
**Instalou, configurou o Provider e todo o assistente passa a funcionar automaticamente.**
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
# Principais Funcionalidades
|
|
18
|
+
|
|
19
|
+
Todas as funcionalidades abaixo são **automáticas** após a instalação da lib + configuração do Provider.
|
|
20
|
+
|
|
21
|
+
## 1. IA Simplificadora de Texto (com Glossário Automático)
|
|
22
|
+
|
|
23
|
+
- Simplifica textos complexos (jurídicos, técnicos, internos).
|
|
24
|
+
- Gera glossário automático quando identifica termos difíceis.
|
|
25
|
+
- Mantém o contexto e preserva a intenção original.
|
|
26
|
+
- Funciona com Azure OpenAI `o4-mini`.
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## 2. Modo Noturno (Dark Mode) – Assistente
|
|
31
|
+
|
|
32
|
+
- Aplicado automaticamente ao **assistent**.
|
|
33
|
+
- Pensado para conforto visual.
|
|
34
|
+
- Em funcionalidades **futuras**, pretende ser expandido à plataforma toda.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## 3. Daltonismo – Modo Automático (Cores e Imagens)
|
|
39
|
+
|
|
40
|
+
O assistente adapta automaticamente o sistema para:
|
|
41
|
+
|
|
42
|
+
- Protanopia
|
|
43
|
+
- Deuteranopia
|
|
44
|
+
- Tritanopia
|
|
45
|
+
- Acromatopsia
|
|
46
|
+
- Tricromacia anômala
|
|
47
|
+
|
|
48
|
+
Ajustando:
|
|
49
|
+
|
|
50
|
+
✔ cores
|
|
51
|
+
✔ ícones
|
|
52
|
+
✔ botões
|
|
53
|
+
✔ textos
|
|
54
|
+
✔ **imagens**
|
|
55
|
+
|
|
56
|
+
Nenhuma configuração é necessária.
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## 4. Aumento Automático de Fonte
|
|
61
|
+
|
|
62
|
+
Para pessoas com baixa visão:
|
|
63
|
+
|
|
64
|
+
- aumenta toda tipografia,
|
|
65
|
+
- mantém hierarquia e responsividade,
|
|
66
|
+
- não requer hooks ou componentes extras.
|
|
67
|
+
|
|
68
|
+
Tem quatro modos de fonte, com 1.0x, 1.25x, 1.50x e 1.75x de tamanho da fonte.
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 5. Parar Animações (Acessibilidade Neurológica)
|
|
73
|
+
|
|
74
|
+
Pensado para:
|
|
75
|
+
|
|
76
|
+
- pessoas com epilepsia fotossensível,
|
|
77
|
+
- TDAH,
|
|
78
|
+
- sensibilidade a estímulos,
|
|
79
|
+
- vertigem digital.
|
|
80
|
+
|
|
81
|
+
O assistente automaticamente:
|
|
82
|
+
|
|
83
|
+
- desabilita animações,
|
|
84
|
+
- remove transições,
|
|
85
|
+
- evita flickers e loops.
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## 6. Alto Contraste (Low Vision Mode) – com Hooks e Tags
|
|
90
|
+
|
|
91
|
+
O modo de alto contraste ajusta automaticamente:
|
|
92
|
+
|
|
93
|
+
✔ ícones
|
|
94
|
+
✔ botões
|
|
95
|
+
✔ sombras
|
|
96
|
+
✔ cartões
|
|
97
|
+
✔ textos
|
|
98
|
+
✔ backgrounds
|
|
99
|
+
✔ bordas
|
|
100
|
+
✔ componentes estruturais
|
|
101
|
+
|
|
102
|
+
Além disso, a lib fornece **tags personalizadas** para destacar blocos.
|
|
103
|
+
|
|
104
|
+
### Exemplo real de uso:
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import { useEffect } from "react";
|
|
108
|
+
import { ToggleContrast, registerContrastBorder } from "plura-assistent";
|
|
109
|
+
|
|
110
|
+
export default function App() {
|
|
111
|
+
useEffect(() => {
|
|
112
|
+
registerContrastBorder();
|
|
113
|
+
}, []);
|
|
114
|
+
|
|
115
|
+
return (
|
|
116
|
+
<>
|
|
117
|
+
<ToggleContrast />
|
|
118
|
+
<contrast-border>
|
|
119
|
+
<p>Esse bloco vai ter borda no contraste</p>
|
|
120
|
+
</contrast-border>
|
|
121
|
+
</>
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
# Instalação
|
|
129
|
+
|
|
130
|
+
Requer token da ETS:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
npm install plura-assistent
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
ou
|
|
137
|
+
|
|
138
|
+
```bash
|
|
139
|
+
yarn add plura-assistent
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
> 📌 *O token ETS é obrigatório para instalar e usufruir da biblioteca.*
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
# Configuração do Provider
|
|
147
|
+
|
|
148
|
+
Após configurar, **todas as features passam a funcionar automaticamente**.
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
import { PluraAssistentProvider } from "plura-assistent";
|
|
152
|
+
|
|
153
|
+
export default function RootLayout({ children }) {
|
|
154
|
+
return (
|
|
155
|
+
<html lang="pt-BR">
|
|
156
|
+
<body>
|
|
157
|
+
<PluraAssistentProvider
|
|
158
|
+
config={{
|
|
159
|
+
token: process.env.NEXT_PUBLIC_ASSISTENT_TOKEN, // Token da ETS
|
|
160
|
+
environment: "prod",
|
|
161
|
+
}}
|
|
162
|
+
>
|
|
163
|
+
{children}
|
|
164
|
+
</PluraAssistentProvider>
|
|
165
|
+
</body>
|
|
166
|
+
</html>
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
# Como o Assistente Funciona Internamente
|
|
174
|
+
|
|
175
|
+
1. O frontend chama a lib.
|
|
176
|
+
2. A lib repassa ao backend ETS.
|
|
177
|
+
3. O backend valida token e contexto.
|
|
178
|
+
4. O backend consulta Azure OpenAI `o4-mini`.
|
|
179
|
+
5. A resposta volta tratada.
|
|
180
|
+
6. A lib aplica as regras de acessibilidade conforme necessidade do usuário.
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
# Segurança
|
|
185
|
+
|
|
186
|
+
- Nenhum dado sensível vai diretamente ao OpenAI.
|
|
187
|
+
- A ETS controla todas as operações via token.
|
|
188
|
+
- Existem limites e auditoria interna de segurança para garantir que a IA não erre dados confidencias, sendo nível 1 de confidencialidade.
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
# Versão BETA 1.0
|
|
193
|
+
|
|
194
|
+
Como versão inicial:
|
|
195
|
+
|
|
196
|
+
- pode conter ajustes estruturais,
|
|
197
|
+
- pode sofrer breaking changes,
|
|
198
|
+
- tem telemetria reforçada,
|
|
199
|
+
- está recebendo feedback contínuo da ETS.
|
|
200
|
+
|
|
201
|
+
---
|
|
202
|
+
|
|
203
|
+
# Boas Práticas
|
|
204
|
+
|
|
205
|
+
- Não envie dados sensíveis à IA.
|
|
206
|
+
- Trate loading e erros.
|
|
207
|
+
- Armazene textos processados no backend quando úteis.
|
|
208
|
+
- Utilize tags como `<contrast-border>` para granularidade no contraste.
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
# Resumo Final
|
|
213
|
+
|
|
214
|
+
O **PluraAssistent** oferece:
|
|
215
|
+
|
|
216
|
+
- IA com simplificação + glossário
|
|
217
|
+
- Revisão textual inteligente
|
|
218
|
+
- Alto contraste com hooks e tags
|
|
219
|
+
- Aumento de fonte automático
|
|
220
|
+
- Modo noturno
|
|
221
|
+
- Daltonismo (cores + imagens)
|
|
222
|
+
- Bloqueio de animações
|
|
223
|
+
- Compatibilidade com **React, Angular, Next.js, Vue e qualquer solução NPM**
|
|
224
|
+
|
|
225
|
+
E principalmente:
|
|
226
|
+
|
|
227
|
+
➡️ **Após instalar e configurar o Provider, tudo funciona automaticamente.**
|
|
228
|
+
|
package/dist/index.js
CHANGED
|
@@ -99,6 +99,42 @@ function ContrastBorder({ children, className = "", ...rest }) {
|
|
|
99
99
|
function registerContrastBorder() {
|
|
100
100
|
if (typeof window === "undefined") return;
|
|
101
101
|
if (customElements.get("contrast-border")) return;
|
|
102
|
+
if (!document.getElementById("contrast-style")) {
|
|
103
|
+
const style = document.createElement("style");
|
|
104
|
+
style.id = "contrast-style";
|
|
105
|
+
style.innerHTML = `
|
|
106
|
+
body.contrast,
|
|
107
|
+
body.contrast * {
|
|
108
|
+
background: #000 !important;
|
|
109
|
+
color: #fff !important;
|
|
110
|
+
border-color: #fff !important;
|
|
111
|
+
fill: #fff !important;
|
|
112
|
+
stroke: #fff !important;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
body.contrast .card {
|
|
116
|
+
border: 2px solid #fff !important;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
body.contrast .contrast-exception-container,
|
|
120
|
+
body.contrast .contrast-exception-container * {
|
|
121
|
+
background: none !important;
|
|
122
|
+
color: inherit !important;
|
|
123
|
+
border-color: initial !important;
|
|
124
|
+
fill: initial !important;
|
|
125
|
+
stroke: initial !important;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
body.contrast img.contrast-hide {
|
|
129
|
+
display: none !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
body.contrast img.contrast-show {
|
|
133
|
+
display: block !important;
|
|
134
|
+
}
|
|
135
|
+
`;
|
|
136
|
+
document.head.appendChild(style);
|
|
137
|
+
}
|
|
102
138
|
class ContrastBorderElement extends HTMLElement {
|
|
103
139
|
constructor() {
|
|
104
140
|
super();
|
|
@@ -106,13 +142,13 @@ function registerContrastBorder() {
|
|
|
106
142
|
const wrapper = document.createElement("div");
|
|
107
143
|
wrapper.setAttribute("class", "card");
|
|
108
144
|
wrapper.innerHTML = `<slot></slot>`;
|
|
109
|
-
const
|
|
110
|
-
|
|
145
|
+
const localStyle = document.createElement("style");
|
|
146
|
+
localStyle.textContent = `
|
|
111
147
|
:host {
|
|
112
148
|
display: block;
|
|
113
149
|
}
|
|
114
150
|
`;
|
|
115
|
-
shadow.appendChild(
|
|
151
|
+
shadow.appendChild(localStyle);
|
|
116
152
|
shadow.appendChild(wrapper);
|
|
117
153
|
}
|
|
118
154
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -61,6 +61,42 @@ function ContrastBorder({ children, className = "", ...rest }) {
|
|
|
61
61
|
function registerContrastBorder() {
|
|
62
62
|
if (typeof window === "undefined") return;
|
|
63
63
|
if (customElements.get("contrast-border")) return;
|
|
64
|
+
if (!document.getElementById("contrast-style")) {
|
|
65
|
+
const style = document.createElement("style");
|
|
66
|
+
style.id = "contrast-style";
|
|
67
|
+
style.innerHTML = `
|
|
68
|
+
body.contrast,
|
|
69
|
+
body.contrast * {
|
|
70
|
+
background: #000 !important;
|
|
71
|
+
color: #fff !important;
|
|
72
|
+
border-color: #fff !important;
|
|
73
|
+
fill: #fff !important;
|
|
74
|
+
stroke: #fff !important;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
body.contrast .card {
|
|
78
|
+
border: 2px solid #fff !important;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
body.contrast .contrast-exception-container,
|
|
82
|
+
body.contrast .contrast-exception-container * {
|
|
83
|
+
background: none !important;
|
|
84
|
+
color: inherit !important;
|
|
85
|
+
border-color: initial !important;
|
|
86
|
+
fill: initial !important;
|
|
87
|
+
stroke: initial !important;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
body.contrast img.contrast-hide {
|
|
91
|
+
display: none !important;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
body.contrast img.contrast-show {
|
|
95
|
+
display: block !important;
|
|
96
|
+
}
|
|
97
|
+
`;
|
|
98
|
+
document.head.appendChild(style);
|
|
99
|
+
}
|
|
64
100
|
class ContrastBorderElement extends HTMLElement {
|
|
65
101
|
constructor() {
|
|
66
102
|
super();
|
|
@@ -68,13 +104,13 @@ function registerContrastBorder() {
|
|
|
68
104
|
const wrapper = document.createElement("div");
|
|
69
105
|
wrapper.setAttribute("class", "card");
|
|
70
106
|
wrapper.innerHTML = `<slot></slot>`;
|
|
71
|
-
const
|
|
72
|
-
|
|
107
|
+
const localStyle = document.createElement("style");
|
|
108
|
+
localStyle.textContent = `
|
|
73
109
|
:host {
|
|
74
110
|
display: block;
|
|
75
111
|
}
|
|
76
112
|
`;
|
|
77
|
-
shadow.appendChild(
|
|
113
|
+
shadow.appendChild(localStyle);
|
|
78
114
|
shadow.appendChild(wrapper);
|
|
79
115
|
}
|
|
80
116
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "plura-assistent",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Plugin de acessibilidade para alto contraste com suporte a <contrast-border>",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -16,6 +16,12 @@
|
|
|
16
16
|
},
|
|
17
17
|
"keywords": [
|
|
18
18
|
"accessibility",
|
|
19
|
+
"dark-mode",
|
|
20
|
+
"vue",
|
|
21
|
+
"angular",
|
|
22
|
+
"font-control",
|
|
23
|
+
"stop-animations",
|
|
24
|
+
"diversity",
|
|
19
25
|
"a11y",
|
|
20
26
|
"contrast",
|
|
21
27
|
"react",
|
|
@@ -23,7 +29,7 @@
|
|
|
23
29
|
"tailwind",
|
|
24
30
|
"plura"
|
|
25
31
|
],
|
|
26
|
-
"author": "
|
|
32
|
+
"author": "Lucas Camargo (Cul7ca@bosch.com)",
|
|
27
33
|
"license": "MIT",
|
|
28
34
|
"devDependencies": {
|
|
29
35
|
"@types/react": "^19.1.16",
|
|
@@ -37,4 +43,4 @@
|
|
|
37
43
|
"react": ">=18",
|
|
38
44
|
"react-dom": ">=18"
|
|
39
45
|
}
|
|
40
|
-
}
|
|
46
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
https://chatgpt.com/share/68dfd775-a61c-8010-8234-e3f28df51464
|
|
@@ -2,23 +2,60 @@ export function registerContrastBorder() {
|
|
|
2
2
|
if (typeof window === "undefined") return;
|
|
3
3
|
if (customElements.get("contrast-border")) return;
|
|
4
4
|
|
|
5
|
+
if (!document.getElementById("contrast-style")) {
|
|
6
|
+
const style = document.createElement("style");
|
|
7
|
+
style.id = "contrast-style";
|
|
8
|
+
style.innerHTML = `
|
|
9
|
+
body.contrast,
|
|
10
|
+
body.contrast * {
|
|
11
|
+
background: #000 !important;
|
|
12
|
+
color: #fff !important;
|
|
13
|
+
border-color: #fff !important;
|
|
14
|
+
fill: #fff !important;
|
|
15
|
+
stroke: #fff !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
body.contrast .card {
|
|
19
|
+
border: 2px solid #fff !important;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
body.contrast .contrast-exception-container,
|
|
23
|
+
body.contrast .contrast-exception-container * {
|
|
24
|
+
background: none !important;
|
|
25
|
+
color: inherit !important;
|
|
26
|
+
border-color: initial !important;
|
|
27
|
+
fill: initial !important;
|
|
28
|
+
stroke: initial !important;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body.contrast img.contrast-hide {
|
|
32
|
+
display: none !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
body.contrast img.contrast-show {
|
|
36
|
+
display: block !important;
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
39
|
+
document.head.appendChild(style);
|
|
40
|
+
}
|
|
41
|
+
|
|
5
42
|
class ContrastBorderElement extends HTMLElement {
|
|
6
43
|
constructor() {
|
|
7
44
|
super();
|
|
8
45
|
const shadow = this.attachShadow({ mode: "open" });
|
|
9
46
|
|
|
10
47
|
const wrapper = document.createElement("div");
|
|
11
|
-
wrapper.setAttribute("class", "card");
|
|
48
|
+
wrapper.setAttribute("class", "card");
|
|
12
49
|
wrapper.innerHTML = `<slot></slot>`;
|
|
13
50
|
|
|
14
|
-
const
|
|
15
|
-
|
|
51
|
+
const localStyle = document.createElement("style");
|
|
52
|
+
localStyle.textContent = `
|
|
16
53
|
:host {
|
|
17
54
|
display: block;
|
|
18
55
|
}
|
|
19
56
|
`;
|
|
20
57
|
|
|
21
|
-
shadow.appendChild(
|
|
58
|
+
shadow.appendChild(localStyle);
|
|
22
59
|
shadow.appendChild(wrapper);
|
|
23
60
|
}
|
|
24
61
|
}
|