@praxisui/tabs 1.0.0-beta.4 → 1.0.0-beta.41

package/README.md

@@ -1,5 +1,12 @@
 # @praxisui/tabs — Praxis Tabs
 
+## 🔰 Exemplos / Quickstart
+
+Para ver esta biblioteca em funcionamento em uma aplicação completa, utilize o projeto de exemplo (Quickstart):
+
+- Repositório: https://github.com/codexrodrigues/praxis-ui-quickstart
+- O Quickstart demonstra a integração das bibliotecas `@praxisui/*` em um app Angular, incluindo instalação, configuração e uso em telas reais.
+
 Componente de abas (grupo e nav) configurável por metadados, com suporte a widgets internos, presets de estilo e editor integrado via Settings Panel.
 
 ## Visão Geral
@@ -7,7 +14,7 @@ Componente de abas (grupo e nav) configurável por metadados, com suporte a widg
 - Dois modos de renderização: `group` (mat-tab-group) e `nav` (mat-tab-nav-bar).
 - Suporte a conteúdo dinâmico por campo (`DynamicFieldLoader`) e por widget (`DynamicWidgetLoader`).
 - Integração com Settings Panel para edição/configuração em tempo de execução.
-- Persistência opcional de configuração por `tabsId` usando `ConfigStorage`.
+- Persistência de configuração por `tabsId` usando `AsyncConfigStorage` (chave derivada via component_id).
 - Lazy load opcional do conteúdo para melhor desempenho.
 - Eventos reemitidos com contexto (para conexões entre widgets/páginas).
 
@@ -18,7 +25,8 @@ Selector
 
 Inputs
 - `config: TabsMetadata | null` Metadados completos para aparência, comportamento e conteúdo.
-- `tabsId?: string` Identificador estável para persistir/restaurar a configuração.
+- `tabsId: string` Identificador estável para persistir/restaurar a configuração.
+- `componentInstanceId?: string` Opcional para desambiguar múltiplas instâncias com o mesmo `tabsId` na mesma rota.
 - `form?: FormGroup` FormGroup opcional para campos dinâmicos declarados em `content`.
 - `context?: any` Contexto propagado a widgets internos (via `DynamicWidgetLoader`).
 - `editModeEnabled?: boolean` Exibe botão de edição quando verdadeiro (abre o editor).
@@ -30,7 +38,8 @@ Outputs
 - `widgetEvent: { tabId?, tabIndex?, linkId?, linkIndex?, sourceId, output?, payload? }` Reemissão de eventos dos widgets internos com contexto da aba/link.
 
 Persistência
-- Quando `tabsId` é fornecido, a configuração é salva/recuperada de `ConfigStorage` na chave `tabs:<tabsId>`.
+- Quando `tabsId` é fornecido, a configuração é salva/recuperada em `AsyncConfigStorage` na chave `tabs:<component_id>`.
+- O `component_id` é derivado via `ComponentKeyService` (inclui rota, tipo de componente, `tabsId` e `componentInstanceId` quando informado).
 
 ## Estrutura de Metadados (resumo)
 
@@ -125,3 +134,10 @@ const tabsCfg: TabsMetadata = {
 - Para persistência por usuário/escopo, forneça `tabsId` estável e deixe o componente gerir `ConfigStorage`.
 - Tokens de estilo aceitam CSS vars ou cores (`#RRGGBB`/`rgb(...)`).
 - Em M2, `color` e `backgroundColor` seguem as opções do Angular Material; em M3, prefira tokens.
+- A classe de tema é decisão do host (`.dark-theme` ou `.theme-dark`/`.theme-light`); mantenha tokens e componentes no mesmo escopo.
+
+### Tokens M3 obrigatórios (host)
+
+- Superfícies: `--md-sys-color-surface`, `--md-sys-color-surface-container`, `--md-sys-color-surface-variant`
+- Texto/contorno: `--md-sys-color-on-surface`, `--md-sys-color-on-surface-variant`, `--md-sys-color-outline`, `--md-sys-color-outline-variant`
+- Semânticos: `--md-sys-color-primary`, `--md-sys-color-secondary`, `--md-sys-color-tertiary`, `--md-sys-color-error`