{ "schemaVersion": 3, "site": { "name": "PraxisUI", "url": "https://praxisui.dev" }, "route": "/examples/dynamic-page", "catalogUrl": "/examples/dynamic-page.json", "purpose": "Machine-readable catalog of executable praxis-dynamic-page examples for crawlers, LLMs, and documentation agents.", "variantFamilies": [ { "id": "employee-table-operations", "title": { "pt": "Tabelas operacionais de funcionários", "en": "Employee operational tables" }, "exampleIds": [ "funcionarios-table", "funcionarios-rich-table-surface", "funcionarios-actions-capabilities", "funcionarios-actions-workspace", "funcionarios-inline-filter-lab", "funcionarios-rules-computed-table", "funcionarios-ai-table-workspace" ] }, { "id": "mission-participant-lists", "title": { "pt": "Listas de participantes de missão", "en": "Mission participant lists" }, "exampleIds": [ "remote-mission-participant-list", "remote-mission-participant-list-live" ] }, { "id": "employee-form-workflows", "title": { "pt": "Formulários governados de funcionários", "en": "Governed employee forms" }, "exampleIds": [ "funcionario-profile-form", "funcionario-lifecycle-form", "employee-entity-lookup-workspace" ] }, { "id": "employee-workspace-compositions", "title": { "pt": "Workspaces operacionais de pessoas", "en": "People operations workspaces" }, "exampleIds": [ "funcionarios-crud", "funcionarios-master-detail", "employee-operations-casework" ] }, { "id": "approval-decision-workbenches", "title": { "pt": "Bancadas de decisão de aprovação", "en": "Approval decision workbenches" }, "exampleIds": [ "approval-audit-workbench", "approval-decision-workbench", "approval-delegation-exception-workbench", "approval-review-workbench", "approval-sla-triage-workbench" ] }, { "id": "employee-decision-workbenches", "title": { "pt": "Decisões do ciclo de pessoas", "en": "Employee lifecycle decisions" }, "exampleIds": [ "employee-compensation-review-workbench", "employee-insight-workbench", "employee-internal-mobility-workbench", "employee-leave-absence-workbench", "employee-offboarding-workbench", "employee-performance-review-workbench", "employee-promotion-review-workbench", "employee-succession-planning-workbench" ] }, { "id": "onboarding-journeys", "title": { "pt": "Jornadas governadas de onboarding", "en": "Governed onboarding journeys" }, "exampleIds": [ "onboarding-day-30-coaching-workbench", "onboarding-equipment-access-recovery-workbench", "onboarding-journey-workbench", "onboarding-manager-follow-up-workbench", "onboarding-readiness-workbench", "stepper-onboarding-workflow" ] } ], "examples": [ { "id": "funcionarios-table", "title": "Funcionarios - remote table", "summary": "Renders the published funcionarios contract as a remote table, proving that a real API can materialize a usable screen before any bespoke Angular page exists.", "i18n": { "pt": { "title": "Funcionários - tabela remota", "summary": "Materializa o contrato publicado de funcionários como tabela remota, provando que uma API real pode virar tela antes de existir uma página Angular feita à mão.", "demonstrates": [ "Explore Funcionários - tabela remota e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-table materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Materializa o contrato publicado de funcionários como tabela remota, provando que uma API real pode virar tela antes de existir uma página Angular feita à mão.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e filter." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-table", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-table", "category": "minimum", "mode": "remote-metadata-driven", "primaryComponent": "praxis-table", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "options", "capabilities", "remote-data" ], "tags": [ "table", "remote", "schema-driven", "quickstart" ], "demonstrates": [ "Remote table bootstrap from resourcePath", "Schema-driven columns from /schemas/filtered", "Remote filter endpoint data loading", "Row selection output exposed to Dynamic Page" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "remote-options", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "basic", "catalogRole": "runtime-widget", "learningStage": "first-contact", "variantFamilyId": "employee-table-operations", "featuredRank": 1, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "quickstart-filter-response" ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.table.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-table.json", "documentation": { "story": { "pt": "Uma equipe de RH precisa consultar funcionários reais sem esperar pela implementação de mais uma tela Angular. O exemplo parte do contrato publicado pela API e materializa a coleção diretamente como uma superfície operacional.", "en": "An HR team needs to browse real employees without waiting for another Angular screen. The example starts from the API-published contract and materializes the collection directly as an operational surface." }, "outcome": { "pt": "O visitante vê dados remotos, paginação e estrutura de colunas nascerem da mesma fonte de verdade que continuará governando outras experiências.", "en": "The visitor sees remote data, pagination and column structure emerge from the same source of truth that can govern other experiences." }, "componentRoles": [ { "component": "praxis-table", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa dados tabulares, filtros, seleção e ações operacionais.", "en": "Materializes tabular data, filters, selection and operational actions." }, "rationale": { "pt": "É usado quando o trabalho depende de comparar registros e agir sobre uma coleção governada.", "en": "It is used when the job depends on comparing records and acting on a governed collection." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.dataSource", "title": { "pt": "Fonte de dados", "en": "Data source" }, "explanation": { "pt": "Declara recurso, paginação, ordenação e parâmetros sem transferir a propriedade dos dados para a tabela.", "en": "Declares resource, pagination, sorting and parameters without transferring data ownership to the table." } }, { "jsonPath": "definition.inputs.config.columns", "title": { "pt": "Leitura operacional", "en": "Operational reading" }, "explanation": { "pt": "Escolhe colunas, renderers e formatação que transformam o contrato em uma visão adequada ao trabalho.", "en": "Chooses columns, renderers and formatting that turn the contract into a job-appropriate view." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Ações governadas", "en": "Governed actions" }, "explanation": { "pt": "Relaciona ações de toolbar, linha ou lote às operações que o host pode mediar.", "en": "Relates toolbar, row or bulk actions to operations the host can mediate." } } ], "experiments": [ { "pt": "Altere a ordem ou a visibilidade das colunas e observe como a mesma fonte de dados sustenta outra visão operacional.", "en": "Change column order or visibility and observe how the same data source supports another operational view." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.table.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.table.json." } ] }, "envelope": { "id": "funcionarios-table", "title": "Funcionarios - remote table", "summary": "Renders the published funcionarios contract as a remote table, proving that a real API can materialize a usable screen before any bespoke Angular page exists.", "component": "praxis-dynamic-page", "category": "minimum", "primaryComponent": "praxis-table", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "options", "capabilities", "remote-data" ], "tags": [ "table", "remote", "schema-driven", "quickstart" ], "demonstrates": [ "Remote table bootstrap from resourcePath", "Schema-driven columns from /schemas/filtered", "Remote filter endpoint data loading", "Row selection output exposed to Dynamic Page" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "remote-options", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "basic", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "quickstart-filter-response" ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.table.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionariosTable", "shell": { "kind": "dashboard-card", "icon": "table", "title": "Funcionarios", "subtitle": "Remote schema-driven table" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "human-resources-funcionarios-table", "aiContext": { "navigationDestinations": { "source": "landing-dynamic-page-route-catalog", "destinations": [ { "id": "funcionarios-ai-table-workspace", "path": "/examples/dynamic-page/funcionarios-ai-table-workspace", "label": "Workspace de IA de funcionários", "description": "Abre o exemplo avançado com assistente, seleção, filtros, exportação e authoring da tabela de funcionários.", "tags": [ "funcionarios", "assistente", "tabela", "authoring" ], "materialized": true }, { "id": "funcionarios-actions-workspace", "path": "/examples/dynamic-page/funcionarios-actions-workspace", "label": "Ações de funcionários", "description": "Abre o exemplo de ações e capacidades operacionais para funcionários.", "tags": [ "funcionarios", "acoes", "global-actions" ], "materialized": true }, { "id": "funcionarios-master-detail", "path": "/examples/dynamic-page/funcionarios-master-detail", "label": "Funcionários com detalhe", "description": "Abre o exemplo master-detail para consultar um funcionário e seu detalhe relacionado.", "tags": [ "funcionarios", "detalhe", "master-detail" ], "materialized": true } ] } }, "config": { "toolbar": { "visible": true, "title": "Funcionarios" }, "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit" } } } ] } } }, { "id": "funcionarios-rich-table-surface", "title": "Funcionarios - rich table surface", "summary": "Adds dense operational renderers and formatters over the same funcionarios resource, showing how presentation can evolve as metadata instead of another table fork.", "i18n": { "pt": { "title": "Funcionários - tabela operacional rica", "summary": "Evolui a mesma API de funcionários com renderers e formatadores operacionais, sem criar outro fork de tabela.", "demonstrates": [ "Explore Funcionários - tabela operacional rica e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-table materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Evolui a mesma API de funcionários com renderers e formatadores operacionais, sem criar outro fork de tabela.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e filter." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-rich-table-surface", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-rich-table-surface", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-table", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "options", "capabilities", "remote-data", "table.renderers", "table.formatters" ], "tags": [ "table", "remote", "schema-driven", "renderers", "formatters", "quickstart" ], "demonstrates": [ "Avatar renderer for employee photo URLs", "Badge and chip rendering for business classifications", "Currency, date and status presentation alongside contact fields", "Host-authored column surface layered over /schemas/filtered metadata", "Selection state remains available for Dynamic Page composition" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "remote-options", "capabilities", "table.renderers.avatar", "table.renderers.badge", "table.renderers.chip", "table.formatters.currency", "table.formatters.date", "table.conditional-renderers.status-badge" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "intermediate", "catalogRole": "runtime-widget", "learningStage": "base-components", "variantFamilyId": "employee-table-operations", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "configured-renderer-columns", "quickstart-filter-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-filter-basic" ], "pendingHttpIds": [], "notes": [ "Renderer and formatter behavior is host-authored table config over the published funcionarios schema.", "Status is presented as a read-only badge because this example does not configure a backend mutation action.", "The public Quickstart uses synthetic demo records. In production, table config is not authorization: the host must enforce field-level access, data minimization, export controls and audit retention for salary, phone, email, birth date, marital status and any CPF exposed by the schema." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rich-table-surface.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-rich-table-surface.json", "documentation": { "story": { "pt": "Funcionários - tabela operacional rica parte de uma necessidade operacional concreta: Evolui a mesma API de funcionários com renderers e formatadores operacionais, sem criar outro fork de tabela.", "en": "Funcionarios - rich table surface starts from a concrete operational need: Adds dense operational renderers and formatters over the same funcionarios resource, showing how presentation can evolve as metadata instead of another table fork." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-table transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-table turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-table", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa dados tabulares, filtros, seleção e ações operacionais.", "en": "Materializes tabular data, filters, selection and operational actions." }, "rationale": { "pt": "É usado quando o trabalho depende de comparar registros e agir sobre uma coleção governada.", "en": "It is used when the job depends on comparing records and acting on a governed collection." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.dataSource", "title": { "pt": "Fonte de dados", "en": "Data source" }, "explanation": { "pt": "Declara recurso, paginação, ordenação e parâmetros sem transferir a propriedade dos dados para a tabela.", "en": "Declares resource, pagination, sorting and parameters without transferring data ownership to the table." } }, { "jsonPath": "definition.inputs.config.columns", "title": { "pt": "Leitura operacional", "en": "Operational reading" }, "explanation": { "pt": "Escolhe colunas, renderers e formatação que transformam o contrato em uma visão adequada ao trabalho.", "en": "Chooses columns, renderers and formatting that turn the contract into a job-appropriate view." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Ações governadas", "en": "Governed actions" }, "explanation": { "pt": "Relaciona ações de toolbar, linha ou lote às operações que o host pode mediar.", "en": "Relates toolbar, row or bulk actions to operations the host can mediate." } } ], "experiments": [ { "pt": "Altere a ordem ou a visibilidade das colunas e observe como a mesma fonte de dados sustenta outra visão operacional.", "en": "Change column order or visibility and observe how the same data source supports another operational view." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rich-table-surface.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rich-table-surface.json." } ] }, "envelope": { "id": "funcionarios-rich-table-surface", "title": "Funcionarios - rich table surface", "summary": "Adds dense operational renderers and formatters over the same funcionarios resource, showing how presentation can evolve as metadata instead of another table fork.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-table", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "options", "capabilities", "remote-data", "table.renderers", "table.formatters" ], "tags": [ "table", "remote", "schema-driven", "renderers", "formatters", "quickstart" ], "demonstrates": [ "Avatar renderer for employee photo URLs", "Badge and chip rendering for business classifications", "Currency, date and status presentation alongside contact fields", "Host-authored column surface layered over /schemas/filtered metadata", "Selection state remains available for Dynamic Page composition" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "remote-options", "capabilities", "table.renderers.avatar", "table.renderers.badge", "table.renderers.chip", "table.formatters.currency", "table.formatters.date", "table.conditional-renderers.status-badge" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "intermediate", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "configured-renderer-columns", "quickstart-filter-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-filter-basic" ], "pendingHttpIds": [], "notes": [ "Renderer and formatter behavior is host-authored table config over the published funcionarios schema.", "Status is presented as a read-only badge because this example does not configure a backend mutation action.", "The public Quickstart uses synthetic demo records. In production, table config is not authorization: the host must enforce field-level access, data minimization, export controls and audit retention for salary, phone, email, birth date, marital status and any CPF exposed by the schema." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rich-table-surface.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionariosRichTable", "shell": { "kind": "dashboard-card", "icon": "table", "title": "Funcionarios rich surface", "subtitle": "Renderers, formatters and dense business columns" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "human-resources-funcionarios-rich-surface", "config": { "toolbar": { "visible": true, "title": "Funcionarios", "subtitle": "Rich metadata-driven employee surface" }, "columns": [ { "field": "avatarUrl", "header": "Avatar", "type": "string", "renderer": { "type": "avatar", "avatar": { "srcField": "avatarUrl", "altField": "nomeCompleto", "initialsField": "nomeCompleto", "shape": "circle", "size": 36 } }, "width": "88px", "sticky": "start" }, { "field": "nomeCompleto", "header": "Nome Completo", "type": "string", "sticky": "start", "width": "220px" }, { "field": "email", "header": "Email", "type": "string", "width": "260px" }, { "field": "telefone", "header": "Telefone", "type": "string", "width": "160px" }, { "field": "salario", "header": "Salario", "type": "currency", "align": "end", "format": "BRL|symbol|2", "width": "150px" }, { "field": "cargoNome", "header": "Cargo", "type": "string", "renderer": { "type": "chip", "chip": { "textField": "cargoNome", "variant": "outlined", "color": "primary" } }, "width": "190px" }, { "field": "departamentoNome", "header": "Departamento", "type": "string", "renderer": { "type": "badge", "badge": { "textField": "departamentoNome", "variant": "soft", "color": "accent" } }, "width": "180px" }, { "field": "estadoCivil", "header": "Estado Civil", "type": "string", "renderer": { "type": "badge", "badge": { "textField": "estadoCivil", "variant": "outlined", "color": "primary" } }, "width": "150px" }, { "field": "dataAdmissao", "header": "Data de Admissao", "type": "date", "format": "dd/MM/yyyy", "width": "170px" }, { "field": "dataNascimento", "header": "Data de Nascimento", "type": "date", "format": "dd/MM/yyyy", "width": "190px" }, { "field": "ativo", "header": "Status", "type": "boolean", "align": "center", "format": "active-inactive", "width": "130px", "conditionalRenderers": [ { "condition": { "==": [ { "var": "ativo" }, true ] }, "renderer": { "type": "badge", "badge": { "text": "Ativo", "color": "success", "variant": "filled", "icon": "check_circle" } } }, { "condition": { "==": [ { "var": "ativo" }, false ] }, "renderer": { "type": "badge", "badge": { "text": "Inativo", "color": "warn", "variant": "outlined", "icon": "block" } } } ] } ], "behavior": { "selection": { "enabled": true, "type": "multiple" }, "density": "compact" } } }, "outputs": { "rowClick": "emit", "selectionChange": "emit" } } } ] } } }, { "id": "remote-mission-participant-list", "title": "Missions - participant list smoke fixture", "summary": "Loads mission participants into Praxis List with the remote resourcePath declared and a deterministic smoke fixture for visual QA.", "i18n": { "pt": { "title": "Missões - lista de participantes (smoke visual)", "summary": "Mantém uma fixture determinística de participantes de missão para QA visual enquanto preserva o resourcePath remoto no contrato.", "demonstrates": [ "Explore Missões - lista de participantes (smoke visual) e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-list materializa operations/missao-participantes com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Mantém uma fixture determinística de participantes de missão para QA visual enquanto preserva o resourcePath remoto no contrato.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-list.dataSource.resourcePath, GenericCrudService.filter.", "Verifique a conexão com as evidências canônicas filter&operation=post&schemaType=request e filter." ] } }, "publicRoute": "/examples/dynamic-page/remote-mission-participant-list", "publicUrl": "https://praxisui.dev/examples/dynamic-page/remote-mission-participant-list", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-list", "resourcePath": "operations/missao-participantes", "resourceKey": "operations.missao-participantes", "requires": [ "praxis-list.config", "dataSource.resourcePath", "filter", "remote-data", "list.selection", "list.actions", "hateoas.links", "smoke-fixture" ], "tags": [ "list", "remote-data", "missions", "participants", "resourcePath", "quickstart", "ai-recipe" ], "demonstrates": [ "List resourcePath remains declared while dataSource.data supplies stable rows for smoke validation", "Deterministic smoke fixture keeps this route inspectable when the public quickstart API returns no rows", "Published quickstart filter endpoint feeding the runtime with pageable data", "Template slots mapped to relational DTO fields: funcionario, missao, papel and resultado", "Selection and item actions emitted from a remote resource item", "HATEOAS links available on each loaded participant for surfaces and capabilities" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-list.dataSource.resourcePath", "GenericCrudService.filter", "praxis-list.remote-pagination", "praxis-list.templating", "praxis-list.selectionChange", "praxis-list.actionClick", "quickstart-hateoas-links" ], "backendSurfaces": [ "GET /schemas/filtered?path=/api/operations/missao-participantes/filter&operation=post&schemaType=request", "POST /api/operations/missao-participantes/filter", "GET /api/operations/missao-participantes/capabilities", "GET /api/operations/missao-participantes/{id}/surfaces", "GET /api/operations/missao-participantes/{id}/capabilities" ], "complexity": "intermediate", "catalogRole": "runtime-widget", "learningStage": "base-components", "variantFamilyId": "mission-participant-lists", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-list-rendered", "remote-resourcePath-declared", "deterministic-smoke-fixture", "mission-participants-loaded" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example keeps the remote resourcePath declared, but includes dataSource.data as a deterministic smoke fixture for browser QA.", "Use the live remote participant list variant to exercise the quickstart filter end to end without fixture data.", "The quickstart response includes per-item HATEOAS links, so agents can discover follow-up surfaces and capabilities from selected rows." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-list.json", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/operations/controller/MissaoParticipanteController.java" ], "sourcePath": "docs/examples/dynamic-page/examples/remote-mission-participant-list.json", "documentation": { "story": { "pt": "Missões - lista de participantes (smoke visual) parte de uma necessidade operacional concreta: Mantém uma fixture determinística de participantes de missão para QA visual enquanto preserva o resourcePath remoto no contrato.", "en": "Missions - participant list smoke fixture starts from a concrete operational need: Loads mission participants into Praxis List with the remote resourcePath declared and a deterministic smoke fixture for visual QA." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-list transforma o contrato de operations/missao-participantes em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-list turns the operations/missao-participantes contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-list", "jsonPath": "page.widgets[].definition", "role": { "pt": "Apresenta coleções escaneáveis, estados e ações por item.", "en": "Presents scannable collections, states and per-item actions." }, "rationale": { "pt": "É mais adequado que uma tabela quando a leitura de contexto por item importa mais que a comparação por colunas.", "en": "It is better than a table when item context matters more than column-by-column comparison." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-list ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-list to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." } } ], "experiments": [ { "pt": "Altere o template de item ou a ação principal e avalie como muda a prioridade da leitura.", "en": "Change the item template or primary action and assess how reading priority changes." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-list.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-list.json." } ] }, "envelope": { "id": "remote-mission-participant-list", "title": "Missions - participant list smoke fixture", "summary": "Loads mission participants into Praxis List with the remote resourcePath declared and a deterministic smoke fixture for visual QA.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-list", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/list" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missao-participantes", "resourceKey": "operations.missao-participantes" }, "requires": [ "praxis-list.config", "dataSource.resourcePath", "filter", "remote-data", "list.selection", "list.actions", "hateoas.links", "smoke-fixture" ], "tags": [ "list", "remote-data", "missions", "participants", "resourcePath", "quickstart", "ai-recipe" ], "demonstrates": [ "List resourcePath remains declared while dataSource.data supplies stable rows for smoke validation", "Deterministic smoke fixture keeps this route inspectable when the public quickstart API returns no rows", "Published quickstart filter endpoint feeding the runtime with pageable data", "Template slots mapped to relational DTO fields: funcionario, missao, papel and resultado", "Selection and item actions emitted from a remote resource item", "HATEOAS links available on each loaded participant for surfaces and capabilities" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-list.dataSource.resourcePath", "GenericCrudService.filter", "praxis-list.remote-pagination", "praxis-list.templating", "praxis-list.selectionChange", "praxis-list.actionClick", "quickstart-hateoas-links" ], "backendSurfaces": [ "GET /schemas/filtered?path=/api/operations/missao-participantes/filter&operation=post&schemaType=request", "POST /api/operations/missao-participantes/filter", "GET /api/operations/missao-participantes/capabilities", "GET /api/operations/missao-participantes/{id}/surfaces", "GET /api/operations/missao-participantes/{id}/capabilities" ], "complexity": "intermediate", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-list-rendered", "remote-resourcePath-declared", "deterministic-smoke-fixture", "mission-participants-loaded" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example keeps the remote resourcePath declared, but includes dataSource.data as a deterministic smoke fixture for browser QA.", "Use the live remote participant list variant to exercise the quickstart filter end to end without fixture data.", "The quickstart response includes per-item HATEOAS links, so agents can discover follow-up surfaces and capabilities from selected rows." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-list.json", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/operations/controller/MissaoParticipanteController.java" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "remoteMissionParticipantList", "shell": { "kind": "dashboard-card", "icon": "groups", "title": "Mission participants", "subtitle": "Visual smoke fixture with the remote resourcePath still declared" }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "remote-mission-participant-list", "componentInstanceId": "dynamic-page-showcase", "config": { "id": "remote-mission-participant-list-config", "dataSource": { "data": [ { "id": 1, "funcionarioId": 101, "funcionarioNome": "Tony Stark", "missaoId": 1, "missaoTitulo": "Batalha de Nova York", "papel": "LIDER", "resultado": "OK", "_links": { "self": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/1" }, "surfaces": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/1/surfaces" }, "capabilities": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/1/capabilities" } } }, { "id": 2, "funcionarioId": 102, "funcionarioNome": "Steve Rogers", "missaoId": 1, "missaoTitulo": "Batalha de Nova York", "papel": "COMBATE", "resultado": "OK", "_links": { "self": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/2" }, "surfaces": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/2/surfaces" }, "capabilities": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/2/capabilities" } } }, { "id": 3, "funcionarioId": 103, "funcionarioNome": "Bruce Banner", "missaoId": 1, "missaoTitulo": "Batalha de Nova York", "papel": "SUPORTE", "resultado": "OK", "_links": { "self": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/3" }, "surfaces": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/3/surfaces" }, "capabilities": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/3/capabilities" } } }, { "id": 4, "funcionarioId": 104, "funcionarioNome": "Carol Danvers", "missaoId": 1, "missaoTitulo": "Batalha de Nova York", "papel": "SUPORTE", "resultado": "NA", "_links": { "self": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/4" }, "surfaces": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/4/surfaces" }, "capabilities": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/4/capabilities" } } }, { "id": 5, "funcionarioId": 105, "funcionarioNome": "Peter Parker", "missaoId": 2, "missaoTitulo": "Ataque do Duende", "papel": "LIDER", "resultado": "OK", "_links": { "self": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/5" }, "surfaces": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/5/surfaces" }, "capabilities": { "href": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/operations/missao-participantes/5/capabilities" } } } ], "resourcePath": "operations/missao-participantes", "query": {}, "sort": [ "ordem,asc" ] }, "layout": { "variant": "list", "density": "comfortable", "lines": 3, "dividers": "between", "pageSize": 8, "rowLayout": { "type": "grid", "columns": [ { "slot": "leading", "width": "44px", "align": "center" }, { "slot": "primary", "width": "minmax(180px, 1fr)" }, { "slot": "secondary", "width": "minmax(220px, 1.2fr)" }, { "slot": "meta", "width": "140px", "align": "center" }, { "slot": "trailing", "width": "120px", "align": "center" }, { "slot": "actions", "width": "92px", "align": "end" } ], "gap": "12px", "align": "center" } }, "skin": { "type": "outline", "radius": "8px", "border": "1px solid rgba(20, 184, 166, 0.32)" }, "selection": { "mode": "multiple", "compareBy": "funcionarioId", "return": "id" }, "interaction": { "expandable": true, "expandTrigger": "icon", "expandMode": "single", "expandPlacement": "actions" }, "templating": { "leading": { "type": "icon", "expr": "groups" }, "primary": { "type": "text", "expr": "${item.funcionarioNome}" }, "secondary": { "type": "text", "expr": "${item.missaoTitulo}" }, "meta": { "type": "chip", "expr": "${item.papel}", "variant": "outlined" }, "trailing": { "type": "chip", "expr": "${item.resultado}", "variant": "filled" }, "features": [ { "type": "chip", "expr": "missao #${item.missaoId}", "variant": "outlined" }, { "type": "chip", "expr": "funcionario #${item.funcionarioId}", "variant": "outlined" } ], "featuresMode": "labels-only", "emptyState": { "type": "text", "expr": "No mission participants returned by the quickstart filter." } }, "expansion": { "sections": [ { "id": "mission-participant-detail", "title": "Mission participant detail", "type": "rich-content", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "id": "relationship-summary", "type": "propertySheet", "title": "Relationship", "columns": 2, "items": [ { "id": "participant", "label": "Participant", "valueExpr": "${item.funcionarioNome}", "icon": "person" }, { "id": "mission", "label": "Mission", "valueExpr": "${item.missaoTitulo}", "icon": "flag" }, { "id": "role", "label": "Role", "valueExpr": "${item.papel}", "icon": "military_tech", "tone": "info" }, { "id": "result", "label": "Result", "valueExpr": "${item.resultado}", "icon": "verified", "tone": "success" } ] }, { "id": "hateoas-actions", "type": "actionCard", "title": "Governed API context", "subtitle": "HATEOAS links are available for this item without exposing raw JSON in the UI.", "message": "Use the list actions to inspect surfaces or capabilities from the same canonical resource.", "icon": "hub", "ctaLabel": "Inspect capabilities", "ctaIcon": "bolt", "variant": "stroked", "color": "primary", "action": { "actionId": "missionParticipant.inspectCapabilities", "payloadExpr": "${item._links.capabilities.href}" } } ] } } ], "rendering": { "shell": "attached", "columns": 1, "gap": "12px", "padding": "12px" } }, "actions": [ { "id": "open-participant-surfaces", "icon": "layers", "label": "Surfaces", "kind": "icon", "globalAction": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Participant surfaces", "icon": "layers", "subtitle": "Governed follow-up surfaces for the selected participant", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Published surfaces for ${item.funcionarioNome}", "content": "The selected participant belongs to ${item.missaoTitulo}. Surface actions should open governed runtime projections instead of leaving row buttons as inert local events. Capability link: ${item._links.capabilities.href}", "variant": "emphasis" } } } }, "emitLocal": false, "showLoading": true, "placement": "actions" }, { "id": "inspect-participant-capabilities", "icon": "bolt", "label": "Capabilities", "kind": "icon", "globalAction": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Participant capabilities", "icon": "bolt", "subtitle": "Canonical capabilities entrypoint for the selected participant", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Capabilities for ${item.funcionarioNome}", "content": "Use the canonical HATEOAS capabilities link to inspect the operations available for this participant: ${item._links.capabilities.href}. The list action is executed through surface.open, so the runtime gives immediate feedback without host-local action glue.", "variant": "emphasis" } } } }, "emitLocal": false, "showLoading": true, "placement": "actions" } ], "ui": { "showSearch": false, "showSort": true, "sortOptions": [ { "label": "ID", "value": "id,asc" }, { "label": "Role", "value": "papel,asc" } ], "showRange": true }, "a11y": { "ariaLabel": "Remote mission participants list" } } }, "outputs": { "itemClick": "emit", "actionClick": "emit", "selectionChange": "emit" } } } ] } } }, { "id": "remote-mission-participant-list-live", "title": "Missions - live remote participant list", "summary": "Loads mission participants through Praxis List using only dataSource.resourcePath, proving the live quickstart filter path without a visual smoke fixture.", "i18n": { "pt": { "title": "Missões - lista remota live de participantes", "summary": "Carrega participantes de missão somente via resourcePath remoto, sem fixture local, para provar a integração viva com o quickstart.", "demonstrates": [ "Explore Missões - lista remota live de participantes e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-list materializa operations/missao-participantes com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Carrega participantes de missão somente via resourcePath remoto, sem fixture local, para provar a integração viva com o quickstart.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-list.dataSource.resourcePath, GenericCrudService.filter.", "Verifique a conexão com as evidências canônicas filter&operation=post&schemaType=request e filter." ] } }, "publicRoute": "/examples/dynamic-page/remote-mission-participant-list-live", "publicUrl": "https://praxisui.dev/examples/dynamic-page/remote-mission-participant-list-live", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-list", "resourcePath": "operations/missao-participantes", "resourceKey": "operations.missao-participantes", "requires": [ "praxis-list.config", "dataSource.resourcePath", "filter", "remote-data", "list.selection", "list.actions", "hateoas.links" ], "tags": [ "list", "remote-data", "missions", "participants", "resourcePath", "quickstart", "ai-recipe", "live-api" ], "demonstrates": [ "Praxis List delegates loading to GenericCrudService through dataSource.resourcePath", "No dataSource.data fixture is present, so remote filter behavior is the evidence under test", "Template slots map relational DTO fields: funcionario, missao, papel and resultado", "Selection and item actions are emitted from backend-returned resource items", "HATEOAS links from the quickstart response drive surfaces and capabilities follow-up" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-list.dataSource.resourcePath", "GenericCrudService.filter", "praxis-list.remote-pagination", "praxis-list.templating", "praxis-list.selectionChange", "praxis-list.actionClick", "quickstart-hateoas-links" ], "backendSurfaces": [ "GET /schemas/filtered?path=/api/operations/missao-participantes/filter&operation=post&schemaType=request", "POST /api/operations/missao-participantes/filter", "GET /api/operations/missao-participantes/capabilities", "GET /api/operations/missao-participantes/{id}/surfaces", "GET /api/operations/missao-participantes/{id}/capabilities" ], "complexity": "intermediate", "catalogRole": "runtime-widget", "learningStage": "base-components", "variantFamilyId": "mission-participant-lists", "validation": { "level": "http-smoke", "checks": [ "json-envelope", "remote-resourcePath-only", "praxis-list-rendered", "quickstart-filter-invoked", "mission-participants-loaded-from-backend" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [ "missao-participantes-filter-basic" ], "notes": [ "This variant intentionally omits dataSource.data so dataSource.resourcePath is the only source of rows.", "Use this example when the goal is proving the live quickstart integration rather than deterministic visual QA.", "If the public quickstart returns no rows or is unavailable, use the smoke fixture variant for visual regression checks." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.remote-list.json", "praxis-ui-angular/examples/ai-recipes/praxis-list.json", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/operations/controller/MissaoParticipanteController.java" ], "sourcePath": "docs/examples/dynamic-page/examples/remote-mission-participant-list-live.json", "documentation": { "story": { "pt": "Missões - lista remota live de participantes parte de uma necessidade operacional concreta: Carrega participantes de missão somente via resourcePath remoto, sem fixture local, para provar a integração viva com o quickstart.", "en": "Missions - live remote participant list starts from a concrete operational need: Loads mission participants through Praxis List using only dataSource.resourcePath, proving the live quickstart filter path without a visual smoke fixture." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-list transforma o contrato de operations/missao-participantes em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-list turns the operations/missao-participantes contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-list", "jsonPath": "page.widgets[].definition", "role": { "pt": "Apresenta coleções escaneáveis, estados e ações por item.", "en": "Presents scannable collections, states and per-item actions." }, "rationale": { "pt": "É mais adequado que uma tabela quando a leitura de contexto por item importa mais que a comparação por colunas.", "en": "It is better than a table when item context matters more than column-by-column comparison." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-list ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-list to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." } } ], "experiments": [ { "pt": "Altere o template de item ou a ação principal e avalie como muda a prioridade da leitura.", "en": "Change the item template or primary action and assess how reading priority changes." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.remote-list.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.remote-list.json." } ] }, "envelope": { "id": "remote-mission-participant-list-live", "title": "Missions - live remote participant list", "summary": "Loads mission participants through Praxis List using only dataSource.resourcePath, proving the live quickstart filter path without a visual smoke fixture.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-list", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/list" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missao-participantes", "resourceKey": "operations.missao-participantes" }, "requires": [ "praxis-list.config", "dataSource.resourcePath", "filter", "remote-data", "list.selection", "list.actions", "hateoas.links" ], "tags": [ "list", "remote-data", "missions", "participants", "resourcePath", "quickstart", "ai-recipe", "live-api" ], "demonstrates": [ "Praxis List delegates loading to GenericCrudService through dataSource.resourcePath", "No dataSource.data fixture is present, so remote filter behavior is the evidence under test", "Template slots map relational DTO fields: funcionario, missao, papel and resultado", "Selection and item actions are emitted from backend-returned resource items", "HATEOAS links from the quickstart response drive surfaces and capabilities follow-up" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-list.dataSource.resourcePath", "GenericCrudService.filter", "praxis-list.remote-pagination", "praxis-list.templating", "praxis-list.selectionChange", "praxis-list.actionClick", "quickstart-hateoas-links" ], "backendSurfaces": [ "GET /schemas/filtered?path=/api/operations/missao-participantes/filter&operation=post&schemaType=request", "POST /api/operations/missao-participantes/filter", "GET /api/operations/missao-participantes/capabilities", "GET /api/operations/missao-participantes/{id}/surfaces", "GET /api/operations/missao-participantes/{id}/capabilities" ], "complexity": "intermediate", "validation": { "level": "http-smoke", "checks": [ "json-envelope", "remote-resourcePath-only", "praxis-list-rendered", "quickstart-filter-invoked", "mission-participants-loaded-from-backend" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [ "missao-participantes-filter-basic" ], "notes": [ "This variant intentionally omits dataSource.data so dataSource.resourcePath is the only source of rows.", "Use this example when the goal is proving the live quickstart integration rather than deterministic visual QA.", "If the public quickstart returns no rows or is unavailable, use the smoke fixture variant for visual regression checks." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.remote-list.json", "praxis-ui-angular/examples/ai-recipes/praxis-list.json", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/operations/controller/MissaoParticipanteController.java" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "remoteMissionParticipantList", "shell": { "kind": "dashboard-card", "icon": "groups", "title": "Mission participants", "subtitle": "Live remote quickstart resourcePath with pageable filter data", "actions": [ { "id": "toggle-list-customization", "label": "Customizar lista", "tooltip": "Habilitar ou desabilitar modo de customização da lista", "icon": "toggle_off", "pressedIcon": "toggle_on", "variant": "icon", "placement": "header", "command": "pdx:toggle-input", "pressed": "${widget.inputs.enableCustomization}", "payload": { "input": "enableCustomization" } } ] }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "componentInstanceId", "enableCustomization", "config" ], "inputs": { "listId": "remote-mission-participant-list-live", "componentInstanceId": "dynamic-page-live-remote", "enableCustomization": false, "config": { "id": "remote-mission-participant-list-live-config", "dataSource": { "resourcePath": "operations/missao-participantes", "query": {}, "sort": [ "ordem,asc" ] }, "layout": { "variant": "list", "density": "comfortable", "lines": 3, "dividers": "between", "pageSize": 8, "rowLayout": { "type": "grid", "columns": [ { "slot": "leading", "width": "44px", "align": "center" }, { "slot": "primary", "width": "minmax(180px, 1fr)" }, { "slot": "secondary", "width": "minmax(220px, 1.2fr)" }, { "slot": "meta", "width": "140px", "align": "center" }, { "slot": "trailing", "width": "120px", "align": "center" }, { "slot": "actions", "width": "92px", "align": "end" } ], "gap": "12px", "align": "center" } }, "skin": { "type": "outline", "radius": "8px", "border": "1px solid rgba(20, 184, 166, 0.32)" }, "selection": { "mode": "multiple", "compareBy": "funcionarioId", "return": "id" }, "interaction": { "expandable": true, "expandTrigger": "icon", "expandMode": "single", "expandPlacement": "actions" }, "templating": { "leading": { "type": "icon", "expr": "groups" }, "primary": { "type": "text", "expr": "${item.funcionarioNome}" }, "secondary": { "type": "text", "expr": "${item.missaoTitulo}" }, "meta": { "type": "chip", "expr": "${item.papel}", "variant": "outlined" }, "trailing": { "type": "chip", "expr": "${item.resultado}", "variant": "filled" }, "features": [ { "type": "chip", "expr": "missao #${item.missaoId}", "variant": "outlined" }, { "type": "chip", "expr": "funcionario #${item.funcionarioId}", "variant": "outlined" } ], "featuresMode": "labels-only", "emptyState": { "type": "text", "expr": "No mission participants returned by the quickstart filter." } }, "expansion": { "sections": [ { "id": "mission-participant-detail", "title": "Mission participant detail", "type": "rich-content", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "id": "relationship-summary", "type": "propertySheet", "title": "Relationship", "columns": 2, "items": [ { "id": "participant", "label": "Participant", "valueExpr": "${item.funcionarioNome}", "icon": "person" }, { "id": "mission", "label": "Mission", "valueExpr": "${item.missaoTitulo}", "icon": "flag" }, { "id": "role", "label": "Role", "valueExpr": "${item.papel}", "icon": "military_tech", "tone": "info" }, { "id": "result", "label": "Result", "valueExpr": "${item.resultado}", "icon": "verified", "tone": "success" } ] }, { "id": "hateoas-actions", "type": "actionCard", "title": "Governed API context", "subtitle": "HATEOAS links are available for this item without exposing raw JSON in the UI.", "message": "Use the list actions to inspect surfaces or capabilities from the same canonical resource.", "icon": "hub", "ctaLabel": "Inspect capabilities", "ctaIcon": "bolt", "variant": "stroked", "color": "primary", "action": { "actionId": "missionParticipant.inspectCapabilities", "payloadExpr": "${item._links.capabilities.href}" } } ] } } ], "rendering": { "shell": "attached", "columns": 1, "gap": "12px", "padding": "12px" } }, "actions": [ { "id": "open-participant-surfaces", "icon": "layers", "label": "Surfaces", "kind": "icon", "globalAction": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Participant surfaces", "icon": "layers", "subtitle": "Governed follow-up surfaces for the selected participant", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Published surfaces for ${item.funcionarioNome}", "content": "The selected participant belongs to ${item.missaoTitulo}. Surface actions should open governed runtime projections instead of leaving row buttons as inert local events. Capability link: ${item._links.capabilities.href}", "variant": "emphasis" } } } }, "emitLocal": false, "showLoading": true, "placement": "actions" }, { "id": "inspect-participant-capabilities", "icon": "bolt", "label": "Capabilities", "kind": "icon", "globalAction": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Participant capabilities", "icon": "bolt", "subtitle": "Canonical capabilities entrypoint for the selected participant", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Capabilities for ${item.funcionarioNome}", "content": "Use the canonical HATEOAS capabilities link to inspect the operations available for this participant: ${item._links.capabilities.href}. The list action is executed through surface.open, so the runtime gives immediate feedback without host-local action glue.", "variant": "emphasis" } } } }, "emitLocal": false, "showLoading": true, "placement": "actions" } ], "ui": { "showSearch": false, "showSort": true, "sortOptions": [ { "label": "ID", "value": "id,asc" }, { "label": "Role", "value": "papel,asc" } ], "showRange": true }, "a11y": { "ariaLabel": "Live remote mission participants list" } } }, "outputs": { "itemClick": "emit", "actionClick": "emit", "selectionChange": "emit" } } } ] } } }, { "id": "funcionario-profile-form", "title": "Funcionario - profile form", "summary": "Materializes a readonly employee profile from resource metadata, combining sections, remote options and field controls from the same governed source.", "i18n": { "pt": { "title": "Funcionário - formulário de perfil", "summary": "Materializa um perfil readonly de funcionário a partir de metadata, combinando seções, opções remotas e controles governados.", "demonstrates": [ "Explore Funcionário - formulário de perfil e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-form materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Materializa um perfil readonly de funcionário a partir de metadata, combinando seções, opções remotas e controles governados.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered?schemaType=response e {id}." ] } }, "publicRoute": "/examples/dynamic-page/funcionario-profile-form", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionario-profile-form", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-form", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "resource-detail", "options", "capabilities", "dynamic-form.sections", "dynamic-fields.catalog", "remote-data" ], "tags": [ "form", "profile", "sections", "dynamic-fields", "remote-options", "readonly", "quickstart" ], "demonstrates": [ "Readonly profile surface hydrated from a seeded demo resourceId on the published funcionarios resource", "View mode keeps the detail contract read-oriented; create flows omit resourceId and use request metadata", "Sectioned layout with asymmetric rows and columns", "Avatar, CPF, email, phone, date, currency, select and toggle fields in one form", "Remote option metadata for cargo and departamento fields", "Action bar placement for profile-level workflow affordances" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "resource-detail", "dynamic-form.sections", "dynamic-fields.catalog", "remote-options", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=response", "GET /api/human-resources/funcionarios/{id}", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter", "GET /api/human-resources/funcionarios/{id}/capabilities" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "base-components", "variantFamilyId": "employee-form-workflows", "featuredRank": 2, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "sectioned-layout-rendered", "field-control-overrides-rendered", "quickstart-detail-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-get-by-id", "cargos-options-filter", "departamentos-options-filter" ], "pendingHttpIds": [], "notes": [ "The example uses package-owned Dynamic Fields control types already present in the runtime/editorial catalog.", "Field overrides are presentational and do not redefine backend resource semantics.", "resourceId: 1 is a demo seed for documentation; production hosts should bind resourceId from route, table selection, or workflow state." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.profile-form.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionario-profile-form.json", "documentation": { "story": { "pt": "Uma pessoa gestora precisa revisar o perfil completo de um funcionário, incluindo campos cujas opções e apresentação dependem de metadata. O exemplo evita transformar essa leitura em um formulário estático mantido à parte.", "en": "A manager needs to review a complete employee profile, including fields whose options and presentation depend on metadata. The example avoids turning that view into a separately maintained static form." }, "outcome": { "pt": "Seções, controles e valores remotos aparecem como uma visão readonly coerente com o contrato do recurso e com as responsabilidades do host.", "en": "Sections, controls and remote values appear as a readonly view aligned with the resource contract and host responsibilities." }, "componentRoles": [ { "component": "praxis-dynamic-form", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa campos, seções, validações e ações a partir de configuração explícita.", "en": "Materializes fields, sections, validation and actions from explicit configuration." }, "rationale": { "pt": "Mantém a experiência de coleta alinhada ao contrato sem criar um formulário Angular exclusivo para o cenário.", "en": "Keeps data collection aligned with the contract without creating a scenario-specific Angular form." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.sections", "title": { "pt": "Estrutura semântica", "en": "Semantic structure" }, "explanation": { "pt": "Agrupa campos pela tarefa do usuário, não apenas pela ordem física do DTO.", "en": "Groups fields by the user task rather than only by DTO order." } }, { "jsonPath": "definition.inputs.config.fields", "title": { "pt": "Campos e controles", "en": "Fields and controls" }, "explanation": { "pt": "Materializa controles, opções e apresentação a partir da configuração e da metadata disponível.", "en": "Materializes controls, options and presentation from configuration and available metadata." } }, { "jsonPath": "definition.inputs.config.validators", "title": { "pt": "Validação da experiência", "en": "Experience validation" }, "explanation": { "pt": "Explicita restrições de entrada sem promover o frontend a fonte primária da regra de negócio.", "en": "Exposes input constraints without promoting the frontend to the primary business-rule source." } } ], "experiments": [ { "pt": "Mude um campo obrigatório ou uma condição de visibilidade e compare a validação com o JSON editado.", "en": "Change a required field or visibility condition and compare validation with the edited JSON." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.profile-form.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.profile-form.json." } ] }, "envelope": { "id": "funcionario-profile-form", "title": "Funcionario - profile form", "summary": "Materializes a readonly employee profile from resource metadata, combining sections, remote options and field controls from the same governed source.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-dynamic-form", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "resource-detail", "options", "capabilities", "dynamic-form.sections", "dynamic-fields.catalog", "remote-data" ], "tags": [ "form", "profile", "sections", "dynamic-fields", "remote-options", "readonly", "quickstart" ], "demonstrates": [ "Readonly profile surface hydrated from a seeded demo resourceId on the published funcionarios resource", "View mode keeps the detail contract read-oriented; create flows omit resourceId and use request metadata", "Sectioned layout with asymmetric rows and columns", "Avatar, CPF, email, phone, date, currency, select and toggle fields in one form", "Remote option metadata for cargo and departamento fields", "Action bar placement for profile-level workflow affordances" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "resource-detail", "dynamic-form.sections", "dynamic-fields.catalog", "remote-options", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=response", "GET /api/human-resources/funcionarios/{id}", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter", "GET /api/human-resources/funcionarios/{id}/capabilities" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "sectioned-layout-rendered", "field-control-overrides-rendered", "quickstart-detail-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-get-by-id", "cargos-options-filter", "departamentos-options-filter" ], "pendingHttpIds": [], "notes": [ "The example uses package-owned Dynamic Fields control types already present in the runtime/editorial catalog.", "Field overrides are presentational and do not redefine backend resource semantics.", "resourceId: 1 is a demo seed for documentation; production hosts should bind resourceId from route, table selection, or workflow state." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.profile-form.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionarioProfileForm", "shell": { "kind": "dashboard-card", "icon": "badge", "title": "Funcionario profile", "subtitle": "Sectioned readonly form with field-specific controls" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "config", "resourcePath", "formId", "resourceId" ], "inputs": { "formId": "human-resources-funcionarios-profile", "resourcePath": "human-resources/funcionarios", "resourceId": 1, "mode": "view", "config": { "metadata": { "name": "Funcionario profile surface", "version": "1.0.0" }, "sections": [ { "id": "identity", "title": "Identity", "description": "Core employee identity and contact data.", "appearance": "outlined", "rows": [ { "id": "identity-row-main", "columns": [ { "id": "identity-avatar", "span": { "md": 3, "lg": 3 }, "fields": [ "fotoPerfilUrl", "ativo" ] }, { "id": "identity-primary", "span": { "md": 9, "lg": 9 }, "fields": [ "nomeCompleto", "cpf", "email", "telefone" ] } ] } ] }, { "id": "assignment", "title": "Assignment", "description": "Role, department and compensation metadata.", "appearance": "outlined", "rows": [ { "id": "assignment-row-1", "columns": [ { "id": "assignment-role", "span": { "md": 6, "lg": 6 }, "fields": [ "cargoId", "departamentoId" ] }, { "id": "assignment-payroll", "span": { "md": 6, "lg": 6 }, "fields": [ "salario", "dataAdmissao" ] } ] } ] }, { "id": "personal", "title": "Personal", "description": "Civil status and birth metadata kept readonly in this surface.", "appearance": "outlined", "rows": [ { "id": "personal-row-1", "columns": [ { "id": "personal-main", "fields": [ "estadoCivil", "dataNascimento" ] } ] } ] } ], "fieldMetadata": [ { "name": "fotoPerfilUrl", "label": "Avatar", "controlType": "avatar", "imageField": "fotoPerfilUrl", "readonly": true }, { "name": "nomeCompleto", "label": "Nome Completo", "controlType": "input", "validators": { "required": true, "maxLength": 160 }, "readonly": true }, { "name": "cpf", "label": "CPF", "controlType": "cpfCnpjInput", "maskType": "cpf", "unmaskOnSubmit": true, "readonly": true }, { "name": "email", "label": "Email", "controlType": "email", "validators": { "email": true }, "readonly": true }, { "name": "telefone", "label": "Telefone", "controlType": "phone", "maskType": "phone", "readonly": true }, { "name": "cargoId", "label": "Cargo", "controlType": "asyncSelect", "endpoint": "/api/human-resources/cargos/options/filter", "displayField": "label", "valueField": "id", "readonly": true }, { "name": "departamentoId", "label": "Departamento", "controlType": "asyncSelect", "endpoint": "/api/human-resources/departamentos/options/filter", "displayField": "label", "valueField": "id", "readonly": true }, { "name": "salario", "label": "Salario", "controlType": "currency", "currencyCode": "BRL", "locale": "pt-BR", "readonly": true }, { "name": "dataAdmissao", "label": "Data de Admissao", "controlType": "date", "readonly": true }, { "name": "estadoCivil", "label": "Estado Civil", "controlType": "select", "options": [ { "label": "Solteiro", "value": "SOLTEIRO" }, { "label": "Casado", "value": "CASADO" }, { "label": "Divorciado", "value": "DIVORCIADO" }, { "label": "Viuvo", "value": "VIUVO" } ], "readonly": true }, { "name": "dataNascimento", "label": "Data de Nascimento", "controlType": "date", "readonly": true }, { "name": "ativo", "label": "Ativo", "controlType": "toggle", "readonly": true } ], "actions": { "submit": { "id": "request-update", "label": "Request update", "visible": false, "type": "submit" }, "cancel": { "id": "close-profile", "label": "Close", "visible": true, "type": "button" }, "reset": { "id": "reset-profile", "label": "Reset", "visible": false, "type": "reset" }, "position": "right", "placement": "afterSections", "spacing": "compact" } } } } } ] } } }, { "id": "funcionario-lifecycle-form", "title": "Funcionario - lifecycle form", "summary": "Models lifecycle decisions, assignment changes and deactivation rules as runtime form behavior over the funcionarios contract.", "i18n": { "pt": { "title": "Funcionário - formulário de ciclo de vida", "summary": "Modela decisões de ciclo de vida, mudança de lotação e desativação como comportamento de formulário em runtime.", "demonstrates": [ "Explore Funcionário - formulário de ciclo de vida e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-form materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Modela decisões de ciclo de vida, mudança de lotação e desativação como comportamento de formulário em runtime.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered?schemaType=response e {id}." ] } }, "publicRoute": "/examples/dynamic-page/funcionario-lifecycle-form", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionario-lifecycle-form", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-form", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "resource-detail", "options", "capabilities", "dynamic-form.rules", "dynamic-form.validation", "dynamic-form.actions", "remote-data" ], "tags": [ "form", "rules", "validation", "lifecycle", "conditional-display", "conditional-required", "remote-options", "quickstart" ], "demonstrates": [ "Edit form hydrated from a real funcionario while host workflow fields guide lifecycle decisions", "conditionalDisplay and conditionalRequired rules for deactivation and reassignment paths", "Reactive validation configuration and field-level validators", "Remote async selects for cargo and departamento assignment changes", "Custom form actions for previewing policy and submitting lifecycle requests" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "resource-detail", "dynamic-form.rules", "dynamic-form.validation", "dynamic-form.actions", "remote-options", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=response", "GET /api/human-resources/funcionarios/{id}", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter", "GET /api/human-resources/funcionarios/{id}/capabilities" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "base-components", "variantFamilyId": "employee-form-workflows", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "conditional-fields-rendered", "reactive-validation-configured", "quickstart-detail-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-get-by-id", "cargos-options-filter", "departamentos-options-filter" ], "pendingHttpIds": [], "notes": [ "Workflow-only fields are host-authored UI state; persisted funcionario fields still come from the published resource contract.", "The example uses existing Dynamic Form rule properties and package-owned Dynamic Fields controls." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.lifecycle-form.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionario-lifecycle-form.json", "documentation": { "story": { "pt": "Funcionário - formulário de ciclo de vida parte de uma necessidade operacional concreta: Modela decisões de ciclo de vida, mudança de lotação e desativação como comportamento de formulário em runtime.", "en": "Funcionario - lifecycle form starts from a concrete operational need: Models lifecycle decisions, assignment changes and deactivation rules as runtime form behavior over the funcionarios contract." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-dynamic-form transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-dynamic-form turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-dynamic-form", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa campos, seções, validações e ações a partir de configuração explícita.", "en": "Materializes fields, sections, validation and actions from explicit configuration." }, "rationale": { "pt": "Mantém a experiência de coleta alinhada ao contrato sem criar um formulário Angular exclusivo para o cenário.", "en": "Keeps data collection aligned with the contract without creating a scenario-specific Angular form." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.sections", "title": { "pt": "Estrutura semântica", "en": "Semantic structure" }, "explanation": { "pt": "Agrupa campos pela tarefa do usuário, não apenas pela ordem física do DTO.", "en": "Groups fields by the user task rather than only by DTO order." } }, { "jsonPath": "definition.inputs.config.fields", "title": { "pt": "Campos e controles", "en": "Fields and controls" }, "explanation": { "pt": "Materializa controles, opções e apresentação a partir da configuração e da metadata disponível.", "en": "Materializes controls, options and presentation from configuration and available metadata." } }, { "jsonPath": "definition.inputs.config.validators", "title": { "pt": "Validação da experiência", "en": "Experience validation" }, "explanation": { "pt": "Explicita restrições de entrada sem promover o frontend a fonte primária da regra de negócio.", "en": "Exposes input constraints without promoting the frontend to the primary business-rule source." } } ], "experiments": [ { "pt": "Mude um campo obrigatório ou uma condição de visibilidade e compare a validação com o JSON editado.", "en": "Change a required field or visibility condition and compare validation with the edited JSON." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.lifecycle-form.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.lifecycle-form.json." } ] }, "envelope": { "id": "funcionario-lifecycle-form", "title": "Funcionario - lifecycle form", "summary": "Models lifecycle decisions, assignment changes and deactivation rules as runtime form behavior over the funcionarios contract.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-dynamic-form", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "resource-detail", "options", "capabilities", "dynamic-form.rules", "dynamic-form.validation", "dynamic-form.actions", "remote-data" ], "tags": [ "form", "rules", "validation", "lifecycle", "conditional-display", "conditional-required", "remote-options", "quickstart" ], "demonstrates": [ "Edit form hydrated from a real funcionario while host workflow fields guide lifecycle decisions", "conditionalDisplay and conditionalRequired rules for deactivation and reassignment paths", "Reactive validation configuration and field-level validators", "Remote async selects for cargo and departamento assignment changes", "Custom form actions for previewing policy and submitting lifecycle requests" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "resource-detail", "dynamic-form.rules", "dynamic-form.validation", "dynamic-form.actions", "remote-options", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=response", "GET /api/human-resources/funcionarios/{id}", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter", "GET /api/human-resources/funcionarios/{id}/capabilities" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "conditional-fields-rendered", "reactive-validation-configured", "quickstart-detail-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-get-by-id", "cargos-options-filter", "departamentos-options-filter" ], "pendingHttpIds": [], "notes": [ "Workflow-only fields are host-authored UI state; persisted funcionario fields still come from the published resource contract.", "The example uses existing Dynamic Form rule properties and package-owned Dynamic Fields controls." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.lifecycle-form.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionarioLifecycleForm", "shell": { "kind": "dashboard-card", "icon": "rule", "title": "Funcionario lifecycle", "subtitle": "Rules, validations and workflow-only fields" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "config", "resourcePath", "formId", "resourceId", "initialValue" ], "inputs": { "formId": "human-resources-funcionarios-lifecycle", "resourcePath": "human-resources/funcionarios", "resourceId": 1, "mode": "edit", "reactiveValidation": true, "reactiveValidationDebounceMs": 200, "initialValue": { "lifecycleAction": "UPDATE_ASSIGNMENT", "keepPayrollActive": true }, "config": { "metadata": { "name": "Funcionario lifecycle workflow", "version": "1.0.0" }, "behavior": { "reactiveValidation": true, "reactiveValidationDebounceMs": 200 }, "sections": [ { "id": "current-state", "title": "Current state", "description": "Read the current employee data before choosing a lifecycle path.", "appearance": "outlined", "rows": [ { "id": "current-state-row", "columns": [ { "id": "current-identity", "span": { "md": 6, "lg": 6 }, "fields": [ "nomeCompleto", "email", "ativo" ] }, { "id": "current-assignment", "span": { "md": 6, "lg": 6 }, "fields": [ "cargoId", "departamentoId", "salario" ] } ] } ] }, { "id": "workflow-decision", "title": "Lifecycle decision", "description": "Host-owned workflow fields drive conditional display and validation.", "appearance": "outlined", "rows": [ { "id": "decision-row-1", "columns": [ { "id": "decision-main", "span": { "md": 6, "lg": 6 }, "fields": [ "lifecycleAction", "effectiveDate" ] }, { "id": "decision-flags", "span": { "md": 6, "lg": 6 }, "fields": [ "keepPayrollActive", "requiresManagerApproval" ] } ] } ] }, { "id": "assignment-change", "title": "Assignment change", "description": "Only required when the selected lifecycle path changes assignment.", "appearance": "outlined", "rows": [ { "id": "assignment-change-row", "columns": [ { "id": "assignment-change-main", "span": { "md": 6, "lg": 6 }, "fields": [ "newCargoId", "newDepartamentoId" ] }, { "id": "assignment-change-payroll", "span": { "md": 6, "lg": 6 }, "fields": [ "newSalary", "assignmentReason" ] } ] } ] }, { "id": "deactivation", "title": "Deactivation", "description": "Visible only for deactivation requests.", "appearance": "outlined", "rows": [ { "id": "deactivation-row", "columns": [ { "id": "deactivation-main", "fields": [ "deactivationReason", "deactivationNotes" ] } ] } ] } ], "fieldMetadata": [ { "name": "nomeCompleto", "label": "Nome Completo", "controlType": "input", "readonly": true, "validators": { "required": true, "maxLength": 160 } }, { "name": "email", "label": "Email", "controlType": "email", "readonly": true, "validators": { "email": true } }, { "name": "ativo", "label": "Ativo", "controlType": "toggle", "readonly": true }, { "name": "cargoId", "label": "Cargo atual", "controlType": "asyncSelect", "endpoint": "/api/human-resources/cargos/options/filter", "displayField": "label", "valueField": "id", "readonly": true }, { "name": "departamentoId", "label": "Departamento atual", "controlType": "asyncSelect", "endpoint": "/api/human-resources/departamentos/options/filter", "displayField": "label", "valueField": "id", "readonly": true }, { "name": "salario", "label": "Salario atual", "controlType": "currency", "currencyCode": "BRL", "locale": "pt-BR", "readonly": true }, { "name": "lifecycleAction", "label": "Lifecycle action", "controlType": "select", "validators": { "required": true }, "options": [ { "label": "Update assignment", "value": "UPDATE_ASSIGNMENT" }, { "label": "Promote", "value": "PROMOTE" }, { "label": "Deactivate", "value": "DEACTIVATE" } ] }, { "name": "effectiveDate", "label": "Effective date", "controlType": "date", "validators": { "required": true } }, { "name": "keepPayrollActive", "label": "Keep payroll active", "controlType": "toggle", "conditionalDisplay": { "!==": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] } }, { "name": "requiresManagerApproval", "label": "Requires manager approval", "controlType": "checkbox", "conditionalDisplay": { "or": [ { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] }, { "===": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] } ] }, "conditionalRequired": { "or": [ { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] }, { "===": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] } ] } }, { "name": "newCargoId", "label": "New cargo", "controlType": "asyncSelect", "endpoint": "/api/human-resources/cargos/options/filter", "displayField": "label", "valueField": "id", "conditionalDisplay": { "or": [ { "===": [ { "var": "lifecycleAction" }, "UPDATE_ASSIGNMENT" ] }, { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] } ] }, "conditionalRequired": { "or": [ { "===": [ { "var": "lifecycleAction" }, "UPDATE_ASSIGNMENT" ] }, { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] } ] } }, { "name": "newDepartamentoId", "label": "New departamento", "controlType": "asyncSelect", "endpoint": "/api/human-resources/departamentos/options/filter", "displayField": "label", "valueField": "id", "conditionalDisplay": { "or": [ { "===": [ { "var": "lifecycleAction" }, "UPDATE_ASSIGNMENT" ] }, { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] } ] }, "conditionalRequired": { "===": [ { "var": "lifecycleAction" }, "UPDATE_ASSIGNMENT" ] } }, { "name": "newSalary", "label": "New salary", "controlType": "currency", "currencyCode": "BRL", "locale": "pt-BR", "validators": { "min": 0 }, "conditionalDisplay": { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] }, "conditionalRequired": { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] } }, { "name": "assignmentReason", "label": "Assignment reason", "controlType": "textarea", "rows": 3, "validators": { "minLength": 12, "maxLength": 500 }, "conditionalDisplay": { "or": [ { "===": [ { "var": "lifecycleAction" }, "UPDATE_ASSIGNMENT" ] }, { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] } ] }, "conditionalRequired": { "or": [ { "===": [ { "var": "lifecycleAction" }, "UPDATE_ASSIGNMENT" ] }, { "===": [ { "var": "lifecycleAction" }, "PROMOTE" ] } ] } }, { "name": "deactivationReason", "label": "Deactivation reason", "controlType": "select", "options": [ { "label": "Contract ended", "value": "CONTRACT_ENDED" }, { "label": "Transferred", "value": "TRANSFERRED" }, { "label": "Security hold", "value": "SECURITY_HOLD" } ], "conditionalDisplay": { "===": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] }, "conditionalRequired": { "===": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] } }, { "name": "deactivationNotes", "label": "Deactivation notes", "controlType": "textarea", "rows": 4, "validators": { "minLength": 20, "maxLength": 800 }, "conditionalDisplay": { "===": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] }, "conditionalRequired": { "===": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] } } ], "formRules": [ { "id": "deactivation-hides-assignment-change", "name": "Deactivation hides assignment change section", "targetType": "section", "targetId": "assignment-change", "condition": { "===": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] }, "effect": { "propertiesWhenTrue": { "visible": false }, "propertiesWhenFalse": { "visible": true } } }, { "id": "assignment-path-hides-deactivation-section", "name": "Assignment paths hide deactivation section", "targetType": "section", "targetId": "deactivation", "condition": { "===": [ { "var": "lifecycleAction" }, "DEACTIVATE" ] }, "effect": { "propertiesWhenTrue": { "visible": true }, "propertiesWhenFalse": { "visible": false } } } ], "actions": { "submit": { "id": "submit-lifecycle-request", "label": "Submit request", "icon": "send", "color": "primary", "visible": true, "type": "submit" }, "cancel": { "id": "cancel-lifecycle", "label": "Cancel", "icon": "close", "visible": true, "type": "button" }, "reset": { "id": "reset-lifecycle", "label": "Reset workflow", "visible": true, "type": "reset" }, "custom": [ { "id": "preview-policy", "label": "Preview policy", "icon": "policy", "visible": true, "action": "previewPolicy" } ], "position": "right", "placement": "afterSections", "spacing": "normal" } } } } } ] } } }, { "id": "dynamic-fields-control-catalog", "title": "Dynamic Fields - control catalog", "summary": "Publishes the Dynamic Fields catalog as a live reference that authors and agents can reuse when choosing controls for governed forms.", "i18n": { "pt": { "title": "Dynamic Fields - catálogo de controles", "summary": "Publica o catálogo de Dynamic Fields como referência viva para autores e agentes escolherem controles governados.", "demonstrates": [ "Explore Dynamic Fields - catálogo de controles e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-fields materializa dynamic-fields/catalog com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Publica o catálogo de Dynamic Fields como referência viva para autores e agentes escolherem controles governados.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, dynamic-form.sections, dynamic-form.fieldMetadata.", "Verifique a conexão com as evidências canônicas filter e by-ids." ] } }, "publicRoute": "/examples/dynamic-page/dynamic-fields-control-catalog", "publicUrl": "https://praxisui.dev/examples/dynamic-page/dynamic-fields-control-catalog", "category": "feature", "mode": "authored-customizable", "primaryComponent": "praxis-dynamic-fields", "resourcePath": "dynamic-fields/catalog", "resourceKey": "dynamic-fields.catalog", "requires": [ "dynamic-form.sections", "dynamic-form.fieldMetadata", "dynamic-fields.catalog", "dynamic-fields.editorial-metadata", "local-transient-state" ], "tags": [ "dynamic-fields", "field-catalog", "form", "controls", "local-transient", "ai-recipe" ], "demonstrates": [ "Package-owned field controls grouped by text, number, date, selection and visual families", "Field-specific metadata for masks, validators, options, ranges, uploads and avatars", "Local transient form state for experimenting without mutating backend resources", "Copyable control recipes for agents that need exact controlType names", "Runtime/editorial coverage stated separately from backend resource semantics" ], "platformFeatures": [ "dynamic-widget-resolution", "dynamic-form.sections", "dynamic-form.fieldMetadata", "dynamic-fields.catalog", "dynamic-fields.editorial-metadata", "local-transient-state" ], "backendSurfaces": [ "POST /api/human-resources/cargos/options/filter", "GET /api/human-resources/cargos/options/by-ids", "praxis-ui-angular/projects/praxis-dynamic-fields/src/lib/catalog/dynamic-fields-playground.catalog.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.fields.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.form-config.json" ], "complexity": "advanced", "catalogRole": "capability-lab", "learningStage": "base-components", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "field-control-families-rendered", "package-owned-control-types-only" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios" ], "pendingHttpIds": [], "notes": [ "This example keeps form state local and transient while the cargo lookup uses the governed read-only filter and by-ids option-source contract.", "All controlType values are package-owned Dynamic Fields controls already represented in the catalog and AI recipes." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.dynamic-fields-catalog.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.fields.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.form-config.json" ], "sourcePath": "docs/examples/dynamic-page/examples/dynamic-fields-control-catalog.json", "documentation": { "story": { "pt": "Dynamic Fields - catálogo de controles parte de uma necessidade operacional concreta: Publica o catálogo de Dynamic Fields como referência viva para autores e agentes escolherem controles governados.", "en": "Dynamic Fields - control catalog starts from a concrete operational need: Publishes the Dynamic Fields catalog as a live reference that authors and agents can reuse when choosing controls for governed forms." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-dynamic-fields transforma o contrato de dynamic-fields/catalog em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-dynamic-fields turns the dynamic-fields/catalog contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-dynamic-fields", "jsonPath": "page.widgets[].definition", "role": { "pt": "Resolve controles a partir da semântica publicada para cada campo.", "en": "Resolves controls from the semantics published for each field." }, "rationale": { "pt": "Evita decisões locais repetidas sobre o controle adequado para cada tipo e contexto.", "en": "Avoids repeated local decisions about the right control for each type and context." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-dynamic-fields ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-dynamic-fields to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." } } ], "experiments": [ { "pt": "Compare dois perfis de campo e identifique quais metadados mudam o controle materializado.", "en": "Compare two field profiles and identify which metadata changes the materialized control." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.dynamic-fields-catalog.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.dynamic-fields-catalog.json." } ] }, "envelope": { "id": "dynamic-fields-control-catalog", "title": "Dynamic Fields - control catalog", "summary": "Publishes the Dynamic Fields catalog as a live reference that authors and agents can reuse when choosing controls for governed forms.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-dynamic-fields", "runtime": { "mode": "authored-customizable", "minPraxisUiPackage": "@praxisui/dynamic-fields" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "dynamic-fields/catalog", "resourceKey": "dynamic-fields.catalog" }, "requires": [ "dynamic-form.sections", "dynamic-form.fieldMetadata", "dynamic-fields.catalog", "dynamic-fields.editorial-metadata", "local-transient-state" ], "tags": [ "dynamic-fields", "field-catalog", "form", "controls", "local-transient", "ai-recipe" ], "demonstrates": [ "Package-owned field controls grouped by text, number, date, selection and visual families", "Field-specific metadata for masks, validators, options, ranges, uploads and avatars", "Local transient form state for experimenting without mutating backend resources", "Copyable control recipes for agents that need exact controlType names", "Runtime/editorial coverage stated separately from backend resource semantics" ], "platformFeatures": [ "dynamic-widget-resolution", "dynamic-form.sections", "dynamic-form.fieldMetadata", "dynamic-fields.catalog", "dynamic-fields.editorial-metadata", "local-transient-state" ], "backendSurfaces": [ "POST /api/human-resources/cargos/options/filter", "GET /api/human-resources/cargos/options/by-ids", "praxis-ui-angular/projects/praxis-dynamic-fields/src/lib/catalog/dynamic-fields-playground.catalog.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.fields.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.form-config.json" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "field-control-families-rendered", "package-owned-control-types-only" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios" ], "pendingHttpIds": [], "notes": [ "This example keeps form state local and transient while the cargo lookup uses the governed read-only filter and by-ids option-source contract.", "All controlType values are package-owned Dynamic Fields controls already represented in the catalog and AI recipes." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.dynamic-fields-catalog.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.fields.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.form-config.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "dynamicFieldsCatalogForm", "shell": { "kind": "dashboard-card", "icon": "widgets", "title": "Dynamic Fields catalog", "subtitle": "Package-owned control recipes grouped by family" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "config", "formId", "initialValue" ], "inputs": { "formId": "dynamic-fields-control-catalog", "mode": "edit", "initialValue": { "fullName": "Ayla Hayes", "emailAddress": "ayla.hayes@blackmesa.com", "password": "Praxis-demo-2026", "profileUrl": "https://praxisplatform.dev", "phoneNumber": "+55 11 97100047", "documentNumber": "99000000047", "biography": "Operational profile used to demonstrate text, mask and validation controls.", "salaryTarget": 28500, "allocationPercent": 72, "readinessRating": 4, "admissionDate": "2022-03-05", "availabilityWindow": { "start": "2026-04-01", "end": "2026-04-30" }, "briefingTime": "09:30", "department": "RD", "cargoLookup": 2, "skills": [ "ANGULAR", "SECURITY" ], "workMode": "HYBRID", "activeAssignment": true, "tags": [ "metadata", "runtime", "agent-ready" ], "brandColor": "#1263b4", "avatarUrl": "https://api.dicebear.com/7.x/adventurer/png?seed=ayla" }, "config": { "metadata": { "name": "Dynamic Fields control catalog", "version": "1.0.0" }, "sections": [ { "id": "text-family", "title": "Text and identity", "description": "Text, credentials, contact and Brazilian document controls.", "appearance": "outlined", "rows": [ { "id": "text-row-1", "columns": [ { "id": "text-left", "span": { "md": 6, "lg": 6 }, "fields": [ "fullName", "emailAddress", "password", "profileUrl" ] }, { "id": "text-right", "span": { "md": 6, "lg": 6 }, "fields": [ "phoneNumber", "documentNumber", "biography" ] } ] } ] }, { "id": "numbers-dates", "title": "Numbers and dates", "description": "Numeric, currency, slider, rating, date range and time controls.", "appearance": "outlined", "rows": [ { "id": "numbers-row-1", "columns": [ { "id": "numbers-left", "span": { "md": 6, "lg": 6 }, "fields": [ "salaryTarget", "allocationPercent", "readinessRating" ] }, { "id": "dates-right", "span": { "md": 6, "lg": 6 }, "fields": [ "admissionDate", "availabilityWindow", "briefingTime" ] } ] } ] }, { "id": "selection-family", "title": "Selection", "description": "Select, async select, multi select, radio and toggle controls.", "appearance": "outlined", "rows": [ { "id": "selection-row-1", "columns": [ { "id": "selection-left", "span": { "md": 6, "lg": 6 }, "fields": [ "department", "cargoLookup", "skills" ] }, { "id": "selection-right", "span": { "md": 6, "lg": 6 }, "fields": [ "workMode", "activeAssignment", "acceptTerms" ] } ] } ] }, { "id": "visual-family", "title": "Visual and attachments", "description": "Chips, color, avatar and upload controls.", "appearance": "outlined", "rows": [ { "id": "visual-row-1", "columns": [ { "id": "visual-left", "span": { "md": 6, "lg": 6 }, "fields": [ "tags", "brandColor" ] }, { "id": "visual-right", "span": { "md": 6, "lg": 6 }, "fields": [ "avatarUrl", "attachments" ] } ] } ] } ], "fieldMetadata": [ { "name": "fullName", "label": "Full name", "controlType": "input", "validators": { "required": true, "maxLength": 160 } }, { "name": "emailAddress", "label": "Email", "controlType": "email", "validators": { "required": true, "email": true } }, { "name": "password", "label": "Password", "controlType": "password", "validators": { "minLength": 8 } }, { "name": "profileUrl", "label": "Profile URL", "controlType": "url", "placeholder": "https://example.com/profile" }, { "name": "phoneNumber", "label": "Phone", "controlType": "phone", "maskType": "phone" }, { "name": "documentNumber", "label": "CPF", "controlType": "cpfCnpjInput", "maskType": "cpf", "unmaskOnSubmit": true }, { "name": "biography", "label": "Biography", "controlType": "textarea", "rows": 4, "validators": { "maxLength": 500 } }, { "name": "salaryTarget", "label": "Salary target", "controlType": "currency", "currencyCode": "BRL", "locale": "pt-BR", "validators": { "min": 0 } }, { "name": "allocationPercent", "label": "Allocation", "controlType": "slider", "min": 0, "max": 100, "step": 5 }, { "name": "readinessRating", "label": "Readiness", "controlType": "rating", "max": 5 }, { "name": "admissionDate", "label": "Admission date", "controlType": "date" }, { "name": "availabilityWindow", "label": "Availability window", "controlType": "dateRange" }, { "name": "briefingTime", "label": "Briefing time", "controlType": "timePicker" }, { "name": "department", "label": "Department", "controlType": "select", "options": [ { "label": "Research", "value": "RD" }, { "label": "Operations", "value": "OPS" }, { "label": "Security", "value": "SEC" } ] }, { "name": "cargoLookup", "label": "Cargo lookup", "controlType": "asyncSelect", "endpoint": "/api/human-resources/cargos/options/filter", "displayField": "label", "valueField": "id" }, { "name": "skills", "label": "Skills", "controlType": "multiSelect", "options": [ { "label": "Angular", "value": "ANGULAR" }, { "label": "Security", "value": "SECURITY" }, { "label": "Analytics", "value": "ANALYTICS" } ] }, { "name": "workMode", "label": "Work mode", "controlType": "radio", "options": [ { "label": "Remote", "value": "REMOTE" }, { "label": "Hybrid", "value": "HYBRID" }, { "label": "Field", "value": "FIELD" } ] }, { "name": "activeAssignment", "label": "Active assignment", "controlType": "toggle" }, { "name": "acceptTerms", "label": "Accept operating terms", "controlType": "checkbox", "validators": { "requiredChecked": true } }, { "name": "tags", "label": "Tags", "controlType": "chipInput" }, { "name": "brandColor", "label": "Brand color", "controlType": "colorPicker", "format": "hex" }, { "name": "avatarUrl", "label": "Avatar", "controlType": "avatar", "imageField": "avatarUrl" }, { "name": "attachments", "label": "Attachments", "controlType": "upload", "multiple": true, "accept": ".pdf,.png,.jpg" } ], "actions": { "submit": { "id": "copy-field-catalog", "label": "Copy control recipe", "icon": "content_copy", "visible": true, "type": "submit" }, "cancel": { "id": "clear-field-catalog", "label": "Clear", "visible": true, "type": "button" }, "reset": { "id": "reset-field-catalog", "label": "Reset", "visible": true, "type": "reset" }, "position": "right", "placement": "afterSections", "spacing": "normal" } } } } } ] } } }, { "id": "operations-list-command-center", "title": "Operations - list command center", "summary": "Materializes a payroll closing queue with semantic status, formatted operational facts, structured expansion and reachable item actions expressed entirely as configuration.", "i18n": { "pt": { "title": "Operações - central de comando em lista", "summary": "Transforma Praxis List em superfície operacional com templates, agrupamento, expansão e ações declaradas por configuração.", "demonstrates": [ "Explore Operações - central de comando em lista e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-list materializa operations/list-showcase com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Transforma Praxis List em superfície operacional com templates, agrupamento, expansão e ações declaradas por configuração.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-list.dataSource.data, praxis-list.templating.", "Verifique a conexão com as evidências canônicas list-config.model.ts e praxis-list.metadata.ts." ] } }, "publicRoute": "/examples/dynamic-page/operations-list-command-center", "publicUrl": "https://praxisui.dev/examples/dynamic-page/operations-list-command-center", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-list", "resourcePath": "operations/list-showcase", "resourceKey": "operations.list-showcase", "requires": [ "praxis-list.config", "list.templating", "list.expansion", "list.actions" ], "tags": [ "list", "templating", "expansion", "actions", "ai-recipe" ], "demonstrates": [ "Coherent local payroll-closing queue grouped by operational workstream", "Semantic status, formatted currency, priority and SLA facts materialized from item fields", "Icon-owned inline expansion with structured ownership and blocker details", "Reachable per-item action with actionClick emitted to the host" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-list.dataSource.data", "praxis-list.templating", "praxis-list.actionClick", "praxis-list.expansion", "local-transient-state" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-list/src/lib/models/list-config.model.ts", "praxis-ui-angular/projects/praxis-list/src/lib/praxis-list.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-list.json" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "base-components", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-list-rendered", "list-templates-rendered", "list-events-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This is intentionally local-only: it demonstrates the component contract surface without requiring a dedicated backend resource.", "The same config shape can replace dataSource.data with dataSource.resourcePath when a resource endpoint exists." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.list.json", "praxis-ui-angular/examples/ai-recipes/praxis-list.json" ], "sourcePath": "docs/examples/dynamic-page/examples/operations-list-command-center.json", "documentation": { "story": { "pt": "Operações - central de comando em lista parte de uma necessidade operacional concreta: Transforma Praxis List em superfície operacional com templates, agrupamento, expansão e ações declaradas por configuração.", "en": "Operations - list command center starts from a concrete operational need: Materializes a payroll closing queue with semantic status, formatted operational facts, structured expansion and reachable item actions expressed entirely as configuration." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-list transforma o contrato de operations/list-showcase em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-list turns the operations/list-showcase contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-list", "jsonPath": "page.widgets[].definition", "role": { "pt": "Apresenta coleções escaneáveis, estados e ações por item.", "en": "Presents scannable collections, states and per-item actions." }, "rationale": { "pt": "É mais adequado que uma tabela quando a leitura de contexto por item importa mais que a comparação por colunas.", "en": "It is better than a table when item context matters more than column-by-column comparison." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-list ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-list to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." } } ], "experiments": [ { "pt": "Altere o template de item ou a ação principal e avalie como muda a prioridade da leitura.", "en": "Change the item template or primary action and assess how reading priority changes." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.list.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.list.json." } ] }, "envelope": { "id": "operations-list-command-center", "title": "Operations - list command center", "summary": "Materializes a payroll closing queue with semantic status, formatted operational facts, structured expansion and reachable item actions expressed entirely as configuration.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-list", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/list" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/list-showcase", "resourceKey": "operations.list-showcase" }, "requires": [ "praxis-list.config", "list.templating", "list.expansion", "list.actions" ], "tags": [ "list", "templating", "expansion", "actions", "ai-recipe" ], "demonstrates": [ "Coherent local payroll-closing queue grouped by operational workstream", "Semantic status, formatted currency, priority and SLA facts materialized from item fields", "Icon-owned inline expansion with structured ownership and blocker details", "Reachable per-item action with actionClick emitted to the host" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-list.dataSource.data", "praxis-list.templating", "praxis-list.actionClick", "praxis-list.expansion", "local-transient-state" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-list/src/lib/models/list-config.model.ts", "praxis-ui-angular/projects/praxis-list/src/lib/praxis-list.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-list.json" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-list-rendered", "list-templates-rendered", "list-events-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This is intentionally local-only: it demonstrates the component contract surface without requiring a dedicated backend resource.", "The same config shape can replace dataSource.data with dataSource.resourcePath when a resource endpoint exists." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.list.json", "praxis-ui-angular/examples/ai-recipes/praxis-list.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "operationsListCommandCenter", "shell": { "kind": "dashboard-card", "icon": "checklist", "title": "Fechamento da folha", "subtitle": "Priorize exceções, consulte evidências e abra o próximo caso — tudo materializado pelo JSON" }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "operations-list-command-center", "config": { "id": "operations-list-command-center-config", "dataSource": { "data": [ { "id": 101, "statusIcon": "warning", "title": "Conciliação da folha de abril", "subtitle": "Divergência de R$ 12.480 aguarda validação financeira", "workstream": "Fechamento da folha", "status": "Em risco", "priority": "P0", "exposure": 182500, "dueAt": "2026-04-25T16:00:00.000Z", "owner": "Marina Alves", "slaHours": 6, "blockers": [ "Aprovação da diretoria", "Variação cambial" ] }, { "id": 102, "statusIcon": "fact_check", "title": "Revisão de benefícios variáveis", "subtitle": "Comissões e bônus aguardam conferência da área de Pessoas", "workstream": "Fechamento da folha", "status": "Em validação", "priority": "P1", "exposure": 94500, "dueAt": "2026-04-26T12:00:00.000Z", "owner": "Carlos Nogueira", "slaHours": 18, "blockers": [ "Conferência de comissões" ] }, { "id": 103, "statusIcon": "block", "title": "Validação de encargos e impostos", "subtitle": "Guia previdenciária bloqueada por divergência na base tributável", "workstream": "Conformidade", "status": "Bloqueado", "priority": "P0", "exposure": 38600, "dueAt": "2026-04-25T18:00:00.000Z", "owner": "Fernanda Lima", "slaHours": 4, "blockers": [ "Base tributável divergente" ] }, { "id": 104, "statusIcon": "manage_search", "title": "Conferência de admissões retroativas", "subtitle": "Cinco admissões precisam de validação antes do fechamento", "workstream": "Conformidade", "status": "Em análise", "priority": "P1", "exposure": 72000, "dueAt": "2026-04-26T15:00:00.000Z", "owner": "João Mendes", "slaHours": 22, "blockers": [ "Documentos admissionais" ] }, { "id": 105, "statusIcon": "task_alt", "title": "Autorização do lote bancário", "subtitle": "Arquivo validado e pronto para autorização da Tesouraria", "workstream": "Tesouraria", "status": "Pronto", "priority": "P1", "exposure": 860000, "dueAt": "2026-04-27T10:00:00.000Z", "owner": "Ana Souza", "slaHours": 30, "blockers": [] }, { "id": 106, "statusIcon": "approval", "title": "Fechamento contábil da competência", "subtitle": "Lançamentos conciliados aguardam aprovação da Controladoria", "workstream": "Tesouraria", "status": "Pronto para aprovação", "priority": "P2", "exposure": 214000, "dueAt": "2026-04-28T09:00:00.000Z", "owner": "Ricardo Paiva", "slaHours": 46, "blockers": [] } ], "sort": [ "priority,asc" ] }, "layout": { "variant": "list", "density": "comfortable", "lines": 3, "dividers": "between", "groupBy": "workstream", "pageSize": 8 }, "skin": { "type": "flat" }, "interaction": { "expandable": true, "expandTrigger": "icon", "expandMode": "single" }, "templating": { "leading": { "type": "icon", "expr": "${item.statusIcon}" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.subtitle}" }, "meta": { "type": "date", "expr": "${item.dueAt}|pt-BR:short" }, "metaPrefixIcon": "schedule", "trailing": { "type": "chip", "expr": "${item.status}", "variant": "outlined" }, "chipColorMap": { "Em risco": "var(--md-sys-color-error)", "Bloqueado": "var(--md-sys-color-error)", "Em validação": "var(--md-sys-color-tertiary)", "Em análise": "var(--md-sys-color-primary)", "Pronto": "var(--md-sys-color-primary)", "Pronto para aprovação": "var(--md-sys-color-primary)" }, "iconColorMap": { "Em risco": "var(--md-sys-color-error)", "Bloqueado": "var(--md-sys-color-error)", "Em validação": "var(--md-sys-color-tertiary)", "Em análise": "var(--md-sys-color-primary)", "Pronto": "var(--md-sys-color-primary)", "Pronto para aprovação": "var(--md-sys-color-primary)" }, "sectionHeader": { "type": "text", "expr": "${key}" }, "features": [ { "type": "chip", "expr": "${item.priority}", "variant": "filled" }, { "type": "currency", "expr": "${item.exposure}|BRL:pt-BR" }, { "type": "text", "expr": "SLA ${item.slaHours} h" } ], "featuresMode": "icons+labels" }, "expansion": { "sections": [ { "id": "detail", "title": "Detalhes operacionais", "type": "key-value", "itemsExpr": "[{\"key\":\"Responsável\",\"value\":\"${item.owner}\"},{\"key\":\"Frente\",\"value\":\"${item.workstream}\"},{\"key\":\"SLA\",\"value\":\"${item.slaHours} horas\"}]" }, { "id": "blockers", "title": "Bloqueios", "type": "chip-list", "itemsExpr": "${item.blockers}", "emptyLabel": "Nenhum bloqueio ativo" } ], "rendering": { "shell": "attached", "columns": 2, "gap": "12px", "padding": "12px" } }, "actions": [ { "id": "open-case", "icon": "open_in_new", "label": "Abrir caso", "kind": "button", "buttonVariant": "stroked", "placement": "trailing" } ], "ui": { "showSearch": false, "showSort": false, "showRange": false }, "a11y": { "ariaLabel": "Fila operacional de fechamento da folha" } } }, "outputs": { "itemClick": "emit", "actionClick": "emit" } } } ] } } }, { "id": "related-resource-mission-team", "title": "Related Resource - equipe da missão", "summary": "Discovers the team surface of a real mission and materializes its governed participant collection without duplicating the missaoId relationship in the page JSON.", "i18n": { "pt": { "title": "Related Resource - equipe da missão", "summary": "Descobre a surface team de uma missão real e materializa sua coleção governada de participantes sem duplicar a relação missaoId no JSON da página.", "demonstrates": [ "A missão real publica a surface team e a relação pai-filho no Quickstart", "O outlet deriva o filtro missaoId da metadata e materializa uma Praxis Table", "Ausência, negação e coleção vazia permanecem estados distintos e fail-closed" ], "operationalEvidenceNotes": [ "A missão 1 e a surface team são lidas do Quickstart público; os nomes exibidos não decidem a relação.", "O documento não declara queryContext.filters.missaoId: esse filtro nasce de relatedResource.childParentField.", "Autorização e operações filhas continuam governadas por availability, capabilities e links publicados." ], "promptSuggestions": [ "Explique de onde vem o filtro da equipe", "Mostre quais campos o backend publica na relação", "Como adaptar a receita para outra surface relacionada?" ] } }, "publicRoute": "/examples/dynamic-page/related-resource-mission-team", "publicUrl": "https://praxisui.dev/examples/dynamic-page/related-resource-mission-team", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-related-resource-outlet", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes", "requires": [ "praxis-related-resource-outlet", "praxis-table", "surface.relatedResource", "surface.availability", "resourceEvent" ], "tags": [ "related-resource", "surface", "mission", "team", "remote-data", "metadata-driven", "fail-closed", "ai-recipe" ], "demonstrates": [ "Quickstart publishes the real operations.missoes item surface team and its relatedResource contract", "Related Resource Outlet derives queryContext.filters.missaoId from childParentField instead of a host-authored rule", "The child Praxis Table keeps schema-driven columns, server pagination and resource event provenance", "Permission-limited, not-found, empty and ready remain distinct runtime states rather than permissive fallbacks" ], "promptSuggestions": [ "Explain where the team filter comes from", "Show the backend fields that govern this relationship", "How would I adapt this recipe to another related surface?" ], "platformFeatures": [ "surface.relatedResource", "surface.availability", "related-resource.childResourceKey", "related-resource.childResourcePath", "related-resource.childParentField", "related-resource.fail-closed", "table.columnProjection", "resourceEvent" ], "backendSurfaces": [ "GET /api/operations/missoes/1", "GET /api/operations/missoes/1/surfaces", "POST /api/operations/missao-participantes/filter?page=0&size=10", "GET /schemas/filtered?path=/api/operations/missao-participantes/filter&operation=post&schemaType=response" ], "complexity": "intermediate", "catalogRole": "runtime-widget", "learningStage": "base-components", "validation": { "level": "browser-smoke", "checks": [ "parent-record-readable", "team-surface-available", "related-resource-contract-complete", "derived-parent-filter", "child-table-materialized", "participant-data-visible" ] }, "operationalEvidence": { "recommendedHttpIds": [ "mission-1-read", "mission-1-team-surface", "mission-1-participants-filter" ], "pendingHttpIds": [], "notes": [ "Mission 1 and its team surface are read from the published Quickstart; displayed labels never decide the relationship.", "The page does not declare queryContext.filters.missaoId; the resolver derives it from relatedResource.childParentField.", "Authorization and child operations remain governed by published availability, capabilities and links." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.related-resource-mission-team.json", "praxis-ui-angular/examples/ai-recipes/praxis-related-resource-outlet.json", "praxis-ui-angular/projects/praxis-core/docs/resource-events.md", "praxis-api-quickstart/src/test/java/com/example/praxis/apiquickstart/config/MissaoPilotIntegrationTest.java" ], "sourcePath": "docs/examples/dynamic-page/examples/related-resource-mission-team.json", "documentation": { "story": { "pt": "Uma liderança de operações precisa abrir a equipe de uma missão sem manter, em cada tela, a regra que liga missão e participante. O Quickstart já publica essa relação na surface item-level team, junto com disponibilidade, identidade do recurso filho e operações permitidas.", "en": "An operations lead needs to open a mission team without maintaining the mission-to-participant rule in every screen. Quickstart already publishes that relationship in the item-level team surface, together with availability, child identity and supported operations." }, "outcome": { "pt": "O visitante vê dez participantes reais materializados por uma Praxis Table. No JSON existe apenas a surface e a identidade da missão; o runtime deriva missaoId, preserva a origem da decisão e falha fechado quando o contrato não autoriza a abertura.", "en": "The visitor sees ten real participants materialized by Praxis Table. The JSON contains only the surface and mission identity; the runtime derives missaoId, preserves decision provenance and fails closed when the contract does not authorize opening." }, "componentRoles": [ { "component": "praxis-related-resource-outlet", "jsonPath": "page.widgets[missionTeamRelationship].definition.inputs", "role": { "pt": "Descobre a surface team, resolve a relação e materializa a coleção filha.", "en": "Discovers the team surface, resolves the relationship and materializes the child collection." }, "rationale": { "pt": "Evita reconstruir catálogo, paths e filtros no host, mantendo disponibilidade e proveniência no contrato publicado.", "en": "Avoids rebuilding catalogs, paths and filters in the host while preserving availability and provenance from the published contract." } }, { "component": "praxis-table", "jsonPath": "definition.inputs.tableConfig", "role": { "pt": "Renderiza os participantes, pagina no servidor e preserva eventos de recurso.", "en": "Renders participants, paginates on the server and preserves resource events." }, "rationale": { "pt": "A tabela é materializada pelo resolver e continua dona da experiência de coleção; o outlet não copia seu runtime.", "en": "The table is materialized by the resolver and remains the owner of collection UX; the outlet does not copy its runtime." } }, { "component": "praxis-api-quickstart", "jsonPath": "operationalEvidence", "role": { "pt": "Publica a missão, o catálogo de surfaces e o endpoint filtrável de participantes.", "en": "Publishes the mission, surface catalog and filterable participant endpoint." }, "rationale": { "pt": "Transforma a receita em prova operacional reproduzível, não em uma relação sintética inventada pelo frontend.", "en": "Turns the recipe into reproducible operational proof rather than a synthetic frontend-invented relationship." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.surfaceId", "title": { "pt": "Surface canônica", "en": "Canonical surface" }, "explanation": { "pt": "team identifica exatamente a surface item-level publicada; o runtime não procura relações por título ou palavra-chave.", "en": "team identifies the exact published item-level surface; the runtime does not search relationships by title or keyword." } }, { "jsonPath": "definition.inputs.parentResourcePath", "title": { "pt": "Endereço do recurso pai", "en": "Parent resource address" }, "explanation": { "pt": "operations/missoes permite seguir a descoberta no origin configurado sem duplicar /api ou montar URLs locais.", "en": "operations/missoes lets discovery follow the configured origin without duplicating /api or building local URLs." } }, { "jsonPath": "definition.inputs.parentResourceId", "title": { "pt": "Identidade contextual", "en": "Contextual identity" }, "explanation": { "pt": "O id 1 contextualiza a surface e será usado no filtro apenas depois que a metadata confirmar childParentField.", "en": "Id 1 scopes the surface and is used in the filter only after metadata confirms childParentField." } }, { "jsonPath": "surface.relatedResource", "title": { "pt": "Relação publicada pelo backend", "en": "Backend-published relationship" }, "explanation": { "pt": "childResourceKey, childResourcePath, childParentField e childOperations chegam do catálogo; não aparecem como convenção da página.", "en": "childResourceKey, childResourcePath, childParentField and childOperations come from the catalog rather than page convention." } }, { "jsonPath": "definition.inputs.tableConfig.columnProjection", "title": { "pt": "Projeção editorial da tabela", "en": "Editorial table projection" }, "explanation": { "pt": "O schema continua dono das colunas; include e overrides apenas selecionam e apresentam os campos relevantes para a equipe.", "en": "Schema remains the column owner; include and overrides only select and present fields relevant to the team." } }, { "jsonPath": "definition.outputs.resourceEvent", "title": { "pt": "Proveniência operacional", "en": "Operational provenance" }, "explanation": { "pt": "Eventos da tabela filha atravessam o outlet com identidade de recurso e superfície para observação pelo host.", "en": "Child table events cross the outlet with resource and surface identity for host observation." } } ], "experiments": [ { "pt": "Remova parentResourceId e observe o estado not-found: o outlet não inventa uma coleção sem contexto.", "en": "Remove parentResourceId and observe the not-found state: the outlet does not invent a collection without context." }, { "pt": "Troque surfaceId de team para timeline e ajuste somente a projeção visual; compare como o backend passa a governar outro recurso filho.", "en": "Change surfaceId from team to timeline and adjust only the visual projection; compare how the backend now governs a different child resource." }, { "pt": "Remova um campo de columnProjection.include e confirme que a relação e o filtro permanecem inalterados.", "en": "Remove a field from columnProjection.include and confirm the relationship and filter remain unchanged." }, { "pt": "Inspecione a requisição de filtro no navegador e confirme missaoId=1 embora esse critério não exista no documento.", "en": "Inspect the filter request in the browser and confirm missaoId=1 even though that criterion is absent from the document." } ], "productionNotes": [ { "pt": "Não derive surfaceId, resourceKey ou childParentField de labels; use ids e metadata canônicos publicados.", "en": "Do not derive surfaceId, resourceKey or childParentField from labels; use published canonical ids and metadata." }, { "pt": "childOperations descreve materialização possível, mas availability, capabilities e HATEOAS continuam decidindo o que a pessoa pode executar.", "en": "childOperations describes possible materialization, while availability, capabilities and HATEOAS still decide what the user may execute." }, { "pt": "Estados permission-limited, not-found e empty têm significados diferentes; não converta negação ou metadata incompleta em coleção vazia.", "en": "Permission-limited, not-found and empty states have different meanings; do not convert denial or incomplete metadata into an empty collection." }, { "pt": "O host deve fornecer origin confiável, autenticação, providers e observabilidade; a página não deve reconstruir endpoints nem autorização.", "en": "The host must provide a trusted origin, authentication, providers and observability; the page must not rebuild endpoints or authorization." } ] }, "envelope": { "id": "related-resource-mission-team", "title": "Related Resource - equipe da missão", "summary": "Discovers the team surface of a real mission and materializes its governed participant collection without duplicating the missaoId relationship in the page JSON.", "i18n": { "pt": { "title": "Related Resource - equipe da missão", "summary": "Descobre a surface team de uma missão real e materializa sua coleção governada de participantes sem duplicar a relação missaoId no JSON da página.", "demonstrates": [ "A missão real publica a surface team e a relação pai-filho no Quickstart", "O outlet deriva o filtro missaoId da metadata e materializa uma Praxis Table", "Ausência, negação e coleção vazia permanecem estados distintos e fail-closed" ], "operationalEvidenceNotes": [ "A missão 1 e a surface team são lidas do Quickstart público; os nomes exibidos não decidem a relação.", "O documento não declara queryContext.filters.missaoId: esse filtro nasce de relatedResource.childParentField.", "Autorização e operações filhas continuam governadas por availability, capabilities e links publicados." ], "promptSuggestions": [ "Explique de onde vem o filtro da equipe", "Mostre quais campos o backend publica na relação", "Como adaptar a receita para outra surface relacionada?" ] } }, "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-related-resource-outlet", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" }, "requires": [ "praxis-related-resource-outlet", "praxis-table", "surface.relatedResource", "surface.availability", "resourceEvent" ], "tags": [ "related-resource", "surface", "mission", "team", "remote-data", "metadata-driven", "fail-closed", "ai-recipe" ], "demonstrates": [ "Quickstart publishes the real operations.missoes item surface team and its relatedResource contract", "Related Resource Outlet derives queryContext.filters.missaoId from childParentField instead of a host-authored rule", "The child Praxis Table keeps schema-driven columns, server pagination and resource event provenance", "Permission-limited, not-found, empty and ready remain distinct runtime states rather than permissive fallbacks" ], "promptSuggestions": [ "Explain where the team filter comes from", "Show the backend fields that govern this relationship", "How would I adapt this recipe to another related surface?" ], "platformFeatures": [ "surface.relatedResource", "surface.availability", "related-resource.childResourceKey", "related-resource.childResourcePath", "related-resource.childParentField", "related-resource.fail-closed", "table.columnProjection", "resourceEvent" ], "backendSurfaces": [ "GET /api/operations/missoes/1", "GET /api/operations/missoes/1/surfaces", "POST /api/operations/missao-participantes/filter?page=0&size=10", "GET /schemas/filtered?path=/api/operations/missao-participantes/filter&operation=post&schemaType=response" ], "complexity": "intermediate", "validation": { "level": "browser-smoke", "checks": [ "parent-record-readable", "team-surface-available", "related-resource-contract-complete", "derived-parent-filter", "child-table-materialized", "participant-data-visible" ] }, "operationalEvidence": { "recommendedHttpIds": [ "mission-1-read", "mission-1-team-surface", "mission-1-participants-filter" ], "pendingHttpIds": [], "notes": [ "Mission 1 and its team surface are read from the published Quickstart; displayed labels never decide the relationship.", "The page does not declare queryContext.filters.missaoId; the resolver derives it from relatedResource.childParentField.", "Authorization and child operations remain governed by published availability, capabilities and links." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.related-resource-mission-team.json", "praxis-ui-angular/examples/ai-recipes/praxis-related-resource-outlet.json", "praxis-ui-angular/projects/praxis-core/docs/resource-events.md", "praxis-api-quickstart/src/test/java/com/example/praxis/apiquickstart/config/MissaoPilotIntegrationTest.java" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "missionTeamRelationship", "shell": { "kind": "dashboard-card", "icon": "hub", "title": "Equipe da missão", "subtitle": "Relação governada pela surface team da missão Batalha de Nova York", "windowActions": { "collapsible": false, "fullscreen": true } }, "definition": { "id": "praxis-related-resource-outlet", "bindingOrder": [ "surfaceId", "parentRecord", "parentResourceId", "parentResourcePath", "mode", "tableId", "tableConfig" ], "inputs": { "surfaceId": "team", "parentResourcePath": "operations/missoes", "parentResourceId": 1, "parentRecord": { "id": 1, "titulo": "Batalha de Nova York", "status": "EM_ANDAMENTO", "prioridade": "CRITICA" }, "mode": "inline", "tableId": "mission-team-related-resource", "tableConfig": { "toolbar": { "visible": true, "title": "Participantes materializados", "subtitle": "O filtro missaoId nasce de surface.relatedResource, não deste documento", "search": { "enabled": true }, "columnsVisibility": { "enabled": false }, "densityToggle": { "enabled": true } }, "columns": [], "behavior": { "pagination": { "enabled": true, "strategy": "server", "pageSize": 10, "pageSizeOptions": [ 10, 20 ] }, "sorting": { "enabled": true, "defaultSort": { "column": "ordem", "direction": "asc" } } }, "columnProjection": { "source": "schema", "include": [ "funcionarioFotoUrl", "funcionarioNome", "papel", "principal", "resultado" ], "overrides": { "funcionarioFotoUrl": { "header": "Foto", "width": "72px" }, "funcionarioNome": { "header": "Participante", "sticky": "start" }, "papel": { "header": "Papel" }, "principal": { "header": "Liderança", "format": "yes-no", "align": "center" }, "resultado": { "header": "Resultado" } } } } }, "outputs": { "widgetEvent": "emit", "resourceEvent": "emit", "surfaceOpen": "emit" } } } ] } } }, { "id": "visual-block-presets-form", "title": "Dynamic Form - visual block presets", "summary": "Shows how Dynamic Form can mix API fields with governed visual guidance blocks while keeping layout decisions in metadata, not template code.", "i18n": { "pt": { "title": "Dynamic Form - blocos visuais governados", "summary": "Combina campos da API com blocos visuais governados, mantendo decisões de layout em metadata e não no template.", "demonstrates": [ "Explore Dynamic Form - blocos visuais governados e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-form materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Combina campos da API com blocos visuais governados, mantendo decisões de layout em metadata e não no template.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered?schemaType=response e {id}." ] } }, "publicRoute": "/examples/dynamic-page/visual-block-presets-form", "publicUrl": "https://praxisui.dev/examples/dynamic-page/visual-block-presets-form", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-form", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "resource-detail", "dynamic-form.layout-items", "@praxisui/dynamic-form>=8.0.0-beta.12", "dynamic-form.sections", "praxis-rich-content", "rich-content.document", "rich-content.timeline", "visual-block-presets" ], "tags": [ "form", "layout-items", "visual-blocks", "presets", "timeline", "rich-content", "sections", "quickstart" ], "demonstrates": [ "FormColumn.items as the canonical ordered layout contract for fields and visual content", "RichContentDocument layout items created from text, notice, divider, info card and timeline documents", "Dividers and large guidance cards placed on dedicated full-width rows to preserve the field grid rhythm", "fields[] synchronized as a projection that contains only API field names", "Static visual guidance excluded from fieldMetadata and backend DTO semantics", "RichContentDocument nodes rendered inside the dynamic form column flow", "Timeline visual block rendered inside praxis-dynamic-form without entering the submit payload" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "resource-detail", "dynamic-form.layout-items", "form-column-items", "rich-content.document", "rich-content.timeline", "visual-block-presets", "fields-projection" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=response", "GET /api/human-resources/funcionarios/{id}", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "base-components", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "form-column-items-rendered", "rich-content-layout-items-rendered", "rich-content-timeline-rendered", "fields-projection-excludes-visual-blocks" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-get-by-id", "cargos-options-filter", "departamentos-options-filter" ], "pendingHttpIds": [], "notes": [ "Reference API: https://praxis-enterprise-proof-sandbox-v2.onrender.com", "The example imports the golden recipe from praxis-ui-angular instead of copying the page contract.", "Requires @praxisui/core and @praxisui/dynamic-form 8.0.0-beta.12 or newer so FormColumn.items can render richContent blocks.", "Dividers and large guidance cards are rendered on dedicated full-width rows so the field grid keeps a consistent rhythm.", "The timeline block is a RichContentDocument layout item inside the form, not a field or payload fragment.", "Preset ids are not persisted; the saved shape is kind richContent with a RichContentDocument." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.visual-block-presets-form.json", "praxis-ui-angular/projects/praxis-dynamic-form/README.md", "praxis-ui-angular/projects/praxis-dynamic-form/docs/layout-items-visual-blocks.md", "praxis-ui-angular/examples/ai-recipes/praxis-rich-content.json" ], "sourcePath": "docs/examples/dynamic-page/examples/visual-block-presets-form.json", "documentation": { "story": { "pt": "Dynamic Form - blocos visuais governados parte de uma necessidade operacional concreta: Combina campos da API com blocos visuais governados, mantendo decisões de layout em metadata e não no template.", "en": "Dynamic Form - visual block presets starts from a concrete operational need: Shows how Dynamic Form can mix API fields with governed visual guidance blocks while keeping layout decisions in metadata, not template code." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-dynamic-form transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-dynamic-form turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-dynamic-form", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa campos, seções, validações e ações a partir de configuração explícita.", "en": "Materializes fields, sections, validation and actions from explicit configuration." }, "rationale": { "pt": "Mantém a experiência de coleta alinhada ao contrato sem criar um formulário Angular exclusivo para o cenário.", "en": "Keeps data collection aligned with the contract without creating a scenario-specific Angular form." } }, { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.sections", "title": { "pt": "Estrutura semântica", "en": "Semantic structure" }, "explanation": { "pt": "Agrupa campos pela tarefa do usuário, não apenas pela ordem física do DTO.", "en": "Groups fields by the user task rather than only by DTO order." } }, { "jsonPath": "definition.inputs.config.fields", "title": { "pt": "Campos e controles", "en": "Fields and controls" }, "explanation": { "pt": "Materializa controles, opções e apresentação a partir da configuração e da metadata disponível.", "en": "Materializes controls, options and presentation from configuration and available metadata." } }, { "jsonPath": "definition.inputs.config.validators", "title": { "pt": "Validação da experiência", "en": "Experience validation" }, "explanation": { "pt": "Explicita restrições de entrada sem promover o frontend a fonte primária da regra de negócio.", "en": "Exposes input constraints without promoting the frontend to the primary business-rule source." } } ], "experiments": [ { "pt": "Mude um campo obrigatório ou uma condição de visibilidade e compare a validação com o JSON editado.", "en": "Change a required field or visibility condition and compare validation with the edited JSON." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.visual-block-presets-form.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.visual-block-presets-form.json." } ] }, "envelope": { "id": "visual-block-presets-form", "title": "Dynamic Form - visual block presets", "summary": "Shows how Dynamic Form can mix API fields with governed visual guidance blocks while keeping layout decisions in metadata, not template code.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-dynamic-form", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/dynamic-form >= 8.0.0-beta.12" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "resource-detail", "dynamic-form.layout-items", "@praxisui/dynamic-form>=8.0.0-beta.12", "dynamic-form.sections", "praxis-rich-content", "rich-content.document", "rich-content.timeline", "visual-block-presets" ], "tags": [ "form", "layout-items", "visual-blocks", "presets", "timeline", "rich-content", "sections", "quickstart" ], "demonstrates": [ "FormColumn.items as the canonical ordered layout contract for fields and visual content", "RichContentDocument layout items created from text, notice, divider, info card and timeline documents", "Dividers and large guidance cards placed on dedicated full-width rows to preserve the field grid rhythm", "fields[] synchronized as a projection that contains only API field names", "Static visual guidance excluded from fieldMetadata and backend DTO semantics", "RichContentDocument nodes rendered inside the dynamic form column flow", "Timeline visual block rendered inside praxis-dynamic-form without entering the submit payload" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "resource-detail", "dynamic-form.layout-items", "form-column-items", "rich-content.document", "rich-content.timeline", "visual-block-presets", "fields-projection" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=response", "GET /api/human-resources/funcionarios/{id}", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "form-column-items-rendered", "rich-content-layout-items-rendered", "rich-content-timeline-rendered", "fields-projection-excludes-visual-blocks" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-get-by-id", "cargos-options-filter", "departamentos-options-filter" ], "pendingHttpIds": [], "notes": [ "Reference API: https://praxis-enterprise-proof-sandbox-v2.onrender.com", "The example imports the golden recipe from praxis-ui-angular instead of copying the page contract.", "Requires @praxisui/core and @praxisui/dynamic-form 8.0.0-beta.12 or newer so FormColumn.items can render richContent blocks.", "Dividers and large guidance cards are rendered on dedicated full-width rows so the field grid keeps a consistent rhythm.", "The timeline block is a RichContentDocument layout item inside the form, not a field or payload fragment.", "Preset ids are not persisted; the saved shape is kind richContent with a RichContentDocument." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.visual-block-presets-form.json", "praxis-ui-angular/projects/praxis-dynamic-form/README.md", "praxis-ui-angular/projects/praxis-dynamic-form/docs/layout-items-visual-blocks.md", "praxis-ui-angular/examples/ai-recipes/praxis-rich-content.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "visualBlockPresetBriefing", "shell": { "kind": "dashboard-card", "icon": "article", "title": "Visual block presets", "subtitle": "Authoring shortcuts that persist as RichContentDocument layout items" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "dynamic-page-visual-block-presets-briefing", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "card", "title": "Static guidance belongs in layout items", "subtitle": "The form stays metadata-driven while explanation, warnings and separators remain governed content.", "content": [ { "type": "compose", "wrap": true, "gap": "sm", "items": [ { "type": "badge", "label": "FormColumn.items" }, { "type": "badge", "label": "richContent" }, { "type": "badge", "label": "fields[] projection" } ] }, { "type": "text", "text": "The examples below show the persisted shape produced by visual block presets: text, notice, divider, info card and contract proof. The preset id is not part of the saved contract." } ] } ] } } } }, { "key": "funcionarioVisualBlocksForm", "shell": { "kind": "dashboard-card", "icon": "view_agenda", "title": "Funcionario review form", "subtitle": "API fields stay aligned while guidance cards move to dedicated rows" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "config", "resourcePath", "formId", "resourceId" ], "inputs": { "formId": "human-resources-funcionarios-visual-block-presets", "resourcePath": "human-resources/funcionarios", "resourceId": 1, "mode": "view", "config": { "metadata": { "name": "Funcionario visual block review", "version": "1.0.0" }, "editorialContext": { "review": { "scope": 4, "scopeCaption": "identity fields", "readiness": 80 } }, "sections": [ { "id": "identity-and-context", "title": "Identity and context", "description": "A fields-plus-content layout that keeps larger guidance cards on dedicated rows so the field grid stays aligned.", "appearance": "outlined", "rows": [ { "id": "identity-row-main", "columns": [ { "id": "identity-main", "span": { "md": 7, "lg": 7 }, "items": [ { "kind": "richContent", "id": "identity-introduction-block", "layout": "block", "rootClassName": "visual-block-text", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "text", "text": "Review the employee identity before checking assignment and payroll data. This block represents a RichContentDocument created from the Text preset." } ] } }, { "kind": "field", "id": "field-nomeCompleto", "fieldName": "nomeCompleto" }, { "kind": "field", "id": "field-email", "fieldName": "email" }, { "kind": "richContent", "id": "contact-guidance-notice", "layout": "block", "rootClassName": "visual-block-notice", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "compose", "direction": "row", "gap": "sm", "wrap": true, "className": "praxis-rich-content-notice", "items": [ { "type": "icon", "icon": "error_outline", "ariaLabel": "Notice" }, { "type": "text", "text": "Email and phone are operational contact fields. Keep changes aligned with the backend employee record instead of treating this guidance as field metadata." } ] } ] } }, { "kind": "field", "id": "field-telefone", "fieldName": "telefone" } ], "fields": [ "nomeCompleto", "email", "telefone" ] }, { "id": "identity-side", "span": { "md": 5, "lg": 5 }, "items": [ { "kind": "field", "id": "field-fotoPerfilUrl", "fieldName": "fotoPerfilUrl" }, { "kind": "field", "id": "field-ativo", "fieldName": "ativo" }, { "kind": "field", "id": "field-estadoCivil", "fieldName": "estadoCivil" } ], "fields": [ "fotoPerfilUrl", "ativo", "estadoCivil" ] } ] }, { "id": "identity-status-row", "columns": [ { "id": "identity-status", "span": { "md": 12, "lg": 12 }, "items": [ { "kind": "richContent", "id": "profile-status-card", "layout": "block", "rootClassName": "visual-block-info-card", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "card", "id": "profile-status-title", "title": "Profile status", "subtitle": "Info card preset placed on a dedicated row to preserve the field rhythm.", "content": [ { "type": "compose", "wrap": true, "gap": "sm", "items": [ { "type": "badge", "label": "API field" }, { "type": "badge", "label": "visual guidance" } ] }, { "id": "profile-status-message", "type": "text", "text": "Keep assignment, department and contact details current." }, { "type": "metric", "label": "Review scope", "valueExpr": "${review.scope}", "captionExpr": "${review.scopeCaption}" }, { "type": "progress", "label": "Readiness", "valueExpr": "${review.readiness}", "max": 100, "showPercent": true } ] } ] } } ] } ] } ] }, { "id": "assignment-review", "title": "Assignment review", "description": "Divider and card blocks separate assignment data from compensation context while the guidance card stays on its own row.", "appearance": "outlined", "rows": [ { "id": "assignment-role-row", "columns": [ { "id": "assignment-role", "span": { "md": 6, "lg": 6 }, "items": [ { "kind": "field", "id": "field-cargoId", "fieldName": "cargoId" } ], "fields": [ "cargoId" ] }, { "id": "assignment-department", "span": { "md": 6, "lg": 6 }, "items": [ { "kind": "field", "id": "field-departamentoId", "fieldName": "departamentoId" } ], "fields": [ "departamentoId" ] } ] }, { "id": "assignment-policy-row", "columns": [ { "id": "assignment-policy", "span": { "md": 12, "lg": 12 }, "items": [ { "kind": "richContent", "id": "assignment-policy-divider", "layout": "block", "rootClassName": "visual-block-divider", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "text", "id": "assignment-policy-divider-text", "text": "Assignment policy checkpoint", "className": "praxis-rich-content-divider" } ] } } ] } ] }, { "id": "assignment-compensation-row", "columns": [ { "id": "assignment-admission", "span": { "md": 6, "lg": 6 }, "items": [ { "kind": "field", "id": "field-dataAdmissao", "fieldName": "dataAdmissao" } ], "fields": [ "dataAdmissao" ] }, { "id": "assignment-payroll", "span": { "md": 6, "lg": 6 }, "items": [ { "kind": "field", "id": "field-salario", "fieldName": "salario" } ], "fields": [ "salario" ] } ] }, { "id": "assignment-guidance-row", "columns": [ { "id": "assignment-guidance", "span": { "md": 12, "lg": 12 }, "items": [ { "kind": "richContent", "id": "assignment-guidance-card", "layout": "block", "rootClassName": "visual-block-guidance-card", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "card", "id": "assignment-guidance-title", "title": "Operational assignment", "subtitle": "Confirm role, department and start date before closing the review.", "content": [ { "type": "text", "id": "assignment-guidance-message", "text": "This row keeps guidance outside the submit payload while preserving the field rhythm." } ] }, { "type": "keyValueList", "id": "assignment-contract-proof", "title": "Contract proof", "layout": "stacked", "items": [ { "label": "items[]", "value": "Owns the mixed order of fields and visual blocks.", "icon": "view_week", "badge": "canonical" }, { "label": "fields[]", "value": "Keeps only API field names as a derived projection.", "icon": "schema", "badge": "field projection" } ] } ] } } ] } ] }, { "id": "assignment-timeline-row", "columns": [ { "id": "assignment-timeline", "span": { "md": 12, "lg": 12 }, "items": [ { "kind": "richContent", "id": "assignment-review-timeline", "layout": "block", "rootClassName": "visual-block-timeline", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "timeline", "id": "assignment-review-timeline-node", "title": "Assignment review timeline", "orientation": "horizontal", "order": "normal", "position": "alternate", "connectorVariant": "none", "connectorColor": "neutral", "markerVariant": "number", "markerColor": "primary", "markerStyle": "filled", "emphasis": "hero", "density": "comfortable", "textAppearance": "prominent", "items": [ { "id": "identity-check", "title": "Validate identity", "subtitle": "Confirm name, contact data and active status before reviewing assignment.", "opposite": "1. Intake", "badge": "Form data", "markerColor": "success", "markerStyle": "outlined", "connectorColor": "success", "connectorVariant": "solid" }, { "id": "assignment-check", "title": "Review assignment", "subtitle": "Cargo and department stay as API fields; this timeline remains presentation metadata.", "opposite": "2. Assignment", "badge": "Rich content", "markerColor": "warning", "connectorColor": "warning", "connectorVariant": "dashed" }, { "id": "payroll-check", "title": "Confirm payroll readiness", "subtitle": "Salary and admission date remain outside the visual block payload.", "opposite": "3. Payroll", "badge": "No submit payload", "markerColor": "info", "markerStyle": "outlined", "connectorVariant": "none" } ] } ] } } ], "fields": [] } ] } ] } ], "fieldMetadata": [ { "name": "fotoPerfilUrl", "label": "Avatar", "controlType": "avatar", "imageField": "fotoPerfilUrl", "readonly": true }, { "name": "nomeCompleto", "label": "Nome Completo", "controlType": "input", "validators": { "required": true, "maxLength": 160 }, "readonly": true }, { "name": "email", "label": "Email", "controlType": "email", "validators": { "email": true }, "readonly": true }, { "name": "telefone", "label": "Telefone", "controlType": "phone", "maskType": "phone", "readonly": true }, { "name": "ativo", "label": "Ativo", "controlType": "toggle", "readonly": true }, { "name": "cargoId", "label": "Cargo", "controlType": "asyncSelect", "endpoint": "/api/human-resources/cargos/options/filter", "displayField": "label", "valueField": "id", "readonly": true }, { "name": "departamentoId", "label": "Departamento", "controlType": "asyncSelect", "endpoint": "/api/human-resources/departamentos/options/filter", "displayField": "label", "valueField": "id", "readonly": true }, { "name": "dataAdmissao", "label": "Data de Admissão", "controlType": "date", "readonly": true }, { "name": "salario", "label": "Salário", "controlType": "currency", "currencyCode": "BRL", "locale": "pt-BR", "readonly": true }, { "name": "estadoCivil", "label": "Estado Civil", "controlType": "select", "options": [ { "label": "Solteiro", "value": "SOLTEIRO" }, { "label": "Casado", "value": "CASADO" }, { "label": "Divorciado", "value": "DIVORCIADO" }, { "label": "Viúvo", "value": "VIUVO" } ], "readonly": true } ], "actions": { "submit": { "id": "submit-visual-block-review", "label": "Submit review", "visible": false, "type": "submit" }, "reset": { "id": "reset-visual-block-review", "label": "Reset", "visible": false, "type": "reset" }, "cancel": { "id": "close-visual-block-review", "label": "Close", "visible": false, "type": "button" }, "position": "right", "placement": "afterSections", "spacing": "compact" }, "formRules": [ { "id": "employee-inactive-visual-guidance", "name": "Employee inactive visual guidance", "targetType": "visualBlock", "targets": [ "profile-status-card" ], "effect": { "condition": { "===": [ { "var": "ativo" }, false ] }, "properties": { "title": "Employee inactive", "titleNodeId": "profile-status-title", "message": "Review offboarding, access revocation and justification before saving.", "messageNodeId": "profile-status-message", "className": "employee-status-card employee-status-card--warning" }, "propertiesWhenFalse": { "title": "Employee active", "titleNodeId": "profile-status-title", "message": "Keep assignment, department and contact details current.", "messageNodeId": "profile-status-message", "className": "employee-status-card employee-status-card--ok" } } }, { "id": "assignment-guidance-by-role", "name": "Assignment guidance by role", "targetType": "visualBlock", "targets": [ "assignment-guidance-card" ], "effect": { "condition": { "===": [ { "var": "cargoId" }, "gestor" ] }, "properties": { "title": "Managerial assignment", "titleNodeId": "assignment-guidance-title", "message": "Confirm approval scope, reporting line and department ownership.", "messageNodeId": "assignment-guidance-message", "rootClassName": "visual-block-guidance-card visual-block-guidance-card--manager" }, "propertiesWhenFalse": { "title": "Operational assignment", "titleNodeId": "assignment-guidance-title", "message": "This row keeps guidance outside the submit payload while preserving the field rhythm.", "messageNodeId": "assignment-guidance-message", "rootClassName": "visual-block-guidance-card" } } } ] } } } } ] } } }, { "id": "rich-content-knowledge-surface", "title": "Rich Content - knowledge surface", "summary": "Turns policy notes, metrics, timelines and AI guidance into portable rich-content surfaces that can sit beside operational widgets.", "i18n": { "pt": { "title": "Rich Content - superfície de conhecimento", "summary": "Transforma notas, métricas, timelines e orientação de IA em superfícies ricas portáveis ao lado dos widgets operacionais.", "demonstrates": [ "Explore Rich Content - superfície de conhecimento e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/knowledge-surface com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Transforma notas, métricas, timelines e orientação de IA em superfícies ricas portáveis ao lado dos widgets operacionais.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-rich-content.document, praxis-rich-content.nodes.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e rich-content-ai-capabilities.ts." ] } }, "publicRoute": "/examples/dynamic-page/rich-content-knowledge-surface", "publicUrl": "https://praxisui.dev/examples/dynamic-page/rich-content-knowledge-surface", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/knowledge-surface", "resourceKey": "operations.knowledge-surface", "requires": [ "praxis-rich-content.document", "RichContentDocument.nodes", "rich-content.context", "rich-content.inline-layout", "rich-content.timeline", "rich-content.mediaBlock", "rich-content.metrics", "rich-content.tabs", "rich-content.card.semantic-surface", "rich-content.card.variants", "rich-content.card.media-placement", "rich-content.card.interaction-state", "actionButton", "requiresCapabilities" ], "tags": [ "rich-content", "knowledge-surface", "policy", "timeline", "metrics", "ai-recipe" ], "demonstrates": [ "A canonical RichContentDocument rendered as a Dynamic Page widget", "Text, badges, cards, metrics, progress, media blocks and timeline nodes in one copyable contract", "Semantic cards with variant, tone, size, orientation, media and host-mediated interaction metadata", "Card gallery covering outlined, filled, transparent and plain cards with top, leading, trailing and background media", "Context-bound expressions such as ${mission.name}, ${mission.readiness} and ${policy.owner}", "Inline layout for compact status ribbons alongside block layout for document surfaces", "AI-facing guidance that separates presentation documents from field controls and data grids", "Host-mediated actionButton flows and capability-gated nodes without serializing runtime bridges", "Lookup cards published as governed summary blocks instead of ad hoc host markup", "Related records published as resolved relationship summaries instead of host-authored lookup wrappers", "Stat groups published as portable KPI blocks instead of hand-authored dashboard markup", "Tabs published as portable editorial panels instead of host-authored tab markup", "CTA groups published as semantic next-step clusters instead of page-specific button wrappers" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-rich-content.document", "praxis-rich-content.nodes", "praxis-rich-content.context", "praxis-rich-content.inline-layout", "rich-content.card", "rich-content.card.media", "rich-content.card.semantic-state", "rich-content.card.headerAction", "rich-content.card.selectable", "rich-content.metric", "rich-content.progress", "rich-content.mediaBlock", "rich-content.timeline", "rich-content.recordSummary", "rich-content.lookupCard", "rich-content.relatedRecord", "rich-content.actionCard", "rich-content.statGroup", "rich-content.ctaGroup", "rich-content.disclosure", "rich-content.emptyState", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/projects/praxis-rich-content/src/lib/ai/rich-content-ai-capabilities.ts", "praxis-ui-angular/examples/ai-recipes/praxis-rich-content.json" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "base-components", "featuredRank": 3, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "rich-content-context-expressions-rendered", "rich-content-timeline-rendered", "host-mediated-action-buttons-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because rich-content is a presentation/document contract, not a backend resource mutation.", "Agents should use RichContentDocument for explanatory knowledge surfaces and keep editable business data in forms, tables or lists.", "The same document shape can be embedded inside dialogs, tabs, steppers, page builder surfaces and list expansion panels.", "When rich content is hosted by praxis-dynamic-page, hostCapabilities is injected only at runtime and must not be serialized into the persisted page JSON." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-rich-content.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rich-content-knowledge-surface.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/rich-content-knowledge-surface.json", "documentation": { "story": { "pt": "Uma operação precisa combinar orientação, indicadores, histórico e próximas ações sem codificar um dashboard editorial exclusivo. O documento Rich Content organiza essas peças como conteúdo portável.", "en": "An operation needs to combine guidance, indicators, history and next actions without coding a dedicated editorial dashboard. The Rich Content document organizes those pieces as portable content." }, "outcome": { "pt": "O runtime apresenta uma narrativa operacional rica que pode mudar por configuração mantendo tema, ações e mediação sob controle do app host.", "en": "The runtime presents a rich operational narrative that can change through configuration while theme, actions and mediation remain host-controlled." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-rich-content.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-rich-content.json." } ] }, "envelope": { "id": "rich-content-knowledge-surface", "title": "Rich Content - knowledge surface", "summary": "Turns policy notes, metrics, timelines and AI guidance into portable rich-content surfaces that can sit beside operational widgets.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/knowledge-surface", "resourceKey": "operations.knowledge-surface" }, "requires": [ "praxis-rich-content.document", "RichContentDocument.nodes", "rich-content.context", "rich-content.inline-layout", "rich-content.timeline", "rich-content.mediaBlock", "rich-content.metrics", "rich-content.tabs", "rich-content.card.semantic-surface", "rich-content.card.variants", "rich-content.card.media-placement", "rich-content.card.interaction-state", "actionButton", "requiresCapabilities" ], "tags": [ "rich-content", "knowledge-surface", "policy", "timeline", "metrics", "ai-recipe" ], "demonstrates": [ "A canonical RichContentDocument rendered as a Dynamic Page widget", "Text, badges, cards, metrics, progress, media blocks and timeline nodes in one copyable contract", "Semantic cards with variant, tone, size, orientation, media and host-mediated interaction metadata", "Card gallery covering outlined, filled, transparent and plain cards with top, leading, trailing and background media", "Context-bound expressions such as ${mission.name}, ${mission.readiness} and ${policy.owner}", "Inline layout for compact status ribbons alongside block layout for document surfaces", "AI-facing guidance that separates presentation documents from field controls and data grids", "Host-mediated actionButton flows and capability-gated nodes without serializing runtime bridges", "Lookup cards published as governed summary blocks instead of ad hoc host markup", "Related records published as resolved relationship summaries instead of host-authored lookup wrappers", "Stat groups published as portable KPI blocks instead of hand-authored dashboard markup", "Tabs published as portable editorial panels instead of host-authored tab markup", "CTA groups published as semantic next-step clusters instead of page-specific button wrappers" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-rich-content.document", "praxis-rich-content.nodes", "praxis-rich-content.context", "praxis-rich-content.inline-layout", "rich-content.card", "rich-content.card.media", "rich-content.card.semantic-state", "rich-content.card.headerAction", "rich-content.card.selectable", "rich-content.metric", "rich-content.progress", "rich-content.mediaBlock", "rich-content.timeline", "rich-content.recordSummary", "rich-content.lookupCard", "rich-content.relatedRecord", "rich-content.actionCard", "rich-content.statGroup", "rich-content.ctaGroup", "rich-content.disclosure", "rich-content.emptyState", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/projects/praxis-rich-content/src/lib/ai/rich-content-ai-capabilities.ts", "praxis-ui-angular/examples/ai-recipes/praxis-rich-content.json" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "rich-content-context-expressions-rendered", "rich-content-timeline-rendered", "host-mediated-action-buttons-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because rich-content is a presentation/document contract, not a backend resource mutation.", "Agents should use RichContentDocument for explanatory knowledge surfaces and keep editable business data in forms, tables or lists.", "The same document shape can be embedded inside dialogs, tabs, steppers, page builder surfaces and list expansion panels.", "When rich content is hosted by praxis-dynamic-page, hostCapabilities is injected only at runtime and must not be serialized into the persisted page JSON." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-rich-content.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rich-content-knowledge-surface.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "missionKnowledgeBriefing", "shell": { "kind": "dashboard-card", "icon": "article", "title": "Mission knowledge briefing", "subtitle": "Policy, metrics and timeline authored as RichContentDocument" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "dynamic-page-rich-content-knowledge-surface", "context": { "mission": { "name": "Operation Dawn Gate", "owner": "Ariadne Ops", "readiness": 82, "risk": "Elevated", "semanticRisk": "medium", "governanceStatus": "published", "region": "South Atlantic" }, "policy": { "owner": "Platform Governance", "version": "2026.04", "source": "Quickstart reference contract", "lastReviewed": "2026-04-18", "cueCount": 3, "cueCaption": "governed cues" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "id": "governed-decision-brief", "type": "decisionPackage", "titleExpr": "${mission.name}", "subtitleExpr": "${policy.source}", "summary": "Governed semantic briefing authored from the reference contract: readiness, risk, owner and policy version stay portable as one RichContentDocument while the host owns runtime actions.", "statusExpr": "${mission.governanceStatus}", "ownerExpr": "${policy.owner}", "policySourceExpr": "${policy.source}", "versionExpr": "${policy.version}", "confidenceExpr": "${mission.readiness}", "riskExpr": "${mission.semanticRisk}", "lastReviewedExpr": "${policy.lastReviewed}", "evidence": [ { "id": "quickstart-contract", "label": "Reference contract", "source": "schemas.filtered" }, { "id": "ai-authoring", "label": "AI-authored decision", "source": "RichContentDocument" } ], "primaryAction": { "type": "actionButton", "label": "Inspect decision package", "variant": "raised", "color": "primary", "action": { "actionId": "mission.decision.inspect" } }, "secondaryActions": [ { "type": "actionButton", "label": "Open evidence", "variant": "stroked", "action": { "actionId": "mission.evidence.open" } } ], "accessibility": { "role": "article", "ariaLabel": "Governed semantic decision briefing" } }, { "type": "card", "title": "Compact policy note", "subtitle": "Outlined / neutral / compact / leading icon", "variant": "outlined", "tone": "neutral", "size": "sm", "density": "compact", "orientation": "horizontal", "media": { "kind": "icon", "icon": "policy", "label": "Policy note", "placement": "leading" }, "accessibility": { "role": "group", "ariaLabel": "Compact neutral policy card with leading policy icon" }, "content": [ { "type": "text", "text": "Dense policy hints can stay readable when media, tags and body copy are balanced inside one portable card." }, { "type": "compose", "wrap": true, "gap": "xs", "items": [ { "type": "badge", "label": "policy hint" }, { "type": "badge", "label": "dense" }, { "type": "badge", "label": "portable" } ] }, { "type": "metric", "label": "Signal", "valueExpr": "${policy.cueCount}", "captionExpr": "${policy.cueCaption}" } ] }, { "type": "card", "title": "Reusable decision package", "subtitle": "Filled / success / selectable", "variant": "filled", "tone": "success", "size": "md", "density": "comfortable", "orientation": "horizontal", "active": true, "media": { "kind": "image", "src": "/examples/rich-content/reusable-decision-package-portrait.png", "alt": "Generated portrait of a verified reusable decision package with approval lineage", "placement": "leading", "aspectRatio": "3 / 4" }, "interaction": { "mode": "selectable", "selected": true }, "accessibility": { "role": "button", "ariaLabel": "Selected reusable decision package card" }, "content": [ { "type": "text", "text": "Selectable cards can express governed choices while keeping the host responsible for persistence and action routing." }, { "type": "compose", "wrap": true, "gap": "sm", "items": [ { "type": "badge", "label": "selected" }, { "type": "badge", "label": "active" }, { "type": "badge", "label": "portrait media" }, { "type": "badge", "label": "92% confidence" } ] } ] }, { "type": "card", "title": "Risk review checkpoint", "subtitle": "Transparent / warning / top generated media", "variant": "transparent", "tone": "warning", "size": "md", "density": "comfortable", "orientation": "vertical", "media": { "kind": "image", "src": "/examples/rich-content/risk-review-checkpoint.png", "alt": "Generated warning checkpoint dashboard with audit trail and review markers", "placement": "top", "aspectRatio": "21 / 9" }, "headerAction": { "type": "actionButton", "label": "Review", "icon": "rule", "variant": "stroked", "color": "accent", "action": { "actionId": "reviewRiskCheckpoint", "payload": { "source": "rich-content-card-gallery", "checkpoint": "risk-review" } } }, "accessibility": { "role": "article", "ariaLabel": "Risk review checkpoint card with generated warning image" }, "content": [ { "type": "compose", "wrap": true, "gap": "sm", "items": [ { "type": "badge", "label": "warning" }, { "type": "badge", "label": "generated image" }, { "type": "badge", "label": "header action" } ] }, { "type": "text", "text": "Header actions keep secondary affordances visible without turning every card into a host-specific wrapper." } ] }, { "type": "card", "title": "Escalation context", "subtitle": "Plain / danger / background media", "variant": "plain", "tone": "danger", "size": "sm", "density": "compact", "orientation": "vertical", "media": { "kind": "image", "src": "/examples/rich-content/danger-escalation-gate.png", "alt": "Generated blocked decision package paused behind a red escalation gate", "placement": "background", "aspectRatio": "21 / 9" }, "accessibility": { "role": "article", "ariaLabel": "Plain danger escalation context card with background icon" }, "content": [ { "type": "text", "text": "Use danger tone for blocked or escalated decisions that need immediate human attention before publication." }, { "type": "compose", "wrap": true, "gap": "xs", "items": [ { "type": "icon", "icon": "priority_high", "ariaLabel": "High priority" }, { "type": "badge", "label": "danger" }, { "type": "badge", "label": "generated background" } ] } ] }, { "type": "card", "title": "Published visual evidence", "subtitle": "Elevated / info / image media", "variant": "elevated", "tone": "info", "size": "md", "density": "comfortable", "orientation": "vertical", "media": { "kind": "image", "src": "/examples/rich-content/governed-evidence-publication.png", "alt": "Generated governed evidence publication surface with verified decision document", "placement": "top", "aspectRatio": "21 / 9" }, "accessibility": { "role": "article", "ariaLabel": "Info card with top image media" }, "content": [ { "type": "compose", "wrap": true, "gap": "sm", "items": [ { "type": "badge", "label": "image" }, { "type": "badge", "label": "top media" }, { "type": "badge", "label": "elevated" } ] }, { "type": "text", "text": "Image media is useful for evidence cards, product explainers and visual attachments without leaving the canonical document contract." } ] }, { "type": "card", "title": "Governed next step", "subtitle": "Outlined / action mode / button semantics", "variant": "outlined", "tone": "success", "size": "md", "density": "comfortable", "orientation": "horizontal", "media": { "kind": "icon", "icon": "rocket_launch", "label": "Publish", "placement": "leading" }, "interaction": { "mode": "action", "action": { "actionId": "publishDecisionPreview", "payload": { "source": "rich-content-card-gallery", "step": "publish-preview" } } }, "accessibility": { "role": "button", "ariaLabel": "Publish decision preview action card" }, "content": [ { "type": "text", "text": "Action cards can be keyboard-focusable semantic buttons while the host still owns authorization, routing and side effects." }, { "type": "compose", "wrap": true, "gap": "xs", "items": [ { "type": "badge", "label": "action" }, { "type": "badge", "label": "keyboard ready" }, { "type": "badge", "label": "host mediated" } ] } ] }, { "type": "card", "title": "Quiet reference card", "subtitle": "Transparent / neutral / trailing avatar", "variant": "transparent", "tone": "neutral", "size": "sm", "density": "compact", "orientation": "horizontal", "media": { "kind": "avatar", "label": "QA", "placement": "trailing" }, "accessibility": { "role": "group", "ariaLabel": "Quiet neutral reference card with trailing avatar" }, "content": [ { "type": "text", "text": "Transparent neutral cards work well for secondary notes, attribution and compact reference material." } ] }, { "type": "card", "title": "Approval pending", "subtitle": "Filled / warning / compact leading status", "variant": "filled", "tone": "warning", "size": "sm", "density": "compact", "orientation": "horizontal", "loading": true, "media": { "kind": "icon", "icon": "hourglass_top", "label": "Pending", "placement": "leading" }, "accessibility": { "role": "article", "ariaLabel": "Warning card showing a pending loading state" }, "content": [ { "type": "text", "text": "Loading state communicates that the card is waiting for a governed publication or approval snapshot." }, { "type": "compose", "wrap": true, "gap": "xs", "items": [ { "type": "badge", "label": "pending" }, { "type": "badge", "label": "compact status" } ] } ] }, { "id": "decision-provenance-note", "type": "mediaBlock", "avatar": { "type": "avatar", "initials": "AI", "name": "AI-authored decision" }, "title": { "type": "text", "text": "Authoring evidence" }, "subtitle": { "type": "text", "text": "Policy context, ownership and runtime boundaries travel with the document; editable business data remains in forms, tables and governed host services." }, "meta": { "type": "badge", "label": "runtime-safe JSON" }, "trailing": [ { "type": "icon", "icon": "psychology", "ariaLabel": "AI ready" } ] }, { "id": "decision-lifecycle", "type": "timeline", "title": "Decision lifecycle", "orientation": "horizontal", "order": "reverse", "position": "alternate", "connectorVariant": "dashed", "markerVariant": "number", "markerColor": "primary", "emphasis": "strong", "density": "spacious", "textAppearance": "prominent", "style": { "--prx-rich-timeline-item-body-background": "color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 8%, transparent)", "--prx-rich-timeline-item-body-border": "1px solid color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 28%, transparent)", "--prx-rich-timeline-item-body-border-radius": "8px", "--prx-rich-timeline-item-body-padding": "14px" }, "items": [ { "icon": "schema", "title": "Grounded", "subtitle": "Resolve the canonical contract and classify the surface as explanation, data or action before rendering.", "meta": "schemas.filtered + recipes", "opposite": "1. Ground", "badge": "source" }, { "icon": "article", "title": "Authored", "subtitle": "Publish briefing, metrics and evidence as a portable RichContentDocument instead of a local Angular template.", "meta": "praxis-rich-content", "opposite": "2. Author", "badge": "runtime" }, { "icon": "open_in_new", "title": "Materialized", "subtitle": "Reuse the same semantic decision package in tabs, dialogs, steppers, list expansion or dashboard cells.", "meta": "Dynamic Page composition", "opposite": "3. Publish", "badge": "portable" } ] } ] } } } }, { "key": "missionKnowledgeStatusRibbon", "shell": { "kind": "dashboard-card", "icon": "fact_check", "title": "Inline status ribbon", "subtitle": "Compact rich-content nodes for toolbar and table-cell style affordances" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "nodes", "context", "layout", "rootClassName" ], "inputs": { "layout": "inline", "rootClassName": "dynamic-page-rich-content-inline-status", "context": { "status": { "icon": "verified", "label": "Governed knowledge surface", "phase": "Reusable" } }, "nodes": [ { "type": "icon", "icon": "verified", "ariaLabel": "Verified" }, { "type": "text", "textExpr": "${status.label}" }, { "type": "badge", "labelExpr": "${status.phase}" } ] } } }, { "key": "missionKnowledgeHostMediation", "shell": { "kind": "dashboard-card", "icon": "hub", "title": "Host-mediated editorial actions", "subtitle": "Action buttons and capability-gated blocks resolved by praxis-dynamic-page at runtime" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context" ], "inputs": { "context": { "selectedRecord": { "name": "Carla Mendes", "department": "Platform Governance", "status": "Needs review", "recordId": "employee-42" }, "pageRuntime": { "capability": "page.widget.configurable", "actionChannel": "customAction or GlobalActionService" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "hub", "title": "Runtime host mediation", "message": "Hosted praxis-rich-content widgets can trigger governed actions and capability-gated editorial blocks without persisting runtime helpers in WidgetPageDefinition.", "actions": [ { "type": "actionButton", "label": "Open details", "icon": "open_in_new", "variant": "stroked", "color": "primary", "action": { "actionId": "openDetails", "payload": { "source": "rich-content-knowledge-surface", "widgetKey": "missionKnowledgeHostMediation" } } } ] }, { "type": "recordSummary", "titleExpr": "${selectedRecord.name}", "subtitleExpr": "${selectedRecord.department}", "metaExpr": "${pageRuntime.actionChannel}", "fields": [ { "label": "Status", "valueExpr": "${selectedRecord.status}" }, { "label": "Capability gate", "valueExpr": "${pageRuntime.capability}" }, { "label": "Persistence rule", "value": "Persist only document/context; never persist hostCapabilities" } ], "actions": [ { "type": "actionButton", "label": "Inspect widget settings", "icon": "settings", "variant": "flat", "color": "accent", "action": { "actionId": "openWidgetSettings", "payloadExpr": "${selectedRecord}" } } ] }, { "type": "statGroup", "title": "Governed host metrics", "subtitle": "Portable KPI summary owned by the rich-content document", "layout": "grid", "items": [ { "label": "Capability gates", "value": "1", "captionExpr": "${pageRuntime.capability}", "icon": "shield" }, { "label": "Action channel", "value": "2", "captionExpr": "${pageRuntime.actionChannel}", "icon": "hub" }, { "label": "Selection status", "valueExpr": "${selectedRecord.status}", "captionExpr": "${selectedRecord.recordId}", "icon": "person_search" } ] }, { "type": "tabs", "title": "Governed host views", "subtitle": "One portable document organizing multiple editorial panels without host-specific tab markup.", "appearance": "underline", "defaultTabId": "overview", "items": [ { "id": "overview", "label": "Overview", "icon": "dashboard", "content": [ { "type": "text", "text": "Tabs keep explanatory panels, summaries and governed actions inside the canonical RichContentDocument instead of forcing each host to invent its own tab container." } ] }, { "id": "selection", "label": "Selection", "icon": "person_search", "badgeExpr": "${selectedRecord.status}", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Selected record", "valueExpr": "${selectedRecord.name}" }, { "label": "Department", "valueExpr": "${selectedRecord.department}" }, { "label": "Portability rule", "value": "Selected record context stays portable across host surfaces." } ] } ] } ] }, { "type": "ctaGroup", "title": "Next steps", "subtitle": "Choose the governed host action", "message": "Use a semantic CTA cluster when the host must expose multiple governed next steps from one portable document.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Open governed lookup", "icon": "open_in_new", "variant": "raised", "color": "primary", "action": { "actionId": "openDetails", "payloadExpr": "${selectedRecord}" } }, { "type": "actionButton", "label": "Inspect widget settings", "icon": "settings", "variant": "stroked", "action": { "actionId": "openWidgetSettings", "payloadExpr": "${selectedRecord}" } } ] }, { "type": "lookupCard", "titleExpr": "${selectedRecord.name}", "subtitleExpr": "${selectedRecord.department}", "status": "resolved", "metaExpr": "${pageRuntime.actionChannel}", "ctaLabel": "Open governed lookup", "action": { "actionId": "openDetails", "payloadExpr": "${selectedRecord}" }, "fields": [ { "label": "Status", "valueExpr": "${selectedRecord.status}" }, { "label": "Record id", "valueExpr": "${selectedRecord.recordId}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Inspect widget settings", "icon": "settings", "variant": "stroked", "color": "accent", "action": { "actionId": "openWidgetSettings", "payloadExpr": "${selectedRecord}" } } ] }, { "type": "relatedRecord", "titleExpr": "${selectedRecord.name}", "subtitle": "Reports to", "relationLabel": "Manager record", "metaExpr": "${selectedRecord.department}", "ctaLabel": "Open related manager", "variant": "raised", "color": "primary", "action": { "actionId": "openDetails", "payloadExpr": "${selectedRecord}" }, "fields": [ { "label": "Selection status", "valueExpr": "${selectedRecord.status}", "hint": "Resolved from the active selection context." }, { "label": "Record id", "valueExpr": "${selectedRecord.recordId}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Inspect related settings", "icon": "settings", "variant": "stroked", "color": "accent", "action": { "actionId": "openWidgetSettings", "payloadExpr": "${selectedRecord}" } } ] }, { "type": "actionCard", "title": "Inspect governed package", "subtitleExpr": "${selectedRecord.department}", "message": "This editorial card triggers a host-mediated workflow without embedding handlers in the document.", "metaExpr": "${pageRuntime.actionChannel}", "ctaLabel": "Inspect governed package", "variant": "raised", "color": "primary", "action": { "actionId": "openDetails", "payloadExpr": "${selectedRecord}" }, "secondaryActions": [ { "type": "actionButton", "label": "Inspect widget settings", "icon": "settings", "variant": "stroked", "color": "accent", "action": { "actionId": "openWidgetSettings", "payloadExpr": "${selectedRecord}" } } ] }, { "type": "disclosure", "title": "Visible only when the page host exposes widget configuration capability", "subtitle": "This block stays in the document but the host decides whether it renders", "appearance": "card", "defaultExpanded": true, "requiresCapabilities": [ "page.widget.configurable" ], "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Capability source", "value": "DynamicWidgetPageComponent hostCapabilities.hasCapability" }, { "label": "Action dispatch", "value": "hostCapabilities.dispatchAction resolves GlobalActionService first and falls back to customAction" }, { "label": "Persisted contract", "value": "definition.inputs.document remains the only canonical rich-content payload in the page JSON" } ] } ] }, { "type": "emptyState", "icon": "data_object", "title": "Do not serialize runtime bridges", "message": "This example intentionally omits hostCapabilities from definition.inputs. Runtime helpers belong to the page host, not to the persisted recipe.", "actions": [ { "type": "actionButton", "label": "Refresh host state", "icon": "refresh", "variant": "basic", "action": { "actionId": "refreshHostState", "payload": { "recordId": "employee-42" } } } ] } ] } } } } ] } } }, { "id": "funcionarios-crud", "title": "Funcionarios - CRUD page", "summary": "Renders a CRUD page over funcionarios while leaving openings, policy and host mediation explicit instead of hiding them in generated scaffolding.", "i18n": { "pt": { "title": "Funcionários - página CRUD", "summary": "Renderiza um CRUD de funcionários mantendo aberturas, política e mediação do host explícitas, sem esconder tudo em scaffolding gerado.", "demonstrates": [ "Explore Funcionários - página CRUD e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-crud materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Renderiza um CRUD de funcionários mantendo aberturas, política e mediação do host explícitas, sem esconder tudo em scaffolding gerado.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e filter." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-crud", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-crud", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-crud", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "options", "capabilities", "crud", "remote-data" ], "tags": [ "crud", "remote", "schema-driven", "quickstart" ], "demonstrates": [ "CRUD widget resolution inside Dynamic Page", "Host-governed drawer openings for create, view and edit", "Shared funcionarios resource contract for table and form flows", "CRUD metadata carried as widget input" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "remote-options", "capabilities", "crud-openings", "schema-driven-form" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "intermediate", "catalogRole": "runtime-widget", "learningStage": "productivity", "variantFamilyId": "employee-workspace-compositions", "featuredRank": 4, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "authoring-plan-visible", "dynamic-page-rendered", "praxis-crud-rendered", "quickstart-filter-response" ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.crud.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-crud.json", "documentation": { "story": { "pt": "Uma equipe administrativa precisa consultar e manter funcionários sem reconstruir listagem, formulários e aberturas para cada recurso. O exemplo reúne essas operações sobre o mesmo contrato publicado.", "en": "An administrative team needs to browse and maintain employees without rebuilding lists, forms and opening modes for every resource. The example brings those operations over the same published contract." }, "outcome": { "pt": "Consulta, criação e edição compartilham identidade de recurso, políticas e mediação, demonstrando um fluxo corporativo que permanece governável.", "en": "Browse, create and edit share resource identity, policies and mediation, demonstrating an enterprise flow that remains governable." }, "componentRoles": [ { "component": "praxis-crud", "jsonPath": "page.widgets[].definition", "role": { "pt": "Coordena consulta, criação, edição e exclusão sobre um recurso.", "en": "Coordinates browse, create, edit and delete operations for a resource." }, "rationale": { "pt": "Reúne operações governadas em uma superfície consistente sem duplicar shells de manutenção.", "en": "Brings governed operations into one consistent surface without duplicating maintenance shells." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.resource", "title": { "pt": "Identidade do recurso", "en": "Resource identity" }, "explanation": { "pt": "Mantém consulta e mutações ligadas ao mesmo recurso e às suas capacidades publicadas.", "en": "Keeps browse and mutations tied to the same resource and its published capabilities." } }, { "jsonPath": "definition.inputs.config.openModes", "title": { "pt": "Modos de abertura", "en": "Open modes" }, "explanation": { "pt": "Define onde criação, detalhe e edição aparecem sem codificar shells diferentes para cada ação.", "en": "Defines where create, detail and edit appear without coding different shells for every action." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Operações disponíveis", "en": "Available operations" }, "explanation": { "pt": "Projeta somente ações compatíveis com o contrato e com a mediação do host.", "en": "Projects only actions compatible with the contract and host mediation." } } ], "experiments": [ { "pt": "Desabilite uma operação ou altere seu modo de abertura e observe a adaptação da superfície.", "en": "Disable an operation or change its open mode and observe how the surface adapts." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.crud.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.crud.json." } ] }, "envelope": { "id": "funcionarios-crud", "title": "Funcionarios - CRUD page", "summary": "Renders a CRUD page over funcionarios while leaving openings, policy and host mediation explicit instead of hiding them in generated scaffolding.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-crud", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "options", "capabilities", "crud", "remote-data" ], "tags": [ "crud", "remote", "schema-driven", "quickstart" ], "demonstrates": [ "CRUD widget resolution inside Dynamic Page", "Host-governed drawer openings for create, view and edit", "Shared funcionarios resource contract for table and form flows", "CRUD metadata carried as widget input" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "remote-options", "capabilities", "crud-openings", "schema-driven-form" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "intermediate", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "authoring-plan-visible", "dynamic-page-rendered", "praxis-crud-rendered", "quickstart-filter-response" ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.crud.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionariosCrud", "shell": { "kind": "dashboard-card", "icon": "database", "title": "Funcionarios CRUD", "subtitle": "Schema-driven CRUD flow" }, "definition": { "id": "praxis-crud", "bindingOrder": [ "metadata" ], "inputs": { "crudId": "human-resources-funcionarios-crud", "metadata": { "component": "praxis-crud", "resource": { "path": "human-resources/funcionarios", "idField": "id", "endpointKey": "human-resources.funcionarios" }, "table": { "toolbar": { "visible": true, "title": "Funcionarios" }, "behavior": { "selection": { "enabled": true, "type": "single" } } }, "defaults": { "openMode": "drawer" }, "actions": [ { "action": "create", "openMode": "drawer", "formId": "human-resources-funcionarios-form" }, { "action": "view", "openMode": "drawer", "formId": "human-resources-funcionarios-form" }, { "action": "edit", "openMode": "drawer", "formId": "human-resources-funcionarios-form" } ] } }, "outputs": { "afterSave": "emit", "afterDelete": "emit" } } } ] } } }, { "id": "funcionarios-actions-capabilities", "title": "Funcionarios - actions and capabilities", "summary": "Connects row actions to backend-published surfaces and capabilities, showing how available operations can be discovered at runtime.", "i18n": { "pt": { "title": "Funcionários - ações e capabilities", "summary": "Conecta ações de linha a superfícies e capabilities publicadas pelo backend, mostrando operações descobertas em runtime.", "demonstrates": [ "Explore Funcionários - ações e capabilities e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-table materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Conecta ações de linha a superfícies e capabilities publicadas pelo backend, mostrando operações descobertas em runtime.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e filter." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-actions-capabilities", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-actions-capabilities", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-table", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "surfaces", "actions", "capabilities", "remote-data" ], "tags": [ "actions", "capabilities", "surfaces", "table", "quickstart" ], "demonstrates": [ "A backend-published Perfil 360 item surface discovered from row _links", "Host-declared surface.open actions for payroll analytics and mission participation", "Response cardinality guiding whether a projection renders as a profile object, chart, or related collection", "Immediate host feedback while catalog, schema and data are materialized", "Collection capabilities describing canonical operations", "Action buttons kept in the table while policy remains backend-owned" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "surfaces", "actions", "capabilities", "surface.open", "responseCardinality" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "GET /api/human-resources/funcionarios/{id}/surfaces", "GET /api/human-resources/funcionarios/{id}/capabilities", "GET /api/human-resources/funcionarios/{id}/hero-profile", "GET /api/human-resources/funcionarios/{id}/payroll-history", "POST /api/operations/missao-participantes/filter" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "productivity", "variantFamilyId": "employee-table-operations", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "row-actions-rendered", "capabilities-surface-declared", "response-cardinality-guides-rendering", "surface-open-loading-feedback", "quickstart-filter-response" ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-table.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.actions-workspace.json", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/hr/controller/FuncionarioController.java" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-actions-capabilities.json", "documentation": { "story": { "pt": "Funcionários - ações e capabilities parte de uma necessidade operacional concreta: Conecta ações de linha a superfícies e capabilities publicadas pelo backend, mostrando operações descobertas em runtime.", "en": "Funcionarios - actions and capabilities starts from a concrete operational need: Connects row actions to backend-published surfaces and capabilities, showing how available operations can be discovered at runtime." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-table transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-table turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-table", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa dados tabulares, filtros, seleção e ações operacionais.", "en": "Materializes tabular data, filters, selection and operational actions." }, "rationale": { "pt": "É usado quando o trabalho depende de comparar registros e agir sobre uma coleção governada.", "en": "It is used when the job depends on comparing records and acting on a governed collection." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.dataSource", "title": { "pt": "Fonte de dados", "en": "Data source" }, "explanation": { "pt": "Declara recurso, paginação, ordenação e parâmetros sem transferir a propriedade dos dados para a tabela.", "en": "Declares resource, pagination, sorting and parameters without transferring data ownership to the table." } }, { "jsonPath": "definition.inputs.config.columns", "title": { "pt": "Leitura operacional", "en": "Operational reading" }, "explanation": { "pt": "Escolhe colunas, renderers e formatação que transformam o contrato em uma visão adequada ao trabalho.", "en": "Chooses columns, renderers and formatting that turn the contract into a job-appropriate view." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Ações governadas", "en": "Governed actions" }, "explanation": { "pt": "Relaciona ações de toolbar, linha ou lote às operações que o host pode mediar.", "en": "Relates toolbar, row or bulk actions to operations the host can mediate." } } ], "experiments": [ { "pt": "Altere a ordem ou a visibilidade das colunas e observe como a mesma fonte de dados sustenta outra visão operacional.", "en": "Change column order or visibility and observe how the same data source supports another operational view." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-table.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-table.json." } ] }, "envelope": { "id": "funcionarios-actions-capabilities", "title": "Funcionarios - actions and capabilities", "summary": "Connects row actions to backend-published surfaces and capabilities, showing how available operations can be discovered at runtime.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-table", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "surfaces", "actions", "capabilities", "remote-data" ], "tags": [ "actions", "capabilities", "surfaces", "table", "quickstart" ], "demonstrates": [ "A backend-published Perfil 360 item surface discovered from row _links", "Host-declared surface.open actions for payroll analytics and mission participation", "Response cardinality guiding whether a projection renders as a profile object, chart, or related collection", "Immediate host feedback while catalog, schema and data are materialized", "Collection capabilities describing canonical operations", "Action buttons kept in the table while policy remains backend-owned" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "surfaces", "actions", "capabilities", "surface.open", "responseCardinality" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "GET /api/human-resources/funcionarios/{id}/surfaces", "GET /api/human-resources/funcionarios/{id}/capabilities", "GET /api/human-resources/funcionarios/{id}/hero-profile", "GET /api/human-resources/funcionarios/{id}/payroll-history", "POST /api/operations/missao-participantes/filter" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "row-actions-rendered", "capabilities-surface-declared", "response-cardinality-guides-rendering", "surface-open-loading-feedback", "quickstart-filter-response" ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-table.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.actions-workspace.json", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/hr/controller/FuncionarioController.java" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "governedFuncionariosTable", "shell": { "kind": "dashboard-card", "icon": "rule", "title": "Funcionarios governed actions", "subtitle": "Perfil 360, folha and missoes demonstrate backend discovery plus declarative surface.open payloads" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "human-resources-funcionarios-actions", "config": { "toolbar": { "visible": true, "title": "Funcionarios" }, "actions": { "row": { "enabled": true, "display": "icons", "position": "end", "sticky": "end", "width": "136px", "header": { "label": "Actions", "icon": "bolt", "tooltip": "Row affordances governed by the quickstart contract" }, "behavior": { "maxInline": 2 }, "actions": [ { "id": "hero-profile", "label": "Perfil 360", "icon": "account_circle", "color": "primary", "action": "surface.open", "tooltip": "Backend READ_PROJECTION discovered from row surfaces", "recordSurface": { "id": "hero-profile", "resourceKey": "human-resources.funcionarios", "kind": "READ_PROJECTION", "scope": "ITEM", "title": "Perfil 360", "description": "Consolida identidade operacional, reputação, habilidades, equipe e base principal do funcionário para leitura contextual de RH.", "intent": "employee-360", "operationId": "getHeroProfile", "path": "/api/human-resources/funcionarios/{id}/hero-profile", "method": "GET", "schemaId": "/api/human-resources/funcionarios/{id}/hero-profile|get|response|internal:false|idField:id|readOnly:false", "schemaUrl": "/schemas/filtered?path=%2Fapi%2Fhuman-resources%2Ffuncionarios%2F%7Bid%7D%2Fhero-profile&operation=get&schemaType=response&idField=id&readOnly=false", "responseCardinality": "OBJECT", "availability": { "allowed": true, "reason": null }, "order": 40, "tags": [ "human-resources", "employee-360", "read-projection", "profile-context" ] } }, { "id": "employee-payroll-surface", "label": "Folha", "icon": "payments", "color": "accent", "action": "surface.open", "tooltip": "Host-declared surface.open payload filtered by the selected employee", "recordSurface": { "id": "payroll-history", "resourceKey": "human-resources.funcionarios", "kind": "READ_PROJECTION", "scope": "ITEM", "title": "Histórico de folha", "description": "Apresenta ciclos recentes de folha de pagamento do funcionário com valores, eventos e classificações analíticas para acompanhamento de RH.", "intent": "employee-payroll-intelligence", "operationId": "getPayrollHistory", "path": "/api/human-resources/funcionarios/{id}/payroll-history", "method": "GET", "schemaId": "/api/human-resources/funcionarios/{id}/payroll-history|get|response|internal:false|idField:id|readOnly:false", "schemaUrl": "/schemas/filtered?path=%2Fapi%2Fhuman-resources%2Ffuncionarios%2F%7Bid%7D%2Fpayroll-history&operation=get&schemaType=response&idField=id&readOnly=false", "responseCardinality": "COLLECTION", "availability": { "allowed": true, "reason": null }, "order": 50, "tags": [ "human-resources", "payroll", "folha-de-pagamento", "pagamento", "analytics", "read-projection" ] } }, { "id": "employee-missions-relation", "label": "Missoes", "icon": "flag", "color": "accent", "action": "surface.open", "tooltip": "Related collection rendered from a row-bound queryContext", "recordSurface": { "id": "mission-participations", "resourceKey": "human-resources.funcionarios", "kind": "READ_PROJECTION", "scope": "ITEM", "title": "Participações em missões", "description": "Lista missões, papéis e resultados operacionais em que o funcionário participou para leitura contextual de RH e operações.", "intent": "employee-mission-participations", "operationId": "getMissionParticipations", "path": "/api/human-resources/funcionarios/{id}/mission-participations", "method": "GET", "schemaId": "/api/human-resources/funcionarios/{id}/mission-participations|get|response|internal:false|idField:id|readOnly:false", "schemaUrl": "/schemas/filtered?path=%2Fapi%2Fhuman-resources%2Ffuncionarios%2F%7Bid%7D%2Fmission-participations&operation=get&schemaType=response&idField=id&readOnly=false", "responseCardinality": "COLLECTION", "availability": { "allowed": true, "reason": null }, "order": 60, "tags": [ "human-resources", "operations", "missions", "mission-participations", "read-projection" ] } } ] } }, "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "rowAction": "emit" } } } ] } } }, { "id": "funcionarios-actions-workspace", "title": "Funcionarios - actions workspace", "summary": "Surfaces toolbar, row, bulk, floating and footer actions from the funcionarios contract, making operations discoverable without hardcoding every command in the host.", "i18n": { "pt": { "title": "Funcionários - workspace de ações", "summary": "Expõe ações de toolbar, linha, lote, floating e rodapé a partir do contrato de funcionários, sem codificar cada comando no host.", "demonstrates": [ "Explore Funcionários - workspace de ações e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-table materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Expõe ações de toolbar, linha, lote, floating e rodapé a partir do contrato de funcionários, sem codificar cada comando no host.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e filter." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-actions-workspace", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-actions-workspace", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-table", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "surfaces", "actions", "capabilities", "remote-data", "table.toolbar-actions", "table.row-actions", "table.bulk-actions" ], "tags": [ "table", "actions", "toolbar", "row-actions", "bulk-actions", "footer-actions", "shortcuts", "quickstart" ], "demonstrates": [ "Toolbar actions with button, icon, menu, outlined and tonal appearances", "Footer action bar through toolbar.actionsPosition = both", "Bulk actions rendered in toolbar and floating action positions", "Row actions with inline and overflow affordances", "Single-selection profile opening to avoid ambiguous bulk detail navigation", "visibleWhen and shortcuts evaluated by the table toolbar runtime", "Surfaces and actions discovery opened as host modal previews" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "surfaces", "actions", "capabilities", "table.toolbar-actions", "table.row-actions", "table.bulk-actions", "table.footer-actions", "table.floating-actions", "json-logic" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /schemas/surfaces?resource=human-resources.funcionarios", "GET /schemas/actions?resource=human-resources.funcionarios", "GET /api/human-resources/funcionarios/capabilities", "GET /api/human-resources/funcionarios/{id}/capabilities" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "productivity", "variantFamilyId": "employee-table-operations", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "toolbar-actions-rendered", "row-actions-rendered", "bulk-actions-rendered", "footer-toolbar-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-filter-basic", "schemas-surfaces-human-resources-funcionarios" ], "pendingHttpIds": [], "notes": [ "Toolbar and bulk affordances remain host-composed over the published funcionarios table.", "Lifecycle actions are discovered from /schemas/actions, while item-level capabilities decide whether deactivate or reactivate is currently available from the persisted employee state." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.actions-workspace.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-actions-workspace.json", "documentation": { "story": { "pt": "Funcionários - workspace de ações parte de uma necessidade operacional concreta: Expõe ações de toolbar, linha, lote, floating e rodapé a partir do contrato de funcionários, sem codificar cada comando no host.", "en": "Funcionarios - actions workspace starts from a concrete operational need: Surfaces toolbar, row, bulk, floating and footer actions from the funcionarios contract, making operations discoverable without hardcoding every command in the host." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-table transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-table turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-table", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa dados tabulares, filtros, seleção e ações operacionais.", "en": "Materializes tabular data, filters, selection and operational actions." }, "rationale": { "pt": "É usado quando o trabalho depende de comparar registros e agir sobre uma coleção governada.", "en": "It is used when the job depends on comparing records and acting on a governed collection." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.dataSource", "title": { "pt": "Fonte de dados", "en": "Data source" }, "explanation": { "pt": "Declara recurso, paginação, ordenação e parâmetros sem transferir a propriedade dos dados para a tabela.", "en": "Declares resource, pagination, sorting and parameters without transferring data ownership to the table." } }, { "jsonPath": "definition.inputs.config.columns", "title": { "pt": "Leitura operacional", "en": "Operational reading" }, "explanation": { "pt": "Escolhe colunas, renderers e formatação que transformam o contrato em uma visão adequada ao trabalho.", "en": "Chooses columns, renderers and formatting that turn the contract into a job-appropriate view." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Ações governadas", "en": "Governed actions" }, "explanation": { "pt": "Relaciona ações de toolbar, linha ou lote às operações que o host pode mediar.", "en": "Relates toolbar, row or bulk actions to operations the host can mediate." } } ], "experiments": [ { "pt": "Altere a ordem ou a visibilidade das colunas e observe como a mesma fonte de dados sustenta outra visão operacional.", "en": "Change column order or visibility and observe how the same data source supports another operational view." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.actions-workspace.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.actions-workspace.json." } ] }, "envelope": { "id": "funcionarios-actions-workspace", "title": "Funcionarios - actions workspace", "summary": "Surfaces toolbar, row, bulk, floating and footer actions from the funcionarios contract, making operations discoverable without hardcoding every command in the host.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-table", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "surfaces", "actions", "capabilities", "remote-data", "table.toolbar-actions", "table.row-actions", "table.bulk-actions" ], "tags": [ "table", "actions", "toolbar", "row-actions", "bulk-actions", "footer-actions", "shortcuts", "quickstart" ], "demonstrates": [ "Toolbar actions with button, icon, menu, outlined and tonal appearances", "Footer action bar through toolbar.actionsPosition = both", "Bulk actions rendered in toolbar and floating action positions", "Row actions with inline and overflow affordances", "Single-selection profile opening to avoid ambiguous bulk detail navigation", "visibleWhen and shortcuts evaluated by the table toolbar runtime", "Surfaces and actions discovery opened as host modal previews" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "surfaces", "actions", "capabilities", "table.toolbar-actions", "table.row-actions", "table.bulk-actions", "table.footer-actions", "table.floating-actions", "json-logic" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /schemas/surfaces?resource=human-resources.funcionarios", "GET /schemas/actions?resource=human-resources.funcionarios", "GET /api/human-resources/funcionarios/capabilities", "GET /api/human-resources/funcionarios/{id}/capabilities" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "toolbar-actions-rendered", "row-actions-rendered", "bulk-actions-rendered", "footer-toolbar-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-filter-basic", "schemas-surfaces-human-resources-funcionarios" ], "pendingHttpIds": [], "notes": [ "Toolbar and bulk affordances remain host-composed over the published funcionarios table.", "Lifecycle actions are discovered from /schemas/actions, while item-level capabilities decide whether deactivate or reactivate is currently available from the persisted employee state." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.actions-workspace.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionariosActionsWorkspace", "shell": { "kind": "dashboard-card", "icon": "bolt", "title": "Funcionarios actions workspace", "subtitle": "Toolbar, row, bulk, floating and footer actions" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "human-resources-funcionarios-actions-workspace", "config": { "toolbar": { "visible": true, "title": "Funcionarios", "subtitle": "Action surfaces and workflow affordances", "actionsPosition": "both", "actionsBackgroundColor": "color-mix(in srgb, var(--card) 86%, var(--primary) 14%)", "actions": [ { "id": "refresh-table", "action": "refresh-table", "label": "Refresh", "icon": "refresh", "type": "icon", "position": "start", "order": 10, "tooltip": "Refresh current table data", "shortcut": "Ctrl+R", "shortcutScope": "toolbar" }, { "id": "create-funcionario", "action": "create", "label": "Create", "icon": "add", "appearance": "elevated", "color": "primary", "position": "end", "order": 20, "tooltip": "Create through a host-governed opening" }, { "id": "selected-actions", "action": "selected-actions", "label": "Selected", "icon": "task_alt", "type": "menu", "appearance": "outlined", "position": "end", "order": 30, "visibleWhen": { ">": [ { "var": "selectedCount" }, 0 ] }, "children": [ { "id": "inspect-selected-capabilities", "action": "inspect-actions", "label": "Inspect capabilities", "icon": "bolt", "order": 10, "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" } }, { "id": "open-selected-profile", "action": "profile", "label": "Open profile", "icon": "badge", "order": 20, "shortcut": "Ctrl+Enter", "visibleWhen": { "===": [ { "var": "selectedCount" }, 1 ] } } ] }, { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" } } ] }, "columns": [ { "field": "nomeCompleto", "header": "Funcionario", "type": "text", "sticky": "start", "width": "220px" }, { "field": "email", "header": "Email", "type": "string", "width": "260px" }, { "field": "cargoNome", "header": "Cargo", "type": "chip", "width": "180px" }, { "field": "departamentoNome", "header": "Departamento", "type": "badge", "width": "190px" }, { "field": "ativo", "header": "Status", "type": "boolean", "align": "center", "format": "active-inactive", "width": "130px", "conditionalRenderers": [ { "condition": { "==": [ { "var": "ativo" }, true ] }, "renderer": { "type": "badge", "badge": { "text": "Ativo", "color": "success", "variant": "filled", "icon": "check_circle" } } }, { "condition": { "==": [ { "var": "ativo" }, false ] }, "renderer": { "type": "badge", "badge": { "text": "Inativo", "color": "warn", "variant": "outlined", "icon": "block" } } } ] } ], "export": { "enabled": true, "formats": [ "csv", "json" ], "general": { "includeHeaders": true, "scope": "selected", "defaultFileName": "funcionarios-selected", "includeColumns": "visible", "applyFormatting": true } }, "actions": { "row": { "enabled": true, "display": "icons", "position": "end", "sticky": "end", "width": "168px", "header": { "label": "Workflow", "icon": "bolt", "tooltip": "Inline and overflow row actions" }, "behavior": { "maxInline": 2 }, "menu": { "icon": "more_vert", "tooltip": "More row actions", "color": "primary" }, "actions": [ { "id": "view", "action": "view", "label": "View", "icon": "visibility", "color": "primary", "tooltip": "Open detail surface" }, { "id": "edit", "action": "edit", "label": "Edit", "icon": "edit", "color": "accent", "tooltip": "Open edit workflow when allowed" }, { "id": "inspect-row-capabilities", "action": "inspect-actions", "label": "Capabilities", "icon": "policy", "color": "primary", "tooltip": "Inspect row-level capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" } }, { "id": "deactivate", "action": "deactivate", "label": "Deactivate", "icon": "block", "color": "warn", "tooltip": "Workflow action gated by backend policy" } ] }, "bulk": { "enabled": true, "position": "both", "floating": { "position": "bottom-right", "hideWhenEmpty": true }, "actions": [ { "id": "bulk-export", "action": "bulk-export", "label": "Export selected", "icon": "download", "color": "primary", "appearance": "outlined", "exportFormat": "csv", "visibleWhen": { ">": [ { "var": "selectedCount" }, 0 ] }, "shortcut": "Ctrl+Shift+E" }, { "id": "bulk-inspect-capabilities", "action": "inspect-actions", "label": "Inspect selected", "icon": "policy", "color": "accent", "appearance": "tonal", "visibleWhen": { ">": [ { "var": "selectedCount" }, 0 ] }, "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" } } ] } }, "behavior": { "selection": { "enabled": true, "type": "multiple" }, "pagination": { "enabled": true, "position": "both", "style": "compact", "pageSize": 10 }, "density": "compact" } } }, "outputs": { "rowClick": "emit", "rowAction": "emit", "bulkAction": "emit", "toolbarAction": "emit", "selectionChange": "emit" } } } ] } } }, { "id": "funcionarios-inline-filter-lab", "title": "Funcionarios - inline filter lab", "summary": "Places the published filter DTO directly in the table toolbar, so search controls follow the backend contract instead of a separate frontend form.", "i18n": { "pt": { "title": "Funcionários - laboratório de filtros inline", "summary": "Coloca o DTO de filtro publicado diretamente na toolbar da tabela, fazendo os controles seguirem o contrato do backend.", "demonstrates": [ "Explore Funcionários - laboratório de filtros inline e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-table materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Coloca o DTO de filtro publicado diretamente na toolbar da tabela, fazendo os controles seguirem o contrato do backend.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered?schemaType=request e filter." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-inline-filter-lab", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-inline-filter-lab", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-table", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter.dto", "filter", "options", "remote-data", "inline-filter-controls" ], "tags": [ "table", "filters", "inline-filters", "advanced-filters", "remote-options", "quickstart" ], "demonstrates": [ "Always-visible filters projected from the published filter DTO", "Inline text, boolean, async select, date range and currency range controls", "Remote option endpoints for cargo and departamento filters", "Filter tags and clear buttons without host-specific filter code", "Table data refresh driven by praxis-filter change and submit events" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "filter.dto", "remote-filter", "remote-options", "table.filters.advancedFilters", "dynamic-fields.inline-controls" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=request", "POST /api/human-resources/funcionarios/filter", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "advanced", "catalogRole": "capability-lab", "learningStage": "productivity", "variantFamilyId": "employee-table-operations", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "praxis-filter-rendered", "always-visible-filter-controls", "quickstart-filter-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-request-funcionarios", "funcionarios-filter-basic", "cargos-options-filter", "departamentos-options-filter" ], "pendingHttpIds": [], "notes": [ "Inline filter controls are rendered from the published filter request schema; the example does not introduce new Dynamic Fields control types." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-lab.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-inline-filter-lab.json", "documentation": { "story": { "pt": "Funcionários - laboratório de filtros inline parte de uma necessidade operacional concreta: Coloca o DTO de filtro publicado diretamente na toolbar da tabela, fazendo os controles seguirem o contrato do backend.", "en": "Funcionarios - inline filter lab starts from a concrete operational need: Places the published filter DTO directly in the table toolbar, so search controls follow the backend contract instead of a separate frontend form." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-table transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-table turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-table", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa dados tabulares, filtros, seleção e ações operacionais.", "en": "Materializes tabular data, filters, selection and operational actions." }, "rationale": { "pt": "É usado quando o trabalho depende de comparar registros e agir sobre uma coleção governada.", "en": "It is used when the job depends on comparing records and acting on a governed collection." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.dataSource", "title": { "pt": "Fonte de dados", "en": "Data source" }, "explanation": { "pt": "Declara recurso, paginação, ordenação e parâmetros sem transferir a propriedade dos dados para a tabela.", "en": "Declares resource, pagination, sorting and parameters without transferring data ownership to the table." } }, { "jsonPath": "definition.inputs.config.columns", "title": { "pt": "Leitura operacional", "en": "Operational reading" }, "explanation": { "pt": "Escolhe colunas, renderers e formatação que transformam o contrato em uma visão adequada ao trabalho.", "en": "Chooses columns, renderers and formatting that turn the contract into a job-appropriate view." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Ações governadas", "en": "Governed actions" }, "explanation": { "pt": "Relaciona ações de toolbar, linha ou lote às operações que o host pode mediar.", "en": "Relates toolbar, row or bulk actions to operations the host can mediate." } } ], "experiments": [ { "pt": "Altere a ordem ou a visibilidade das colunas e observe como a mesma fonte de dados sustenta outra visão operacional.", "en": "Change column order or visibility and observe how the same data source supports another operational view." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-lab.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-lab.json." } ] }, "envelope": { "id": "funcionarios-inline-filter-lab", "title": "Funcionarios - inline filter lab", "summary": "Places the published filter DTO directly in the table toolbar, so search controls follow the backend contract instead of a separate frontend form.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-table", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter.dto", "filter", "options", "remote-data", "inline-filter-controls" ], "tags": [ "table", "filters", "inline-filters", "advanced-filters", "remote-options", "quickstart" ], "demonstrates": [ "Always-visible filters projected from the published filter DTO", "Inline text, boolean, async select, date range and currency range controls", "Remote option endpoints for cargo and departamento filters", "Filter tags and clear buttons without host-specific filter code", "Table data refresh driven by praxis-filter change and submit events" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "filter.dto", "remote-filter", "remote-options", "table.filters.advancedFilters", "dynamic-fields.inline-controls" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=request", "POST /api/human-resources/funcionarios/filter", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "praxis-filter-rendered", "always-visible-filter-controls", "quickstart-filter-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-request-funcionarios", "funcionarios-filter-basic", "cargos-options-filter", "departamentos-options-filter" ], "pendingHttpIds": [], "notes": [ "Inline filter controls are rendered from the published filter request schema; the example does not introduce new Dynamic Fields control types." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-lab.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionariosInlineFilterTable", "shell": { "kind": "dashboard-card", "icon": "filter_alt", "title": "Funcionarios inline filter lab", "subtitle": "Filter DTO rendered as toolbar controls" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "human-resources-funcionarios-inline-filter-lab", "config": { "toolbar": { "visible": true, "title": "Funcionarios", "subtitle": "Inline filter controls backed by the quickstart filter DTO" }, "columns": [ { "field": "nomeCompleto", "header": "Funcionario", "type": "text", "sticky": "start", "width": "220px" }, { "field": "cargoNome", "header": "Cargo", "type": "chip", "width": "180px" }, { "field": "departamentoNome", "header": "Departamento", "type": "badge", "width": "190px" }, { "field": "estadoCivil", "header": "Estado Civil", "type": "badge", "width": "150px" }, { "field": "salario", "header": "Salario", "type": "currency", "align": "end", "format": { "currency": "BRL", "locale": "pt-BR" }, "width": "150px" }, { "field": "dataAdmissao", "header": "Admissao", "type": "date", "format": { "dateStyle": "short", "locale": "pt-BR" }, "width": "140px" }, { "field": "ativo", "header": "Ativo", "type": "toggle", "align": "center", "width": "110px" } ], "behavior": { "filtering": { "enabled": true, "strategy": "server", "debounceTime": 250, "advancedFilters": { "enabled": true, "settings": { "mode": "filter", "showAdvanced": true, "allowSaveTags": true, "changeDebounceMs": 250, "alwaysVisibleFields": [ "nomeCompleto", "ativo", "cargoId", "departamentoId", "dataAdmissaoRange", "salarioBetween", "estadoCivil" ], "selectedFieldIds": [ "email", "telefone" ], "placeBooleansInActions": true, "showToggleLabels": true, "alwaysMinWidth": 180, "alwaysColsMd": 3, "alwaysColsLg": 4, "tagColor": "primary", "tagVariant": "outlined", "actionsButtonColor": "primary", "actionsVariant": "outlined", "useInlineSearchableSelectVariant": true, "useInlineDateRangeVariant": true, "useInlineRangeVariant": true, "overlayVariant": "card", "advancedOpenMode": "drawer", "advancedClearButtonsEnabled": true, "alwaysVisibleFieldMetadataOverrides": { "nomeCompleto": { "label": "Nome", "controlType": "inlineInput", "inlineAutoSize": { "minWidth": 220, "maxWidth": 320 }, "clearButton": { "enabled": true, "showOnlyWhenFilled": true } }, "ativo": { "label": "Ativos", "controlType": "inlineToggle", "inlineAutoSize": { "minWidth": 112 } }, "cargoId": { "label": "Cargo", "controlType": "inlineAsyncSelect", "endpoint": "/api/human-resources/cargos/options/filter", "displayField": "label", "valueField": "id", "inlineAutoSize": { "minWidth": 190, "maxWidth": 280 } }, "departamentoId": { "label": "Departamento", "controlType": "inlineAsyncSelect", "endpoint": "/api/human-resources/departamentos/options/filter", "displayField": "label", "valueField": "id", "inlineAutoSize": { "minWidth": 210, "maxWidth": 320 } }, "dataAdmissaoRange": { "label": "Admissao", "controlType": "inlineDateRange", "inlineAutoSize": { "minWidth": 260, "maxWidth": 360 } }, "salarioBetween": { "label": "Salario", "controlType": "inlineCurrencyRange", "currency": "BRL", "locale": "pt-BR", "inlineAutoSize": { "minWidth": 250, "maxWidth": 360 } }, "estadoCivil": { "label": "Estado Civil", "controlType": "inlineSelect", "inlineAutoSize": { "minWidth": 160, "maxWidth": 240 } } } } } }, "selection": { "enabled": true, "type": "single" }, "density": "compact" } } }, "outputs": { "rowClick": "emit" } } } ] } } }, { "id": "funcionarios-rules-computed-table", "title": "Funcionarios - rules and computed columns", "summary": "Uses computed columns and conditional rules to add tenure, salary bands and risk signals without moving business semantics into handwritten frontend code.", "i18n": { "pt": { "title": "Funcionários - regras e colunas computadas", "summary": "Adiciona tempo de casa, faixas salariais e sinais de risco com colunas computadas e regras condicionais sem espalhar semântica no frontend.", "demonstrates": [ "Explore Funcionários - regras e colunas computadas e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-table materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Adiciona tempo de casa, faixas salariais e sinais de risco com colunas computadas e regras condicionais sem espalhar semântica no frontend.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e filter." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-rules-computed-table", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-rules-computed-table", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-table", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "capabilities", "remote-data", "table.computed-columns", "table.conditional-styles", "table.conditional-renderers" ], "tags": [ "table", "computed", "rules", "conditional-styles", "conditional-renderers", "quickstart" ], "demonstrates": [ "Computed tenure column using yearsSince over dataAdmissao", "Computed salary band from salary thresholds", "Cell conditional styles driven by computed values", "Row conditional styles for inactive employees", "Conditional badge renderers for active-state semantics" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "capabilities", "table.computed-columns", "table.rules.conditionalStyles", "table.rules.rowConditionalStyles", "table.rules.conditionalRenderers", "json-logic" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities" ], "complexity": "advanced", "catalogRole": "capability-lab", "learningStage": "productivity", "variantFamilyId": "employee-table-operations", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "computed-columns-configured", "conditional-rules-configured" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-filter-basic" ], "pendingHttpIds": [], "notes": [ "Computed columns and rules are host-authored table config evaluated by the Angular runtime over published funcionarios rows." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rules-computed-table.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-rules-computed-table.json", "documentation": { "story": { "pt": "Funcionários - regras e colunas computadas parte de uma necessidade operacional concreta: Adiciona tempo de casa, faixas salariais e sinais de risco com colunas computadas e regras condicionais sem espalhar semântica no frontend.", "en": "Funcionarios - rules and computed columns starts from a concrete operational need: Uses computed columns and conditional rules to add tenure, salary bands and risk signals without moving business semantics into handwritten frontend code." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-table transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-table turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-table", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa dados tabulares, filtros, seleção e ações operacionais.", "en": "Materializes tabular data, filters, selection and operational actions." }, "rationale": { "pt": "É usado quando o trabalho depende de comparar registros e agir sobre uma coleção governada.", "en": "It is used when the job depends on comparing records and acting on a governed collection." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.dataSource", "title": { "pt": "Fonte de dados", "en": "Data source" }, "explanation": { "pt": "Declara recurso, paginação, ordenação e parâmetros sem transferir a propriedade dos dados para a tabela.", "en": "Declares resource, pagination, sorting and parameters without transferring data ownership to the table." } }, { "jsonPath": "definition.inputs.config.columns", "title": { "pt": "Leitura operacional", "en": "Operational reading" }, "explanation": { "pt": "Escolhe colunas, renderers e formatação que transformam o contrato em uma visão adequada ao trabalho.", "en": "Chooses columns, renderers and formatting that turn the contract into a job-appropriate view." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Ações governadas", "en": "Governed actions" }, "explanation": { "pt": "Relaciona ações de toolbar, linha ou lote às operações que o host pode mediar.", "en": "Relates toolbar, row or bulk actions to operations the host can mediate." } } ], "experiments": [ { "pt": "Altere a ordem ou a visibilidade das colunas e observe como a mesma fonte de dados sustenta outra visão operacional.", "en": "Change column order or visibility and observe how the same data source supports another operational view." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rules-computed-table.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rules-computed-table.json." } ] }, "envelope": { "id": "funcionarios-rules-computed-table", "title": "Funcionarios - rules and computed columns", "summary": "Uses computed columns and conditional rules to add tenure, salary bands and risk signals without moving business semantics into handwritten frontend code.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-table", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "capabilities", "remote-data", "table.computed-columns", "table.conditional-styles", "table.conditional-renderers" ], "tags": [ "table", "computed", "rules", "conditional-styles", "conditional-renderers", "quickstart" ], "demonstrates": [ "Computed tenure column using yearsSince over dataAdmissao", "Computed salary band from salary thresholds", "Cell conditional styles driven by computed values", "Row conditional styles for inactive employees", "Conditional badge renderers for active-state semantics" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "capabilities", "table.computed-columns", "table.rules.conditionalStyles", "table.rules.rowConditionalStyles", "table.rules.conditionalRenderers", "json-logic" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "computed-columns-configured", "conditional-rules-configured" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-filter-basic" ], "pendingHttpIds": [], "notes": [ "Computed columns and rules are host-authored table config evaluated by the Angular runtime over published funcionarios rows." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.rules-computed-table.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionariosRulesComputedTable", "shell": { "kind": "dashboard-card", "icon": "rule", "title": "Funcionarios rules and computed columns", "subtitle": "Tenure, salary bands and conditional runtime feedback" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "human-resources-funcionarios-rules-computed", "config": { "toolbar": { "visible": true, "title": "Funcionarios", "subtitle": "Computed columns and conditional rules" }, "columns": [ { "field": "nomeCompleto", "header": "Funcionario", "type": "text", "sticky": "start", "width": "220px" }, { "field": "dataAdmissao", "header": "Admissao", "type": "date", "format": { "dateStyle": "short", "locale": "pt-BR" }, "width": "140px" }, { "field": "tempoCasaAnos", "header": "Tempo de Casa", "type": "number", "align": "end", "width": "150px", "computed": { "expression": { "yearsSince": [ { "var": "dataAdmissao" } ] }, "outputType": "number", "format": "1.0-0", "dependencies": [ "dataAdmissao" ] }, "conditionalStyles": [ { "condition": { ">=": [ { "var": "computed.tempoCasaAnos" }, 5 ] }, "style": { "color": "#166534", "fontWeight": "700" } } ] }, { "field": "salario", "header": "Salario", "type": "currency", "align": "end", "format": { "currency": "BRL", "locale": "pt-BR" }, "width": "150px", "conditionalStyles": [ { "condition": { ">=": [ { "var": "salario" }, 35000 ] }, "style": { "color": "#7c2d12", "fontWeight": "700" } } ] }, { "field": "faixaSalarial", "header": "Faixa", "type": "badge", "width": "130px", "computed": { "expression": { "if": [ { ">=": [ { "var": "salario" }, 35000 ] }, "executive", { ">=": [ { "var": "salario" }, 18000 ] }, "senior", "standard" ] }, "outputType": "text", "dependencies": [ "salario" ] }, "conditionalRenderers": [ { "condition": { "==": [ { "var": "computed.faixaSalarial" }, "executive" ] }, "renderer": { "type": "badge", "badge": { "text": "Executive", "color": "warn", "variant": "filled" } } }, { "condition": { "==": [ { "var": "computed.faixaSalarial" }, "senior" ] }, "renderer": { "type": "badge", "badge": { "text": "Senior", "color": "primary", "variant": "soft" } } } ] }, { "field": "departamentoNome", "header": "Departamento", "type": "chip", "width": "180px" }, { "field": "ativo", "header": "Estado", "type": "badge", "width": "130px", "conditionalRenderers": [ { "condition": { "==": [ { "var": "ativo" }, true ] }, "renderer": { "type": "badge", "badge": { "text": "Ativo", "color": "success", "variant": "filled" } } }, { "condition": { "==": [ { "var": "ativo" }, false ] }, "renderer": { "type": "badge", "badge": { "text": "Inativo", "color": "warn", "variant": "outlined" } } } ] } ], "rowConditionalStyles": [ { "condition": { "==": [ { "var": "ativo" }, false ] }, "style": { "opacity": "0.68", "backgroundColor": "rgba(239, 68, 68, 0.08)" } }, { "condition": { ">=": [ { "var": "computed.tempoCasaAnos" }, 5 ] }, "style": { "borderLeft": "4px solid #16a34a" } } ], "behavior": { "selection": { "enabled": true, "type": "single" }, "density": "comfortable" } } }, "outputs": { "rowClick": "emit" } } } ] } } }, { "id": "funcionarios-ai-table-workspace", "title": "Funcionarios - AI table workspace", "summary": "Lets the Praxis assistant propose governed table changes over real funcionarios data, changing runtime configuration instead of generating a new Angular component.", "i18n": { "pt": { "title": "Funcionarios - workspace de tabela com IA", "summary": "Mostra a IA do Praxis propondo ajustes governados sobre dados reais de funcionários, alterando configuração de runtime em vez de gerar outro componente Angular.", "demonstrates": [ "Uma tabela Angular real criada por configuracao, pronta para ser alterada por IA sem deploy", "O assistente abre no proprio runtime da tabela e trabalha sobre o contrato canonico de @praxisui/table", "A IA recebe contexto seguro: tableId, resourcePath, colunas, renderers, capabilities e limites de autoria", "As mudancas propostas sao materializadas como configuracao governada, nao como codigo Angular descartavel", "Dados reais de funcionarios do quickstart provam que o fluxo funciona sobre uma API publicada" ], "operationalEvidenceNotes": [ "O exemplo habilita customizacao na fronteira de input do widget para que o assistente fique visivel sem depender do toggle global da galeria.", "A execucao do assistente e governada por @praxisui/table e @praxisui/ai; esta pagina apenas declara os inputs de runtime e a ancora do recurso remoto.", "O assistente recebe um snapshot de contexto seguro, nao dumps de dados brutos da tabela nem patches arbitrarios de frontend.", "O mesmo recurso funcionarios publicado pelo quickstart e usado para carregamento de dados, descoberta de schema e grounding de capabilities." ], "promptSuggestions": [ "Junte Departamento e Cargo em uma coluna “Posicao organizacional” e oculte as colunas originais.", "Crie uma coluna calculada “Tempo de casa” a partir da data de admissao.", "Aplique formatacao condicional no Salario destacando faixas alta, media e baixa.", "Mostre o Status como badge semantico e deixe registros inativos visualmente discretos.", "Prepare uma visualizacao publica: oculte CPF e salario, fixe Nome e destaque Departamento." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-ai-table-workspace", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-ai-table-workspace", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-table", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "capabilities", "remote-data", "table.agentic-authoring", "table.renderers", "table.formatters", "assistant.context-snapshot", "assistant.session-registry" ], "tags": [ "table", "assistant", "ai", "agentic-authoring", "remote", "schema-driven", "quickstart" ], "demonstrates": [ "Praxis Table running inside Dynamic Page with customization mode enabled by contract", "The table assistant trigger in the runtime toolbar, backed by the canonical @praxisui/ai shell", "Safe assistant context built from tableId, resourcePath, columns, renderers and governance hints", "Remote funcionarios data loaded from the published quickstart resource while authoring stays governed", "Rich employee columns that give the assistant meaningful targets for formatting, visibility and behavior changes" ], "promptSuggestions": [ "Merge Department and Role into one “Organizational position” column and hide the original columns.", "Create a calculated “Tenure” column from the admission date.", "Apply conditional formatting to Salary by highlighting high, medium, and low ranges.", "Render Status as a semantic badge and make inactive records visually quieter.", "Prepare a public view: hide CPF and salary, pin Name, and emphasize Department." ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "capabilities", "table.agentic-authoring", "table.enableCustomization", "table.renderers.avatar", "table.renderers.badge", "table.renderers.chip", "table.formatters.currency", "assistant.session-registry", "assistant.context-snapshot", "assistant.backend-endpoint-resolution" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/praxis/config/ai/authoring/table/turn", "POST /api/praxis/config/ai/authoring/table/apply" ], "complexity": "advanced", "catalogRole": "capability-lab", "learningStage": "productivity", "variantFamilyId": "employee-table-operations", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "table-customization-enabled", "table-ai-assistant-trigger-rendered", "table-ai-assistant-shell-opens", "quickstart-filter-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-filter-basic" ], "pendingHttpIds": [ "ai-table-authoring-turn", "ai-table-authoring-apply" ], "notes": [ "The example intentionally enables customization at the widget input boundary so the assistant is visible without requiring the gallery-level edit toggle.", "Assistant execution is governed by @praxisui/table and @praxisui/ai; this page only declares the runtime inputs and remote resource anchor.", "The assistant receives a safe context snapshot, not raw table data dumps or arbitrary frontend patches.", "The same published quickstart funcionarios resource is used for data loading, schema discovery and capability grounding." ] }, "sourceRecipes": [ "praxis-ui-angular/projects/praxis-table/README.md", "praxis-ui-angular/projects/praxis-table/src/lib/praxis-table.json-api.md", "praxis-ui-angular/projects/praxis-ai/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-ai-table-workspace.json", "documentation": { "story": { "pt": "Funcionários - workspace de tabela com IA parte de uma necessidade operacional concreta: Mostra a IA do Praxis propondo ajustes governados sobre dados reais de funcionários, alterando configuração de runtime em vez de gerar outro componente Angular.", "en": "Funcionarios - AI table workspace starts from a concrete operational need: Lets the Praxis assistant propose governed table changes over real funcionarios data, changing runtime configuration instead of generating a new Angular component." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-table transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-table turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-table", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa dados tabulares, filtros, seleção e ações operacionais.", "en": "Materializes tabular data, filters, selection and operational actions." }, "rationale": { "pt": "É usado quando o trabalho depende de comparar registros e agir sobre uma coleção governada.", "en": "It is used when the job depends on comparing records and acting on a governed collection." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.dataSource", "title": { "pt": "Fonte de dados", "en": "Data source" }, "explanation": { "pt": "Declara recurso, paginação, ordenação e parâmetros sem transferir a propriedade dos dados para a tabela.", "en": "Declares resource, pagination, sorting and parameters without transferring data ownership to the table." } }, { "jsonPath": "definition.inputs.config.columns", "title": { "pt": "Leitura operacional", "en": "Operational reading" }, "explanation": { "pt": "Escolhe colunas, renderers e formatação que transformam o contrato em uma visão adequada ao trabalho.", "en": "Chooses columns, renderers and formatting that turn the contract into a job-appropriate view." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Ações governadas", "en": "Governed actions" }, "explanation": { "pt": "Relaciona ações de toolbar, linha ou lote às operações que o host pode mediar.", "en": "Relates toolbar, row or bulk actions to operations the host can mediate." } } ], "experiments": [ { "pt": "Altere a ordem ou a visibilidade das colunas e observe como a mesma fonte de dados sustenta outra visão operacional.", "en": "Change column order or visibility and observe how the same data source supports another operational view." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/projects/praxis-table/README.md.", "en": "The canonical reference is published at praxis-ui-angular/projects/praxis-table/README.md." } ] }, "envelope": { "id": "funcionarios-ai-table-workspace", "title": "Funcionarios - AI table workspace", "summary": "Lets the Praxis assistant propose governed table changes over real funcionarios data, changing runtime configuration instead of generating a new Angular component.", "i18n": { "pt": { "title": "Funcionarios - workspace de tabela com IA", "summary": "Demonstra IA alterando uma tabela Angular configuravel em runtime: sem gerar componente, sem recompilar e sem redeploy.", "demonstrates": [ "Uma tabela Angular real criada por configuracao, pronta para ser alterada por IA sem deploy", "O assistente abre no proprio runtime da tabela e trabalha sobre o contrato canonico de @praxisui/table", "A IA recebe contexto seguro: tableId, resourcePath, colunas, renderers, capabilities e limites de autoria", "As mudancas propostas sao materializadas como configuracao governada, nao como codigo Angular descartavel", "Dados reais de funcionarios do quickstart provam que o fluxo funciona sobre uma API publicada" ], "operationalEvidenceNotes": [ "O exemplo habilita customizacao na fronteira de input do widget para que o assistente fique visivel sem depender do toggle global da galeria.", "A execucao do assistente e governada por @praxisui/table e @praxisui/ai; esta pagina apenas declara os inputs de runtime e a ancora do recurso remoto.", "O assistente recebe um snapshot de contexto seguro, nao dumps de dados brutos da tabela nem patches arbitrarios de frontend.", "O mesmo recurso funcionarios publicado pelo quickstart e usado para carregamento de dados, descoberta de schema e grounding de capabilities." ], "promptSuggestions": [ "Junte Departamento e Cargo em uma coluna “Posicao organizacional” e oculte as colunas originais.", "Crie uma coluna calculada “Tempo de casa” a partir da data de admissao.", "Aplique formatacao condicional no Salario destacando faixas alta, media e baixa.", "Mostre o Status como badge semantico e deixe registros inativos visualmente discretos.", "Prepare uma visualizacao publica: oculte CPF e salario, fixe Nome e destaque Departamento." ] } }, "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-table", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/table >= 8.0.0-beta.30" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "capabilities", "remote-data", "table.agentic-authoring", "table.renderers", "table.formatters", "assistant.context-snapshot", "assistant.session-registry" ], "tags": [ "table", "assistant", "ai", "agentic-authoring", "remote", "schema-driven", "quickstart" ], "demonstrates": [ "Praxis Table running inside Dynamic Page with customization mode enabled by contract", "The table assistant trigger in the runtime toolbar, backed by the canonical @praxisui/ai shell", "Safe assistant context built from tableId, resourcePath, columns, renderers and governance hints", "Remote funcionarios data loaded from the published quickstart resource while authoring stays governed", "Rich employee columns that give the assistant meaningful targets for formatting, visibility and behavior changes" ], "promptSuggestions": [ "Merge Department and Role into one “Organizational position” column and hide the original columns.", "Create a calculated “Tenure” column from the admission date.", "Apply conditional formatting to Salary by highlighting high, medium, and low ranges.", "Render Status as a semantic badge and make inactive records visually quieter.", "Prepare a public view: hide CPF and salary, pin Name, and emphasize Department." ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "capabilities", "table.agentic-authoring", "table.enableCustomization", "table.renderers.avatar", "table.renderers.badge", "table.renderers.chip", "table.formatters.currency", "assistant.session-registry", "assistant.context-snapshot", "assistant.backend-endpoint-resolution" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/praxis/config/ai/authoring/table/turn", "POST /api/praxis/config/ai/authoring/table/apply" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "table-customization-enabled", "table-ai-assistant-trigger-rendered", "table-ai-assistant-shell-opens", "quickstart-filter-response" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-response-funcionarios", "funcionarios-filter-basic" ], "pendingHttpIds": [ "ai-table-authoring-turn", "ai-table-authoring-apply" ], "notes": [ "The example intentionally enables customization at the widget input boundary so the assistant is visible without requiring the gallery-level edit toggle.", "Assistant execution is governed by @praxisui/table and @praxisui/ai; this page only declares the runtime inputs and remote resource anchor.", "The assistant receives a safe context snapshot, not raw table data dumps or arbitrary frontend patches.", "The same published quickstart funcionarios resource is used for data loading, schema discovery and capability grounding." ] }, "sourceRecipes": [ "praxis-ui-angular/projects/praxis-table/README.md", "praxis-ui-angular/projects/praxis-table/src/lib/praxis-table.json-api.md", "praxis-ui-angular/projects/praxis-ai/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "funcionariosAiTableWorkspace", "shell": { "kind": "dashboard-card", "icon": "auto_awesome", "title": "Funcionarios AI table workspace", "subtitle": "Remote table with governed assistant authoring" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "human-resources-funcionarios-ai-workspace", "componentInstanceId": "landing-dynamic-page-funcionarios-ai-table-workspace", "enableCustomization": true, "aiAssistantVoiceInputMode": "browser-speech", "aiAssistantVoiceLanguage": "pt-BR", "config": { "meta": { "idField": "id", "resourceKey": "human-resources.funcionarios", "authoringSurface": "landing.dynamic-page.funcionarios-ai-table-workspace" }, "toolbar": { "visible": true, "title": "Funcionarios", "subtitle": "Use the assistant to propose governed table changes" }, "columns": [ { "field": "avatarUrl", "header": "Avatar", "type": "string", "renderer": { "type": "avatar", "avatar": { "srcField": "avatarUrl", "altField": "nomeCompleto", "initialsField": "nomeCompleto", "shape": "circle", "size": 36 } }, "width": "88px", "sticky": "start" }, { "field": "nomeCompleto", "header": "Funcionario", "type": "string", "sticky": "start", "width": "230px" }, { "field": "email", "header": "Email", "type": "string", "width": "260px" }, { "field": "cargoNome", "header": "Cargo", "type": "string", "renderer": { "type": "chip", "chip": { "textField": "cargoNome", "variant": "outlined", "color": "primary" } }, "width": "210px" }, { "field": "departamentoNome", "header": "Departamento", "type": "string", "renderer": { "type": "badge", "badge": { "textField": "departamentoNome", "variant": "soft", "color": "accent" } }, "width": "190px" }, { "field": "salario", "header": "Salario", "type": "currency", "align": "end", "format": "BRL|symbol|2", "width": "150px" }, { "field": "dataAdmissao", "header": "Admissao", "type": "date", "format": "dd/MM/yyyy", "width": "150px" }, { "field": "ativo", "header": "Status", "type": "boolean", "align": "center", "width": "130px", "conditionalRenderers": [ { "condition": { "==": [ { "var": "ativo" }, true ] }, "renderer": { "type": "badge", "badge": { "text": "Ativo", "color": "success", "variant": "filled", "icon": "check_circle" } } }, { "condition": { "==": [ { "var": "ativo" }, false ] }, "renderer": { "type": "badge", "badge": { "text": "Inativo", "color": "warn", "variant": "outlined", "icon": "block" } } } ] } ], "behavior": { "selection": { "enabled": true, "type": "multiple" }, "pagination": { "enabled": true, "position": "both", "style": "compact", "pageSize": 10 }, "density": "compact" }, "export": { "enabled": true, "formats": [ "csv", "json" ], "general": { "includeHeaders": true, "scope": "selected", "defaultFileName": "funcionarios-ai-selected", "includeColumns": "visible", "applyFormatting": true } } } }, "outputs": { "rowClick": "emit", "selectionChange": "emit" } } } ] } } }, { "id": "employee-entity-lookup-workspace", "title": "Funcionarios - Entity Lookup", "summary": "Shows Employee Entity Lookup as a governed selection pattern: rich display for the user, stable canonical ID for persistence and surfaces for detail.", "i18n": { "pt": { "title": "Funcionários - Entity Lookup", "summary": "Mostra Entity Lookup de funcionário como padrão governado: display rico para o usuário, ID canônico persistido e superfícies de detalhe.", "demonstrates": [ "Explore Funcionários - Entity Lookup e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-form materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Mostra Entity Lookup de funcionário como padrão governado: display rico para o usuário, ID canônico persistido e superfícies de detalhe.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas funcionarios&operation=post&schemaType=request e filter." ] } }, "publicRoute": "/examples/dynamic-page/employee-entity-lookup-workspace", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-entity-lookup-workspace", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-form", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "entityLookup", "inlineEntityLookup", "optionSource", "surfaces", "rich-display", "surface.open", "praxis-list.actions", "remote-data", "capabilities" ], "tags": [ "form", "entity-lookup", "inline-entity-lookup", "option-source", "employee", "funcionarios", "surfaces", "surface-open", "modal", "rich-display", "quickstart", "ai-recipe" ], "demonstrates": [ "Funcionario selecionado como entidade governada, nao como async select criado pelo host", "Valor salvo permanece funcionarioResponsavelId enquanto o display vem da metadata do lookup", "Display directory com cargo, departamento, data de admissao, status e contador de resultados", "Selecionado renderizado como card rico com avatar, titulo, subtitulo, chips e acoes", "Acao Abrir detalhe disparando surface.open em modal com os dados da entidade selecionada", "Detalhe publicado por surface em vez de rota hardcoded na aplicacao host", "A mesma fonte de funcionarios pode alimentar formulario, filtro inline, dashboard e revisao", "Fronteiras explicitas: schema publica x-ui, option-sources/employee/options/filter busca, option-sources/employee/options/by-ids reidrata e surfaces abrem detalhe" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "schema-driven-form", "dynamic-fields.entityLookup", "dynamic-fields.inlineEntityLookup", "x-ui.optionSource", "optionSource.display.fields", "optionSource.selectionPolicy", "optionSource.byIds", "surfaces.item-detail", "surface.open", "praxis-list.actions", "remote-filter", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered?path=/api/human-resources/funcionarios&operation=post&schemaType=request", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/funcionarios/option-sources/employee/options/filter", "GET /api/human-resources/funcionarios/option-sources/employee/options/by-ids?ids=3&ids=1&ids=2", "GET /api/human-resources/funcionarios/{id}/surfaces" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "productivity", "variantFamilyId": "employee-form-workflows", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "employee-entity-lookup-field-rendered", "surface-detail-contract-declared", "employee-table-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "FuncionarioService.optionSources() is the canonical backend source for the employee lookup descriptor.", "The descriptor keeps sensitive employee fields such as CPF, salary and phone out of lookup search/display metadata.", "The public contract uses named option-source endpoints; the generic /options endpoints remain for simple id/label option lists, not governed entity lookup.", "The form field ships with a small employee seed copied from the quickstart so the public static landing remains reviewable even when remote option-source materialization lags the deployed API.", "The Angular runtime should use surface discovery for detail actions; routeTemplate and hrefTemplate are legacy fallbacks only." ] }, "sourceRecipes": [ "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/hr/service/FuncionarioService.java", "praxis-ui-angular/projects/praxis-dynamic-fields/src/lib/components/inline-entity-lookup/pdx-inline-entity-lookup.json-api.md", "praxis-ui-landing-page/src/app/data/guides/dynamic-fields/dynamic-fields-entity-lookup.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-entity-lookup-workspace.json", "documentation": { "story": { "pt": "Funcionários - Entity Lookup parte de uma necessidade operacional concreta: Mostra Entity Lookup de funcionário como padrão governado: display rico para o usuário, ID canônico persistido e superfícies de detalhe.", "en": "Funcionarios - Entity Lookup starts from a concrete operational need: Shows Employee Entity Lookup as a governed selection pattern: rich display for the user, stable canonical ID for persistence and surfaces for detail." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-dynamic-form transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-dynamic-form turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-dynamic-form", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa campos, seções, validações e ações a partir de configuração explícita.", "en": "Materializes fields, sections, validation and actions from explicit configuration." }, "rationale": { "pt": "Mantém a experiência de coleta alinhada ao contrato sem criar um formulário Angular exclusivo para o cenário.", "en": "Keeps data collection aligned with the contract without creating a scenario-specific Angular form." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.sections", "title": { "pt": "Estrutura semântica", "en": "Semantic structure" }, "explanation": { "pt": "Agrupa campos pela tarefa do usuário, não apenas pela ordem física do DTO.", "en": "Groups fields by the user task rather than only by DTO order." } }, { "jsonPath": "definition.inputs.config.fields", "title": { "pt": "Campos e controles", "en": "Fields and controls" }, "explanation": { "pt": "Materializa controles, opções e apresentação a partir da configuração e da metadata disponível.", "en": "Materializes controls, options and presentation from configuration and available metadata." } }, { "jsonPath": "definition.inputs.config.validators", "title": { "pt": "Validação da experiência", "en": "Experience validation" }, "explanation": { "pt": "Explicita restrições de entrada sem promover o frontend a fonte primária da regra de negócio.", "en": "Exposes input constraints without promoting the frontend to the primary business-rule source." } } ], "experiments": [ { "pt": "Mude um campo obrigatório ou uma condição de visibilidade e compare a validação com o JSON editado.", "en": "Change a required field or visibility condition and compare validation with the edited JSON." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/hr/service/FuncionarioService.java.", "en": "The canonical reference is published at praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/hr/service/FuncionarioService.java." } ] }, "envelope": { "id": "employee-entity-lookup-workspace", "title": "Funcionarios - Entity Lookup", "summary": "Shows Employee Entity Lookup as a governed selection pattern: rich display for the user, stable canonical ID for persistence and surfaces for detail.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-dynamic-form", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "entityLookup", "inlineEntityLookup", "optionSource", "surfaces", "rich-display", "surface.open", "praxis-list.actions", "remote-data", "capabilities" ], "tags": [ "form", "entity-lookup", "inline-entity-lookup", "option-source", "employee", "funcionarios", "surfaces", "surface-open", "modal", "rich-display", "quickstart", "ai-recipe" ], "demonstrates": [ "Funcionario selecionado como entidade governada, nao como async select criado pelo host", "Valor salvo permanece funcionarioResponsavelId enquanto o display vem da metadata do lookup", "Display directory com cargo, departamento, data de admissao, status e contador de resultados", "Selecionado renderizado como card rico com avatar, titulo, subtitulo, chips e acoes", "Acao Abrir detalhe disparando surface.open em modal com os dados da entidade selecionada", "Detalhe publicado por surface em vez de rota hardcoded na aplicacao host", "A mesma fonte de funcionarios pode alimentar formulario, filtro inline, dashboard e revisao", "Fronteiras explicitas: schema publica x-ui, option-sources/employee/options/filter busca, option-sources/employee/options/by-ids reidrata e surfaces abrem detalhe" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "schema-driven-form", "dynamic-fields.entityLookup", "dynamic-fields.inlineEntityLookup", "x-ui.optionSource", "optionSource.display.fields", "optionSource.selectionPolicy", "optionSource.byIds", "surfaces.item-detail", "surface.open", "praxis-list.actions", "remote-filter", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered?path=/api/human-resources/funcionarios&operation=post&schemaType=request", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/funcionarios/option-sources/employee/options/filter", "GET /api/human-resources/funcionarios/option-sources/employee/options/by-ids?ids=3&ids=1&ids=2", "GET /api/human-resources/funcionarios/{id}/surfaces" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "employee-entity-lookup-field-rendered", "surface-detail-contract-declared", "employee-table-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "FuncionarioService.optionSources() is the canonical backend source for the employee lookup descriptor.", "The descriptor keeps sensitive employee fields such as CPF, salary and phone out of lookup search/display metadata.", "The public contract uses named option-source endpoints; the generic /options endpoints remain for simple id/label option lists, not governed entity lookup.", "The form field ships with a small employee seed copied from the quickstart so the public static landing remains reviewable even when remote option-source materialization lags the deployed API.", "The Angular runtime should use surface discovery for detail actions; routeTemplate and hrefTemplate are legacy fallbacks only." ] }, "sourceRecipes": [ "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/hr/service/FuncionarioService.java", "praxis-ui-angular/projects/praxis-dynamic-fields/src/lib/components/inline-entity-lookup/pdx-inline-entity-lookup.json-api.md", "praxis-ui-landing-page/src/app/data/guides/dynamic-fields/dynamic-fields-entity-lookup.md" ], "page": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "deviceLayouts": { "desktop": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "widgetOverrides": { "employeeLookupForm": { "order": 10, "span": 2 }, "employeeSelectedDetail": { "order": 20, "span": 1 }, "employeeLookupContract": { "order": 30, "span": 3 }, "employeeTable": { "order": 40, "span": 3 } } }, "tablet": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" } }, "mobile": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" } } }, "widgets": [ { "key": "employeeLookupForm", "shell": { "kind": "dashboard-card", "icon": "badge", "title": "Funcionario responsavel", "subtitle": "Campo de formulario com ID persistido e display resolvido pelo backend" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "config", "apiUrlEntry", "formId", "initialValue" ], "inputs": { "formId": "employee-entity-lookup-workspace-form", "apiUrlEntry": { "fullUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api" }, "mode": "create", "initialValue": { "funcionarioResponsavelId": 194 }, "config": { "metadata": { "name": "Employee entity lookup workspace request", "version": "1.0.0" }, "sections": [ { "id": "employee-selection", "title": "Selecionar funcionario", "description": "Escolha uma pessoa real do dominio. O formulario grava somente o ID canonico; nome, cargo, departamento e detalhe sao resolvidos pela plataforma.", "appearance": "outlined", "rows": [ { "id": "employee-selection-row", "columns": [ { "id": "employee-lookup-column", "span": { "md": 12, "lg": 12 }, "fields": [ "funcionarioResponsavelId" ] } ] } ] } ], "fieldMetadata": [ { "name": "funcionarioResponsavelId", "label": "Funcionario responsavel", "placeholder": "Buscar por nome, cargo ou departamento...", "controlType": "entityLookup", "required": true, "payloadMode": "id", "optionValueKey": "value", "optionLabelKey": "label", "lookupIdKey": "id", "lookupLabelKey": "label", "lookupSubtitleKey": "subtitle", "lookupSeparator": " - ", "searchable": true, "showResultCount": false, "searchPlaceholder": "Buscar por nome, cargo ou departamento...", "options": [ { "value": { "id": 194, "label": "Sol Drax", "nomeCompleto": "Sol Drax", "cargoNome": "Agente de Segurança", "departamentoNome": "Black Mesa - Segurança", "dataAdmissao": "2022-06-13", "status": "Ativo", "subtitle": "Agente de Segurança - Black Mesa - Segurança", "badges": [ "Segurança", "Ativo" ], "detailHref": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/human-resources/funcionarios/194", "richFields": [ { "propertyPath": "cargoNome", "label": "Cargo", "value": "Agente de Segurança", "icon": "work", "presentation": "text" }, { "propertyPath": "departamentoNome", "label": "Departamento", "value": "Black Mesa - Segurança", "icon": "groups", "presentation": "chip", "tone": "info" }, { "propertyPath": "dataAdmissao", "label": "Admissao", "value": "2022-06-13", "icon": "event", "presentation": "date", "tone": "success" } ] }, "id": "194", "label": "Sol Drax", "text": "Sol Drax", "subtitle": "Agente de Segurança - Black Mesa - Segurança" }, { "value": { "id": 193, "label": "Ayla Hayes", "subtitle": "Diretor de P&D - Black Mesa - Pesquisa", "status": "Ativo", "badges": [ "Pesquisa", "Ativo" ], "detailHref": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/human-resources/funcionarios/193", "richFields": [ { "propertyPath": "cargoNome", "label": "Cargo", "value": "Diretor de P&D", "icon": "work", "presentation": "text" }, { "propertyPath": "departamentoNome", "label": "Departamento", "value": "Black Mesa - Pesquisa", "icon": "groups", "presentation": "chip", "tone": "info" }, { "propertyPath": "dataAdmissao", "label": "Admissao", "value": "2022-06-02", "icon": "event", "presentation": "date", "tone": "success" } ] }, "id": "193", "label": "Ayla Hayes", "text": "Ayla Hayes", "subtitle": "Diretor de P&D - Black Mesa - Pesquisa" }, { "value": { "id": 192, "label": "Jonah Sterling", "subtitle": "Engenheiro de Software Sênior - Capsule Corp - Engenharia", "status": "Ativo", "badges": [ "Engenharia", "Ativo" ], "detailHref": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/human-resources/funcionarios/192", "richFields": [ { "propertyPath": "cargoNome", "label": "Cargo", "value": "Engenheiro de Software Sênior", "icon": "work", "presentation": "text" }, { "propertyPath": "departamentoNome", "label": "Departamento", "value": "Capsule Corp - Engenharia", "icon": "groups", "presentation": "chip", "tone": "info" }, { "propertyPath": "dataAdmissao", "label": "Admissao", "value": "2022-05-22", "icon": "event", "presentation": "date", "tone": "success" } ] }, "id": "192", "label": "Jonah Sterling", "text": "Jonah Sterling", "subtitle": "Engenheiro de Software Sênior - Capsule Corp - Engenharia" }, { "value": { "id": 191, "label": "Ravi Almeida", "subtitle": "Cientista Chefe - Capsule Corp - P&D", "status": "Ativo", "badges": [ "P&D", "Ativo" ], "detailHref": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/human-resources/funcionarios/191", "richFields": [ { "propertyPath": "cargoNome", "label": "Cargo", "value": "Cientista Chefe", "icon": "work", "presentation": "text" }, { "propertyPath": "departamentoNome", "label": "Departamento", "value": "Capsule Corp - P&D", "icon": "groups", "presentation": "chip", "tone": "info" }, { "propertyPath": "dataAdmissao", "label": "Admissao", "value": "2022-05-11", "icon": "event", "presentation": "date", "tone": "success" } ] }, "id": "191", "label": "Ravi Almeida", "text": "Ravi Almeida", "subtitle": "Cientista Chefe - Capsule Corp - P&D" }, { "value": { "id": 190, "label": "Mira Drax", "subtitle": "Operador de Sistemas - Tyrell Corp - Operações", "status": "Ativo", "badges": [ "Operações", "Ativo" ], "detailHref": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api/human-resources/funcionarios/190", "richFields": [ { "propertyPath": "cargoNome", "label": "Cargo", "value": "Operador de Sistemas", "icon": "work", "presentation": "text" }, { "propertyPath": "departamentoNome", "label": "Departamento", "value": "Tyrell Corp - Operações", "icon": "groups", "presentation": "chip", "tone": "info" }, { "propertyPath": "dataAdmissao", "label": "Admissao", "value": "2022-04-30", "icon": "event", "presentation": "date", "tone": "success" } ] }, "id": "190", "label": "Mira Drax", "text": "Mira Drax", "subtitle": "Operador de Sistemas - Tyrell Corp - Operações" } ], "clearButton": { "enabled": true }, "optionSource": { "key": "employee", "type": "RESOURCE_ENTITY", "entityKey": "employee", "valuePropertyPath": "id", "labelPropertyPath": "nomeCompleto", "codePropertyPath": "id", "descriptionPropertyPaths": [ "cargoNome", "departamentoNome", "dataAdmissao" ], "statusPropertyPath": "ativo", "searchPropertyPaths": [ "nomeCompleto", "cargoNome", "departamentoNome" ], "searchMode": "contains", "pageSize": 25, "includeIds": true, "selectionPolicy": { "statusPropertyPath": "ativo", "selectablePropertyPath": "ativo", "allowRetainInvalidExistingValue": true, "disabledReasonTemplate": "Funcionario inativo preservado apenas para reidratacao de valores existentes." }, "capabilities": { "filter": true, "byIds": true, "detail": true, "navigateToDetail": true, "favorites": true, "auditSnapshot": true }, "detail": { "kind": "surface", "surfaceId": "view", "presentation": "drawer", "preferredWidget": "praxis-dynamic-form", "mode": "view" }, "display": { "preset": "directory", "usage": "form", "density": "comfortable", "selectedLayout": "card", "resultLayout": "list", "primaryPropertyPath": "nomeCompleto", "secondaryPropertyPaths": [ "cargoNome", "departamentoNome", "dataAdmissao" ], "badgePropertyPaths": [ "departamentoNome" ], "fields": [ { "propertyPath": "cargoNome", "label": "Cargo", "icon": "work", "presentation": "text" }, { "propertyPath": "departamentoNome", "label": "Departamento", "icon": "groups", "presentation": "chip", "tone": "info" }, { "propertyPath": "dataAdmissao", "label": "Admissao", "icon": "event", "presentation": "date", "tone": "success", "format": "date" } ], "showAvatar": true, "showCode": false, "showDescription": true, "showStatus": true, "showBadges": true, "showResultCount": false } }, "actions": { "showDetail": true, "showChange": true, "showCopyCode": true, "showClear": true }, "detailActionLabel": "Detalhe", "changeActionLabel": "Trocar", "copyCodeActionLabel": "Copiar ID", "clearActionLabel": "Limpar" } ], "actions": { "submit": { "id": "submit-employee-lookup", "label": "Enviar", "icon": "send", "visible": true, "type": "submit" }, "reset": { "id": "reset-employee-lookup", "label": "Limpar", "visible": true, "type": "reset" }, "position": "right", "placement": "afterSections" }, "submit": { "method": "post", "url": "/api/human-resources/funcionarios" } } }, "outputs": { "formSubmit": "emit", "valueChange": "emit" } } }, { "key": "employeeSelectedDetail", "shell": { "kind": "dashboard-card", "icon": "open_in_new", "title": "Detalhe do selecionado", "subtitle": "surface.open em modal para a entidade escolhida" }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "employee-selected-detail-launcher", "componentInstanceId": "dynamic-page-showcase", "config": { "id": "employee-selected-detail-launcher-config", "dataSource": { "data": [ { "id": 194, "icon": "badge", "title": "Sol Drax", "subtitle": "Agente de Segurança - Black Mesa - Segurança", "meta": "ID 194", "state": "Ativo" } ] }, "layout": { "variant": "cards", "density": "comfortable", "lines": 3, "dividers": "none", "pageSize": 1 }, "templating": { "leading": { "type": "icon", "expr": "${item.icon}" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.subtitle}" }, "meta": { "type": "chip", "expr": "${item.meta}", "variant": "outlined" }, "trailing": { "type": "chip", "expr": "${item.state}", "variant": "filled" }, "features": [ { "type": "chip", "expr": "surface.open", "variant": "outlined" }, { "type": "chip", "expr": "praxis-dynamic-form", "variant": "outlined" } ], "featuresMode": "labels-only" }, "actions": [ { "id": "open-selected-employee-detail", "icon": "open_in_new", "label": "Abrir detalhe", "kind": "button", "buttonVariant": "stroked", "globalAction": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Detalhe do funcionario", "icon": "badge", "subtitle": "Surface item-level aberta a partir do Entity Lookup", "size": { "width": "760px", "maxWidth": "92vw", "height": "580px", "maxHeight": "86vh" }, "widget": { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "selected-employee-detail-modal", "config": { "id": "selected-employee-detail-modal-config", "dataSource": { "data": [ { "id": "nome", "icon": "person", "title": "Nome", "value": "Sol Drax", "group": "Identidade" }, { "id": "cargo", "icon": "work", "title": "Cargo", "value": "Agente de Segurança", "group": "Alocacao" }, { "id": "departamento", "icon": "groups", "title": "Departamento", "value": "Black Mesa - Segurança", "group": "Alocacao" }, { "id": "admissao", "icon": "event", "title": "Admissao", "value": "13/06/2022", "group": "Historico" }, { "id": "status", "icon": "check_circle", "title": "Status", "value": "Ativo", "group": "Governanca" } ] }, "layout": { "variant": "list", "density": "comfortable", "lines": 2, "dividers": "between", "groupBy": "group", "pageSize": 8 }, "templating": { "leading": { "type": "icon", "expr": "${item.icon}" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.value}" }, "meta": { "type": "chip", "expr": "${item.group}", "variant": "outlined" }, "sectionHeader": { "type": "text", "expr": "${key}" } } } } } } }, "emitLocal": false, "showLoading": true, "placement": "trailing" } ], "ui": { "showSearch": false, "showSort": false, "showRange": false } } }, "outputs": { "itemClick": "emit", "actionClick": "emit" } } }, { "key": "employeeLookupContract", "shell": { "kind": "dashboard-card", "icon": "schema", "title": "Contrato do lookup", "subtitle": "Semantica do backend materializada pelo runtime" }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "employee-entity-lookup-contract-checklist", "config": { "id": "employee-entity-lookup-contract-checklist-config", "dataSource": { "data": [ { "id": "schema", "icon": "schema", "title": "/schemas/filtered", "detail": "Publica x-ui.optionSource para o campo de funcionario.", "state": "Contrato" }, { "id": "search", "icon": "search", "title": "options/filter", "detail": "Busca paginada por nome, cargo ou departamento.", "state": "Busca" }, { "id": "rehydrate", "icon": "restart_alt", "title": "options/by-ids", "detail": "Reidrata valores salvos sem trocar o payload canonico.", "state": "Reidratacao" }, { "id": "surface", "icon": "open_in_new", "title": "detail.kind = surface", "detail": "Abre detalhe por surface do recurso, nao por rota do host.", "state": "Detalhe" } ] }, "layout": { "variant": "list", "density": "compact", "lines": 2, "dividers": "between", "pageSize": 4 }, "templating": { "leading": { "type": "icon", "expr": "${item.icon}" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.detail}" }, "trailing": { "type": "chip", "expr": "${item.state}", "variant": "outlined" } } } } } }, { "key": "employeeTable", "shell": { "kind": "dashboard-card", "icon": "table_view", "title": "Funcionarios", "subtitle": "Tabela remota para conferir o ID selecionado contra o recurso real" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "employee-entity-lookup-workspace-table", "config": { "toolbar": { "visible": true, "title": "Funcionarios", "subtitle": "O lookup mostra a pessoa; a persistencia guarda o ID canonico.", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" } } ] }, "columns": [ { "field": "id", "header": "ID", "type": "string", "width": "88px", "sticky": "start", "renderer": { "type": "badge", "badge": { "textField": "id", "icon": "tag", "color": "primary", "variant": "soft" } } }, { "field": "nomeCompleto", "header": "Nome", "type": "string", "width": "220px" }, { "field": "cargoNome", "header": "Cargo", "type": "string", "width": "200px" }, { "field": "departamentoNome", "header": "Departamento", "type": "string", "width": "220px", "renderer": { "type": "chip", "chip": { "textField": "departamentoNome", "variant": "outlined", "color": "primary" } } }, { "field": "dataAdmissao", "header": "Admissao", "type": "date", "format": "dd/MM/yyyy", "width": "140px" }, { "field": "ativo", "header": "Status", "type": "boolean", "align": "center", "width": "130px", "conditionalRenderers": [ { "condition": { "==": [ { "var": "ativo" }, true ] }, "renderer": { "type": "badge", "badge": { "text": "Ativo", "color": "success", "variant": "filled", "icon": "check_circle" } } }, { "condition": { "==": [ { "var": "ativo" }, false ] }, "renderer": { "type": "badge", "badge": { "text": "Inativo", "color": "warn", "variant": "outlined", "icon": "block" } } } ] } ], "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "toolbarAction": "emit" } } } ] } } }, { "id": "procurement-entity-lookup-workspace", "title": "Option sources - cascading decision cockpit", "summary": "Composes purchase-order decisions with cascading option sources, governed lookups, runtime evidence and persisted canonical IDs.", "i18n": { "pt": { "title": "Option sources - cockpit de decisão em cascata", "summary": "Compõe decisões de compra com option sources em cascata, lookups governados, evidência de runtime e IDs canônicos persistidos.", "demonstrates": [ "Explore Option sources - cockpit de decisão em cascata e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-form materializa procurement/purchase-orders com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Compõe decisões de compra com option sources em cascata, lookups governados, evidência de runtime e IDs canônicos persistidos.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas purchase-orders&operation=post&schemaType=request e filter." ] } }, "publicRoute": "/examples/dynamic-page/procurement-entity-lookup-workspace", "publicUrl": "https://praxisui.dev/examples/dynamic-page/procurement-entity-lookup-workspace", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-form", "resourcePath": "procurement/purchase-orders", "resourceKey": "procurement.purchase-orders", "requires": [ "schemas.filtered", "filter", "entityLookup", "optionSource", "dependent-fields", "runtime-trace", "widget:rich-text-block", "remote-data", "capabilities" ], "tags": [ "form", "entity-lookup", "option-source", "cascading", "procurement", "decision-cockpit", "table", "quickstart", "ai-recipe" ], "demonstrates": [ "Create form fields hydrated from /schemas/filtered request metadata without a resourceId", "Company to supplier to contract to product lookup cascade using optionSource.dependsOn", "Immediate child reloads and resetOnDependentChange when a parent lookup changes", "Disabled options and retained historical values governed by selectionPolicy", "Entity lookup rows carrying label, code, description, status, disabled reason and detail navigation metadata", "Runtime evidence for endpoint, dependencyFields, identity-map omission and by-ids rehydration", "Purchase order table beside the form so agents can compare submitted IDs with loaded resource rows" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "schema-driven-form", "dynamic-fields.entityLookup", "x-ui.optionSource", "optionSource.dependsOn", "optionSource.dependencyFilterMap-policy", "optionSource.selectionPolicy", "dependencyLoadOnChange.immediate", "resetOnDependentChange", "optionSource.byIds", "remote-filter", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered?path=/api/procurement/purchase-orders&operation=post&schemaType=request", "POST /api/procurement/purchase-orders/filter", "GET /api/procurement/purchase-orders/capabilities", "POST /api/procurement/companies/option-sources/company/options/filter", "GET /api/procurement/companies/option-sources/company/options/by-ids", "POST /api/procurement/suppliers/option-sources/supplier/options/filter", "POST /api/procurement/suppliers/option-sources/supplier/options/by-ids", "POST /api/procurement/contracts/option-sources/contract/options/filter", "POST /api/procurement/contracts/option-sources/contract/options/by-ids", "POST /api/procurement/products/option-sources/product/options/filter", "POST /api/procurement/products/option-sources/product/options/by-ids" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "productivity", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "entity-lookup-fields-rendered", "dependent-option-source-contract-declared", "runtime-evidence-widget-rendered", "purchase-orders-filter-response" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "The quickstart schema publishes entityLookup controls with optionSource metadata for company, supplier, contract and product.", "The runtime keeps the submitted payload as stable IDs while the lookup endpoints provide display, status, disabled reason and navigation metadata.", "Identity dependencyFilterMap entries are intentionally omitted: when the backend filter key equals the UI field, dependsOn is sufficient." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.entity-lookup-procurement.json", "praxis-ui-landing-page/src/app/data/guides/cascading-option-sources.md", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/procurement/controller/ProcurementPurchaseOrderController.java" ], "sourcePath": "docs/examples/dynamic-page/examples/procurement-entity-lookup-workspace.json", "documentation": { "story": { "pt": "Option sources - cockpit de decisão em cascata parte de uma necessidade operacional concreta: Compõe decisões de compra com option sources em cascata, lookups governados, evidência de runtime e IDs canônicos persistidos.", "en": "Option sources - cascading decision cockpit starts from a concrete operational need: Composes purchase-order decisions with cascading option sources, governed lookups, runtime evidence and persisted canonical IDs." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-dynamic-form transforma o contrato de procurement/purchase-orders em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-dynamic-form turns the procurement/purchase-orders contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-dynamic-form", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa campos, seções, validações e ações a partir de configuração explícita.", "en": "Materializes fields, sections, validation and actions from explicit configuration." }, "rationale": { "pt": "Mantém a experiência de coleta alinhada ao contrato sem criar um formulário Angular exclusivo para o cenário.", "en": "Keeps data collection aligned with the contract without creating a scenario-specific Angular form." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.sections", "title": { "pt": "Estrutura semântica", "en": "Semantic structure" }, "explanation": { "pt": "Agrupa campos pela tarefa do usuário, não apenas pela ordem física do DTO.", "en": "Groups fields by the user task rather than only by DTO order." } }, { "jsonPath": "definition.inputs.config.fields", "title": { "pt": "Campos e controles", "en": "Fields and controls" }, "explanation": { "pt": "Materializa controles, opções e apresentação a partir da configuração e da metadata disponível.", "en": "Materializes controls, options and presentation from configuration and available metadata." } }, { "jsonPath": "definition.inputs.config.validators", "title": { "pt": "Validação da experiência", "en": "Experience validation" }, "explanation": { "pt": "Explicita restrições de entrada sem promover o frontend a fonte primária da regra de negócio.", "en": "Exposes input constraints without promoting the frontend to the primary business-rule source." } } ], "experiments": [ { "pt": "Mude um campo obrigatório ou uma condição de visibilidade e compare a validação com o JSON editado.", "en": "Change a required field or visibility condition and compare validation with the edited JSON." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.entity-lookup-procurement.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.entity-lookup-procurement.json." } ] }, "envelope": { "id": "procurement-entity-lookup-workspace", "title": "Option sources - cascading decision cockpit", "summary": "Composes purchase-order decisions with cascading option sources, governed lookups, runtime evidence and persisted canonical IDs.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-dynamic-form", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "procurement/purchase-orders", "resourceKey": "procurement.purchase-orders" }, "requires": [ "schemas.filtered", "filter", "entityLookup", "optionSource", "dependent-fields", "runtime-trace", "widget:rich-text-block", "remote-data", "capabilities" ], "tags": [ "form", "entity-lookup", "option-source", "cascading", "procurement", "decision-cockpit", "table", "quickstart", "ai-recipe" ], "demonstrates": [ "Create form fields hydrated from /schemas/filtered request metadata without a resourceId", "Company to supplier to contract to product lookup cascade using optionSource.dependsOn", "Immediate child reloads and resetOnDependentChange when a parent lookup changes", "Disabled options and retained historical values governed by selectionPolicy", "Entity lookup rows carrying label, code, description, status, disabled reason and detail navigation metadata", "Runtime evidence for endpoint, dependencyFields, identity-map omission and by-ids rehydration", "Purchase order table beside the form so agents can compare submitted IDs with loaded resource rows" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "schema-driven-form", "dynamic-fields.entityLookup", "x-ui.optionSource", "optionSource.dependsOn", "optionSource.dependencyFilterMap-policy", "optionSource.selectionPolicy", "dependencyLoadOnChange.immediate", "resetOnDependentChange", "optionSource.byIds", "remote-filter", "capabilities" ], "backendSurfaces": [ "GET /schemas/filtered?path=/api/procurement/purchase-orders&operation=post&schemaType=request", "POST /api/procurement/purchase-orders/filter", "GET /api/procurement/purchase-orders/capabilities", "POST /api/procurement/companies/option-sources/company/options/filter", "GET /api/procurement/companies/option-sources/company/options/by-ids", "POST /api/procurement/suppliers/option-sources/supplier/options/filter", "POST /api/procurement/suppliers/option-sources/supplier/options/by-ids", "POST /api/procurement/contracts/option-sources/contract/options/filter", "POST /api/procurement/contracts/option-sources/contract/options/by-ids", "POST /api/procurement/products/option-sources/product/options/filter", "POST /api/procurement/products/option-sources/product/options/by-ids" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "entity-lookup-fields-rendered", "dependent-option-source-contract-declared", "runtime-evidence-widget-rendered", "purchase-orders-filter-response" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "The quickstart schema publishes entityLookup controls with optionSource metadata for company, supplier, contract and product.", "The runtime keeps the submitted payload as stable IDs while the lookup endpoints provide display, status, disabled reason and navigation metadata.", "Identity dependencyFilterMap entries are intentionally omitted: when the backend filter key equals the UI field, dependsOn is sufficient." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.entity-lookup-procurement.json", "praxis-ui-landing-page/src/app/data/guides/cascading-option-sources.md", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/procurement/controller/ProcurementPurchaseOrderController.java" ], "page": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "deviceLayouts": { "desktop": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "widgetOverrides": { "purchaseOrderForm": { "order": 10, "span": 2 }, "cascadeRuntimeTrace": { "order": 20, "span": 1 }, "purchaseOrdersTable": { "order": 30, "span": 3 } } }, "tablet": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" } }, "mobile": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" } } }, "widgets": [ { "key": "purchaseOrderForm", "shell": { "kind": "dashboard-card", "icon": "account_tree", "title": "Purchase order cascade", "subtitle": "Company, supplier, contract and product from optionSource metadata" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "config", "apiUrlEntry", "formId", "initialValue" ], "inputs": { "formId": "procurement-purchase-order-entity-lookup", "apiUrlEntry": { "fullUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api" }, "mode": "create", "initialValue": { "companyId": 1, "supplierId": 10, "contractId": 20, "productId": 30, "orderDate": "2026-04-15", "currency": "BRL", "quantity": 2 }, "config": { "metadata": { "name": "Purchase order entity lookup request", "version": "1.0.0" }, "sections": [ { "id": "commercial-context", "title": "Commercial context", "description": "Choose the company first; downstream entity lookups receive dependency filters from form state.", "appearance": "outlined", "rows": [ { "id": "commercial-context-row", "columns": [ { "id": "company-column", "span": { "md": 6, "lg": 6 }, "fields": [ "companyId", "orderDate" ] }, { "id": "currency-column", "span": { "md": 6, "lg": 6 }, "fields": [ "currency", "quantity" ] } ] } ] }, { "id": "purchase-entities", "title": "Purchase entities", "description": "Supplier, contract and product are governed RESOURCE_ENTITY lookups with status policy and detail navigation metadata.", "appearance": "outlined", "rows": [ { "id": "purchase-entities-row-1", "columns": [ { "id": "supplier-column", "span": { "md": 6, "lg": 6 }, "fields": [ "supplierId" ] }, { "id": "contract-column", "span": { "md": 6, "lg": 6 }, "fields": [ "contractId" ] } ] }, { "id": "purchase-entities-row-2", "columns": [ { "id": "product-column", "span": { "md": 12, "lg": 12 }, "fields": [ "productId" ] } ] } ] } ], "fieldMetadata": [ { "name": "companyId", "label": "Empresa", "controlType": "entityLookup", "required": true, "endpoint": "/api/procurement/companies/option-sources/company/options/filter", "displayField": "label", "valueField": "id", "optionSource": { "key": "company", "type": "RESOURCE_ENTITY", "entityKey": "company", "resourcePath": "/api/procurement/companies", "valuePropertyPath": "id", "labelPropertyPath": "legalName", "codePropertyPath": "code", "descriptionPropertyPaths": [ "documentNumber", "city", "state" ], "statusPropertyPath": "status", "disabledReasonPropertyPath": "disabledReason", "searchPropertyPaths": [ "code", "legalName", "documentNumber" ], "searchMode": "contains", "pageSize": 25, "includeIds": true, "selectionPolicy": { "statusPropertyPath": "status", "allowedStatuses": [ "ACTIVE" ], "blockedStatuses": [ "INACTIVE", "BLOCKED" ], "allowRetainInvalidExistingValue": true }, "capabilities": { "filter": true, "byIds": true, "detail": true, "navigateToDetail": true, "auditSnapshot": true }, "detail": { "hrefTemplate": "/api/procurement/companies/{id}", "routeTemplate": "/procurement/companies/{id}", "openDetailMode": "route" } } }, { "name": "supplierId", "label": "Fornecedor", "controlType": "entityLookup", "required": true, "endpoint": "/api/procurement/suppliers/option-sources/supplier/options/filter", "displayField": "label", "valueField": "id", "dependentField": "companyId", "dependencyLoadOnChange": "immediate", "resetOnDependentChange": true, "optionSource": { "key": "supplier", "type": "RESOURCE_ENTITY", "entityKey": "supplier", "resourcePath": "/api/procurement/suppliers", "filterField": "supplierId", "dependsOn": [ "companyId" ], "valuePropertyPath": "id", "labelPropertyPath": "legalName", "codePropertyPath": "code", "descriptionPropertyPaths": [ "documentNumber", "homologationStatus", "riskLevel" ], "statusPropertyPath": "status", "disabledReasonPropertyPath": "disabledReason", "searchPropertyPaths": [ "code", "legalName", "documentNumber" ], "searchMode": "contains", "pageSize": 25, "includeIds": true, "selectionPolicy": { "statusPropertyPath": "status", "allowedStatuses": [ "ACTIVE", "APPROVED" ], "blockedStatuses": [ "INACTIVE", "BLOCKED" ], "allowRetainInvalidExistingValue": true }, "capabilities": { "filter": true, "byIds": true, "detail": true, "navigateToDetail": true, "auditSnapshot": true }, "detail": { "hrefTemplate": "/api/procurement/suppliers/{id}", "routeTemplate": "/procurement/suppliers/{id}", "openDetailMode": "route" } } }, { "name": "contractId", "label": "Contrato", "controlType": "entityLookup", "endpoint": "/api/procurement/contracts/option-sources/contract/options/filter", "displayField": "label", "valueField": "id", "dependentField": "supplierId", "dependencyLoadOnChange": "immediate", "resetOnDependentChange": true, "optionSource": { "key": "contract", "type": "RESOURCE_ENTITY", "entityKey": "contract", "resourcePath": "/api/procurement/contracts", "filterField": "contractId", "dependsOn": [ "companyId", "supplierId" ], "valuePropertyPath": "id", "labelPropertyPath": "number", "descriptionPropertyPaths": [ "supplierName", "validUntil", "currency" ], "statusPropertyPath": "status", "disabledReasonPropertyPath": "disabledReason", "searchPropertyPaths": [ "number", "supplierName", "currency" ], "searchMode": "contains", "pageSize": 25, "includeIds": true, "selectionPolicy": { "statusPropertyPath": "status", "allowedStatuses": [ "ACTIVE", "SIGNED" ], "blockedStatuses": [ "EXPIRED", "CANCELLED" ], "allowRetainInvalidExistingValue": true }, "capabilities": { "filter": true, "byIds": true, "detail": true, "navigateToDetail": true, "auditSnapshot": true }, "detail": { "hrefTemplate": "/api/procurement/contracts/{id}", "routeTemplate": "/procurement/contracts/{id}", "openDetailMode": "route" } } }, { "name": "productId", "label": "Produto", "controlType": "entityLookup", "required": true, "endpoint": "/api/procurement/products/option-sources/product/options/filter", "displayField": "label", "valueField": "id", "dependentField": "contractId", "dependencyLoadOnChange": "immediate", "resetOnDependentChange": true, "optionSource": { "key": "product", "type": "RESOURCE_ENTITY", "entityKey": "product", "resourcePath": "/api/procurement/products", "filterField": "productId", "dependsOn": [ "companyId", "contractId" ], "valuePropertyPath": "id", "labelPropertyPath": "name", "codePropertyPath": "sku", "descriptionPropertyPaths": [ "categoryName", "stockAvailable", "unitOfMeasure" ], "statusPropertyPath": "status", "disabledReasonPropertyPath": "disabledReason", "searchPropertyPaths": [ "sku", "name", "categoryName" ], "searchMode": "contains", "pageSize": 25, "includeIds": true, "selectionPolicy": { "statusPropertyPath": "status", "allowedStatuses": [ "ACTIVE", "AVAILABLE" ], "blockedStatuses": [ "INACTIVE", "BLOCKED" ], "allowRetainInvalidExistingValue": true }, "capabilities": { "filter": true, "byIds": true, "detail": true, "navigateToDetail": true, "auditSnapshot": true }, "detail": { "hrefTemplate": "/api/procurement/products/{id}", "routeTemplate": "/procurement/products/{id}", "openDetailMode": "route" } } }, { "name": "orderDate", "label": "Data do pedido", "controlType": "date" }, { "name": "currency", "label": "Moeda", "controlType": "select", "options": [ { "label": "BRL", "value": "BRL" }, { "label": "USD", "value": "USD" } ] }, { "name": "quantity", "label": "Quantidade", "controlType": "numericTextBox", "validators": { "min": 1 } } ], "actions": { "submit": { "id": "submit-purchase-order", "label": "Create purchase order", "icon": "shopping_cart_checkout", "visible": true, "type": "submit" }, "reset": { "id": "reset-purchase-order", "label": "Reset", "visible": true, "type": "reset" }, "position": "right", "placement": "afterSections" }, "submit": { "method": "post", "url": "/api/procurement/purchase-orders" } } }, "outputs": { "formSubmit": "emit", "valueChange": "emit" } } }, { "key": "cascadeRuntimeTrace", "shell": { "kind": "dashboard-card", "icon": "route", "title": "Runtime trace", "subtitle": "Contract fields the Angular runtime executes" }, "definition": { "id": "widget:rich-text-block", "inputs": { "title": "Cascading option-source contract", "content": "Supplier observes companyId and posts to /api/procurement/suppliers/option-sources/supplier/options/filter. Contract observes companyId and supplierId. Product observes companyId and contractId. The mapper derives dependencyFields from optionSource.dependsOn, immediate reloads refresh child options, resetOnDependentChange clears stale choices, and by-ids rehydrates the initial IDs without changing the submitted payload. Because these filters use the same field names as the UI, dependencyFilterMap is intentionally omitted; use it only for divergent keys such as universo -> universoContexto.", "variant": "emphasis" } } }, { "key": "purchaseOrdersTable", "shell": { "kind": "dashboard-card", "icon": "receipt_long", "title": "Purchase orders", "subtitle": "Remote filter table with the persisted entity IDs" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "procurement/purchase-orders", "tableId": "procurement-purchase-orders-entity-lookup", "config": { "toolbar": { "visible": true, "title": "Purchase orders", "subtitle": "Compare lookup selections with saved canonical IDs", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "procurement/purchase-orders", "resourceKey": "procurement.purchase-orders" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "procurement/purchase-orders", "resourceKey": "procurement.purchase-orders" } } ] }, "columns": [ { "field": "id", "header": "ID", "type": "number", "width": "88px", "sticky": "start" }, { "field": "companyId", "header": "Company", "type": "badge", "width": "128px" }, { "field": "supplierId", "header": "Supplier", "type": "badge", "width": "128px" }, { "field": "contractId", "header": "Contract", "type": "badge", "width": "128px" }, { "field": "productId", "header": "Product", "type": "badge", "width": "128px" }, { "field": "orderDate", "header": "Order date", "type": "date", "width": "148px" }, { "field": "currency", "header": "Currency", "type": "chip", "width": "120px" }, { "field": "quantity", "header": "Qty", "type": "number", "align": "end", "width": "96px" } ], "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "toolbarAction": "emit" } } } ] } } }, { "id": "files-upload-evidence-flow", "title": "Files Upload - evidence flow", "summary": "Frames file upload as a governed evidence intake flow with explicit policy, validation, metadata capture and host-owned API boundaries.", "i18n": { "pt": { "title": "Files Upload - fluxo de evidências", "summary": "Trata upload como fluxo governado de evidências com política, validação, metadata e fronteira explícita da API do host.", "demonstrates": [ "Explore Files Upload - fluxo de evidências e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-files-upload materializa files/evidence com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Trata upload como fluxo governado de evidências com política, validação, metadata e fronteira explícita da API do host.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-files-upload.config, praxis-files-upload.baseUrl.", "Verifique a conexão com as evidências canônicas config e upload." ] } }, "publicRoute": "/examples/dynamic-page/files-upload-evidence-flow", "publicUrl": "https://praxisui.dev/examples/dynamic-page/files-upload-evidence-flow", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-files-upload", "resourcePath": "files/evidence", "resourceKey": "files.evidence", "requires": [ "praxis-files-upload.config", "filesUploadId", "baseUrl", "upload.events", "upload.validation", "upload.metadata", "host-files-api" ], "tags": [ "files-upload", "evidence", "validation", "metadata", "host-api", "events", "ai-recipe" ], "demonstrates": [ "Host-owned files API boundary through baseUrl while the upload contract stays component-owned", "Direct strategy with manual upload, metadata form, conflict policy selector and progress feedback", "Client-side validation for file type, per-file size, batch size and batch count", "Backend-facing options for allowed extensions, MIME types, virus scanning and target directory", "Upload lifecycle outputs exposed to Dynamic Page: uploadStart, uploadProgress, uploadSuccess, bulkComplete and error" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-files-upload.config", "praxis-files-upload.baseUrl", "praxis-files-upload.validation", "praxis-files-upload.backend-options", "praxis-files-upload.bulk-policy", "praxis-files-upload.rateLimit", "praxis-files-upload.quotas", "widget:rich-text-block", "praxis-list.local-evidence-log" ], "backendSurfaces": [ "Host files API: GET {baseUrl}/config", "Host files API: POST {baseUrl}/upload", "Host files API: POST {baseUrl}/bulk", "Host files API: POST {baseUrl}/upload/presign?filename=...", "praxis-ui-angular/projects/praxis-files-upload/docs/host-files-upload-integration.md", "praxis-ui-angular/projects/praxis-files-upload/src/lib/models/index.ts" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "productivity", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-files-upload-rendered", "upload-policy-visible", "evidence-context-rendered", "upload-events-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the published quickstart currently does not expose a files controller.", "The baseUrl input is intentionally explicit: production hosts must provide a Praxis-compatible files API at that boundary.", "The component will fetch {baseUrl}/config when available and falls back to the local config if the host endpoint is absent." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.files-upload-evidence-flow.json", "praxis-ui-angular/examples/ai-recipes/praxis-files-upload.json", "praxis-ui-angular/projects/praxis-files-upload/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/files-upload-evidence-flow.json", "documentation": { "story": { "pt": "Files Upload - fluxo de evidências parte de uma necessidade operacional concreta: Trata upload como fluxo governado de evidências com política, validação, metadata e fronteira explícita da API do host.", "en": "Files Upload - evidence flow starts from a concrete operational need: Frames file upload as a governed evidence intake flow with explicit policy, validation, metadata capture and host-owned API boundaries." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-files-upload transforma o contrato de files/evidence em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-files-upload turns the files/evidence contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-files-upload", "jsonPath": "page.widgets[].definition", "role": { "pt": "Coleta arquivos e explicita políticas, estado e integração com a API de evidências.", "en": "Collects files and exposes policies, state and evidence API integration." }, "rationale": { "pt": "Mantém a fronteira de upload pertencente ao host, sem esconder segurança ou persistência em um exemplo visual.", "en": "Keeps the upload boundary owned by the host instead of hiding security or persistence in a visual example." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-files-upload ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-files-upload to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." } } ], "experiments": [ { "pt": "Ajuste tipos ou quantidade de arquivos aceitos e confirme como a política aparece antes do envio.", "en": "Adjust accepted file types or count and confirm how policy appears before upload." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.files-upload-evidence-flow.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.files-upload-evidence-flow.json." } ] }, "envelope": { "id": "files-upload-evidence-flow", "title": "Files Upload - evidence flow", "summary": "Frames file upload as a governed evidence intake flow with explicit policy, validation, metadata capture and host-owned API boundaries.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-files-upload", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/files-upload" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "files/evidence", "resourceKey": "files.evidence" }, "requires": [ "praxis-files-upload.config", "filesUploadId", "baseUrl", "upload.events", "upload.validation", "upload.metadata", "host-files-api" ], "tags": [ "files-upload", "evidence", "validation", "metadata", "host-api", "events", "ai-recipe" ], "demonstrates": [ "Host-owned files API boundary through baseUrl while the upload contract stays component-owned", "Direct strategy with manual upload, metadata form, conflict policy selector and progress feedback", "Client-side validation for file type, per-file size, batch size and batch count", "Backend-facing options for allowed extensions, MIME types, virus scanning and target directory", "Upload lifecycle outputs exposed to Dynamic Page: uploadStart, uploadProgress, uploadSuccess, bulkComplete and error" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-files-upload.config", "praxis-files-upload.baseUrl", "praxis-files-upload.validation", "praxis-files-upload.backend-options", "praxis-files-upload.bulk-policy", "praxis-files-upload.rateLimit", "praxis-files-upload.quotas", "widget:rich-text-block", "praxis-list.local-evidence-log" ], "backendSurfaces": [ "Host files API: GET {baseUrl}/config", "Host files API: POST {baseUrl}/upload", "Host files API: POST {baseUrl}/bulk", "Host files API: POST {baseUrl}/upload/presign?filename=...", "praxis-ui-angular/projects/praxis-files-upload/docs/host-files-upload-integration.md", "praxis-ui-angular/projects/praxis-files-upload/src/lib/models/index.ts" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-files-upload-rendered", "upload-policy-visible", "evidence-context-rendered", "upload-events-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the published quickstart currently does not expose a files controller.", "The baseUrl input is intentionally explicit: production hosts must provide a Praxis-compatible files API at that boundary.", "The component will fetch {baseUrl}/config when available and falls back to the local config if the host endpoint is absent." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.files-upload-evidence-flow.json", "praxis-ui-angular/examples/ai-recipes/praxis-files-upload.json", "praxis-ui-angular/projects/praxis-files-upload/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 2, "gap": "16px" }, "widgets": [ { "key": "missionEvidenceUpload", "shell": { "kind": "dashboard-card", "icon": "upload_file", "title": "Mission evidence intake", "subtitle": "Manual upload, metadata, validation and host API boundary" }, "definition": { "id": "praxis-files-upload", "bindingOrder": [ "filesUploadId", "baseUrl", "displayMode", "config", "context" ], "inputs": { "filesUploadId": "mission-evidence-upload", "componentInstanceId": "dynamic-page-showcase", "baseUrl": "/api/files", "displayMode": "full", "enableCustomization": true, "context": { "resourceKey": "operations.missoes", "resourcePath": "operations/missoes", "evidenceScope": "mission-review" }, "config": { "strategy": "direct", "ui": { "showDropzone": true, "accept": [ "application/pdf", "image/png", "image/jpeg", ".pdf", ".png", ".jpg" ], "dense": false, "showConflictPolicySelector": true, "showMetadataForm": true, "showProgress": true, "manualUpload": true, "dropzone": { "expandOnDragProximity": true, "proximityPx": 96, "expandMode": "inline", "expandHeight": 180, "expandDebounceMs": 120 }, "list": { "collapseAfter": 4, "detailsMode": "card", "detailsShowTechnical": true, "detailsFields": [ "id", "fileName", "contentType", "fileSize", "uploadedAt", "scanStatus" ] } }, "limits": { "maxFileSizeBytes": 10485760, "maxFilesPerBulk": 6, "maxBulkSizeBytes": 52428800 }, "options": { "defaultConflictPolicy": "MAKE_UNIQUE", "strictValidation": true, "maxUploadSizeMb": 10, "allowedExtensions": [ "pdf", "png", "jpg", "jpeg" ], "acceptMimeTypes": [ "application/pdf", "image/png", "image/jpeg" ], "targetDirectory": "mission-evidence", "enableVirusScanning": true }, "bulk": { "failFast": false, "parallelUploads": 2, "retryCount": 2, "retryBackoffMs": 600 }, "quotas": { "showQuotaWarnings": true, "blockOnExceed": true }, "rateLimit": { "autoRetryOn429": true, "showBannerOn429": true, "maxAutoRetry": 2, "baseBackoffMs": 1000 }, "headers": { "tenantHeader": "X-Tenant-Id", "userHeader": "X-User-Id" }, "messages": { "successSingle": "Evidence uploaded and ready for review.", "successBulk": "Evidence batch processed.", "errors": { "QUOTA_EXCEEDED": "Evidence quota reached for this mission.", "TIPO_ARQUIVO_INVALIDO": "Only PDF, PNG and JPEG evidence is accepted.", "FILE_TOO_LARGE": "Evidence file exceeds the 10 MB limit." } } } }, "outputs": { "uploadStart": "emit", "uploadProgress": "emit", "uploadSuccess": "emit", "bulkComplete": "emit", "error": "emit", "rateLimited": "emit", "pendingStateChange": "emit", "retry": "emit", "download": "emit", "copyLink": "emit", "detailsOpened": "emit", "detailsClosed": "emit" } } }, { "key": "evidencePolicyNotes", "shell": { "kind": "dashboard-card", "icon": "policy", "title": "Evidence policy", "subtitle": "Host API contract and review rules" }, "definition": { "id": "widget:rich-text-block", "inputs": { "title": "Files are a governed host boundary", "content": "The upload component owns validation, feedback, retry, quota and event semantics. The host owns the files API at baseUrl and must return the Praxis success, partial_success and failure envelopes documented by @praxisui/files-upload.", "variant": "emphasis" } } }, { "key": "evidenceReviewChecklist", "shell": { "kind": "dashboard-card", "icon": "fact_check", "title": "Review checklist", "subtitle": "Local evidence states for the intake team" }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "mission-evidence-review-checklist", "config": { "id": "mission-evidence-review-checklist-config", "dataSource": { "data": [ { "id": 1, "title": "Mission order signed", "owner": "Operations", "status": "Required", "priority": "P0" }, { "id": 2, "title": "Participant authorization", "owner": "Human Resources", "status": "Required", "priority": "P0" }, { "id": 3, "title": "After-action evidence", "owner": "Field team", "status": "Optional", "priority": "P2" } ] }, "layout": { "variant": "list", "density": "comfortable", "lines": 3, "dividers": "between", "pageSize": 5, "rowLayout": { "type": "grid", "columns": [ { "slot": "leading", "width": "40px", "align": "center" }, { "slot": "primary", "width": "minmax(180px, 1.4fr)" }, { "slot": "secondary", "width": "minmax(130px, 1fr)" }, { "slot": "trailing", "width": "96px", "align": "center", "justify": "end" } ], "gap": "12px", "align": "center" } }, "selection": { "mode": "multiple", "compareBy": "id", "return": "id" }, "templating": { "leading": { "type": "icon", "expr": "verified" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.owner}" }, "trailing": { "type": "chip", "expr": "${item.status}", "variant": "outlined" } }, "ui": { "showSearch": false, "showSort": false, "showRange": false } } }, "outputs": { "itemClick": "emit", "selectionChange": "emit" } } } ] } } }, { "id": "mission-team-editable-collection-form", "title": "Mission team - editable collection form", "summary": "Renders the mission team-plan action as an editable collection form, proving complex array input can come from the action contract.", "i18n": { "pt": { "title": "Equipe de missão - coleção editável", "summary": "Renderiza a ação team-plan como formulário com coleção editável, mostrando arrays complexos vindos do contrato da ação.", "demonstrates": [ "Explore Equipe de missão - coleção editável e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como pdx-editable-collection materializa operations/missoes/1/team-plan com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Renderiza a ação team-plan como formulário com coleção editável, mostrando arrays complexos vindos do contrato da ação.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered?schemaType=request e 1." ] } }, "publicRoute": "/examples/dynamic-page/mission-team-editable-collection-form", "publicUrl": "https://praxisui.dev/examples/dynamic-page/mission-team-editable-collection-form", "category": "feature", "mode": "authored-customizable", "primaryComponent": "pdx-editable-collection", "resourcePath": "operations/missoes/1/team-plan", "resourceKey": "operations.missoes", "requires": [ "schemas.filtered", "ui-surface.partial-form", "dynamic-form.fieldMetadata", "dynamic-fields.array", "dynamic-fields.editable-collection", "array.itemSchemaRef", "array.collectionValidation", "remote-options", "resource-action" ], "tags": [ "dynamic-form", "dynamic-fields", "array-field", "editable-collection", "partial-form", "mission-team", "quickstart", "ai-recipe" ], "demonstrates": [ "Backend-authored x-ui.array contract mirrored in praxis-dynamic-form metadata", "Editable Collection cards with add, edit and remove operations", "Nested item fields for funcionario lookup, role, order and principal toggle", "Collection validators for unique funcionarioId and exactly one principal participant", "Item identity preservation through array.itemIdentityField and removeFromPayload delete mode" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "ui-surface.partial-form", "resource-action.team-plan", "dynamic-form.FormArray", "dynamic-fields.ARRAY_INPUT", "pdx-editable-collection", "array.itemSchemaRef", "array.itemSchema.fields", "array.collectionValidation.uniqueBy", "array.collectionValidation.exactlyOne", "remote-options" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=request", "GET /api/operations/missoes/1", "PATCH /api/operations/missoes/{id}/team-plan", "POST /api/human-resources/funcionarios/options/filter", "GET /api/human-resources/funcionarios/options/by-ids", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/operations/dto/PlanejarEquipeMissaoDTO.java", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/operations/dto/PlanejarEquipeMissaoParticipanteDTO.java" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "productivity", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "pdx-editable-collection-rendered", "array-card-items-rendered", "collection-validation-configured", "quickstart-action-schema-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-request-missao-team-plan", "missoes-team-plan-patch" ], "pendingHttpIds": [], "notes": [ "The Java quickstart owns the action schema through UiSurface(PARTIAL_FORM) and PlanejarEquipeMissaoDTO.", "The landing example renders a local mirror of that x-ui.array contract while the public Render deploy and HTTP corpus catch up." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.editable-collection-form.json" ], "sourcePath": "docs/examples/dynamic-page/examples/mission-team-editable-collection-form.json", "documentation": { "story": { "pt": "Equipe de missão - coleção editável parte de uma necessidade operacional concreta: Renderiza a ação team-plan como formulário com coleção editável, mostrando arrays complexos vindos do contrato da ação.", "en": "Mission team - editable collection form starts from a concrete operational need: Renders the mission team-plan action as an editable collection form, proving complex array input can come from the action contract." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como pdx-editable-collection transforma o contrato de operations/missoes/1/team-plan em um resultado navegável no runtime.", "en": "When you open the example, follow how pdx-editable-collection turns the operations/missoes/1/team-plan contract into a navigable runtime result." }, "componentRoles": [ { "component": "pdx-editable-collection", "jsonPath": "page.widgets[].definition", "role": { "pt": "Edita itens repetíveis e arrays complexos preservando validação por elemento.", "en": "Edits repeatable items and complex arrays while preserving per-item validation." }, "rationale": { "pt": "Representa coleções do contrato sem transformar cada item em um formulário artesanal no host.", "en": "Represents contract collections without turning every item into a hand-built host form." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega pdx-editable-collection ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands pdx-editable-collection to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." } } ], "experiments": [ { "pt": "Adicione e reordene itens, depois inspecione como a coleção permanece estruturada no valor do formulário.", "en": "Add and reorder items, then inspect how the collection remains structured in the form value." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.editable-collection-form.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.editable-collection-form.json." } ] }, "envelope": { "id": "mission-team-editable-collection-form", "title": "Mission team - editable collection form", "summary": "Renders the mission team-plan action as an editable collection form, proving complex array input can come from the action contract.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "pdx-editable-collection", "runtime": { "mode": "authored-customizable", "minPraxisUiPackage": "@praxisui/dynamic-fields" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missoes/1/team-plan", "resourceKey": "operations.missoes" }, "requires": [ "schemas.filtered", "ui-surface.partial-form", "dynamic-form.fieldMetadata", "dynamic-fields.array", "dynamic-fields.editable-collection", "array.itemSchemaRef", "array.collectionValidation", "remote-options", "resource-action" ], "tags": [ "dynamic-form", "dynamic-fields", "array-field", "editable-collection", "partial-form", "mission-team", "quickstart", "ai-recipe" ], "demonstrates": [ "Backend-authored x-ui.array contract mirrored in praxis-dynamic-form metadata", "Editable Collection cards with add, edit and remove operations", "Nested item fields for funcionario lookup, role, order and principal toggle", "Collection validators for unique funcionarioId and exactly one principal participant", "Item identity preservation through array.itemIdentityField and removeFromPayload delete mode" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "ui-surface.partial-form", "resource-action.team-plan", "dynamic-form.FormArray", "dynamic-fields.ARRAY_INPUT", "pdx-editable-collection", "array.itemSchemaRef", "array.itemSchema.fields", "array.collectionValidation.uniqueBy", "array.collectionValidation.exactlyOne", "remote-options" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=request", "GET /api/operations/missoes/1", "PATCH /api/operations/missoes/{id}/team-plan", "POST /api/human-resources/funcionarios/options/filter", "GET /api/human-resources/funcionarios/options/by-ids", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/operations/dto/PlanejarEquipeMissaoDTO.java", "praxis-api-quickstart/src/main/java/com/example/praxis/apiquickstart/operations/dto/PlanejarEquipeMissaoParticipanteDTO.java" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-dynamic-form-rendered", "pdx-editable-collection-rendered", "array-card-items-rendered", "collection-validation-configured", "quickstart-action-schema-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [ "filtered-schema-request-missao-team-plan", "missoes-team-plan-patch" ], "pendingHttpIds": [], "notes": [ "The Java quickstart owns the action schema through UiSurface(PARTIAL_FORM) and PlanejarEquipeMissaoDTO.", "The landing example renders a local mirror of that x-ui.array contract while the public Render deploy and HTTP corpus catch up." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.editable-collection-form.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "missionTeamEditableCollectionForm", "shell": { "kind": "dashboard-card", "icon": "groups", "title": "Mission team plan", "subtitle": "Editable Collection from the quickstart team-plan action" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "config", "formId", "initialValue", "submitUrl", "submitMethod" ], "inputs": { "formId": "operations-missoes-team-plan", "mode": "edit", "submitUrl": "/api/operations/missoes/1/team-plan", "submitMethod": "patch", "initialValue": { "participantes": [ { "id": 2, "funcionarioId": 2, "funcionarioNome": "Ayla Hayes", "papel": "LIDER", "ordem": 1, "principal": true }, { "id": 5, "funcionarioId": 5, "funcionarioNome": "Tomas Hayes", "papel": "TECNICO", "ordem": 2, "principal": false }, { "id": 8, "funcionarioId": 8, "funcionarioNome": "Zara Hayes", "papel": "MEDICO", "ordem": 3, "principal": false } ] }, "config": { "metadata": { "name": "Mission team planning request", "version": "1.0.0" }, "sections": [ { "id": "team-plan", "title": "Team plan", "description": "Edit the mission participant collection published by the quickstart team-plan action schema.", "appearance": "outlined", "rows": [ { "id": "team-plan-row", "columns": [ { "id": "team-plan-main", "span": { "md": 12, "lg": 12 }, "fields": [ "participantes" ] } ] } ] } ], "fieldMetadata": [ { "name": "participantes", "label": "Participantes", "controlType": "array", "type": "array", "required": true, "defaultValue": [ { "id": 2, "funcionarioId": 2, "funcionarioNome": "Ayla Hayes", "papel": "LIDER", "ordem": 1, "principal": true }, { "id": 5, "funcionarioId": 5, "funcionarioNome": "Tomas Hayes", "papel": "TECNICO", "ordem": 2, "principal": false }, { "id": 8, "funcionarioId": 8, "funcionarioNome": "Zara Hayes", "papel": "MEDICO", "ordem": 3, "principal": false } ], "array": { "itemType": "object", "mode": "cards", "itemSchemaRef": "#/components/schemas/PlanejarEquipeMissaoParticipanteDTO", "itemIdentityField": "id", "minItems": 1, "maxItems": 12, "addLabel": "Adicionar participante", "emptyState": "Nenhum participante planejado", "itemTitleTemplate": "{{funcionarioNome}} - {{papel}}", "deleteMode": "removeFromPayload", "operations": { "add": true, "edit": true, "remove": true }, "collectionValidation": { "uniqueBy": [ "funcionarioId" ], "exactlyOne": { "field": "principal", "value": true, "message": "Defina exatamente um participante principal." } }, "itemSchema": { "fields": [ { "name": "id", "label": "ID", "controlType": "numericTextBox", "readOnly": true, "hidden": true }, { "name": "funcionarioId", "label": "Funcionario", "controlType": "asyncSelect", "required": true, "endpoint": "/api/human-resources/funcionarios/options/filter", "displayField": "label", "valueField": "id" }, { "name": "funcionarioNome", "label": "Nome", "controlType": "input", "readOnly": true }, { "name": "papel", "label": "Papel", "controlType": "select", "required": true, "options": [ { "label": "Lider", "value": "LIDER" }, { "label": "Tecnico", "value": "TECNICO" }, { "label": "Analista", "value": "ANALISTA" }, { "label": "Piloto", "value": "PILOTO" }, { "label": "Medico", "value": "MEDICO" } ] }, { "name": "ordem", "label": "Ordem", "controlType": "numericTextBox", "readOnly": true }, { "name": "principal", "label": "Principal", "controlType": "toggle" } ] } } } ], "actions": { "submit": { "id": "submit-team-plan", "label": "Submit team plan", "icon": "task_alt", "visible": true, "type": "submit" }, "reset": { "id": "reset-team-plan", "label": "Reset", "visible": true, "type": "reset" }, "position": "right", "placement": "afterSections", "spacing": "normal" }, "submit": { "method": "patch", "url": "/api/operations/missoes/1/team-plan" } } } } } ] } } }, { "id": "operations-tabs-workspace", "title": "Operations - tabs workspace", "summary": "Composes a tabbed workspace with nested widgets and widget events, showing how multiple runtime surfaces can share one governed page frame.", "i18n": { "pt": { "title": "Operações - workspace em abas", "summary": "Compõe um workspace em abas com widgets internos e eventos, mostrando várias superfícies compartilhando uma página governada.", "demonstrates": [ "Explore Operações - workspace em abas e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-tabs materializa operations/tabs-workspace com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Compõe um workspace em abas com widgets internos e eventos, mostrando várias superfícies compartilhando uma página governada.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-tabs.group, praxis-tabs.tabs.widgets.", "Verifique a conexão com as evidências canônicas praxis-tabs.json-api.md e praxis-tabs.metadata.ts." ] } }, "publicRoute": "/examples/dynamic-page/operations-tabs-workspace", "publicUrl": "https://praxisui.dev/examples/dynamic-page/operations-tabs-workspace", "category": "composition", "mode": "local-only", "primaryComponent": "praxis-tabs", "resourcePath": "operations/tabs-workspace", "resourceKey": "operations.tabs-workspace", "requires": [ "praxis-tabs.config", "tabs.group", "tabs.widgets", "tabs.widgetEvent", "dynamic-widget-resolution" ], "tags": [ "tabs", "composition", "nested-widgets", "list", "charts", "ai-recipe" ], "demonstrates": [ "Tabs group mode with density, alignment, dynamic height and selectedIndex", "Nested widgets inside tabs resolved by the same ComponentMetadataRegistry", "widgetEvent bridge from nested components back through the tab container", "Per-tab content that combines list, chart and rich text contracts" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-tabs.group", "praxis-tabs.tabs.widgets", "praxis-tabs.widgetEvent", "praxis-list.templating", "praxis-charts.series" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-tabs/src/lib/praxis-tabs.json-api.md", "praxis-ui-angular/projects/praxis-tabs/src/lib/praxis-tabs.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-tabs.json" ], "complexity": "advanced", "catalogRole": "composition", "learningStage": "composition", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-tabs-rendered", "nested-widget-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example intentionally demonstrates local composition because tabs are a container contract.", "Nested widgets use the same public metadata registry used by top-level Dynamic Page widgets." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.tabs.json", "praxis-ui-angular/examples/ai-recipes/praxis-tabs.json" ], "sourcePath": "docs/examples/dynamic-page/examples/operations-tabs-workspace.json", "documentation": { "story": { "pt": "Operações - workspace em abas parte de uma necessidade operacional concreta: Compõe um workspace em abas com widgets internos e eventos, mostrando várias superfícies compartilhando uma página governada.", "en": "Operations - tabs workspace starts from a concrete operational need: Composes a tabbed workspace with nested widgets and widget events, showing how multiple runtime surfaces can share one governed page frame." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-tabs transforma o contrato de operations/tabs-workspace em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-tabs turns the operations/tabs-workspace contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-tabs", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza superfícies relacionadas preservando contexto e navegação.", "en": "Organizes related surfaces while preserving context and navigation." }, "rationale": { "pt": "Permite alternar perspectivas do mesmo trabalho sem fragmentar o fluxo em páginas independentes.", "en": "Allows switching perspectives on the same job without fragmenting the flow into separate pages." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-tabs ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-tabs to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." } } ], "experiments": [ { "pt": "Troque a aba inicial ou o modo de navegação e observe a continuidade do contexto.", "en": "Change the initial tab or navigation mode and observe context continuity." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.tabs.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.tabs.json." } ] }, "envelope": { "id": "operations-tabs-workspace", "title": "Operations - tabs workspace", "summary": "Composes a tabbed workspace with nested widgets and widget events, showing how multiple runtime surfaces can share one governed page frame.", "component": "praxis-dynamic-page", "category": "composition", "primaryComponent": "praxis-tabs", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/tabs" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/tabs-workspace", "resourceKey": "operations.tabs-workspace" }, "requires": [ "praxis-tabs.config", "tabs.group", "tabs.widgets", "tabs.widgetEvent", "dynamic-widget-resolution" ], "tags": [ "tabs", "composition", "nested-widgets", "list", "charts", "ai-recipe" ], "demonstrates": [ "Tabs group mode with density, alignment, dynamic height and selectedIndex", "Nested widgets inside tabs resolved by the same ComponentMetadataRegistry", "widgetEvent bridge from nested components back through the tab container", "Per-tab content that combines list, chart and rich text contracts" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-tabs.group", "praxis-tabs.tabs.widgets", "praxis-tabs.widgetEvent", "praxis-list.templating", "praxis-charts.series" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-tabs/src/lib/praxis-tabs.json-api.md", "praxis-ui-angular/projects/praxis-tabs/src/lib/praxis-tabs.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-tabs.json" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-tabs-rendered", "nested-widget-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example intentionally demonstrates local composition because tabs are a container contract.", "Nested widgets use the same public metadata registry used by top-level Dynamic Page widgets." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.tabs.json", "praxis-ui-angular/examples/ai-recipes/praxis-tabs.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "operationsTabsWorkspace", "shell": { "kind": "dashboard-card", "icon": "tab", "title": "Operations tabs workspace", "subtitle": "Nested widgets and widgetEvent bridge" }, "definition": { "id": "praxis-tabs", "bindingOrder": [ "tabsId", "config" ], "inputs": { "tabsId": "operations-tabs-workspace", "componentInstanceId": "dynamic-page-showcase", "config": { "appearance": { "density": "comfortable", "tokens": { "active-indicator-color": "#0f766e", "active-focus-indicator-color": "#1263b4", "active-hover-indicator-color": "#1263b4" } }, "behavior": { "lazyLoad": false, "closeable": false, "reorderable": false }, "accessibility": { "ariaLabel": "Operations workspace tabs", "reduceMotion": true }, "group": { "selectedIndex": 0, "alignTabs": "start", "stretchTabs": false, "dynamicHeight": true, "fitInkBarToContent": true }, "tabs": [ { "id": "queue", "textLabel": "Queue", "widgets": [ { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "operations-tabs-queue-list", "config": { "id": "operations-tabs-queue-list-config", "dataSource": { "data": [ { "id": 1, "title": "Payroll reconciliation", "owner": "Mira Drax", "status": "At risk", "priority": "P0" }, { "id": 2, "title": "Mission readiness review", "owner": "Sol Drax", "status": "Ready", "priority": "P1" }, { "id": 3, "title": "Capabilities rollout", "owner": "Ravi Almeida", "status": "Blocked", "priority": "P1" } ] }, "layout": { "variant": "list", "density": "compact", "lines": 2, "dividers": "between", "pageSize": 5 }, "selection": { "mode": "single", "compareBy": "id", "return": "id" }, "templating": { "leading": { "type": "icon", "expr": "task_alt" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.owner}" }, "trailing": { "type": "chip", "expr": "${item.status}", "variant": "outlined" }, "features": [ { "type": "chip", "expr": "${item.priority}", "variant": "filled" } ] }, "ui": { "showSearch": false, "showSort": false, "showRange": false } } }, "outputs": { "selectionChange": "emit", "itemClick": "emit" } } ] }, { "id": "contract-notes", "textLabel": "Contract notes", "widgets": [ { "id": "widget:rich-text-block", "inputs": { "title": "Agent-ready contract", "content": "This tab is pure metadata. A host can swap list, chart or form widgets without changing the Angular template.", "variant": "emphasis" } } ] } ] } }, "outputs": { "selectedIndexChange": "emit", "selectedTabChange": "emit", "widgetEvent": "emit" } } } ] } } }, { "id": "tabs-nav-routing-workspace", "title": "Tabs - navigation workspace", "summary": "Uses Tabs in navigation mode to switch operational views through metadata, reducing the need for custom host routing templates.", "i18n": { "pt": { "title": "Tabs - workspace de navegação", "summary": "Usa Tabs em modo de navegação para trocar visões operacionais por metadata, reduzindo templates de rota no host.", "demonstrates": [ "Explore Tabs - workspace de navegação e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-tabs materializa operations/tabs-nav-workspace com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Usa Tabs em modo de navegação para trocar visões operacionais por metadata, reduzindo templates de rota no host.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-tabs.nav, praxis-tabs.nav.links.widgets.", "Verifique a conexão com as evidências canônicas praxis-tabs.ts e README.md." ] } }, "publicRoute": "/examples/dynamic-page/tabs-nav-routing-workspace", "publicUrl": "https://praxisui.dev/examples/dynamic-page/tabs-nav-routing-workspace", "category": "composition", "mode": "local-only", "primaryComponent": "praxis-tabs", "resourcePath": "operations/tabs-nav-workspace", "resourceKey": "operations.tabs-nav-workspace", "requires": [ "praxis-tabs.config", "tabs.nav", "tabs.nav.links.widgets", "tabs.widgetEvent", "dynamic-widget-resolution" ], "tags": [ "tabs", "nav-mode", "composition", "nested-widgets", "list", "rich-content", "ai-recipe" ], "demonstrates": [ "Navigation-style tabs rendered from nav.links metadata", "Per-link content hosted by the same dynamic widget registry used by page widgets", "A command queue link with nested Praxis List and emitted selection events", "A briefing link and decision link expressed as copyable rich-content widgets", "Host shell coordination through selectedIndexChange and widgetEvent outputs" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-tabs.nav", "praxis-tabs.nav.links.widgets", "praxis-tabs.selectedIndexChange", "praxis-tabs.widgetEvent", "praxis-list.templating", "praxis-rich-content" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-tabs/src/lib/praxis-tabs.ts", "praxis-ui-angular/projects/praxis-tabs/README.md", "praxis-ui-angular/examples/ai-recipes/praxis-tabs.json" ], "complexity": "advanced", "catalogRole": "capability-lab", "learningStage": "composition", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-tabs-nav-rendered", "nav-link-content-rendered", "nested-widget-events-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because tabs are a container and navigation contract rather than a backend resource.", "The runtime-supported nav contract is nav.links with content or widgets; route semantics remain a host concern." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.tabs-nav-routing-workspace.json", "praxis-ui-angular/examples/ai-recipes/praxis-tabs.json" ], "sourcePath": "docs/examples/dynamic-page/examples/tabs-nav-routing-workspace.json", "documentation": { "story": { "pt": "Tabs - workspace de navegação parte de uma necessidade operacional concreta: Usa Tabs em modo de navegação para trocar visões operacionais por metadata, reduzindo templates de rota no host.", "en": "Tabs - navigation workspace starts from a concrete operational need: Uses Tabs in navigation mode to switch operational views through metadata, reducing the need for custom host routing templates." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-tabs transforma o contrato de operations/tabs-nav-workspace em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-tabs turns the operations/tabs-nav-workspace contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-tabs", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza superfícies relacionadas preservando contexto e navegação.", "en": "Organizes related surfaces while preserving context and navigation." }, "rationale": { "pt": "Permite alternar perspectivas do mesmo trabalho sem fragmentar o fluxo em páginas independentes.", "en": "Allows switching perspectives on the same job without fragmenting the flow into separate pages." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-tabs ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-tabs to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." } } ], "experiments": [ { "pt": "Troque a aba inicial ou o modo de navegação e observe a continuidade do contexto.", "en": "Change the initial tab or navigation mode and observe context continuity." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.tabs-nav-routing-workspace.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.tabs-nav-routing-workspace.json." } ] }, "envelope": { "id": "tabs-nav-routing-workspace", "title": "Tabs - navigation workspace", "summary": "Uses Tabs in navigation mode to switch operational views through metadata, reducing the need for custom host routing templates.", "component": "praxis-dynamic-page", "category": "composition", "primaryComponent": "praxis-tabs", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/tabs" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/tabs-nav-workspace", "resourceKey": "operations.tabs-nav-workspace" }, "requires": [ "praxis-tabs.config", "tabs.nav", "tabs.nav.links.widgets", "tabs.widgetEvent", "dynamic-widget-resolution" ], "tags": [ "tabs", "nav-mode", "composition", "nested-widgets", "list", "rich-content", "ai-recipe" ], "demonstrates": [ "Navigation-style tabs rendered from nav.links metadata", "Per-link content hosted by the same dynamic widget registry used by page widgets", "A command queue link with nested Praxis List and emitted selection events", "A briefing link and decision link expressed as copyable rich-content widgets", "Host shell coordination through selectedIndexChange and widgetEvent outputs" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-tabs.nav", "praxis-tabs.nav.links.widgets", "praxis-tabs.selectedIndexChange", "praxis-tabs.widgetEvent", "praxis-list.templating", "praxis-rich-content" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-tabs/src/lib/praxis-tabs.ts", "praxis-ui-angular/projects/praxis-tabs/README.md", "praxis-ui-angular/examples/ai-recipes/praxis-tabs.json" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-tabs-nav-rendered", "nav-link-content-rendered", "nested-widget-events-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because tabs are a container and navigation contract rather than a backend resource.", "The runtime-supported nav contract is nav.links with content or widgets; route semantics remain a host concern." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.tabs-nav-routing-workspace.json", "praxis-ui-angular/examples/ai-recipes/praxis-tabs.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "tabsNavRoutingWorkspace", "shell": { "kind": "dashboard-card", "icon": "alt_route", "title": "Tabs nav workspace", "subtitle": "Navigation links with nested runtime widgets" }, "definition": { "id": "praxis-tabs", "bindingOrder": [ "tabsId", "config" ], "inputs": { "tabsId": "tabs-nav-routing-workspace", "componentInstanceId": "dynamic-page-showcase", "config": { "appearance": { "density": "comfortable", "tokens": { "active-indicator-color": "#0f766e", "active-label-text-color": "#0f172a", "inactive-label-text-color": "#475569" } }, "behavior": { "lazyLoad": true, "closeable": false, "reorderable": false }, "accessibility": { "ariaLabel": "Navigation workspace tabs", "reduceMotion": true }, "nav": { "selectedIndex": 0, "fitInkBarToContent": true, "stretchTabs": false, "ariaLabel": "Operations navigation", "links": [ { "id": "briefing", "label": "Briefing", "widgets": [ { "id": "widget:rich-text-block", "inputs": { "title": "Mission operations briefing", "content": "Use nav mode when the host shell needs stable navigation semantics while each link remains metadata-driven content. The runtime changes the active link and renders only the selected link widgets.", "variant": "emphasis" } } ] }, { "id": "queue", "label": "Queue", "widgets": [ { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "tabs-nav-routing-queue-list", "config": { "id": "tabs-nav-routing-queue-list-config", "dataSource": { "data": [ { "id": 1, "title": "Review mission readiness", "owner": "Sol Drax", "status": "Ready", "priority": "P1" }, { "id": 2, "title": "Confirm payroll exceptions", "owner": "Mira Drax", "status": "At risk", "priority": "P0" }, { "id": 3, "title": "Publish capability notes", "owner": "Ravi Almeida", "status": "Blocked", "priority": "P1" } ] }, "layout": { "variant": "list", "density": "compact", "lines": 2, "dividers": "between", "pageSize": 5 }, "selection": { "mode": "single", "compareBy": "id", "return": "id" }, "templating": { "leading": { "type": "icon", "expr": "route" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.owner}" }, "meta": { "type": "chip", "expr": "${item.priority}", "variant": "filled" }, "trailing": { "type": "chip", "expr": "${item.status}", "variant": "outlined" } }, "ui": { "showSearch": false, "showSort": false, "showRange": false } } }, "outputs": { "itemClick": "emit", "selectionChange": "emit" } } ] }, { "id": "decisions", "label": "Decisions", "widgets": [ { "id": "widget:rich-text-block", "inputs": { "title": "Host-owned routing intent", "content": "Praxis Tabs nav mode owns the selected link and widgetEvent bridge. The application shell can map selectedIndexChange to route state, breadcrumbs or inspector context without redefining the tab contract.", "variant": "default" } } ] } ] } } }, "outputs": { "selectedIndexChange": "emit", "indexFocused": "emit", "selectFocusedIndex": "emit", "widgetEvent": "emit" } } } ] } } }, { "id": "funcionarios-master-detail", "title": "Funcionarios - master detail", "summary": "Connects a remote funcionarios table, detail form and guidance surface through composition links, proving master-detail can be configuration-driven.", "i18n": { "pt": { "title": "Funcionários - master detail", "summary": "Conecta tabela remota, formulário de detalhe e orientação por composition links, provando master-detail governado por configuração.", "demonstrates": [ "Explore Funcionários - master detail e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-page materializa human-resources/funcionarios com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Conecta tabela remota, formulário de detalhe e orientação por composition links, provando master-detail governado por configuração.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e filter." ] } }, "publicRoute": "/examples/dynamic-page/funcionarios-master-detail", "publicUrl": "https://praxisui.dev/examples/dynamic-page/funcionarios-master-detail", "category": "composition", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-page", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "options", "capabilities", "composition.links", "remote-data", "praxis-rich-content", "formBlocksBefore", "customAction" ], "tags": [ "master-detail", "table", "form", "composition", "quickstart", "rich-content" ], "demonstrates": [ "Three widgets rendered by one Dynamic Page", "Shared selection state in page.state.values", "Table rowClick output writing selected funcionario id", "Detail form resourceId input hydrated through composition.links", "Form-level rich content blocks emitted through formBlocksBefore without entering the payload", "Hosted praxis-rich-content used as an auxiliary guidance surface with host-mediated actions", "Lookup cards rendered with the same canonical rich-content contract used by the page-builder and dynamic-form hosts", "Related records rendered as resolved relationship summaries in the same portable rich-content contract", "Stat groups rendered with the same canonical rich-content document used by multiple hosts", "Tabs rendered as the same canonical rich-content document used by multiple hosts", "CTA groups rendered as semantic next-step clusters in the same portable document contract" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "remote-options", "capabilities", "composition.links", "state.values", "schema-driven-form", "praxis-rich-content.document", "rich-content.lookupCard", "rich-content.relatedRecord", "rich-content.actionCard", "rich-content.statGroup", "rich-content.ctaGroup", "actionButton", "requiresCapabilities", "customAction" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/{id}", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "advanced", "catalogRole": "composition", "learningStage": "composition", "variantFamilyId": "employee-workspace-compositions", "featuredRank": 5, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "praxis-dynamic-form-rendered", "praxis-rich-content-rendered", "composition-links-present", "host-mediated-rich-content-actions-present" ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.master-detail.json" ], "sourcePath": "docs/examples/dynamic-page/examples/funcionarios-master-detail.json", "documentation": { "story": { "pt": "Uma pessoa analista precisa selecionar um funcionário e investigar seu detalhe sem perder a coleção de origem. A página conecta tabela, formulário e orientação por links declarativos de composição.", "en": "An analyst needs to select an employee and inspect details without losing the source collection. The page connects table, form and guidance through declarative composition links." }, "outcome": { "pt": "A seleção percorre o documento e atualiza as superfícies dependentes sem cola de estado específica da rota, tornando causa e efeito visíveis.", "en": "Selection travels through the document and updates dependent surfaces without route-specific state glue, making cause and effect visible." }, "componentRoles": [ { "component": "praxis-dynamic-page", "jsonPath": "page.widgets[].definition", "role": { "pt": "Compõe widgets registrados em um documento de página executável.", "en": "Composes registered widgets into an executable page document." }, "rationale": { "pt": "Permite que layout e composição evoluam como materialização governada, sem criar outra rota codificada à mão.", "en": "Lets layout and composition evolve as governed materialization without another hand-coded route." } }, { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "page.widgets[]", "title": { "pt": "Superfícies da composição", "en": "Composition surfaces" }, "explanation": { "pt": "Cada widget mantém contrato e responsabilidade próprios dentro do mesmo documento.", "en": "Each widget keeps its own contract and responsibility inside the same document." } }, { "jsonPath": "page.links[]", "title": { "pt": "Fluxo entre componentes", "en": "Component flow" }, "explanation": { "pt": "Conecta saídas e entradas declarativamente para que seleção e contexto percorram a página.", "en": "Connects outputs and inputs declaratively so selection and context travel through the page." } }, { "jsonPath": "page.widgets[].shell", "title": { "pt": "Apresentação no host", "en": "Host presentation" }, "explanation": { "pt": "Define título e enquadramento sem misturar a semântica interna do componente com a composição.", "en": "Defines title and framing without mixing component internals with composition semantics." } } ], "experiments": [ { "pt": "Mude a posição ou o span de um widget e observe a recomposição responsiva do documento.", "en": "Change a widget position or span and observe the responsive document recomposition." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.master-detail.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.master-detail.json." } ] }, "envelope": { "id": "funcionarios-master-detail", "title": "Funcionarios - master detail", "summary": "Connects a remote funcionarios table, detail form and guidance surface through composition links, proving master-detail can be configuration-driven.", "component": "praxis-dynamic-page", "category": "composition", "primaryComponent": "praxis-dynamic-page", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "options", "capabilities", "composition.links", "remote-data", "praxis-rich-content", "formBlocksBefore", "customAction" ], "tags": [ "master-detail", "table", "form", "composition", "quickstart", "rich-content" ], "demonstrates": [ "Three widgets rendered by one Dynamic Page", "Shared selection state in page.state.values", "Table rowClick output writing selected funcionario id", "Detail form resourceId input hydrated through composition.links", "Form-level rich content blocks emitted through formBlocksBefore without entering the payload", "Hosted praxis-rich-content used as an auxiliary guidance surface with host-mediated actions", "Lookup cards rendered with the same canonical rich-content contract used by the page-builder and dynamic-form hosts", "Related records rendered as resolved relationship summaries in the same portable rich-content contract", "Stat groups rendered with the same canonical rich-content document used by multiple hosts", "Tabs rendered as the same canonical rich-content document used by multiple hosts", "CTA groups rendered as semantic next-step clusters in the same portable document contract" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "remote-options", "capabilities", "composition.links", "state.values", "schema-driven-form", "praxis-rich-content.document", "rich-content.lookupCard", "rich-content.relatedRecord", "rich-content.actionCard", "rich-content.statGroup", "rich-content.ctaGroup", "actionButton", "requiresCapabilities", "customAction" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/{id}", "GET /api/human-resources/funcionarios/capabilities", "POST /api/human-resources/cargos/options/filter", "POST /api/human-resources/departamentos/options/filter" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-table-rendered", "praxis-dynamic-form-rendered", "praxis-rich-content-rendered", "composition-links-present", "host-mediated-rich-content-actions-present" ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.master-detail.json" ], "page": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "state": { "values": { "selection": { "funcionarioId": null } } }, "widgets": [ { "key": "masterTable", "shell": { "kind": "dashboard-card", "icon": "table", "title": "Funcionarios", "subtitle": "Select a row to update the detail form" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "human-resources/funcionarios", "tableId": "human-resources-funcionarios-master", "config": { "toolbar": { "visible": true, "title": "Funcionarios" }, "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit" } } }, { "key": "detailForm", "shell": { "kind": "dashboard-card", "icon": "badge", "title": "Funcionario detail", "subtitle": "Read-only form hydrated from selection state with editorial blocks" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "resourcePath", "formId", "resourceId", "config" ], "inputs": { "formId": "human-resources-funcionarios-detail", "resourcePath": "human-resources/funcionarios", "mode": "view", "resourceId": null, "config": { "formBlocksBefore": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "rule", "title": "Formulario metadata-driven", "message": "Use blocos rich-content para contexto e operacoes auxiliares. O payload persistido continua sendo o do formulario.", "actions": [ { "type": "actionButton", "label": "Abrir detalhes", "icon": "open_in_new", "variant": "stroked", "color": "primary", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Detalhes do funcionario selecionado", "icon": "open_in_new", "subtitle": "Abertura governada a partir do master-detail", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Fluxo master-detail mediado pelo host", "content": "A ação foi executada por surface.open a partir de um bloco rich-content. A seleção da tabela continua governando o formulário de detalhe por composition.links, enquanto esta superfície representa um fluxo auxiliar aberto pelo host.", "variant": "emphasis" } } } } } ] }, { "type": "disclosure", "title": "Bloco dependente de capability de edicao", "subtitle": "O host do dynamic form decide se este conteudo aparece", "appearance": "card", "requiresCapabilities": [ "form.mode.edit" ], "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Capability gate", "value": "form.mode.edit" }, { "label": "Persistencia", "value": "Nao serializar hostCapabilities no config do formulario" } ] } ] } ] } } }, "outputs": { "customAction": { "type": "surface.open", "params": { "presentation": "${payload.globalAction.payload.presentation}", "title": "${payload.globalAction.payload.title}", "icon": "${payload.globalAction.payload.icon}", "subtitle": "${payload.globalAction.payload.subtitle}", "size": "${payload.globalAction.payload.size}", "widget": "${payload.globalAction.payload.widget}" } } } } }, { "key": "detailGuide", "shell": { "kind": "dashboard-card", "icon": "article", "title": "Master-detail guidance", "subtitle": "Hosted praxis-rich-content for contextual operations" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context" ], "inputs": { "context": { "workspace": { "resourceLabel": "Funcionarios", "selectionFlow": "rowClick -> resourceId", "runtimeRule": "hostCapabilities sao apenas runtime do host" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "recordSummary", "title": "Master-detail governed by configuration", "subtitleExpr": "${workspace.resourceLabel}", "meta": "praxis-dynamic-page", "fields": [ { "label": "Selection flow", "valueExpr": "${workspace.selectionFlow}" }, { "label": "Runtime note", "valueExpr": "${workspace.runtimeRule}" } ] }, { "type": "statGroup", "title": "Workspace signals", "subtitle": "Portable summary blocks alongside the master-detail flow", "layout": "inline", "items": [ { "label": "Selection flow", "value": "1", "captionExpr": "${workspace.selectionFlow}", "icon": "swap_horiz" }, { "label": "Runtime contract", "value": "host", "captionExpr": "${workspace.runtimeRule}", "icon": "verified_user" } ] }, { "type": "tabs", "title": "Workspace views", "subtitle": "Canonical editorial tabs hosted alongside the table and detail form.", "appearance": "pills", "defaultTabId": "overview", "items": [ { "id": "overview", "label": "Overview", "icon": "dashboard", "content": [ { "type": "text", "text": "Use tabs when the same portable rich-content document needs multiple editorial panels near the master-detail flow." } ] }, { "id": "runtime", "label": "Runtime", "icon": "verified_user", "badge": "Host", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Selection flow", "valueExpr": "${workspace.selectionFlow}" }, { "label": "Runtime rule", "valueExpr": "${workspace.runtimeRule}" }, { "label": "Persistence rule", "value": "hostCapabilities stay outside persisted page JSON." } ] } ] } ] }, { "type": "ctaGroup", "title": "Next steps", "subtitle": "Governed actions for the selected record", "message": "Cluster primary and secondary host-mediated actions without inventing page-specific markup.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Open selected funcionario", "icon": "open_in_new", "variant": "raised", "color": "primary", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Detalhes do funcionario selecionado", "icon": "open_in_new", "subtitle": "Abertura governada a partir do master-detail", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Fluxo master-detail mediado pelo host", "content": "A ação foi executada por surface.open a partir de um bloco rich-content. A seleção da tabela continua governando o formulário de detalhe por composition.links, enquanto esta superfície representa um fluxo auxiliar aberto pelo host.", "variant": "emphasis" } } } } }, { "type": "actionButton", "label": "Inspect workspace", "icon": "manage_search", "variant": "stroked", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Inspecionar workspace master-detail", "icon": "manage_search", "subtitle": "Contrato operacional da composição", "size": { "width": "760px", "maxWidth": "90vw" }, "widget": { "id": "praxis-rich-content", "bindingOrder": [ "document" ], "inputs": { "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "keyValueList", "title": "Sinais governados", "layout": "stacked", "items": [ { "label": "Resource", "value": "human-resources.funcionarios" }, { "label": "Selecao", "value": "rowClick -> selection.funcionarioId -> detailForm.resourceId" }, { "label": "Acoes editoriais", "value": "Rich-content aciona surface.open sem handlers locais na pagina." } ] } ] } } } } } } ] }, { "type": "lookupCard", "title": "Selected funcionario", "subtitleExpr": "${workspace.resourceLabel}", "status": "resolved", "meta": "host-mediated lookup", "ctaLabel": "Open selected funcionario", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Detalhes do funcionario selecionado", "icon": "open_in_new", "subtitle": "Abertura governada a partir do master-detail", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Fluxo master-detail mediado pelo host", "content": "A ação foi executada por surface.open a partir de um bloco rich-content. A seleção da tabela continua governando o formulário de detalhe por composition.links, enquanto esta superfície representa um fluxo auxiliar aberto pelo host.", "variant": "emphasis" } } } }, "fields": [ { "label": "Selection binding", "valueExpr": "${workspace.selectionFlow}" }, { "label": "Runtime rule", "valueExpr": "${workspace.runtimeRule}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Inspect workspace", "icon": "manage_search", "variant": "stroked", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Inspecionar workspace master-detail", "icon": "manage_search", "subtitle": "Contrato operacional da composição", "size": { "width": "760px", "maxWidth": "90vw" }, "widget": { "id": "praxis-rich-content", "bindingOrder": [ "document" ], "inputs": { "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "keyValueList", "title": "Sinais governados", "layout": "stacked", "items": [ { "label": "Resource", "value": "human-resources.funcionarios" }, { "label": "Selecao", "value": "rowClick -> selection.funcionarioId -> detailForm.resourceId" }, { "label": "Acoes editoriais", "value": "Rich-content aciona surface.open sem handlers locais na pagina." } ] } ] } } } } } } ] }, { "type": "relatedRecord", "title": "Selected related record", "subtitleExpr": "${workspace.resourceLabel}", "relationLabel": "Current selection", "meta": "resolved relationship", "ctaLabel": "Open related funcionario", "variant": "raised", "color": "primary", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Detalhes do funcionario selecionado", "icon": "open_in_new", "subtitle": "Abertura governada a partir do master-detail", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Fluxo master-detail mediado pelo host", "content": "A ação foi executada por surface.open a partir de um bloco rich-content. A seleção da tabela continua governando o formulário de detalhe por composition.links, enquanto esta superfície representa um fluxo auxiliar aberto pelo host.", "variant": "emphasis" } } } }, "fields": [ { "label": "Selection binding", "valueExpr": "${workspace.selectionFlow}", "hint": "Resolved from the same selected record context." } ], "secondaryActions": [ { "type": "actionButton", "label": "Inspect workspace", "icon": "manage_search", "variant": "stroked", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Inspecionar workspace master-detail", "icon": "manage_search", "subtitle": "Contrato operacional da composição", "size": { "width": "760px", "maxWidth": "90vw" }, "widget": { "id": "praxis-rich-content", "bindingOrder": [ "document" ], "inputs": { "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "keyValueList", "title": "Sinais governados", "layout": "stacked", "items": [ { "label": "Resource", "value": "human-resources.funcionarios" }, { "label": "Selecao", "value": "rowClick -> selection.funcionarioId -> detailForm.resourceId" }, { "label": "Acoes editoriais", "value": "Rich-content aciona surface.open sem handlers locais na pagina." } ] } ] } } } } } } ] }, { "type": "actionCard", "title": "Open governed funcionario flow", "subtitleExpr": "${workspace.resourceLabel}", "message": "Use the same canonical document to launch a governed host action from the master-detail workspace.", "meta": "host-mediated action", "ctaLabel": "Open governed funcionario flow", "variant": "raised", "color": "primary", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Detalhes do funcionario selecionado", "icon": "open_in_new", "subtitle": "Abertura governada a partir do master-detail", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Fluxo master-detail mediado pelo host", "content": "A ação foi executada por surface.open a partir de um bloco rich-content. A seleção da tabela continua governando o formulário de detalhe por composition.links, enquanto esta superfície representa um fluxo auxiliar aberto pelo host.", "variant": "emphasis" } } } }, "secondaryActions": [ { "type": "actionButton", "label": "Inspect workspace", "icon": "manage_search", "variant": "stroked", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Inspecionar workspace master-detail", "icon": "manage_search", "subtitle": "Contrato operacional da composição", "size": { "width": "760px", "maxWidth": "90vw" }, "widget": { "id": "praxis-rich-content", "bindingOrder": [ "document" ], "inputs": { "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "keyValueList", "title": "Sinais governados", "layout": "stacked", "items": [ { "label": "Resource", "value": "human-resources.funcionarios" }, { "label": "Selecao", "value": "rowClick -> selection.funcionarioId -> detailForm.resourceId" }, { "label": "Acoes editoriais", "value": "Rich-content aciona surface.open sem handlers locais na pagina." } ] } ] } } } } } } ] }, { "type": "emptyState", "icon": "integration_instructions", "title": "Use hosted editorial actions for auxiliary flows", "message": "O widget rich-content pode acionar fluxos governados pelo host sem misturar handlers no documento.", "actions": [ { "type": "actionButton", "label": "Inspecionar workspace", "icon": "manage_search", "variant": "flat", "action": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Inspecionar workspace master-detail", "icon": "manage_search", "subtitle": "Contrato operacional da composição", "size": { "width": "760px", "maxWidth": "90vw" }, "widget": { "id": "praxis-rich-content", "bindingOrder": [ "document" ], "inputs": { "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "keyValueList", "title": "Sinais governados", "layout": "stacked", "items": [ { "label": "Resource", "value": "human-resources.funcionarios" }, { "label": "Selecao", "value": "rowClick -> selection.funcionarioId -> detailForm.resourceId" }, { "label": "Acoes editoriais", "value": "Rich-content aciona surface.open sem handlers locais na pagina." } ] } ] } } } } } } ] } ] } } } } ], "composition": { "version": "1.0.0", "links": [ { "id": "funcionarios:rowClick->state:selection.funcionarioId", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "masterTable", "port": "rowClick", "direction": "output", "componentType": "praxis-table" } }, "to": { "kind": "state", "ref": { "path": "selection.funcionarioId", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "funcionarios:pick-row-id", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.id" } } ] }, "metadata": { "source": "native-composition-link", "label": "Selected funcionario id" } }, { "id": "funcionarios:state:selection.funcionarioId->detailForm.resourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.funcionarioId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "detailForm", "port": "resourceId", "direction": "input", "componentType": "praxis-dynamic-form" } }, "policy": { "missingValuePolicy": "skip" }, "metadata": { "source": "native-composition-link", "label": "Hydrate detail resource id" } } ] } } } }, { "id": "nested-path-showcase", "title": "Mission command nestedPath workspace", "summary": "Shows how one mission selection can drive summary, team and timeline widgets through governed nestedPath links instead of custom page glue.", "i18n": { "pt": { "title": "Missões - workspace com nestedPath", "summary": "Mostra uma seleção de missão alimentando resumo, equipe e linha do tempo por links nestedPath governados, sem cola manual de tela.", "demonstrates": [ "Explore Missões - workspace com nestedPath e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-page materializa operations/missoes com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Mostra uma seleção de missão alimentando resumo, equipe e linha do tempo por links nestedPath governados, sem cola manual de tela.", "Confirme no resultado capacidades da plataforma como composition.links, component-port.nestedPath, nested-widget-identity.", "Verifique a conexão com as evidências canônicas surfaces?resource=operations.missoes e actions?resource=operations.missoes." ] } }, "publicRoute": "/examples/dynamic-page/nested-path-showcase", "publicUrl": "https://praxisui.dev/examples/dynamic-page/nested-path-showcase", "category": "composition", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-page", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes", "requires": [ "composition.links", "component-port.nestedPath", "dynamic-widget-loader", "praxis-tabs", "praxis-table", "praxis-rich-content", "quickstart-render-api" ], "tags": [ "nestedPath", "composition", "tabs", "table", "rich-content", "timeline", "json-logic", "missions", "operations", "ai-recipe" ], "demonstrates": [ "Canonical component-port endpoints with nestedPath for child widget inputs and outputs", "Nested mission table selection writing state that drives summary and team tables plus a rich-content timeline", "Tabs as owner containers with stable childWidgetKey terminal identity", "POST /filter-backed resources using queryContext instead of fake GET filter endpoints", "Link transforms without bindingPath or page.connections" ], "platformFeatures": [ "composition.links", "component-port.nestedPath", "nested-widget-identity", "state-read", "state-write", "rich-content.timeline", "json-logic.link-conditions", "transform.object-template", "tabs.lazyLoad" ], "backendSurfaces": [ "GET /schemas/surfaces?resource=operations.missoes", "GET /schemas/actions?resource=operations.missoes", "POST /api/operations/missoes/filter", "POST /api/operations/vw-resumo-missoes/filter", "POST /api/operations/missao-participantes/filter", "GET /api/operations/missoes/{id}/capabilities" ], "complexity": "advanced", "catalogRole": "composition", "learningStage": "composition", "validation": { "level": "browser-smoke", "checks": [ "loads imported canonical nested-path recipe", "renders tabs, nested table metadata and the rich-content timeline in DynamicWidgetLoader", "propagates nested output to state and state to nested inputs through composition.links", "keeps persisted links under page.composition.links only", "uses operations.missoes endpoints that match the demonstrated business flow" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-surfaces-operations-missoes", "schemas-actions-operations-missoes", "operations-missoes-item-capabilities", "vw-resumo-missoes-filter-basic", "missao-participantes-stats-papel" ], "pendingHttpIds": [], "notes": [ "Reference API: https://praxis-enterprise-proof-sandbox-v2.onrender.com", "The landing example imports the golden recipe from praxis-ui-angular instead of copying the page contract.", "The example intentionally uses mission read projections instead of HR/payroll endpoints that do not support the demonstrated flow." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.nested-path-showcase.json", "praxis-ui-angular/projects/praxis-core/docs/nested-component-ports-implementation-plan.md" ], "sourcePath": "docs/examples/dynamic-page/examples/nested-path-showcase.json", "documentation": { "story": { "pt": "Missões - workspace com nestedPath parte de uma necessidade operacional concreta: Mostra uma seleção de missão alimentando resumo, equipe e linha do tempo por links nestedPath governados, sem cola manual de tela.", "en": "Mission command nestedPath workspace starts from a concrete operational need: Shows how one mission selection can drive summary, team and timeline widgets through governed nestedPath links instead of custom page glue." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-dynamic-page transforma o contrato de operations/missoes em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-dynamic-page turns the operations/missoes contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-dynamic-page", "jsonPath": "page.widgets[].definition", "role": { "pt": "Compõe widgets registrados em um documento de página executável.", "en": "Composes registered widgets into an executable page document." }, "rationale": { "pt": "Permite que layout e composição evoluam como materialização governada, sem criar outra rota codificada à mão.", "en": "Lets layout and composition evolve as governed materialization without another hand-coded route." } }, { "component": "praxis-tabs", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Organiza superfícies relacionadas preservando contexto e navegação.", "en": "Organizes related surfaces while preserving context and navigation." }, "rationale": { "pt": "Permite alternar perspectivas do mesmo trabalho sem fragmentar o fluxo em páginas independentes.", "en": "Allows switching perspectives on the same job without fragmenting the flow into separate pages." } }, { "component": "praxis-table", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Materializa dados tabulares, filtros, seleção e ações operacionais.", "en": "Materializes tabular data, filters, selection and operational actions." }, "rationale": { "pt": "É usado quando o trabalho depende de comparar registros e agir sobre uma coleção governada.", "en": "It is used when the job depends on comparing records and acting on a governed collection." } }, { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "page.widgets[]", "title": { "pt": "Superfícies da composição", "en": "Composition surfaces" }, "explanation": { "pt": "Cada widget mantém contrato e responsabilidade próprios dentro do mesmo documento.", "en": "Each widget keeps its own contract and responsibility inside the same document." } }, { "jsonPath": "page.links[]", "title": { "pt": "Fluxo entre componentes", "en": "Component flow" }, "explanation": { "pt": "Conecta saídas e entradas declarativamente para que seleção e contexto percorram a página.", "en": "Connects outputs and inputs declaratively so selection and context travel through the page." } }, { "jsonPath": "page.widgets[].shell", "title": { "pt": "Apresentação no host", "en": "Host presentation" }, "explanation": { "pt": "Define título e enquadramento sem misturar a semântica interna do componente com a composição.", "en": "Defines title and framing without mixing component internals with composition semantics." } } ], "experiments": [ { "pt": "Mude a posição ou o span de um widget e observe a recomposição responsiva do documento.", "en": "Change a widget position or span and observe the responsive document recomposition." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.nested-path-showcase.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.nested-path-showcase.json." } ] }, "envelope": { "id": "nested-path-showcase", "title": "Mission command nestedPath workspace", "summary": "Shows how one mission selection can drive summary, team and timeline widgets through governed nestedPath links instead of custom page glue.", "component": "praxis-dynamic-page", "category": "composition", "primaryComponent": "praxis-dynamic-page", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" }, "requires": [ "composition.links", "component-port.nestedPath", "dynamic-widget-loader", "praxis-tabs", "praxis-table", "praxis-rich-content", "quickstart-render-api" ], "tags": [ "nestedPath", "composition", "tabs", "table", "rich-content", "timeline", "json-logic", "missions", "operations", "ai-recipe" ], "demonstrates": [ "Canonical component-port endpoints with nestedPath for child widget inputs and outputs", "Nested mission table selection writing state that drives summary and team tables plus a rich-content timeline", "Tabs as owner containers with stable childWidgetKey terminal identity", "POST /filter-backed resources using queryContext instead of fake GET filter endpoints", "Link transforms without bindingPath or page.connections" ], "platformFeatures": [ "composition.links", "component-port.nestedPath", "nested-widget-identity", "state-read", "state-write", "rich-content.timeline", "json-logic.link-conditions", "transform.object-template", "tabs.lazyLoad" ], "backendSurfaces": [ "GET /schemas/surfaces?resource=operations.missoes", "GET /schemas/actions?resource=operations.missoes", "POST /api/operations/missoes/filter", "POST /api/operations/vw-resumo-missoes/filter", "POST /api/operations/missao-participantes/filter", "GET /api/operations/missoes/{id}/capabilities" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "loads imported canonical nested-path recipe", "renders tabs, nested table metadata and the rich-content timeline in DynamicWidgetLoader", "propagates nested output to state and state to nested inputs through composition.links", "keeps persisted links under page.composition.links only", "uses operations.missoes endpoints that match the demonstrated business flow" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-surfaces-operations-missoes", "schemas-actions-operations-missoes", "operations-missoes-item-capabilities", "vw-resumo-missoes-filter-basic", "missao-participantes-stats-papel" ], "pendingHttpIds": [], "notes": [ "Reference API: https://praxis-enterprise-proof-sandbox-v2.onrender.com", "The landing example imports the golden recipe from praxis-ui-angular instead of copying the page contract.", "The example intentionally uses mission read projections instead of HR/payroll endpoints that do not support the demonstrated flow." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.nested-path-showcase.json", "praxis-ui-angular/projects/praxis-core/docs/nested-component-ports-implementation-plan.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "state": { "values": { "selection": { "missionId": 1, "missionTitle": "Batalha de Nova York" } } }, "widgets": [ { "key": "missionNestedWorkspace", "shell": { "kind": "dashboard-card", "icon": "account_tree", "title": "Mission command nestedPath workspace", "subtitle": "Select a mission once; summary, team and timeline tabs receive mission context through component-port + nestedPath" }, "definition": { "id": "praxis-tabs", "bindingOrder": [ "tabsId", "componentInstanceId", "config", "selectedIndex" ], "inputs": { "tabsId": "nested-path-mission-workspace", "componentInstanceId": "nested-path-mission-workspace", "selectedIndex": 0, "config": { "appearance": { "density": "comfortable", "dynamicHeight": true, "fitInkBarToContent": true }, "behavior": { "lazyLoad": true, "reorderable": false, "closeable": false }, "tabs": [ { "id": "missions", "textLabel": "Select mission", "icon": "radar", "widgets": [ { "id": "praxis-table", "childWidgetKey": "missions-table", "bindingOrder": [ "tableId", "resourcePath", "config" ], "inputs": { "tableId": "nested-path-missions-table", "resourcePath": "operations/missoes", "config": { "toolbar": { "visible": true, "title": "Mission portfolio", "search": { "enabled": true, "placeholder": "Search by title, threat or location" }, "layout": { "alignment": "space-between", "showSeparator": true }, "actions": [ { "id": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "action": "inspect-surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "inspect-actions", "label": "Actions", "icon": "bolt", "action": "inspect-actions", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } } ] }, "columns": [ { "field": "id", "header": "ID", "width": "80px", "align": "center" }, { "field": "titulo", "header": "Mission", "type": "text", "sticky": "start" }, { "field": "status", "header": "Status", "type": "badge" }, { "field": "prioridade", "header": "Priority", "type": "badge" }, { "field": "local", "header": "Location", "type": "text" }, { "field": "ameacaNome", "header": "Threat", "type": "text" } ], "behavior": { "pagination": { "enabled": true, "strategy": "server", "pageSize": 10, "pageSizeOptions": [ 10, 25, 50 ], "position": "bottom" }, "sorting": { "enabled": true, "strategy": "server", "defaultSort": { "column": "id", "direction": "asc" } }, "filtering": { "enabled": true, "strategy": "server", "advancedFilters": { "enabled": true, "fields": [ "titulo", "status", "prioridade", "local" ] } }, "selection": { "enabled": true, "type": "single", "mode": "row", "persistSelection": false } } } }, "outputs": { "rowClick": "emit", "selectionChange": "emit", "toolbarAction": "emit" } } ] }, { "id": "summary", "textLabel": "Summary", "icon": "groups", "widgets": [ { "id": "praxis-table", "childWidgetKey": "mission-summary-table", "bindingOrder": [ "tableId", "resourcePath", "queryContext", "config" ], "inputs": { "tableId": "nested-path-mission-summary-table", "resourcePath": "operations/vw-resumo-missoes", "queryContext": { "filters": { "missaoId": 1 } }, "config": { "toolbar": { "visible": true, "title": "Selected mission summary" }, "columns": [ { "field": "titulo", "header": "Mission", "type": "text", "sticky": "start" }, { "field": "status", "header": "Status", "type": "badge" }, { "field": "prioridade", "header": "Priority", "type": "badge" }, { "field": "qtdHerois", "header": "Heroes", "type": "number", "align": "end" }, { "field": "qtdEventos", "header": "Events", "type": "number", "align": "end" } ], "behavior": { "pagination": { "enabled": false } } } }, "outputs": { "rowClick": "emit" } } ] }, { "id": "team", "textLabel": "Team", "icon": "groups", "widgets": [ { "id": "praxis-list", "childWidgetKey": "mission-team-list", "bindingOrder": [ "listId", "queryContext", "config" ], "shell": { "title": "Mission Team", "subtitle": "Members of the team allocated to this mission" }, "inputs": { "listId": "nested-path-mission-team-list", "queryContext": { "filters": { "missaoId": 1 } }, "config": { "dataSource": { "resourcePath": "operations/missao-participantes" }, "layout": { "variant": "tiles", "lines": 3, "density": "comfortable", "pageSize": 6 }, "skin": { "type": "gradient-tile", "radius": "16px" }, "templating": { "leading": { "type": "image", "expr": "${item.funcionarioFotoUrl}", "imageAlt": "Avatar" }, "primary": { "type": "text", "expr": "${item.funcionarioNome}" }, "secondary": { "type": "text", "expr": "Função: ${item.papel}" }, "trailing": { "type": "chip", "expr": "${item.principal|bool:Líder:Membro}" }, "chipColorMap": { "Líder": "accent", "Membro": "primary" }, "features": [ { "icon": "emoji_events", "expr": "Resultado: ${item.resultado}" } ], "featuresMode": "icons+labels" }, "ui": { "showSearch": false, "showSort": false, "showRange": false } } } } ] }, { "id": "timeline", "textLabel": "Timeline", "icon": "timeline", "widgets": [ { "id": "praxis-rich-content", "childWidgetKey": "mission-timeline", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "nested-path-mission-timeline", "context": { "selection": { "missionId": 1, "missionTitle": "Batalha de Nova York" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "timeline", "id": "mission-command-timeline", "title": "Authored mission timeline", "emptyText": "Select a mission to inspect its authored operational timeline.", "orientation": "vertical", "position": "alternate", "connectorVariant": "dashed", "connectorColor": "neutral", "markerVariant": "icon", "markerColor": "info", "markerStyle": "filled", "items": [ { "id": "mission-event-intel", "icon": "travel_explore", "title": "Pacote de inteligência consolidado", "subtitleExpr": "selection.missionTitle", "meta": "INTEL", "opposite": "2025-10-18T02:41:41Z", "badge": "grounding", "markerColor": "info" }, { "id": "mission-event-contact", "icon": "radar", "title": "Contato tático ativo", "subtitle": "Equipe em campo confirmou o ponto de contato operacional.", "meta": "CONTATO", "opposite": "2025-10-18T09:41:42Z", "badge": "signal", "markerColor": "primary" }, { "id": "mission-event-combat", "icon": "shield", "title": "Engajamento inicial", "subtitle": "Civis evacuados e perímetro sob controle.", "meta": "COMBATE", "opposite": "2025-10-18T12:41:42Z", "badge": "operation", "markerColor": "warning" }, { "id": "mission-event-reinforcement", "icon": "verified", "title": "Reforços a caminho", "subtitle": "SHIELD mobilizado para sustentação da missão.", "meta": "EXTRA", "opposite": "2025-10-18T18:41:42Z", "badge": "support", "markerColor": "success" } ] } ] } } } ] } ] } }, "outputs": { "selectedIndexChange": "emit" } } } ], "composition": { "version": "1.0.0", "links": [ { "id": "nestedPath:missions-table.rowClick->state.selection.missionId", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "missionNestedWorkspace", "port": "rowClick", "direction": "output", "componentType": "praxis-table", "nestedPath": [ { "kind": "tab", "id": "missions", "index": 0 }, { "kind": "widget", "key": "missions-table", "componentType": "praxis-table" } ] } }, "to": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values", "writable": true } }, "condition": { ">": [ { "var": "payload.row.id" }, 0 ] }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "nestedPath:pick-mission-id", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.id" } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true, "debounceMs": 50 } }, { "id": "nestedPath:missions-table.rowClick->state.selection.missionTitle", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "missionNestedWorkspace", "port": "rowClick", "direction": "output", "componentType": "praxis-table", "nestedPath": [ { "kind": "tab", "id": "missions", "index": 0 }, { "kind": "widget", "key": "missions-table", "componentType": "praxis-table" } ] } }, "to": { "kind": "state", "ref": { "path": "selection.missionTitle", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "nestedPath:pick-mission-title", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.titulo" } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true, "debounceMs": 50 } }, { "id": "nestedPath:state.selection.missionId->summary-table.queryContext", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionNestedWorkspace", "port": "queryContext", "direction": "input", "componentType": "praxis-table", "nestedPath": [ { "kind": "tab", "id": "summary", "index": 1 }, { "kind": "widget", "key": "mission-summary-table", "componentType": "praxis-table" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "object-fragment", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "nestedPath:mission-id-to-summary-filter", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": { "missaoId": "${source}" } } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "nestedPath:state.selection.missionId->team-list.queryContext", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionNestedWorkspace", "port": "queryContext", "direction": "input", "componentType": "praxis-list", "nestedPath": [ { "kind": "tab", "id": "team", "index": 2 }, { "kind": "widget", "key": "mission-team-list", "componentType": "praxis-list" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "object-fragment", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "nestedPath:mission-id-to-team-filter", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": { "missaoId": "${source}" } } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "nestedPath:state.selection->timeline.context", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionNestedWorkspace", "port": "context", "direction": "input", "componentType": "praxis-rich-content", "nestedPath": [ { "kind": "tab", "id": "timeline", "index": 3 }, { "kind": "widget", "key": "mission-timeline", "componentType": "praxis-rich-content" } ] } }, "condition": { ">": [ { "var": "source.missionId" }, 0 ] }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "object-fragment", "sourceBindings": [ { "source": "state", "path": "selection" } ], "steps": [ { "id": "nestedPath:selection-to-rich-timeline-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "selection": "${source}" } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } } ] } } } }, { "id": "page-builder-authoring-workspace", "title": "Page Builder - authoring workspace", "summary": "Turns Page Builder into a governed authoring workspace where teams edit layout, bindings and page JSON while the backend contract remains the source of truth.", "i18n": { "pt": { "title": "Page Builder - workspace de autoria", "summary": "Transforma o Page Builder em um workspace de autoria governada para editar layout, bindings e JSON da página mantendo o contrato do backend como fonte de verdade.", "demonstrates": [ "Explore Page Builder - workspace de autoria e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-page-builder materializa operations/missoes com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Transforma o Page Builder em um workspace de autoria governada para editar layout, bindings e JSON da página mantendo o contrato do backend como fonte de verdade.", "Confirme no resultado capacidades da plataforma como page-builder, settings-panel-bridge, dynamic-widget-resolution.", "Verifique a conexão com as evidências canônicas filtered e surfaces?resource=operations.missoes." ] } }, "publicRoute": "/examples/dynamic-page/page-builder-authoring-workspace", "publicUrl": "https://praxisui.dev/examples/dynamic-page/page-builder-authoring-workspace", "category": "page", "mode": "authored-customizable", "primaryComponent": "praxis-page-builder", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes", "requires": [ "widget-registry", "settings-panel-bridge", "page-builder", "dynamic-widget-resolution", "composition.links", "state.values", "runtime-preview", "widget-page-definition", "schemas.filtered", "surfaces", "actions", "capabilities" ], "tags": [ "page-builder", "authoring", "settings-panel", "composition", "bindings", "state", "mission", "quickstart", "runtime-preview", "widget-page-definition" ], "demonstrates": [ "Registered widgets are arranged into one governed Page Builder canvas", "Mission table rowClick writes state.selection.missionId through composition.links", "The selected mission id hydrates team, timeline and team-plan widgets", "Chart, table and form widgets share the same quickstart resource contract", "Open builder opens the canonical Page Builder editor for this page", "Inspector keeps the saved page JSON and AI handoff plan copyable" ], "platformFeatures": [ "page-builder", "settings-panel-bridge", "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "surfaces", "actions", "capabilities", "praxis-chart", "praxis-table", "schema-driven-form", "composition.links", "state.values", "runtime-preview", "widget-page-definition" ], "backendSurfaces": [ "GET /schemas/filtered", "GET /schemas/surfaces?resource=operations.missoes", "GET /schemas/actions?resource=operations.missoes", "POST /api/operations/missoes/filter", "GET /api/operations/missoes/{id}/capabilities", "GET /api/operations/missoes/{id}/summary", "PATCH /api/operations/missoes/{id}/team-plan", "POST /api/operations/missao-participantes/filter", "POST /api/operations/missao-eventos/filter", "POST /api/operations/vw-resumo-missoes/stats/group-by" ], "complexity": "advanced", "catalogRole": "authoring-workflow", "learningStage": "composition", "proofRank": 2, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "page-builder-primary-component", "customize-opens-page-builder-editor", "mission-table-rendered", "team-and-timeline-query-context-links-present", "team-plan-partial-form-declared", "generated-widget-page-definition-copyable" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-catalog", "schemas-surfaces-operations-missoes", "schemas-actions-operations-missoes", "operations-missoes-item-capabilities", "vw-resumo-missoes-stats-status" ], "pendingHttpIds": [ "missao-participantes-filter-basic", "missao-eventos-filter-basic" ], "notes": [ "Use the Open builder button on this example to render the canonical DynamicPageBuilderComponent from @praxisui/page-builder, including the connection editor toolbar.", "The saved payload remains the page JSON; Page Builder is the authoring surface, not a second runtime contract.", "The UiCompositionPlan recipe is included as the AI handoff shape before page compilation." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-page-builder.json", "praxis-ui-angular/examples/ai-recipes/praxis-page-builder.master-detail.json", "praxis-ui-angular/examples/ai-recipes/praxis-page-builder.ui-composition-plan.json", "praxis-ui-angular/projects/praxis-page-builder/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/page-builder-authoring-workspace.json", "documentation": { "story": { "pt": "Uma equipe de produto precisa evoluir uma página operacional sem criar uma segunda DSL nem perder o vínculo com recursos, capabilities e componentes registrados. O Page Builder edita visualmente o mesmo documento que o runtime materializa.", "en": "A product team needs to evolve an operational page without creating a second DSL or losing its link to resources, capabilities and registered components. Page Builder visually edits the same document materialized by the runtime." }, "outcome": { "pt": "Layout, shells, widgets e conexões permanecem inspecionáveis no JSON; aplicar uma alteração visual produz outro WidgetPageDefinition governável, pronto para revisão e persistência pelo host.", "en": "Layout, shells, widgets and connections remain inspectable in JSON; applying a visual change produces another governable WidgetPageDefinition ready for host review and persistence." }, "componentRoles": [ { "component": "praxis-page-builder", "jsonPath": "authoringPlan -> WidgetPageDefinition", "role": { "pt": "Edita visualmente layout, shells, widgets e conexões do documento canônico.", "en": "Visually edits layout, shells, widgets and connections in the canonical document." }, "rationale": { "pt": "Permite autoria revisável sem introduzir uma representação persistida paralela ao runtime.", "en": "Enables reviewable authoring without introducing a persisted representation parallel to the runtime." } }, { "component": "praxis-chart", "jsonPath": "page.widgets[missionStatusChart]", "role": { "pt": "Demonstra que o builder hospeda o editor publicado pelo owner do gráfico.", "en": "Demonstrates that the builder hosts the editor published by the chart owner." }, "rationale": { "pt": "Page Builder compõe o widget, mas não redefine métricas, fontes ou semântica de analytics.", "en": "Page Builder composes the widget but does not redefine metrics, sources or analytics semantics." } }, { "component": "praxis-table", "jsonPath": "page.widgets[missionCanvas|missionTeam|missionTimeline]", "role": { "pt": "Fornece seleção, coleções relacionadas e endpoints de composição para o canvas.", "en": "Provides selection, related collections and composition endpoints for the canvas." }, "rationale": { "pt": "Torna o wiring visual verificável sobre ports realmente publicados pelos componentes.", "en": "Makes visual wiring verifiable against ports actually published by components." } }, { "component": "praxis-dynamic-form", "jsonPath": "page.widgets[teamPlanForm]", "role": { "pt": "Materializa o formulário parcial de planejamento da equipe dentro da página authorada.", "en": "Materializes the partial team-planning form inside the authored page." }, "rationale": { "pt": "Preserva schema e validação do formulário enquanto o builder decide apenas sua posição e conexão.", "en": "Preserves form schema and validation while the builder decides only position and connection." } } ], "jsonWalkthrough": [ { "jsonPath": "page.widgets[]", "title": { "pt": "Paleta materializada", "en": "Materialized palette" }, "explanation": { "pt": "Cada item registra shell e definition do widget; o builder não achata contratos especializados em uma configuração genérica.", "en": "Each item registers widget shell and definition; the builder does not flatten specialized contracts into generic configuration." } }, { "jsonPath": "page.composition.links", "title": { "pt": "Wiring auditável", "en": "Auditable wiring" }, "explanation": { "pt": "Conecta eventos e inputs por endpoints estruturados, incluindo seleção, estado e queryContext.", "en": "Connects events and inputs through structured endpoints, including selection, state and queryContext." } }, { "jsonPath": "page.state.values", "title": { "pt": "Contexto persistível", "en": "Persistable context" }, "explanation": { "pt": "Declara o estado inicial usado pelas superfícies relacionadas sem esconder store específico na rota.", "en": "Declares initial state used by related surfaces without hiding a route-specific store." } }, { "jsonPath": "sourceRecipes", "title": { "pt": "Da intenção ao documento", "en": "From intent to document" }, "explanation": { "pt": "Mostra o UiCompositionPlan como handoff intermediário e o WidgetPageDefinition como resultado persistível.", "en": "Shows UiCompositionPlan as the intermediate handoff and WidgetPageDefinition as the persistable result." } } ], "experiments": [ { "pt": "Abra o builder, reposicione um widget e compare o page JSON antes de aplicar para localizar o delta produzido.", "en": "Open the builder, reposition a widget and compare page JSON before applying to locate the produced delta." }, { "pt": "Edite uma conexão entre seleção e detalhe, verificando endpoints, transform e policy antes de salvar.", "en": "Edit a selection-to-detail connection, checking endpoints, transform and policy before saving." }, { "pt": "Abra o editor do gráfico e confirme que suas opções vêm do owner de Charts, não de campos duplicados no Page Builder.", "en": "Open the chart editor and confirm its options come from the Charts owner rather than duplicated Page Builder fields." } ], "productionNotes": [ { "pt": "O documento salvo continua sendo WidgetPageDefinition; UiCompositionPlan e canvas são superfícies de authoring derivadas.", "en": "The saved document remains WidgetPageDefinition; UiCompositionPlan and canvas are derived authoring surfaces." }, { "pt": "Persistência, ETag, aprovação e autorização do apply pertencem ao host e à fronteira de configuração governada.", "en": "Persistence, ETag, approval and apply authorization belong to the host and governed configuration boundary." }, { "pt": "Component editors permanecem propriedade de cada lib; Page Builder apenas resolve e hospeda ComponentDocMeta.configEditor.", "en": "Component editors remain owned by each library; Page Builder only resolves and hosts ComponentDocMeta.configEditor." } ] }, "envelope": { "id": "page-builder-authoring-workspace", "title": "Page Builder - authoring workspace", "summary": "Turns Page Builder into a governed authoring workspace where teams edit layout, bindings and page JSON while the backend contract remains the source of truth.", "component": "praxis-dynamic-page", "category": "page", "primaryComponent": "praxis-page-builder", "runtime": { "mode": "authored-customizable", "minPraxisUiPackage": "@praxisui/page-builder" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" }, "requires": [ "widget-registry", "settings-panel-bridge", "page-builder", "dynamic-widget-resolution", "composition.links", "state.values", "runtime-preview", "widget-page-definition", "schemas.filtered", "surfaces", "actions", "capabilities" ], "tags": [ "page-builder", "authoring", "settings-panel", "composition", "bindings", "state", "mission", "quickstart", "runtime-preview", "widget-page-definition" ], "demonstrates": [ "Registered widgets are arranged into one governed Page Builder canvas", "Mission table rowClick writes state.selection.missionId through composition.links", "The selected mission id hydrates team, timeline and team-plan widgets", "Chart, table and form widgets share the same quickstart resource contract", "Open builder opens the canonical Page Builder editor for this page", "Inspector keeps the saved page JSON and AI handoff plan copyable" ], "platformFeatures": [ "page-builder", "settings-panel-bridge", "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "surfaces", "actions", "capabilities", "praxis-chart", "praxis-table", "schema-driven-form", "composition.links", "state.values", "runtime-preview", "widget-page-definition" ], "backendSurfaces": [ "GET /schemas/filtered", "GET /schemas/surfaces?resource=operations.missoes", "GET /schemas/actions?resource=operations.missoes", "POST /api/operations/missoes/filter", "GET /api/operations/missoes/{id}/capabilities", "GET /api/operations/missoes/{id}/summary", "PATCH /api/operations/missoes/{id}/team-plan", "POST /api/operations/missao-participantes/filter", "POST /api/operations/missao-eventos/filter", "POST /api/operations/vw-resumo-missoes/stats/group-by" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "page-builder-primary-component", "customize-opens-page-builder-editor", "mission-table-rendered", "team-and-timeline-query-context-links-present", "team-plan-partial-form-declared", "generated-widget-page-definition-copyable" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-catalog", "schemas-surfaces-operations-missoes", "schemas-actions-operations-missoes", "operations-missoes-item-capabilities", "vw-resumo-missoes-stats-status" ], "pendingHttpIds": [ "missao-participantes-filter-basic", "missao-eventos-filter-basic" ], "notes": [ "Use the Open builder button on this example to render the canonical DynamicPageBuilderComponent from @praxisui/page-builder, including the connection editor toolbar.", "The saved payload remains the page JSON; Page Builder is the authoring surface, not a second runtime contract.", "The UiCompositionPlan recipe is included as the AI handoff shape before page compilation." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-page-builder.json", "praxis-ui-angular/examples/ai-recipes/praxis-page-builder.master-detail.json", "praxis-ui-angular/examples/ai-recipes/praxis-page-builder.ui-composition-plan.json", "praxis-ui-angular/projects/praxis-page-builder/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "deviceLayouts": { "desktop": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "widgetOverrides": { "missionWorkspaceBrief": { "order": 10, "span": 3 }, "missionCanvas": { "order": 20, "span": 3 }, "missionStatusChart": { "order": 30, "span": 1 }, "teamPlanForm": { "order": 40, "span": 1 }, "missionTeam": { "order": 50, "span": 1 }, "missionTimeline": { "order": 60, "span": 3 } } }, "tablet": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgetOverrides": { "missionWorkspaceBrief": { "order": 10, "span": 1 }, "missionCanvas": { "order": 20, "span": 1 }, "missionStatusChart": { "order": 30, "span": 1 }, "teamPlanForm": { "order": 40, "span": 1 }, "missionTeam": { "order": 50, "span": 1 }, "missionTimeline": { "order": 60, "span": 1 } } }, "mobile": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgetOverrides": { "missionWorkspaceBrief": { "order": 10, "span": 1 }, "missionCanvas": { "order": 20, "span": 1 }, "missionStatusChart": { "order": 30, "span": 1 }, "teamPlanForm": { "order": 40, "span": 1 }, "missionTeam": { "order": 50, "span": 1 }, "missionTimeline": { "order": 60, "span": 1 } } } }, "state": { "values": { "selection": { "missionId": 36 } } }, "widgets": [ { "key": "missionWorkspaceBrief", "shell": { "kind": "dashboard-card", "icon": "assignment", "title": "Mission workspace brief", "subtitle": "Selected mission drives the detail surfaces and planning form" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "dynamic-page-mission-brief", "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "timeline", "title": "Authored runtime path", "position": "alternate", "connectorVariant": "dashed", "markerVariant": "number", "items": [ { "icon": "view_quilt", "title": "Choose the mission", "subtitle": "The table emits rowClick and writes state.selection.missionId.", "meta": "operations/missoes", "opposite": "1. Select", "badge": "canvas" }, { "icon": "groups", "title": "Plan the team", "subtitle": "The partial form uses the selected id for the team-plan action.", "meta": "team-plan schema", "opposite": "2. Author", "badge": "action" }, { "icon": "timeline", "title": "Inspect dependent surfaces", "subtitle": "Team and timeline widgets read the same state as queryContext.", "meta": "missao-participantes + missao-eventos", "opposite": "3. Bind", "badge": "bindings" }, { "icon": "policy", "title": "Check governance", "subtitle": "Surfaces, actions and capabilities stay visible from the command widget.", "meta": "/schemas/surfaces + /schemas/actions", "opposite": "4. Govern", "badge": "contract" } ] } ] } } } }, { "key": "missionStatusChart", "shell": { "kind": "dashboard-card", "icon": "bar_chart", "title": "Analytics widget", "subtitle": "Group-by stats from the operations summary view" }, "definition": { "id": "praxis-chart", "bindingOrder": [ "config" ], "inputs": { "config": { "id": "page-builder-mission-status-chart", "type": "donut", "title": "Mission status", "subtitle": "Authored chart widget", "sizing": { "mode": "fixed", "height": 260, "minHeight": 220 }, "dataSource": { "kind": "remote", "resourcePath": "operations/vw-resumo-missoes", "query": { "sourceKind": "praxis.stats", "statsOperation": "group-by", "statsPath": "/api/operations/vw-resumo-missoes/stats/group-by", "statsRequest": { "filter": {}, "field": "status", "metric": { "operation": "COUNT", "alias": "missions" }, "limit": 8, "orderBy": "KEY_ASC" }, "metrics": [ { "aggregation": "count", "alias": "missions" } ] } }, "axes": { "x": { "field": "status", "type": "category", "label": "Status" }, "y": { "field": "missions", "type": "value", "label": "Missions" } }, "series": [ { "id": "missions", "name": "Missions", "categoryField": "status", "metric": { "field": "missions", "aggregation": "sum" } } ], "interactions": { "pointClick": true, "selection": true }, "theme": { "palette": [ "#1263b4", "#0f766e", "#f08c00", "#c92a2a", "#7b61ff" ], "legend": { "visible": true, "position": "bottom" }, "tooltip": { "enabled": true, "trigger": "item" }, "surface": { "mode": "embedded", "background": "transparent", "borderWidth": 0, "borderRadius": 0 } } } }, "outputs": { "pointClick": "emit", "selectionChange": "emit" } } }, { "key": "teamPlanForm", "shell": { "kind": "dashboard-card", "icon": "groups", "title": "Partial form widget", "subtitle": "Team-plan surface bound to selected mission state" }, "definition": { "id": "praxis-dynamic-form", "bindingOrder": [ "formId", "config", "resourcePath", "resourceId" ], "inputs": { "formId": "page-builder-mission-team-plan", "resourcePath": "operations/missoes", "resourceId": 1, "config": { "metadata": { "name": "Mission team planning request", "version": "1.0.0" }, "sections": [ { "id": "team-plan", "title": "Team plan", "description": "Edit the mission participant collection published by the quickstart team-plan action schema.", "appearance": "outlined", "rows": [ { "id": "team-plan-row", "columns": [ { "id": "team-plan-main", "span": { "md": 12, "lg": 12 }, "fields": [ "participantes" ] } ] } ] } ], "fieldMetadata": [ { "name": "participantes", "label": "Participantes", "controlType": "array", "type": "array", "required": true, "defaultValue": [ { "id": 2, "funcionarioId": 2, "funcionarioNome": "Ayla Hayes", "papel": "LIDER", "ordem": 1, "principal": true }, { "id": 5, "funcionarioId": 5, "funcionarioNome": "Tomas Hayes", "papel": "TECNICO", "ordem": 2, "principal": false }, { "id": 8, "funcionarioId": 8, "funcionarioNome": "Zara Hayes", "papel": "MEDICO", "ordem": 3, "principal": false } ], "array": { "itemType": "object", "mode": "cards", "itemSchemaRef": "#/components/schemas/PlanejarEquipeMissaoParticipanteDTO", "itemIdentityField": "id", "minItems": 1, "maxItems": 12, "addLabel": "Adicionar participante", "emptyState": "Nenhum participante planejado", "itemTitleTemplate": "{{funcionarioNome}} - {{papel}}", "deleteMode": "removeFromPayload", "operations": { "add": true, "edit": true, "remove": true }, "collectionValidation": { "uniqueBy": [ "funcionarioId" ], "exactlyOne": { "field": "principal", "value": true, "message": "Defina exatamente um participante principal." } }, "itemSchema": { "fields": [ { "name": "id", "label": "ID", "controlType": "numericTextBox", "readOnly": true, "hidden": true }, { "name": "funcionarioId", "label": "Funcionario", "controlType": "asyncSelect", "required": true, "endpoint": "/api/human-resources/funcionarios/options/filter", "displayField": "label", "valueField": "id" }, { "name": "funcionarioNome", "label": "Nome", "controlType": "input", "readOnly": true }, { "name": "papel", "label": "Papel", "controlType": "select", "required": true, "options": [ { "label": "Lider", "value": "LIDER" }, { "label": "Tecnico", "value": "TECNICO" }, { "label": "Analista", "value": "ANALISTA" }, { "label": "Piloto", "value": "PILOTO" }, { "label": "Medico", "value": "MEDICO" } ] }, { "name": "ordem", "label": "Ordem", "controlType": "numericTextBox", "readOnly": true }, { "name": "principal", "label": "Principal", "controlType": "toggle" } ] } } } ], "actions": { "submit": { "id": "submit-team-plan", "label": "Submit team plan", "icon": "task_alt", "visible": true, "type": "submit" }, "reset": { "id": "reset-team-plan", "label": "Reset", "visible": true, "type": "reset" }, "position": "right", "placement": "afterSections", "spacing": "normal" }, "submit": { "method": "patch", "url": "/api/operations/missoes/1/team-plan" } } } } }, { "key": "missionCanvas", "shell": { "kind": "dashboard-card", "icon": "view_quilt", "title": "Mission list", "subtitle": "Select a mission, then inspect its related surfaces and actions" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "operations/missoes", "tableId": "page-builder-missions-canvas", "config": { "toolbar": { "visible": true, "title": "Missions", "subtitle": "Authoring source widget", "actionsPosition": "both", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } } ] }, "columns": [ { "field": "titulo", "header": "Mission", "type": "text", "sticky": "start" }, { "field": "status", "header": "Status", "type": "badge", "renderer": { "type": "badge", "badge": { "textField": "status", "icon": "radio_button_checked", "color": "primary", "variant": "soft" } }, "conditionalRenderers": [ { "condition": { "===": [ { "var": "status" }, "PLANEJADA" ] }, "renderer": { "type": "badge", "badge": { "textField": "status", "icon": "event", "color": "info", "variant": "soft" } } }, { "condition": { "===": [ { "var": "status" }, "EM_ANDAMENTO" ] }, "renderer": { "type": "badge", "badge": { "textField": "status", "icon": "play_circle", "color": "success", "variant": "soft" } } }, { "condition": { "===": [ { "var": "status" }, "PAUSADA" ] }, "renderer": { "type": "badge", "badge": { "textField": "status", "icon": "pause_circle", "color": "warning", "variant": "soft" } } }, { "condition": { "===": [ { "var": "status" }, "CONCLUIDA" ] }, "renderer": { "type": "badge", "badge": { "textField": "status", "icon": "check_circle", "color": "primary", "variant": "soft" } } }, { "condition": { "===": [ { "var": "status" }, "FALHOU" ] }, "renderer": { "type": "badge", "badge": { "textField": "status", "icon": "error", "color": "danger", "variant": "soft" } } } ] }, { "field": "prioridade", "header": "Priority", "type": "badge", "renderer": { "type": "badge", "badge": { "textField": "prioridade", "icon": "flag", "color": "primary", "variant": "soft" } }, "conditionalRenderers": [ { "condition": { "===": [ { "var": "prioridade" }, "BAIXA" ] }, "renderer": { "type": "badge", "badge": { "textField": "prioridade", "icon": "south", "color": "primary", "variant": "soft" } } }, { "condition": { "===": [ { "var": "prioridade" }, "MEDIA" ] }, "renderer": { "type": "badge", "badge": { "textField": "prioridade", "icon": "remove", "color": "info", "variant": "soft" } } }, { "condition": { "===": [ { "var": "prioridade" }, "ALTA" ] }, "renderer": { "type": "badge", "badge": { "textField": "prioridade", "icon": "priority_high", "color": "warning", "variant": "soft" } } }, { "condition": { "===": [ { "var": "prioridade" }, "CRITICA" ] }, "renderer": { "type": "badge", "badge": { "textField": "prioridade", "icon": "emergency_home", "color": "danger", "variant": "soft" } } } ] }, { "field": "equipeResponsavel", "header": "Ops context", "type": "compose", "renderer": { "type": "compose", "compose": { "layout": { "direction": "row", "wrap": true, "gap": 6, "align": "center" }, "items": [ { "type": "badge", "badge": { "textField": "equipeResponsavel", "icon": "groups", "color": "info", "variant": "outlined" } }, { "type": "badge", "badge": { "textField": "local", "icon": "place", "color": "primary", "variant": "soft" } } ] } } } ], "actions": { "row": { "enabled": true, "display": "buttons", "width": "320px", "maxVisibleActions": 2, "behavior": { "maxInline": 2 }, "position": "end", "header": { "label": "Inspect", "icon": "travel_explore" }, "actions": [ { "id": "mission-briefing", "action": "inspect-surfaces", "label": "Briefing", "icon": "travel_explore", "tooltip": "Open mission summary, team and timeline surfaces", "discovery": { "rel": "surfaces", "scope": "item", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "mission-actions", "action": "inspect-actions", "label": "Capabilities", "icon": "policy", "tooltip": "Open item actions and capability snapshot", "discovery": { "rel": "capabilities", "scope": "item", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } } ] } }, "behavior": { "selection": { "enabled": true, "type": "single" }, "density": "compact" } } }, "outputs": { "rowClick": "emit", "rowAction": "emit", "toolbarAction": "emit" } } }, { "key": "missionTeam", "shell": { "kind": "dashboard-card", "icon": "badge", "title": "Team surface", "subtitle": "queryContext authored from page state" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath", "queryContext" ], "inputs": { "resourcePath": "operations/missao-participantes", "tableId": "page-builder-mission-team", "queryContext": { "filters": { "missaoId": 36 } }, "config": { "toolbar": { "visible": true, "title": "Team", "subtitle": "State-bound participant resource" }, "columns": [ { "field": "funcionarioNome", "header": "Participant", "type": "text", "sticky": "start" }, { "field": "papel", "header": "Role", "type": "badge", "renderer": { "type": "badge", "badge": { "textField": "papel", "icon": "badge", "color": "primary", "variant": "soft" } }, "conditionalRenderers": [ { "condition": { "===": [ { "var": "papel" }, "LIDER" ] }, "renderer": { "type": "badge", "badge": { "textField": "papel", "icon": "workspace_premium", "color": "primary", "variant": "soft" } } }, { "condition": { "===": [ { "var": "papel" }, "COMBATE" ] }, "renderer": { "type": "badge", "badge": { "textField": "papel", "icon": "security", "color": "danger", "variant": "soft" } } }, { "condition": { "===": [ { "var": "papel" }, "SUPORTE" ] }, "renderer": { "type": "badge", "badge": { "textField": "papel", "icon": "support_agent", "color": "info", "variant": "soft" } } }, { "condition": { "===": [ { "var": "papel" }, "TECNICO" ] }, "renderer": { "type": "badge", "badge": { "textField": "papel", "icon": "engineering", "color": "warning", "variant": "soft" } } }, { "condition": { "===": [ { "var": "papel" }, "MEDICO" ] }, "renderer": { "type": "badge", "badge": { "textField": "papel", "icon": "medical_services", "color": "success", "variant": "soft" } } } ] }, { "field": "resultado", "header": "Outcome", "type": "badge", "renderer": { "type": "badge", "badge": { "textField": "resultado", "icon": "pending", "color": "primary", "variant": "soft" } }, "conditionalRenderers": [ { "condition": { "===": [ { "var": "resultado" }, "NA" ] }, "renderer": { "type": "badge", "badge": { "textField": "resultado", "icon": "pending", "color": "primary", "variant": "soft" } } }, { "condition": { "===": [ { "var": "resultado" }, "SUCESSO" ] }, "renderer": { "type": "badge", "badge": { "textField": "resultado", "icon": "check_circle", "color": "success", "variant": "soft" } } }, { "condition": { "===": [ { "var": "resultado" }, "FALHA" ] }, "renderer": { "type": "badge", "badge": { "textField": "resultado", "icon": "error", "color": "danger", "variant": "soft" } } }, { "condition": { "===": [ { "var": "resultado" }, "PARCIAL" ] }, "renderer": { "type": "badge", "badge": { "textField": "resultado", "icon": "rule", "color": "warning", "variant": "soft" } } } ] } ], "behavior": { "density": "compact" } } }, "outputs": { "rowClick": "emit" } } }, { "key": "missionTimeline", "shell": { "kind": "dashboard-card", "icon": "timeline", "title": "Timeline surface", "subtitle": "Second downstream widget fed by the same selected id" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "dynamic-page-mission-timeline", "context": { "selection": { "missionId": 36 }, "resourcePath": "operations/missao-eventos" }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "timeline", "id": "page-builder-mission-timeline-36", "title": "Vistoria dos Portais Urbanos timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 36 ] }, { "==": [ { "var": "missionId" }, 36 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-1-extra", "icon": "shield", "title": "Reforços a caminho (SHIELD)", "subtitle": "Extra operational support attached to the selected mission.", "meta": "18/10/2025", "badge": "Extra", "markerColor": "neutral" }, { "id": "mission-1-combat", "icon": "local_fire_department", "title": "Contato tático ativo em Batalha de Nova York", "subtitle": "Combat event recorded for the active operational surface.", "meta": "18/10/2025", "badge": "Combate", "markerColor": "error" }, { "id": "mission-1-intel", "icon": "timeline", "title": "Pacote de inteligência consolidado para Batalha de Nova York", "subtitle": "Intel update exposed as a governed timeline node.", "meta": "17/10/2025", "badge": "Intel", "markerColor": "primary" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-35", "title": "Auditoria em Sokovia Reconstruction Council timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 35 ] }, { "==": [ { "var": "missionId" }, 35 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-2-pause", "icon": "pause_circle", "title": "Auditoria pausada para revisão de cadeia de custódia", "subtitle": "The selected Sokovia mission exposes compliance events instead of combat telemetry.", "meta": "22/10/2025", "badge": "Governança", "markerColor": "warning" }, { "id": "mission-2-evidence", "icon": "policy", "title": "Pacote de evidências entregue ao conselho", "subtitle": "Document review and sign-off remain attached to the selected mission.", "meta": "21/10/2025", "badge": "Auditoria", "markerColor": "info" }, { "id": "mission-2-briefing", "icon": "fact_check", "title": "Briefing de reconstrução sincronizado", "subtitle": "Operational notes for Sokovia are rendered by the same timeline component.", "meta": "20/10/2025", "badge": "Briefing", "markerColor": "primary" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-30", "title": "Operação Linha do Tempo Segura timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 30 ] }, { "==": [ { "var": "missionId" }, 30 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-3-critical", "icon": "emergency_home", "title": "Anomalia temporal escalada como crítica", "subtitle": "TVA Nexus events are shown only when this mission is selected.", "meta": "24/10/2025", "badge": "Crítica", "markerColor": "error" }, { "id": "mission-3-lock", "icon": "lock_clock", "title": "Janela operacional congelada", "subtitle": "The downstream rich-content surface reflects the mission-specific timeline.", "meta": "24/10/2025", "badge": "Controle", "markerColor": "warning" }, { "id": "mission-3-intel", "icon": "hub", "title": "Mapa de ramificações aprovado", "subtitle": "Governed intel confirms which dependent views stay in sync.", "meta": "23/10/2025", "badge": "Intel", "markerColor": "primary" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-33", "title": "Comboio Kree-Skrull timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 33 ] }, { "==": [ { "var": "missionId" }, 33 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-4-start", "icon": "route", "title": "Comboio iniciou travessia pela zona neutra", "subtitle": "The same selection state now drives a logistics-oriented timeline.", "meta": "19/10/2025", "badge": "Logística", "markerColor": "info" }, { "id": "mission-4-contact", "icon": "sensors", "title": "Contato diplomático confirmado", "subtitle": "Kree-Skrull signals replace the New York timeline after row selection.", "meta": "19/10/2025", "badge": "Contato", "markerColor": "success" }, { "id": "mission-4-risk", "icon": "warning", "title": "Risco de interceptação reduzido", "subtitle": "Operational risk was downgraded after convoy telemetry stabilized.", "meta": "18/10/2025", "badge": "Risco", "markerColor": "warning" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-32", "title": "Escudo de Atlantis timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 32 ] }, { "==": [ { "var": "missionId" }, 32 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-5-shield", "icon": "water", "title": "Escudo marítimo ativado em Atlantis", "subtitle": "The selected Atlantis mission renders ocean-defense chronology.", "meta": "20/10/2025", "badge": "Defesa", "markerColor": "info" }, { "id": "mission-5-briefing", "icon": "groups", "title": "Briefing conjunto com guarda costeira", "subtitle": "Dependent surfaces stay scoped to the selected mission.", "meta": "19/10/2025", "badge": "Briefing", "markerColor": "primary" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-31", "title": "Falha de Custódia em Kamino timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 31 ] }, { "==": [ { "var": "missionId" }, 31 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-6-failure", "icon": "error", "title": "Quebra de custódia registrada em Kamino", "subtitle": "Failure events replace the active timeline after selecting this mission.", "meta": "22/10/2025", "badge": "Falhou", "markerColor": "error" }, { "id": "mission-6-containment", "icon": "inventory_2", "title": "Inventário crítico isolado", "subtitle": "Evidence handling is governed by the same rich-content contract.", "meta": "21/10/2025", "badge": "Custódia", "markerColor": "warning" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-37", "title": "Rescaldo em Ravencroft timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 37 ] }, { "==": [ { "var": "missionId" }, 37 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-7-cleanup", "icon": "task_alt", "title": "Rescaldo concluído em Ravencroft", "subtitle": "Completed recovery actions are shown for the selected mission only.", "meta": "16/10/2025", "badge": "Concluída", "markerColor": "success" }, { "id": "mission-7-report", "icon": "summarize", "title": "Relatório pós-operação publicado", "subtitle": "The timeline surface reflects the selected mission state.", "meta": "15/10/2025", "badge": "Relatório", "markerColor": "primary" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-34", "title": "Recolhimento de Cristais Terrígenos timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 34 ] }, { "==": [ { "var": "missionId" }, 34 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-8-collect", "icon": "diamond", "title": "Cristais Terrígenos recolhidos", "subtitle": "Collection milestones are scoped to the selected mission.", "meta": "14/10/2025", "badge": "Coleta", "markerColor": "success" }, { "id": "mission-8-secure", "icon": "lock", "title": "Armazenamento seguro confirmado", "subtitle": "The selected mission drives this downstream knowledge surface.", "meta": "14/10/2025", "badge": "Seguro", "markerColor": "info" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-29", "title": "Ritual de Contenção timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 29 ] }, { "==": [ { "var": "missionId" }, 29 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-9-contain", "icon": "emergency_home", "title": "Ritual de contenção preparado", "subtitle": "Critical containment events appear when this mission is selected.", "meta": "23/10/2025", "badge": "Crítica", "markerColor": "error" }, { "id": "mission-9-anchor", "icon": "anchor", "title": "Âncoras de proteção verificadas", "subtitle": "Governed timeline nodes keep the demonstration coherent.", "meta": "22/10/2025", "badge": "Proteção", "markerColor": "warning" } ] }, { "type": "timeline", "id": "page-builder-mission-timeline-27", "title": "Baluarte Latveriano timeline", "visibleWhen": { "or": [ { "==": [ { "var": "selection.missionId" }, 27 ] }, { "==": [ { "var": "missionId" }, 27 ] } ] }, "position": "right", "connectorVariant": "dashed", "markerVariant": "icon", "markerColor": "info", "items": [ { "id": "mission-10-fortify", "icon": "fort", "title": "Baluarte Latveriano fortificado", "subtitle": "Latveria defense updates are tied to the selected mission.", "meta": "18/10/2025", "badge": "Alta", "markerColor": "warning" }, { "id": "mission-10-watch", "icon": "visibility", "title": "Monitoramento diplomático ativo", "subtitle": "The same component renders a mission-specific chronology.", "meta": "17/10/2025", "badge": "Monitoramento", "markerColor": "primary" } ] } ] } } } } ], "composition": { "version": "1.0.0", "links": [ { "id": "page-builder:mission-rowClick->state:selection.missionId", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "missionCanvas", "port": "rowClick", "direction": "output", "componentType": "praxis-table" } }, "to": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "page-builder:pick-mission-id", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.id" } } ] }, "metadata": { "source": "native-composition-link", "label": "Selected mission id" } }, { "id": "page-builder:state:selection.missionId->team.queryContext", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionTeam", "port": "queryContext", "direction": "input", "componentType": "praxis-table" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "page-builder:team-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": { "missaoId": "${source}" } } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true }, "metadata": { "source": "native-composition-link", "label": "Filter team by selected mission" } }, { "id": "page-builder:state:selection.missionId->timeline.context", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionTimeline", "port": "context", "direction": "input", "componentType": "praxis-rich-content" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "page-builder:timeline-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "missionId": "${current}", "selection": { "missionId": "${current}" }, "resourcePath": "operations/missao-eventos" } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true }, "metadata": { "source": "native-composition-link", "label": "Filter timeline by selected mission" } }, { "id": "page-builder:state:selection.missionId->teamPlan.resourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "teamPlanForm", "port": "resourceId", "direction": "input", "componentType": "praxis-dynamic-form" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "page-builder:team-plan-resource-id", "kind": "identity", "phase": "link-propagation" } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true }, "metadata": { "source": "native-composition-link", "label": "Bind team plan form to selected mission" } } ] } } } }, { "id": "mission-command-center", "title": "Página operacional executável", "summary": "Shows an executable enterprise page that combines business context, action discovery, related tables, indicators and quickstart operational evidence.", "i18n": { "pt": { "title": "Página operacional executável", "summary": "Mostra uma página enterprise executável com contexto de negócio, discovery de ações, tabelas relacionadas, indicadores e evidência operacional.", "demonstrates": [ "Explore Página operacional executável e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-page materializa operations/missoes com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Mostra uma página enterprise executável com contexto de negócio, discovery de ações, tabelas relacionadas, indicadores e evidência operacional.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e filter." ] } }, "publicRoute": "/examples/dynamic-page/mission-command-center", "publicUrl": "https://praxisui.dev/examples/dynamic-page/mission-command-center", "category": "page", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-page", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes", "requires": [ "schemas.filtered", "filter", "surfaces", "actions", "capabilities", "analytics", "charts", "composition.links", "remote-data" ], "tags": [ "mission", "command-center", "surfaces", "actions", "analytics", "charts", "composition", "enterprise-proof", "semantic-decision", "quickstart" ], "demonstrates": [ "Prova pública atual de uma página operacional montada pela plataforma", "A descrição do negócio orienta campos, superfícies, catálogo de ações e capacidades disponíveis", "A página combina múltiplas fontes do backend em um fluxo de trabalho único", "A tabela principal expõe ações de workflow executáveis mediadas pelo host Angular", "A seleção de missão hidrata uma superfície de detalhe por composition.links, sem tela manual", "Resumo, equipe e linha do tempo aparecem juntos sem código de tela específico no host", "Widgets de gráfico transformam status, papéis e ritmo de eventos em indicadores operacionais", "Botões de inspeção expõem superfícies e ações como eventos de descoberta", "Projeções analíticas ficam disponíveis como parte do contrato operacional publicado", "O estado da composição filtra equipe e linha do tempo por vínculos declarativos" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "surfaces", "actions", "capabilities", "analytics", "praxis-chart", "local-analytics-widgets", "composition.links", "state.values", "semantic-grounding", "governed-materialization", "published-operational-evidence" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/operations/vw-resumo-missoes/filter", "POST /api/operations/missoes/filter", "GET /api/operations/missoes/capabilities", "GET /api/operations/missoes/{id}/summary", "GET /api/operations/missoes/{id}/team", "GET /api/operations/missoes/{id}/timeline", "GET /api/operations/missoes/{id}/capabilities", "POST /api/operations/missoes/{id}/actions/start", "POST /api/operations/missoes/{id}/actions/pause", "POST /api/operations/missoes/{id}/actions/resume", "POST /api/operations/missoes/{id}/actions/complete", "POST /api/operations/vw-resumo-missoes/stats/group-by", "POST /api/operations/vw-resumo-missoes/stats/timeseries", "POST /api/operations/missao-participantes/stats/group-by", "POST /api/operations/missao-participantes/filter", "POST /api/operations/missao-eventos/stats/timeseries", "POST /api/operations/missao-eventos/filter" ], "complexity": "advanced", "catalogRole": "composition", "learningStage": "composition", "proofRank": 1, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "mission-summary-table-rendered", "mission-team-table-rendered", "mission-timeline-table-rendered", "mission-chart-widgets-rendered", "resource-discovery-toolbar-actions-rendered", "selection-query-context-links-present", "selection-detail-surface-linked", "workflow-actions-host-mediated", "analytics-surfaces-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-catalog", "schemas-surfaces-operations-missoes", "schemas-actions-operations-missoes", "operations-missoes-item-capabilities", "vw-resumo-missoes-filter-basic", "vw-resumo-missoes-stats-status", "missao-participantes-stats-papel", "missao-eventos-stats-ocorrido-em-day" ], "pendingHttpIds": [], "notes": [ "Use este exemplo como a prova enterprise pública atual para avaliação técnica e de negócio.", "Use os ids recomendados como caminho de cópia para agentes hoje.", "Superfícies, catálogo de ações e capacidades por item estão confirmados na API quickstart publicada.", "Participantes e indicadores de eventos estão confirmados na API quickstart publicada." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.mission-command-center.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.table.json", "praxis-ui-angular/examples/ai-recipes/praxis-page-builder.ui-composition-plan.json" ], "sourcePath": "docs/examples/dynamic-page/examples/mission-command-center.json", "documentation": { "story": { "pt": "Uma central de operações precisa relacionar status, equipe, ritmo de eventos e ações de workflow sem montar um dashboard artesanal para cada missão. A jornada combina contratos analíticos, coleções operacionais e contexto selecionado em uma única página executável.", "en": "An operations center needs to relate status, team, event cadence and workflow actions without hand-building a dashboard for every mission. The journey combines analytics contracts, operational collections and selected context in one executable page." }, "outcome": { "pt": "O visitante seleciona uma missão, acompanha três indicadores e vê equipe, timeline e ações responderem ao mesmo estado declarado, com evidência operacional publicada pelo Quickstart.", "en": "The visitor selects a mission, follows three indicators and sees team, timeline and actions respond to the same declared state, backed by published Quickstart operational evidence." }, "componentRoles": [ { "component": "praxis-dynamic-page", "jsonPath": "page", "role": { "pt": "Orquestra layout responsivo, estado e conexões entre todas as superfícies.", "en": "Orchestrates responsive layout, state and connections across every surface." }, "rationale": { "pt": "Mantém o cockpit como documento executável, evitando que a rota Angular vire a proprietária da composição.", "en": "Keeps the cockpit as an executable document instead of making the Angular route own the composition." } }, { "component": "praxis-chart", "jsonPath": "page.widgets[missionStatusChart|missionTeamRoleChart|missionEventRhythmChart]", "role": { "pt": "Materializa status, papéis da equipe e ritmo de eventos como indicadores renderer-neutral.", "en": "Materializes status, team roles and event cadence as renderer-neutral indicators." }, "rationale": { "pt": "Transforma projeções analíticas governadas em leitura visual sem expor opções cruas do engine de gráficos.", "en": "Turns governed analytics projections into visual reading without exposing raw chart-engine options." } }, { "component": "praxis-table", "jsonPath": "page.widgets[missionSummary|missionTeam|missionTimeline]", "role": { "pt": "Apresenta a coleção principal e as evidências relacionadas à missão selecionada.", "en": "Presents the primary collection and evidence related to the selected mission." }, "rationale": { "pt": "Permite comparar registros e executar ações mantendo resourcePath, paginação e capabilities explícitos.", "en": "Supports record comparison and actions while keeping resourcePath, pagination and capabilities explicit." } } ], "jsonWalkthrough": [ { "jsonPath": "page.deviceLayouts", "title": { "pt": "Cockpit responsivo", "en": "Responsive cockpit" }, "explanation": { "pt": "Distribui indicadores, resumo, equipe e timeline em três colunas no desktop e uma coluna nos viewports menores.", "en": "Distributes indicators, summary, team and timeline across three desktop columns and one column on smaller viewports." } }, { "jsonPath": "page.widgets[].definition.inputs.config", "title": { "pt": "Contratos especializados", "en": "Specialized contracts" }, "explanation": { "pt": "Cada gráfico e tabela preserva seu próprio contrato, fonte de dados e outputs dentro da composição.", "en": "Each chart and table preserves its own contract, data source and outputs inside the composition." } }, { "jsonPath": "page.composition.links", "title": { "pt": "Estado que conecta a investigação", "en": "State connecting the investigation" }, "explanation": { "pt": "A seleção da missão escreve um identificador canônico e propaga queryContext para equipe, timeline e detalhes.", "en": "Mission selection writes a canonical identifier and propagates queryContext to team, timeline and details." } }, { "jsonPath": "operationalEvidence.recommendedHttpIds", "title": { "pt": "Prova operacional", "en": "Operational proof" }, "explanation": { "pt": "Relaciona a história visual aos exemplos HTTP publicados de schemas, capabilities e stats.", "en": "Links the visual story to published HTTP examples for schemas, capabilities and stats." } } ], "experiments": [ { "pt": "Altere a ordem dos três gráficos em deviceLayouts.desktop e compare a prioridade da leitura sem mudar seus contratos.", "en": "Change the three charts order in deviceLayouts.desktop and compare reading priority without changing their contracts." }, { "pt": "Troque o missionId inicial em page.state.values e observe quais superfícies dependentes recebem o novo contexto.", "en": "Change the initial missionId in page.state.values and observe which dependent surfaces receive the new context." }, { "pt": "Inspecione uma composition.link e remova-a temporariamente para identificar exatamente qual relação ela materializa.", "en": "Inspect one composition link and temporarily remove it to identify exactly which relationship it materializes." } ], "productionNotes": [ { "pt": "Métricas elegíveis, ações e capabilities pertencem ao backend; o frontend apenas materializa as projeções autorizadas.", "en": "Eligible metrics, actions and capabilities belong to the backend; the frontend only materializes authorized projections." }, { "pt": "Ações de workflow continuam mediadas pelo host com autenticação, autorização, auditoria e tratamento de falhas.", "en": "Workflow actions remain host-mediated with authentication, authorization, auditing and failure handling." }, { "pt": "A referência executável está em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.mission-command-center.json.", "en": "The executable reference lives at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.mission-command-center.json." } ] }, "envelope": { "id": "mission-command-center", "title": "Página operacional executável", "summary": "Shows an executable enterprise page that combines business context, action discovery, related tables, indicators and quickstart operational evidence.", "component": "praxis-dynamic-page", "category": "page", "primaryComponent": "praxis-dynamic-page", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" }, "requires": [ "schemas.filtered", "filter", "surfaces", "actions", "capabilities", "analytics", "charts", "composition.links", "remote-data" ], "tags": [ "mission", "command-center", "surfaces", "actions", "analytics", "charts", "composition", "enterprise-proof", "semantic-decision", "quickstart" ], "demonstrates": [ "Prova pública atual de uma página operacional montada pela plataforma", "A descrição do negócio orienta campos, superfícies, catálogo de ações e capacidades disponíveis", "A página combina múltiplas fontes do backend em um fluxo de trabalho único", "A tabela principal expõe ações de workflow executáveis mediadas pelo host Angular", "A seleção de missão hidrata uma superfície de detalhe por composition.links, sem tela manual", "Resumo, equipe e linha do tempo aparecem juntos sem código de tela específico no host", "Widgets de gráfico transformam status, papéis e ritmo de eventos em indicadores operacionais", "Botões de inspeção expõem superfícies e ações como eventos de descoberta", "Projeções analíticas ficam disponíveis como parte do contrato operacional publicado", "O estado da composição filtra equipe e linha do tempo por vínculos declarativos" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "remote-filter", "surfaces", "actions", "capabilities", "analytics", "praxis-chart", "local-analytics-widgets", "composition.links", "state.values", "semantic-grounding", "governed-materialization", "published-operational-evidence" ], "backendSurfaces": [ "GET /schemas/filtered", "POST /api/operations/vw-resumo-missoes/filter", "POST /api/operations/missoes/filter", "GET /api/operations/missoes/capabilities", "GET /api/operations/missoes/{id}/summary", "GET /api/operations/missoes/{id}/team", "GET /api/operations/missoes/{id}/timeline", "GET /api/operations/missoes/{id}/capabilities", "POST /api/operations/missoes/{id}/actions/start", "POST /api/operations/missoes/{id}/actions/pause", "POST /api/operations/missoes/{id}/actions/resume", "POST /api/operations/missoes/{id}/actions/complete", "POST /api/operations/vw-resumo-missoes/stats/group-by", "POST /api/operations/vw-resumo-missoes/stats/timeseries", "POST /api/operations/missao-participantes/stats/group-by", "POST /api/operations/missao-participantes/filter", "POST /api/operations/missao-eventos/stats/timeseries", "POST /api/operations/missao-eventos/filter" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "mission-summary-table-rendered", "mission-team-table-rendered", "mission-timeline-table-rendered", "mission-chart-widgets-rendered", "resource-discovery-toolbar-actions-rendered", "selection-query-context-links-present", "selection-detail-surface-linked", "workflow-actions-host-mediated", "analytics-surfaces-declared" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-catalog", "schemas-surfaces-operations-missoes", "schemas-actions-operations-missoes", "operations-missoes-item-capabilities", "vw-resumo-missoes-filter-basic", "vw-resumo-missoes-stats-status", "missao-participantes-stats-papel", "missao-eventos-stats-ocorrido-em-day" ], "pendingHttpIds": [], "notes": [ "Use este exemplo como a prova enterprise pública atual para avaliação técnica e de negócio.", "Use os ids recomendados como caminho de cópia para agentes hoje.", "Superfícies, catálogo de ações e capacidades por item estão confirmados na API quickstart publicada.", "Participantes e indicadores de eventos estão confirmados na API quickstart publicada." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.mission-command-center.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.table.json", "praxis-ui-angular/examples/ai-recipes/praxis-page-builder.ui-composition-plan.json" ], "page": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "deviceLayouts": { "desktop": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "widgetOverrides": { "missionStatusChart": { "order": 10, "span": 1 }, "missionTeamRoleChart": { "order": 20, "span": 1 }, "missionEventRhythmChart": { "order": 30, "span": 1 }, "missionSummary": { "order": 40, "span": 3 }, "missionWorkflow": { "order": 50, "span": 3 }, "missionTeam": { "order": 60, "span": 1 }, "missionTimeline": { "order": 70, "span": 2 } } }, "tablet": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" } }, "mobile": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" } } }, "state": { "values": { "selection": { "missionId": 1 } } }, "widgets": [ { "key": "missionStatusChart", "shell": { "kind": "dashboard-card", "icon": "bar_chart", "title": "Mission status mix", "subtitle": "Live status distribution from the published quickstart" }, "definition": { "id": "praxis-chart", "bindingOrder": [ "chartDocument" ], "inputs": { "chartDocument": { "version": "0.1.0", "chartId": "mission-status-mix", "kind": "horizontal-bar", "orientation": "horizontal", "title": "Mission status", "subtitle": "Portfolio distribution", "sizing": { "mode": "fixed", "height": 260, "minHeight": 220 }, "source": { "kind": "praxis.stats", "resource": "/api/operations/vw-resumo-missoes", "operation": "group-by", "options": { "limit": 10, "orderBy": "key-asc" } }, "dimensions": [ { "field": "status", "label": "Status", "role": "category" } ], "metrics": [ { "field": "missions", "label": "Missions", "aggregation": "count" } ], "events": { "pointClick": { "action": "emit" }, "selectionChange": { "action": "emit", "mapping": { "status": "status" } }, "crossFilter": { "action": "filter-widget", "target": "missionWorkflow", "mapping": { "status": "status" } } }, "legend": { "enabled": true }, "tooltip": { "enabled": true }, "theme": { "palette": [ "#1263b4", "#0f766e", "#f08c00", "#c92a2a", "#7b61ff" ], "surface": { "mode": "embedded", "background": "transparent", "borderWidth": 0, "borderRadius": 0 } } } }, "outputs": { "pointClick": "emit", "selectionChange": "emit", "crossFilter": "emit" } } }, { "key": "missionTeamRoleChart", "shell": { "kind": "dashboard-card", "icon": "donut_large", "title": "Team role coverage", "subtitle": "Live participant role coverage from the quickstart" }, "definition": { "id": "praxis-chart", "bindingOrder": [ "chartDocument" ], "inputs": { "chartDocument": { "version": "0.1.0", "chartId": "mission-team-roles", "kind": "donut", "title": "Role coverage", "subtitle": "Team composition", "sizing": { "mode": "fixed", "height": 260, "minHeight": 220 }, "source": { "kind": "praxis.stats", "resource": "/api/operations/missao-participantes", "operation": "group-by", "options": { "limit": 8, "orderBy": "key-asc" } }, "dimensions": [ { "field": "papel", "label": "Role", "role": "segment" } ], "metrics": [ { "field": "members", "label": "Members", "aggregation": "count" } ], "events": { "pointClick": { "action": "emit" }, "selectionChange": { "action": "emit", "mapping": { "papel": "papel" } }, "crossFilter": { "action": "filter-widget", "target": "missionTeam", "mapping": { "papel": "papel" } } }, "legend": { "enabled": true }, "tooltip": { "enabled": true }, "theme": { "palette": [ "#1263b4", "#0f766e", "#f08c00", "#c92a2a", "#7b61ff" ], "surface": { "mode": "embedded", "background": "transparent", "borderWidth": 0, "borderRadius": 0 } } } }, "outputs": { "pointClick": "emit", "selectionChange": "emit", "crossFilter": "emit" } } }, { "key": "missionEventRhythmChart", "shell": { "kind": "dashboard-card", "icon": "show_chart", "title": "Event rhythm", "subtitle": "Live event cadence from the quickstart" }, "definition": { "id": "praxis-chart", "bindingOrder": [ "chartDocument" ], "inputs": { "chartDocument": { "version": "0.1.0", "chartId": "mission-event-rhythm", "kind": "line", "title": "Event rhythm", "subtitle": "Daily operational cadence", "sizing": { "mode": "fixed", "height": 260, "minHeight": 220 }, "source": { "kind": "praxis.stats", "resource": "/api/operations/missao-eventos", "operation": "timeseries", "options": { "granularity": "day", "limit": 8, "orderBy": "key-asc" } }, "dimensions": [ { "field": "ocorridoEm", "label": "Day", "role": "time", "format": "dd/MM" } ], "metrics": [ { "field": "events", "label": "Events", "aggregation": "count" } ], "events": { "pointClick": { "action": "emit" }, "selectionChange": { "action": "emit" }, "crossFilter": { "action": "emit" } }, "legend": { "enabled": true }, "tooltip": { "enabled": true }, "theme": { "palette": [ "#1263b4", "#0f766e", "#f08c00", "#c92a2a", "#7b61ff" ], "surface": { "mode": "embedded", "background": "transparent", "borderWidth": 0, "borderRadius": 0 } } } }, "outputs": { "pointClick": "emit", "selectionChange": "emit", "crossFilter": "emit" } } }, { "key": "missionSummary", "shell": { "kind": "dashboard-card", "icon": "radar", "title": "Mission portfolio", "subtitle": "Status, threat, heroes and activity at a glance" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "operations/vw-resumo-missoes", "tableId": "operations-vw-resumo-missoes-command-center", "config": { "toolbar": { "visible": true, "title": "Mission portfolio", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/vw-resumo-missoes", "resourceKey": "operations.vw-resumo-missoes" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/vw-resumo-missoes", "resourceKey": "operations.vw-resumo-missoes" } } ] }, "columns": [ { "field": "titulo", "header": "Mission", "type": "text", "sticky": "start" }, { "field": "status", "header": "Status", "type": "badge" }, { "field": "prioridade", "header": "Priority", "type": "badge" }, { "field": "ameaca", "header": "Threat", "type": "text" }, { "field": "qtdHerois", "header": "Heroes", "type": "number" }, { "field": "qtdEventos", "header": "Events", "type": "number" }, { "field": "ultimaAcao", "header": "Last activity", "type": "date" } ], "actions": { "row": { "enabled": true, "display": "icons", "width": "96px", "maxVisibleActions": 1, "position": "end", "header": { "label": "Details", "icon": "open_in_new" }, "actions": [ { "id": "open-detail", "action": "open-detail", "label": "Detail", "icon": "visibility", "tooltip": "Review the selected mission details", "color": "primary", "appearance": "tonal", "globalAction": { "actionId": "surface.open", "payload": { "presentation": "drawer", "title": "Mission overview", "subtitle": "Priority, risk, timeline and operational context in one place.", "icon": "fact_check", "size": { "width": "920px", "minWidth": "720px", "maxWidth": "96vw" }, "widget": { "id": "praxis-dynamic-form", "bindingOrder": [ "resourcePath", "formId", "resourceId", "mode" ], "inputs": { "formId": "operations-missoes-selected-detail", "resourcePath": "operations/missoes", "resourceId": "${row.missaoId}", "mode": "view", "configPersistenceStrategy": "input-first", "config": { "metadata": { "name": "Mission operational overview", "version": "1.0.0" }, "sections": [ { "id": "mission-overview", "title": "Informações", "rows": [ { "id": "mission-overview-main", "columns": [ { "id": "mission-overview-left", "span": { "xs": 12, "md": 6 }, "fields": [ "titulo", "prioridade", "local", "fimPrev", "fimReal" ] }, { "id": "mission-overview-right", "span": { "xs": 12, "md": 6 }, "fields": [ "objetivo", "status", "ameacaNome", "inicioPrev", "inicioReal" ] } ] } ] } ], "fieldMetadata": [ { "name": "titulo", "label": "Título", "controlType": "input", "hint": "", "description": "" }, { "name": "objetivo", "label": "Objetivo", "controlType": "textarea", "hint": "", "description": "" }, { "name": "prioridade", "label": "Prioridade", "controlType": "input", "hint": "", "description": "" }, { "name": "status", "label": "Status", "controlType": "input", "hint": "", "description": "" }, { "name": "local", "label": "Local", "controlType": "input", "hint": "", "description": "" }, { "name": "ameacaNome", "label": "Risco", "controlType": "input", "hint": "", "description": "" }, { "name": "inicioPrev", "label": "Início Previsto", "controlType": "dateTime", "hint": "", "description": "" }, { "name": "fimPrev", "label": "Fim Previsto", "controlType": "dateTime", "hint": "", "description": "" }, { "name": "inicioReal", "label": "Início Real", "controlType": "dateTime", "hint": "", "description": "" }, { "name": "fimReal", "label": "Fim Real", "controlType": "dateTime", "hint": "", "description": "" } ] } } } } } } ] } }, "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "toolbarAction": "emit" } } }, { "key": "missionWorkflow", "shell": { "kind": "dashboard-card", "icon": "bolt", "title": "Workflow actions", "subtitle": "Available actions for the current mission stage" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "operations/missoes", "tableId": "operations-missoes-workflow-actions", "config": { "toolbar": { "visible": true, "title": "Mission workflow", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } } ] }, "columns": [ { "field": "titulo", "header": "Mission", "type": "text", "sticky": "start" }, { "field": "status", "header": "Status", "type": "badge" }, { "field": "prioridade", "header": "Priority", "type": "badge" }, { "field": "local", "header": "Location", "type": "text" }, { "field": "inicioPrevisto", "header": "Start", "type": "date" } ], "actions": { "row": { "enabled": true, "display": "buttons", "width": "360px", "maxVisibleActions": 3, "behavior": { "maxInline": 3 }, "position": "end", "header": { "label": "Workflow", "icon": "bolt" }, "actions": [ { "id": "start", "action": "start", "label": "Start", "icon": "play_arrow", "tooltip": "Start the planned mission", "color": "primary", "appearance": "tonal", "visibleWhen": { "===": [ { "var": "status" }, "PLANEJADA" ] }, "endpoint": { "method": "POST", "pathTemplate": "/api/operations/missoes/{id}/actions/start", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "pause", "action": "pause", "label": "Pause", "icon": "pause", "tooltip": "Pause the active mission", "color": "accent", "appearance": "outlined", "visibleWhen": { "===": [ { "var": "status" }, "EM_ANDAMENTO" ] }, "endpoint": { "method": "POST", "pathTemplate": "/api/operations/missoes/{id}/actions/pause", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "resume", "action": "resume", "label": "Resume", "icon": "replay", "tooltip": "Resume the paused mission", "color": "primary", "appearance": "tonal", "visibleWhen": { "===": [ { "var": "status" }, "PAUSADA" ] }, "endpoint": { "method": "POST", "pathTemplate": "/api/operations/missoes/{id}/actions/resume", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "complete", "action": "complete", "label": "Complete", "icon": "task_alt", "tooltip": "Complete the active mission", "color": "primary", "appearance": "outlined", "visibleWhen": { "===": [ { "var": "status" }, "EM_ANDAMENTO" ] }, "endpoint": { "method": "POST", "pathTemplate": "/api/operations/missoes/{id}/actions/complete", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } } ] } }, "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "rowAction": "emit", "toolbarAction": "emit" } } }, { "key": "missionTeam", "shell": { "kind": "dashboard-card", "icon": "groups", "title": "Mission team", "subtitle": "Participants, roles and outcomes for the selected mission" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath", "queryContext" ], "inputs": { "resourcePath": "operations/missao-participantes", "tableId": "operations-missao-participantes-command-center", "queryContext": { "filters": { "missaoId": 1 } }, "config": { "toolbar": { "visible": true, "title": "Mission team", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/missao-participantes", "resourceKey": "operations.missao-participantes" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/missao-participantes", "resourceKey": "operations.missao-participantes" } } ] }, "columns": [ { "field": "missaoTitulo", "header": "Mission", "type": "text" }, { "field": "funcionarioNome", "header": "Hero", "type": "text", "sticky": "start" }, { "field": "papel", "header": "Role", "type": "badge" }, { "field": "resultado", "header": "Outcome", "type": "badge" } ], "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "toolbarAction": "emit" } } }, { "key": "missionTimeline", "shell": { "kind": "dashboard-card", "icon": "timeline", "title": "Mission timeline", "subtitle": "Operational events ordered by the backend" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath", "queryContext" ], "inputs": { "resourcePath": "operations/missao-eventos", "tableId": "operations-missao-eventos-command-center", "queryContext": { "filters": { "missaoId": 1 } }, "config": { "toolbar": { "visible": true, "title": "Mission timeline", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/missao-eventos", "resourceKey": "operations.missao-eventos" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/missao-eventos", "resourceKey": "operations.missao-eventos" } } ] }, "columns": [ { "field": "missaoTitulo", "header": "Mission", "type": "text" }, { "field": "ocorridoEm", "header": "When", "type": "date", "sticky": "start" }, { "field": "tipo", "header": "Type", "type": "badge" }, { "field": "descricao", "header": "Event", "type": "text" } ], "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "toolbarAction": "emit" } } } ], "composition": { "version": "1.0.0", "links": [ { "id": "missions:status-chart-crossFilter->summary.queryContext.filters.status", "intent": "data-projection", "from": { "kind": "component-port", "ref": { "widget": "missionStatusChart", "port": "crossFilter", "direction": "output", "componentType": "praxis-chart" } }, "to": { "kind": "component-port", "ref": { "widget": "missionSummary", "port": "queryContext", "direction": "input", "componentType": "praxis-table", "bindingPath": "filters.status" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "missions:pick-status-filter-for-summary", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.filters.status" } } ] }, "metadata": { "source": "native-composition-link", "label": "Filter mission portfolio from status chart" } }, { "id": "missions:status-chart-crossFilter->workflow.queryContext.filters.status", "intent": "data-projection", "from": { "kind": "component-port", "ref": { "widget": "missionStatusChart", "port": "crossFilter", "direction": "output", "componentType": "praxis-chart" } }, "to": { "kind": "component-port", "ref": { "widget": "missionWorkflow", "port": "queryContext", "direction": "input", "componentType": "praxis-table", "bindingPath": "filters.status" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "missions:pick-status-filter-for-workflow", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.filters.status" } } ] }, "metadata": { "source": "native-composition-link", "label": "Filter workflow table from status chart" } }, { "id": "missions:role-chart-crossFilter->team.queryContext.filters.papel", "intent": "data-projection", "from": { "kind": "component-port", "ref": { "widget": "missionTeamRoleChart", "port": "crossFilter", "direction": "output", "componentType": "praxis-chart" } }, "to": { "kind": "component-port", "ref": { "widget": "missionTeam", "port": "queryContext", "direction": "input", "componentType": "praxis-table", "bindingPath": "filters.papel" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "missions:pick-role-filter-for-team", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.filters.papel" } } ] }, "metadata": { "source": "native-composition-link", "label": "Filter team table from role chart" } }, { "id": "missions:summary-rowClick->state:selection.missionId", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "missionSummary", "port": "rowClick", "direction": "output", "componentType": "praxis-table" } }, "to": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "missions:pick-summary-mission-id", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.missaoId" } } ] }, "metadata": { "source": "native-composition-link", "label": "Selected mission id from summary" } }, { "id": "missions:workflow-rowClick->state:selection.missionId", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "missionWorkflow", "port": "rowClick", "direction": "output", "componentType": "praxis-table" } }, "to": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "missions:pick-workflow-mission-id", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.id" } } ] }, "metadata": { "source": "native-composition-link", "label": "Selected mission id from workflow table" } }, { "id": "missions:state:selection.missionId->team.queryContext", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionTeam", "port": "queryContext", "direction": "input", "componentType": "praxis-table" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "missions:team-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": { "missaoId": "${source}" } } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true }, "metadata": { "source": "native-composition-link", "label": "Filter team by selected mission" } }, { "id": "missions:state:selection.missionId->timeline.queryContext", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionTimeline", "port": "queryContext", "direction": "input", "componentType": "praxis-table" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "missions:timeline-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": { "missaoId": "${source}" } } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true }, "metadata": { "source": "native-composition-link", "label": "Filter timeline by selected mission" } } ] } } } }, { "id": "inline-filter-editorial-lab", "title": "Inline Filter - editorial lab", "summary": "Authors inline filter fields with the metadata editor and compares async selects, ranges and toggles before they become table controls.", "i18n": { "pt": { "title": "Inline Filter - laboratório editorial", "summary": "Autora filtros inline com o metadata editor e compara selects assíncronos, ranges e toggles antes de virarem controles da tabela.", "demonstrates": [ "Explore Inline Filter - laboratório editorial e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-metadata-editor materializa dynamic-fields/inline-filter-editorial com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Autora filtros inline com o metadata editor e compara selects assíncronos, ranges e toggles antes de virarem controles da tabela.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-tabs.nested-widgets, metadata-editor.inline-filter-editorial.", "Verifique a conexão com as evidências canônicas inline-filter-controls.util.ts e inline-filter-control-properties.map.ts." ] } }, "publicRoute": "/examples/dynamic-page/inline-filter-editorial-lab", "publicUrl": "https://praxisui.dev/examples/dynamic-page/inline-filter-editorial-lab", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-metadata-editor", "resourcePath": "dynamic-fields/inline-filter-editorial", "resourceKey": "dynamic-fields.inline-filter-editorial", "requires": [ "praxis-metadata-editor.controlType", "inline-filter-control-types", "inlineAsyncSelect.editorial", "inlineDateRange.editorial", "inlineCurrencyRange.editorial", "inlineToggle.editorial" ], "tags": [ "metadata-editor", "inline-filter", "dynamic-fields", "authoring", "table-filters", "ai-recipe" ], "demonstrates": [ "Package-owned inline filter control types resolved by the metadata editor", "Async select filter metadata for remote option endpoints", "Date range and currency range metadata for table filter DTOs", "Boolean action-style filter metadata for inline toggle controls", "A copyable authoring workspace agents can reuse before generating table filters" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-tabs.nested-widgets", "metadata-editor.inline-filter-editorial", "inline-filter-control-types", "inlineAsyncSelect", "inlineDateRange", "inlineCurrencyRange", "inlineToggle" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-core/src/lib/utils/inline-filter-controls.util.ts", "praxis-ui-angular/projects/praxis-metadata-editor/src/lib/config/inline-filter-control-properties.map.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-editorial-lab.json" ], "complexity": "advanced", "catalogRole": "authoring-workflow", "learningStage": "governance", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-tabs-rendered", "praxis-metadata-editor-rendered", "inline-filter-control-seeds-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because it demonstrates authoring metadata, not filter execution.", "The runtime execution companion is Funcionarios - inline filter lab, which consumes these same control families inside praxis-table advancedFilters." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-editorial-lab.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-lab.json", "praxis-ui-angular/examples/ai-recipes/praxis-field-metadata-editor.json" ], "sourcePath": "docs/examples/dynamic-page/examples/inline-filter-editorial-lab.json", "documentation": { "story": { "pt": "Inline Filter - laboratório editorial parte de uma necessidade operacional concreta: Autora filtros inline com o metadata editor e compara selects assíncronos, ranges e toggles antes de virarem controles da tabela.", "en": "Inline Filter - editorial lab starts from a concrete operational need: Authors inline filter fields with the metadata editor and compares async selects, ranges and toggles before they become table controls." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-metadata-editor transforma o contrato de dynamic-fields/inline-filter-editorial em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-metadata-editor turns the dynamic-fields/inline-filter-editorial contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-metadata-editor", "jsonPath": "page.widgets[].definition", "role": { "pt": "Expõe metadata de apresentação e comportamento em uma superfície de autoria controlada.", "en": "Exposes presentation and behavior metadata through a controlled authoring surface." }, "rationale": { "pt": "Permite revisar decisões editoriais sem editar objetos técnicos extensos nem duplicar o contrato do campo.", "en": "Allows editorial decisions to be reviewed without editing large technical objects or duplicating the field contract." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-metadata-editor ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-metadata-editor to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." } } ], "experiments": [ { "pt": "Altere uma escolha editorial, aplique-a e confirme o round-trip ao reabrir o editor.", "en": "Change an editorial choice, apply it and confirm the round trip by reopening the editor." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-editorial-lab.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-editorial-lab.json." } ] }, "envelope": { "id": "inline-filter-editorial-lab", "title": "Inline Filter - editorial lab", "summary": "Authors inline filter fields with the metadata editor and compares async selects, ranges and toggles before they become table controls.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-metadata-editor", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/metadata-editor" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "dynamic-fields/inline-filter-editorial", "resourceKey": "dynamic-fields.inline-filter-editorial" }, "requires": [ "praxis-metadata-editor.controlType", "inline-filter-control-types", "inlineAsyncSelect.editorial", "inlineDateRange.editorial", "inlineCurrencyRange.editorial", "inlineToggle.editorial" ], "tags": [ "metadata-editor", "inline-filter", "dynamic-fields", "authoring", "table-filters", "ai-recipe" ], "demonstrates": [ "Package-owned inline filter control types resolved by the metadata editor", "Async select filter metadata for remote option endpoints", "Date range and currency range metadata for table filter DTOs", "Boolean action-style filter metadata for inline toggle controls", "A copyable authoring workspace agents can reuse before generating table filters" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-tabs.nested-widgets", "metadata-editor.inline-filter-editorial", "inline-filter-control-types", "inlineAsyncSelect", "inlineDateRange", "inlineCurrencyRange", "inlineToggle" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-core/src/lib/utils/inline-filter-controls.util.ts", "praxis-ui-angular/projects/praxis-metadata-editor/src/lib/config/inline-filter-control-properties.map.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-editorial-lab.json" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-tabs-rendered", "praxis-metadata-editor-rendered", "inline-filter-control-seeds-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because it demonstrates authoring metadata, not filter execution.", "The runtime execution companion is Funcionarios - inline filter lab, which consumes these same control families inside praxis-table advancedFilters." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-editorial-lab.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.inline-filter-lab.json", "praxis-ui-angular/examples/ai-recipes/praxis-field-metadata-editor.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "inlineFilterEditorialTabs", "shell": { "kind": "dashboard-card", "icon": "tune", "title": "Inline filter editorial lab", "subtitle": "Author filter field metadata before composing table advancedFilters" }, "definition": { "id": "praxis-tabs", "bindingOrder": [ "tabsId", "config" ], "inputs": { "tabsId": "inline-filter-editorial-lab", "componentInstanceId": "dynamic-page-showcase", "config": { "appearance": { "density": "comfortable", "color": "primary", "stretchTabs": false, "alignTabs": "start", "dynamicHeight": true, "fitInkBarToContent": true }, "tabs": [ { "id": "async-select", "textLabel": "Async select", "icon": "manage_search", "widgets": [ { "id": "praxis-metadata-editor", "bindingOrder": [ "controlType", "seed" ], "inputs": { "controlType": "inlineAsyncSelect", "seed": { "name": "cargoId", "label": "Cargo", "controlType": "inlineAsyncSelect", "placeholder": "Buscar cargo", "helpText": "Remote option filter for the funcionarios table toolbar.", "resourcePath": "human-resources/cargos", "endpoint": "/api/human-resources/cargos/options/filter", "displayField": "label", "valueField": "id", "optionLabelKey": "label", "optionValueKey": "id", "minSearchLength": 2, "validationDebounce": 250, "inlineAutoSize": { "minWidth": 220, "maxWidth": 320 }, "clearButton": { "enabled": true, "showOnlyWhenFilled": true } } }, "outputs": { "applied": "emit", "cancel": "emit" } } ] }, { "id": "date-range", "textLabel": "Date range", "icon": "date_range", "widgets": [ { "id": "praxis-metadata-editor", "bindingOrder": [ "controlType", "seed" ], "inputs": { "controlType": "inlineDateRange", "seed": { "name": "dataAdmissaoRange", "label": "Admissao", "controlType": "inlineDateRange", "startLabel": "Inicio", "endLabel": "Fim", "placeholder": "Periodo de admissao", "helpText": "Date interval filter mapped to the published funcionarios filter DTO.", "minDate": "2020-01-01", "maxDate": "2026-12-31", "inlinePanelTitle": "Periodo de admissao", "inlineAutoSize": { "minWidth": 260, "maxWidth": 380 }, "clearButton": { "enabled": true } } }, "outputs": { "applied": "emit", "cancel": "emit" } } ] }, { "id": "currency-range", "textLabel": "Currency range", "icon": "payments", "widgets": [ { "id": "praxis-metadata-editor", "bindingOrder": [ "controlType", "seed" ], "inputs": { "controlType": "inlineCurrencyRange", "seed": { "name": "salarioBetween", "label": "Salario", "controlType": "inlineCurrencyRange", "startLabel": "Minimo", "endLabel": "Maximo", "placeholder": "Faixa salarial", "helpText": "Currency range filter with locale and bounds for payroll analysis.", "currency": "BRL", "currencyCode": "BRL", "locale": "pt-BR", "min": 0, "max": 50000, "step": 500, "decimalPlaces": 2, "inlineAutoSize": { "minWidth": 280, "maxWidth": 420 } } }, "outputs": { "applied": "emit", "cancel": "emit" } } ] }, { "id": "toggle", "textLabel": "Toggle", "icon": "toggle_on", "widgets": [ { "id": "praxis-metadata-editor", "bindingOrder": [ "controlType", "seed" ], "inputs": { "controlType": "inlineToggle", "seed": { "name": "ativo", "label": "Ativos", "controlType": "inlineToggle", "defaultValue": true, "helpText": "Boolean filter that can be rendered as an action-style toolbar affordance.", "inlineLabelVisible": true, "trueLabel": "Ativos", "falseLabel": "Inativos", "indeterminateLabel": "Todos", "clearButton": { "enabled": true }, "inlineAutoSize": { "minWidth": 128, "maxWidth": 180 } } }, "outputs": { "applied": "emit", "cancel": "emit" } } ] } ] } }, "outputs": { "selectedIndexChange": "emit", "widgetEvent": "emit" } } } ] } } }, { "id": "surfaces-actions-showcase", "title": "Surfaces and actions showcase", "summary": "Makes backend surfaces, actions and capabilities visible as runtime affordances, turning API semantics into navigable experience.", "i18n": { "pt": { "title": "Surfaces e actions - showcase", "summary": "Torna surfaces, actions e capabilities do backend visíveis como experiência navegável de runtime.", "demonstrates": [ "Explore Surfaces e actions - showcase e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dynamic-page materializa operations/missoes com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Torna surfaces, actions e capabilities do backend visíveis como experiência navegável de runtime.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, host-api-wiring, schemas.filtered.", "Verifique a conexão com as evidências canônicas filtered e surfaces?resource=operations.missoes." ] } }, "publicRoute": "/examples/dynamic-page/surfaces-actions-showcase", "publicUrl": "https://praxisui.dev/examples/dynamic-page/surfaces-actions-showcase", "category": "feature", "mode": "remote-metadata-driven", "primaryComponent": "praxis-dynamic-page", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes", "requires": [ "schemas.filtered", "surfaces", "actions", "capabilities", "toolbar.actions", "row.actions", "composition.links", "remote-data" ], "tags": [ "surfaces", "actions", "capabilities", "mission", "discovery", "modal", "quickstart", "ai-recipe" ], "demonstrates": [ "Surface and action discovery buttons are ordinary table affordances, not hardcoded navigation", "Toolbar actions expose resource-level /schemas/surfaces and /schemas/actions evidence", "Row actions carry the selected mission id so the host can inspect item capabilities", "Related team and timeline surfaces stay attached to the same selected mission state", "The floating Inspector remains available for copy/paste while runtime modals explain the contract" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "surfaces", "actions", "capabilities", "toolbar.actions", "row.actions", "composition.links", "state.values" ], "backendSurfaces": [ "GET /schemas/filtered", "GET /schemas/surfaces?resource=operations.missoes", "GET /schemas/actions?resource=operations.missoes", "POST /api/operations/missoes/filter", "GET /api/operations/missoes/capabilities", "GET /api/operations/missoes/{id}/summary", "GET /api/operations/missoes/{id}/team", "GET /api/operations/missoes/{id}/timeline", "GET /api/operations/missoes/{id}/capabilities", "POST /api/operations/missao-participantes/filter", "POST /api/operations/missao-eventos/filter" ], "complexity": "advanced", "catalogRole": "capability-lab", "learningStage": "governance", "proofRank": 3, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "resource-discovery-toolbar-actions-rendered", "row-discovery-actions-rendered", "runtime-preview-modal-opened", "selected-mission-state-drives-related-surfaces" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-catalog", "schemas-surfaces-operations-missoes", "schemas-actions-operations-missoes", "operations-missoes-item-capabilities", "vw-resumo-missoes-filter-basic", "missao-participantes-stats-papel", "missao-eventos-stats-ocorrido-em-day" ], "pendingHttpIds": [], "notes": [ "The playground host calls the published surfaces, actions and item capabilities endpoints when a discovery action is emitted.", "Keep the action metadata in the JSON so agents can preserve the resourcePath/resourceKey handoff." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.surfaces-actions-showcase.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.actions-workspace.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.mission-command-center.json" ], "sourcePath": "docs/examples/dynamic-page/examples/surfaces-actions-showcase.json", "documentation": { "story": { "pt": "Uma pessoa operadora precisa descobrir o que pode consultar e executar sobre uma missão sem depender de botões codificados previamente na rota. O exemplo projeta schemas, surfaces, actions e capabilities do backend como affordances navegáveis.", "en": "An operator needs to discover what can be inspected and executed for a mission without relying on buttons hard-coded into the route. The example projects backend schemas, surfaces, actions and capabilities as navigable affordances." }, "outcome": { "pt": "A seleção de uma missão direciona detalhes relacionados e ações de descoberta; o host continua mediando autorização e execução enquanto o documento preserva identidade, contexto e intenção.", "en": "Selecting a mission drives related details and discovery actions; the host keeps mediating authorization and execution while the document preserves identity, context and intent." }, "componentRoles": [ { "component": "praxis-dynamic-page", "jsonPath": "page.state + page.composition.links", "role": { "pt": "Mantém a missão selecionada e distribui seu contexto pelas superfícies relacionadas.", "en": "Keeps the selected mission and distributes its context across related surfaces." }, "rationale": { "pt": "Transforma discovery em fluxo de página declarativo, sem listeners específicos na rota.", "en": "Turns discovery into a declarative page flow without route-specific listeners." } }, { "component": "praxis-chart", "jsonPath": "page.widgets[discoveryMap]", "role": { "pt": "Resume os pontos de contato do contrato como um mapa visual introdutório.", "en": "Summarizes contract touchpoints as an introductory visual map." }, "rationale": { "pt": "Ajuda o visitante a relacionar schemas, surfaces, actions e capabilities antes de operar as tabelas.", "en": "Helps visitors relate schemas, surfaces, actions and capabilities before operating the tables." } }, { "component": "praxis-table", "jsonPath": "page.widgets[missionSurface|missionTeamSurface|missionTimelineSurface]", "role": { "pt": "Expõe ações de toolbar e linha e apresenta os recursos relacionados à seleção.", "en": "Exposes toolbar and row actions and presents resources related to the selection." }, "rationale": { "pt": "Mostra affordances descobertas no lugar em que a pessoa já está comparando e selecionando registros.", "en": "Shows discovered affordances where the person is already comparing and selecting records." } } ], "jsonWalkthrough": [ { "jsonPath": "page.widgets[discoveryMap].definition.inputs.config", "title": { "pt": "Mapa do contrato", "en": "Contract map" }, "explanation": { "pt": "Usa um gráfico local apenas para explicar quais superfícies canônicas participam do cenário.", "en": "Uses a local chart only to explain which canonical surfaces participate in the scenario." } }, { "jsonPath": "page.widgets[missionSurface].definition.inputs.config.actions", "title": { "pt": "Affordances declaradas", "en": "Declared affordances" }, "explanation": { "pt": "Ações de recurso e item carregam identidade e intenção; a execução permanece mediada pelo host.", "en": "Resource and item actions carry identity and intent while execution remains host-mediated." } }, { "jsonPath": "page.composition.links", "title": { "pt": "Seleção compartilhada", "en": "Shared selection" }, "explanation": { "pt": "Propaga o missionId selecionado para equipe e timeline por conexões explícitas.", "en": "Propagates the selected missionId to team and timeline through explicit connections." } }, { "jsonPath": "operationalEvidence.recommendedHttpIds", "title": { "pt": "Grounding verificável", "en": "Verifiable grounding" }, "explanation": { "pt": "Aponta para exemplos HTTP que comprovam catálogo, actions, surfaces e capabilities usados pela experiência.", "en": "Points to HTTP examples proving the catalog, actions, surfaces and capabilities used by the experience." } } ], "experiments": [ { "pt": "Selecione outra missão e acompanhe quais superfícies recebem o novo identificador pelo grafo de composição.", "en": "Select another mission and follow which surfaces receive the new identifier through the composition graph." }, { "pt": "Compare uma toolbar action e uma row action para identificar diferenças de resourceKey, payload e escopo.", "en": "Compare a toolbar action and a row action to identify differences in resourceKey, payload and scope." }, { "pt": "Remova temporariamente uma capability do JSON local e observe como a affordance deve falhar fechada.", "en": "Temporarily remove a capability from local JSON and observe how the affordance should fail closed." } ], "productionNotes": [ { "pt": "Rótulos e presença visual nunca substituem autorização; o backend confirma capabilities no contexto real do usuário.", "en": "Labels and visual presence never replace authorization; the backend confirms capabilities in the real user context." }, { "pt": "O host traduz action events em navegação, dialog ou HTTP e deve manter auditoria e tratamento de falhas.", "en": "The host translates action events into navigation, dialogs or HTTP and must preserve auditing and failure handling." }, { "pt": "A referência executável está em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.surfaces-actions-showcase.json.", "en": "The executable reference lives at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.surfaces-actions-showcase.json." } ] }, "envelope": { "id": "surfaces-actions-showcase", "title": "Surfaces and actions showcase", "summary": "Makes backend surfaces, actions and capabilities visible as runtime affordances, turning API semantics into navigable experience.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-dynamic-page", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" }, "requires": [ "schemas.filtered", "surfaces", "actions", "capabilities", "toolbar.actions", "row.actions", "composition.links", "remote-data" ], "tags": [ "surfaces", "actions", "capabilities", "mission", "discovery", "modal", "quickstart", "ai-recipe" ], "demonstrates": [ "Surface and action discovery buttons are ordinary table affordances, not hardcoded navigation", "Toolbar actions expose resource-level /schemas/surfaces and /schemas/actions evidence", "Row actions carry the selected mission id so the host can inspect item capabilities", "Related team and timeline surfaces stay attached to the same selected mission state", "The floating Inspector remains available for copy/paste while runtime modals explain the contract" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "schemas.filtered", "surfaces", "actions", "capabilities", "toolbar.actions", "row.actions", "composition.links", "state.values" ], "backendSurfaces": [ "GET /schemas/filtered", "GET /schemas/surfaces?resource=operations.missoes", "GET /schemas/actions?resource=operations.missoes", "POST /api/operations/missoes/filter", "GET /api/operations/missoes/capabilities", "GET /api/operations/missoes/{id}/summary", "GET /api/operations/missoes/{id}/team", "GET /api/operations/missoes/{id}/timeline", "GET /api/operations/missoes/{id}/capabilities", "POST /api/operations/missao-participantes/filter", "POST /api/operations/missao-eventos/filter" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "resource-discovery-toolbar-actions-rendered", "row-discovery-actions-rendered", "runtime-preview-modal-opened", "selected-mission-state-drives-related-surfaces" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-catalog", "schemas-surfaces-operations-missoes", "schemas-actions-operations-missoes", "operations-missoes-item-capabilities", "vw-resumo-missoes-filter-basic", "missao-participantes-stats-papel", "missao-eventos-stats-ocorrido-em-day" ], "pendingHttpIds": [], "notes": [ "The playground host calls the published surfaces, actions and item capabilities endpoints when a discovery action is emitted.", "Keep the action metadata in the JSON so agents can preserve the resourcePath/resourceKey handoff." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.surfaces-actions-showcase.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.actions-workspace.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.mission-command-center.json" ], "page": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "deviceLayouts": { "desktop": { "layout": { "orientation": "columns", "columns": 3, "gap": "16px" }, "widgetOverrides": { "discoveryMap": { "order": 10, "span": 1 }, "missionSurface": { "order": 20, "span": 2 }, "missionTeamSurface": { "order": 30, "span": 1 }, "missionTimelineSurface": { "order": 40, "span": 2 } } }, "tablet": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" } }, "mobile": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" } } }, "state": { "values": { "selection": { "missionId": 1 } } }, "widgets": [ { "key": "discoveryMap", "shell": { "kind": "dashboard-card", "icon": "account_tree", "title": "Discovery map", "subtitle": "How the runtime moves from metadata to governed actions" }, "definition": { "id": "praxis-chart", "bindingOrder": [ "config" ], "inputs": { "config": { "id": "surfaces-actions-discovery-map", "type": "donut", "title": "Contract touchpoints", "subtitle": "Metadata surfaces used by this page", "sizing": { "mode": "fixed", "height": 260, "minHeight": 220 }, "dataSource": { "kind": "local", "items": [ { "touchpoint": "schemas.filtered", "count": 1 }, { "touchpoint": "surfaces", "count": 3 }, { "touchpoint": "actions", "count": 4 }, { "touchpoint": "capabilities", "count": 2 }, { "touchpoint": "related resources", "count": 2 } ] }, "axes": { "x": { "field": "touchpoint", "type": "category", "label": "Touchpoint" }, "y": { "field": "count", "type": "value", "label": "Uses" } }, "series": [ { "id": "touchpoints", "name": "Touchpoints", "categoryField": "touchpoint", "metric": { "field": "count", "aggregation": "sum" } } ], "interactions": { "pointClick": true, "selection": true }, "theme": { "palette": [ "#1263b4", "#0f766e", "#f08c00", "#c92a2a", "#7b61ff" ], "legend": { "visible": true, "position": "bottom" }, "tooltip": { "enabled": true, "trigger": "item" }, "surface": { "mode": "embedded", "background": "transparent", "borderWidth": 0, "borderRadius": 0 } } } }, "outputs": { "pointClick": "emit" } } }, { "key": "missionSurface", "shell": { "kind": "dashboard-card", "icon": "layers", "title": "Mission surface", "subtitle": "Select a mission, then inspect resource or item capabilities" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath" ], "inputs": { "resourcePath": "operations/missoes", "tableId": "operations-missoes-surfaces-actions-showcase", "config": { "toolbar": { "visible": true, "title": "Missions", "subtitle": "Resource-level discovery actions", "actionsPosition": "both", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } } ] }, "columns": [ { "field": "titulo", "header": "Mission", "type": "text", "sticky": "start" }, { "field": "status", "header": "Status", "type": "badge" }, { "field": "prioridade", "header": "Priority", "type": "badge" }, { "field": "missionContext", "header": "Ops context", "type": "custom", "sortable": false, "filterable": false, "width": "280px", "renderer": { "type": "compose", "layout": "inline", "gap": "6px", "items": [ { "type": "badge", "field": "equipeResponsavel", "icon": "groups", "variant": "outlined", "color": "info" }, { "type": "badge", "field": "local", "icon": "place", "variant": "soft", "color": "primary" } ] } }, { "field": "inicioPrevisto", "header": "Start", "type": "date" } ], "actions": { "row": { "enabled": true, "display": "buttons", "position": "end", "sticky": "end", "width": "320px", "maxVisibleActions": 2, "discovery": { "enabled": false }, "header": { "label": "Inspect", "icon": "travel_explore", "tooltip": "Open surfaces, actions and capabilities for this mission" }, "behavior": { "maxInline": 2 }, "actions": [ { "id": "mission-briefing", "label": "Summary", "icon": "travel_explore", "action": "inspect-surfaces", "tooltip": "Open mission summary, team and timeline surfaces", "discovery": { "rel": "surfaces", "scope": "item", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } }, { "id": "mission-actions", "label": "Actions", "icon": "policy", "action": "inspect-actions", "tooltip": "Open item actions and capability snapshot", "discovery": { "rel": "capabilities", "scope": "item", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" } } ] } }, "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "rowAction": "emit", "toolbarAction": "emit" } } }, { "key": "missionTeamSurface", "shell": { "kind": "dashboard-card", "icon": "groups", "title": "Team surface", "subtitle": "Related resource filtered by selected mission state" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath", "queryContext" ], "inputs": { "resourcePath": "operations/missao-participantes", "tableId": "operations-missao-participantes-surfaces-showcase", "queryContext": { "filters": { "missaoId": 1 } }, "config": { "toolbar": { "visible": true, "title": "Team", "subtitle": "Participant surface with its own discovery contract", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/missao-participantes", "resourceKey": "operations.missao-participantes" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/missao-participantes", "resourceKey": "operations.missao-participantes" } } ] }, "columns": [ { "field": "funcionarioNome", "header": "Hero", "type": "text", "sticky": "start" }, { "field": "papel", "header": "Role", "type": "badge" }, { "field": "resultado", "header": "Outcome", "type": "badge" } ], "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "toolbarAction": "emit" } } }, { "key": "missionTimelineSurface", "shell": { "kind": "dashboard-card", "icon": "timeline", "title": "Timeline surface", "subtitle": "Event stream that follows the selected mission" }, "definition": { "id": "praxis-table", "bindingOrder": [ "config", "resourcePath", "queryContext" ], "inputs": { "resourcePath": "operations/missao-eventos", "tableId": "operations-missao-eventos-surfaces-showcase", "queryContext": { "filters": { "missaoId": 1 } }, "config": { "toolbar": { "visible": true, "title": "Timeline", "subtitle": "Operational events as a related surface", "actions": [ { "id": "inspect-surfaces", "action": "inspect-surfaces", "label": "Surfaces", "icon": "layers", "type": "button", "appearance": "outlined", "position": "end", "order": 90, "tooltip": "Inspect published resource surfaces", "discovery": { "rel": "surfaces", "scope": "resource", "resourcePath": "operations/missao-eventos", "resourceKey": "operations.missao-eventos" } }, { "id": "inspect-actions", "action": "inspect-actions", "label": "Actions", "icon": "bolt", "type": "button", "appearance": "outlined", "position": "end", "order": 100, "tooltip": "Inspect published resource actions and capabilities", "discovery": { "rel": "actions", "scope": "resource", "resourcePath": "operations/missao-eventos", "resourceKey": "operations.missao-eventos" } } ] }, "columns": [ { "field": "ocorridoEm", "header": "When", "type": "date", "sticky": "start" }, { "field": "tipo", "header": "Type", "type": "badge" }, { "field": "descricao", "header": "Event", "type": "text" } ], "behavior": { "selection": { "enabled": true, "type": "single" } } } }, "outputs": { "rowClick": "emit", "toolbarAction": "emit" } } } ], "composition": { "version": "1.0.0", "links": [ { "id": "surfaces:mission-rowClick->state:selection.missionId", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "missionSurface", "port": "rowClick", "direction": "output", "componentType": "praxis-table" } }, "to": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "surfaces:pick-mission-id", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.id" } } ] }, "metadata": { "source": "native-composition-link", "label": "Selected mission id" } }, { "id": "surfaces:state:selection.missionId->team.queryContext", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionTeamSurface", "port": "queryContext", "direction": "input", "componentType": "praxis-table" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "surfaces:team-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": { "missaoId": "${source}" } } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true }, "metadata": { "source": "native-composition-link", "label": "Filter team by selected mission" } }, { "id": "surfaces:state:selection.missionId->timeline.queryContext", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.missionId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "missionTimelineSurface", "port": "queryContext", "direction": "input", "componentType": "praxis-table" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "state", "path": "selection.missionId" } ], "steps": [ { "id": "surfaces:timeline-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": { "missaoId": "${source}" } } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true }, "metadata": { "source": "native-composition-link", "label": "Filter timeline by selected mission" } } ] } } } }, { "id": "dialog-surface-lab", "title": "Dialog - surface lab", "summary": "Shows actions opening Dialog surfaces with charts, remote lists and operational notes, so transient flows stay governed instead of becoming hidden modal code.", "i18n": { "pt": { "title": "Dialog - laboratório de superfícies", "summary": "Abra cada ação para comparar como o mesmo contrato governado surface.open materializa um gráfico, uma lista remota e uma nota operacional dentro do Dialog.", "demonstrates": [ "Explore Dialog - laboratório de superfícies e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-dialog materializa operations/missoes com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Abra cada ação para comparar como o mesmo contrato governado surface.open materializa um gráfico, uma lista remota e uma nota operacional dentro do Dialog.", "Confirme no resultado capacidades da plataforma como praxis-dialog.global-actions, GLOBAL_SURFACE_SERVICE, surface.open.", "Verifique a conexão com as evidências canônicas filter e group-by." ] } }, "publicRoute": "/examples/dynamic-page/dialog-surface-lab", "publicUrl": "https://praxisui.dev/examples/dynamic-page/dialog-surface-lab", "category": "feature", "mode": "authored-customizable", "primaryComponent": "praxis-dialog", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes", "requires": [ "praxis-dialog.global-actions", "surface.open", "GLOBAL_SURFACE_SERVICE", "praxis-list.actions", "praxis-filter", "praxis-chart", "widget:rich-text-block" ], "tags": [ "dialog", "surface-open", "actions", "charts", "modal", "composition", "ai-recipe" ], "demonstrates": [ "List item actions executing structured surface.open global actions through the host GlobalActionService", "Dialog-hosted surfaces rendered by PraxisSurfaceHostComponent instead of ad hoc overlays", "A chart surface opened as a modal from metadata-driven action payload", "A remote list surface opened with dataSource.resourcePath inside the dialog body", "A rich text surface opened from the same action contract for operational guidance" ], "platformFeatures": [ "praxis-dialog.global-actions", "GLOBAL_SURFACE_SERVICE", "surface.open", "PraxisSurfaceHostComponent", "dynamic-widget-resolution", "praxis-list.globalAction.payload", "praxis-chart.local-data", "praxis-list.remote-data", "widget:rich-text-block" ], "backendSurfaces": [ "POST /api/operations/missao-participantes/filter", "POST /api/operations/vw-resumo-missoes/stats/group-by", "GET /schemas/filtered" ], "complexity": "advanced", "catalogRole": "capability-lab", "learningStage": "governance", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-list-rendered", "surface-open-action-click", "dialog-surface-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example depends on the host registering providePraxisDialogGlobalActions and providePraxisSurfaceGlobalActions.", "Actions carry copyable surface.open payloads, so agents can swap the modal widget without changing Angular templates." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.dialog-surface-lab.json", "praxis-ui-angular/projects/praxis-dialog/docs/host-dialog-integration.md", "praxis-ui-angular/projects/praxis-dialog/src/lib/providers/surface-global-actions.provider.ts" ], "sourcePath": "docs/examples/dynamic-page/examples/dialog-surface-lab.json", "documentation": { "story": { "pt": "Dialog - laboratório de superfícies parte de uma necessidade operacional concreta: Abra cada ação para comparar como o mesmo contrato governado surface.open materializa um gráfico, uma lista remota e uma nota operacional dentro do Dialog.", "en": "Dialog - surface lab starts from a concrete operational need: Shows actions opening Dialog surfaces with charts, remote lists and operational notes, so transient flows stay governed instead of becoming hidden modal code." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-dialog transforma o contrato de operations/missoes em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-dialog turns the operations/missoes contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-dialog", "jsonPath": "page.widgets[].definition", "role": { "pt": "Materializa superfícies contextuais em uma sobreposição governada pelo host.", "en": "Materializes contextual surfaces in a host-governed overlay." }, "rationale": { "pt": "Mantém o usuário no contexto atual enquanto uma ação abre conteúdo ou trabalho complementar.", "en": "Keeps the user in the current context while an action opens complementary content or work." } }, { "component": "praxis-filter", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Materializa uma capacidade registrada dentro do documento Dynamic Page.", "en": "Materializes a registered capability inside the Dynamic Page document." }, "rationale": { "pt": "Reutiliza o contrato oficial do componente em vez de introduzir uma implementação exclusiva na rota.", "en": "Reuses the component official contract instead of introducing a route-specific implementation." } }, { "component": "praxis-chart", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Materializa uma capacidade registrada dentro do documento Dynamic Page.", "en": "Materializes a registered capability inside the Dynamic Page document." }, "rationale": { "pt": "Reutiliza o contrato oficial do componente em vez de introduzir uma implementação exclusiva na rota.", "en": "Reuses the component official contract instead of introducing a route-specific implementation." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-dialog ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-dialog to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." } } ], "experiments": [ { "pt": "Troque a superfície aberta por uma ação e compare como o mesmo Dialog hospeda contratos diferentes.", "en": "Change the surface opened by an action and compare how the same Dialog hosts different contracts." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.dialog-surface-lab.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.dialog-surface-lab.json." } ] }, "envelope": { "id": "dialog-surface-lab", "title": "Dialog - surface lab", "summary": "Shows actions opening Dialog surfaces with charts, remote lists and operational notes, so transient flows stay governed instead of becoming hidden modal code.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-dialog", "runtime": { "mode": "authored-customizable", "minPraxisUiPackage": "@praxisui/dialog" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/missoes", "resourceKey": "operations.missoes" }, "requires": [ "praxis-dialog.global-actions", "surface.open", "GLOBAL_SURFACE_SERVICE", "praxis-list.actions", "praxis-filter", "praxis-chart", "widget:rich-text-block" ], "tags": [ "dialog", "surface-open", "actions", "charts", "modal", "composition", "ai-recipe" ], "demonstrates": [ "List item actions executing structured surface.open global actions through the host GlobalActionService", "Dialog-hosted surfaces rendered by PraxisSurfaceHostComponent instead of ad hoc overlays", "A chart surface opened as a modal from metadata-driven action payload", "A remote list surface opened with dataSource.resourcePath inside the dialog body", "A rich text surface opened from the same action contract for operational guidance" ], "platformFeatures": [ "praxis-dialog.global-actions", "GLOBAL_SURFACE_SERVICE", "surface.open", "PraxisSurfaceHostComponent", "dynamic-widget-resolution", "praxis-list.globalAction.payload", "praxis-chart.local-data", "praxis-list.remote-data", "widget:rich-text-block" ], "backendSurfaces": [ "POST /api/operations/missao-participantes/filter", "POST /api/operations/vw-resumo-missoes/stats/group-by", "GET /schemas/filtered" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-list-rendered", "surface-open-action-click", "dialog-surface-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example depends on the host registering providePraxisDialogGlobalActions and providePraxisSurfaceGlobalActions.", "Actions carry copyable surface.open payloads, so agents can swap the modal widget without changing Angular templates." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.dialog-surface-lab.json", "praxis-ui-angular/projects/praxis-dialog/docs/host-dialog-integration.md", "praxis-ui-angular/projects/praxis-dialog/src/lib/providers/surface-global-actions.provider.ts" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "dialogSurfaceLaunchers", "shell": { "kind": "dashboard-card", "icon": "open_in_new", "title": "Dialog surface launcher", "subtitle": "Actions open modal surfaces with widgets resolved at runtime" }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "config" ], "inputs": { "listId": "dialog-surface-launchers", "componentInstanceId": "dynamic-page-showcase", "config": { "id": "dialog-surface-launchers-config", "dataSource": { "data": [ { "id": "mission-analytics", "icon": "bar_chart", "title": "Mission analytics modal", "subtitle": "Open a local chart surface without changing the page layout", "surfaceKind": "Chart", "priority": "High", "surfacePayload": { "presentation": "modal", "title": "Mission analytics", "icon": "bar_chart", "subtitle": "Chart widget rendered inside Praxis Dialog", "size": { "width": "780px", "maxWidth": "92vw", "height": "620px", "maxHeight": "86vh" }, "widget": { "id": "praxis-chart", "bindingOrder": [ "config" ], "inputs": { "config": { "id": "dialog-mission-status-chart", "type": "donut", "title": "Mission status mix", "subtitle": "Local chart payload opened by surface.open", "sizing": { "height": 360, "minHeight": 320 }, "dataSource": { "kind": "local", "items": [ { "status": "EM_ANDAMENTO", "missions": 11 }, { "status": "PLANEJADA", "missions": 7 }, { "status": "CONCLUIDA", "missions": 18 }, { "status": "SUSPENSA", "missions": 3 } ] }, "axes": { "x": { "field": "status", "type": "category", "label": "Status" }, "y": { "field": "missions", "type": "value", "label": "Missions" } }, "series": [ { "id": "missions", "name": "Missions", "categoryField": "status", "metric": { "field": "missions", "aggregation": "sum" } } ], "theme": { "palette": [ "#0f766e", "#2563eb", "#16a34a", "#dc2626" ], "legend": { "visible": true, "position": "bottom" }, "tooltip": { "enabled": true, "trigger": "item" } } } } } } }, { "id": "mission-participants", "icon": "groups", "title": "Participant roster modal", "subtitle": "Open a remote List surface backed by the quickstart filter endpoint", "surfaceKind": "Remote list", "priority": "Medium", "surfacePayload": { "presentation": "modal", "title": "Mission participant roster", "icon": "groups", "subtitle": "Governed inline filters and a remote List rendered inside Praxis Dialog", "size": { "width": "1040px", "maxWidth": "96vw", "height": "760px", "maxHeight": "90vh" }, "widget": { "id": "praxis-dynamic-page", "bindingOrder": [ "page", "autoPersist", "strictValidation", "enableCustomization" ], "inputs": { "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "8px" }, "widgets": [ { "key": "missionParticipantFilter", "shell": { "kind": "none" }, "definition": { "id": "praxis-filter", "bindingOrder": [ "resourcePath", "filterId", "formId", "alwaysVisibleFields", "selectedFieldIds", "disablePersistence", "placeBooleansInActions", "showFilterSettings", "showAdvancedButton", "showAddButton", "showSearchButton" ], "inputs": { "resourcePath": "operations/missao-participantes", "filterId": "dialog-mission-participants-filter", "formId": "dialog-mission-participants-filter-form", "componentInstanceId": "dialog-mission-participants-filter", "alwaysVisibleFields": [ "papel", "resultado", "principal" ], "selectedFieldIds": [ "papel", "resultado", "principal" ], "disablePersistence": true, "placeBooleansInActions": true, "showFilterSettings": false, "showAdvancedButton": false, "showAddButton": true, "showSearchButton": false, "i18n": { "filtersAdd": "Add filter", "clear": "Clear filters", "apply": "Search" } }, "outputs": { "change": "emit", "clear": "emit" } } }, { "key": "missionParticipantList", "shell": { "kind": "none" }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "queryContext", "config" ], "inputs": { "listId": "dialog-mission-participants-list", "componentInstanceId": "dialog-mission-participants-list", "queryContext": { "filters": {}, "page": { "index": 0, "size": 6 } }, "config": { "id": "dialog-mission-participants-list-config", "dataSource": { "resourcePath": "operations/missao-participantes", "sort": [ "ordem,asc" ] }, "layout": { "variant": "list", "density": "compact", "lines": 3, "dividers": "between", "pageSize": 6, "rowLayout": { "type": "grid", "columns": [ { "slot": "leading", "width": "44px", "align": "center" }, { "slot": "primary", "width": "minmax(160px, 1fr)" }, { "slot": "secondary", "width": "minmax(180px, 1.1fr)" }, { "slot": "meta", "width": "120px", "align": "start" }, { "slot": "trailing", "width": "110px", "align": "end" } ], "gap": "12px", "align": "center" } }, "selection": { "mode": "single", "compareBy": "funcionarioId", "return": "id" }, "templating": { "leading": { "type": "icon", "expr": "groups" }, "primary": { "type": "text", "expr": "${item.funcionarioNome}" }, "secondary": { "type": "text", "expr": "${item.missaoTitulo}" }, "meta": { "type": "chip", "expr": "${item.papel}", "variant": "outlined" }, "trailing": { "type": "chip", "expr": "${item.resultado}", "variant": "filled" } }, "ui": { "showSearch": false, "showSort": true, "sortOptions": [ { "label": "Operational order", "value": "ordem,asc" }, { "label": "ID", "value": "id,asc" }, { "label": "Role", "value": "papel,asc" } ], "showRange": true } } } } } ], "composition": { "version": "1.0.0", "links": [ { "id": "dialog:participant-filter-change->participant-list.queryContext", "intent": "event-propagation", "from": { "kind": "component-port", "ref": { "widget": "missionParticipantFilter", "port": "change", "direction": "output", "componentType": "praxis-filter" } }, "to": { "kind": "component-port", "ref": { "widget": "missionParticipantList", "port": "queryContext", "direction": "input", "componentType": "praxis-list" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "object-fragment", "sourceBindings": [ { "source": "payload" } ], "steps": [ { "id": "participant-filter-dto-to-list-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": "${source}", "page": { "index": 0, "size": 6 }, "meta": { "source": "praxis-filter-change", "resourcePath": "operations/missao-participantes" } } } } ] }, "policy": { "debounceMs": 80, "missingValuePolicy": "use-default", "distinct": true, "errorPolicy": "diagnostic" }, "metadata": { "label": "Synchronize participant filters with the roster", "description": "The debounced governed filter DTO updates the List queryContext and returns pagination to the first page.", "tags": [ "dialog", "filter", "list", "queryContext" ] } }, { "id": "dialog:participant-filter-clear->participant-list.queryContext", "intent": "event-propagation", "from": { "kind": "component-port", "ref": { "widget": "missionParticipantFilter", "port": "clear", "direction": "output", "componentType": "praxis-filter" } }, "to": { "kind": "component-port", "ref": { "widget": "missionParticipantList", "port": "queryContext", "direction": "input", "componentType": "praxis-list" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "object-fragment", "sourceBindings": [ { "source": "constant", "value": {} } ], "steps": [ { "id": "clear-participant-list-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": {}, "page": { "index": 0, "size": 6 }, "meta": { "source": "praxis-filter-clear", "resourcePath": "operations/missao-participantes" } } } } ] }, "policy": { "debounceMs": 0, "missingValuePolicy": "use-default", "distinct": true, "errorPolicy": "diagnostic" }, "metadata": { "label": "Clear participant filters from the roster", "description": "Clearing the Filter restores the unfiltered first page without a host handler.", "tags": [ "dialog", "filter", "list", "clear" ] } } ] } }, "autoPersist": false, "strictValidation": true, "enableCustomization": false } } } }, { "id": "policy-note", "icon": "policy", "title": "Operational guidance modal", "subtitle": "Open a rich text surface with policy and agent instructions", "surfaceKind": "Rich text", "priority": "Medium", "surfacePayload": { "presentation": "modal", "title": "Operational guidance", "icon": "policy", "subtitle": "Rich Text Block rendered inside Praxis Dialog", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Surface action guidance", "content": "Use surface.open when an action should reveal a governed runtime surface without forcing the base page to reserve permanent layout space. The payload remains pure JSON and the host owns the dialog provider.", "variant": "emphasis" } } } } ], "sort": [ "priority,asc" ] }, "layout": { "variant": "cards", "density": "comfortable", "lines": 3, "dividers": "none", "pageSize": 6 }, "skin": { "type": "outline", "radius": "8px", "border": "1px solid rgba(37, 99, 235, 0.28)" }, "selection": { "mode": "single", "compareBy": "id", "return": "id" }, "templating": { "leading": { "type": "icon", "expr": "${item.icon}" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.subtitle}" }, "trailing": { "type": "chip", "expr": "${item.surfaceKind}", "variant": "outlined" }, "features": [ { "type": "chip", "expr": "${item.priority}", "variant": "filled" }, { "type": "chip", "expr": "surface.open", "variant": "outlined" } ], "featuresMode": "labels-only" }, "actions": [ { "id": "open-mission-analytics-dialog", "icon": "open_in_new", "label": "Open chart", "kind": "button", "buttonVariant": "stroked", "showIf": { "==": [ { "var": "row.id" }, "mission-analytics" ] }, "globalAction": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Mission analytics", "icon": "bar_chart", "subtitle": "Chart widget rendered inside Praxis Dialog", "size": { "width": "780px", "maxWidth": "92vw", "height": "620px", "maxHeight": "86vh" }, "widget": { "id": "praxis-chart", "bindingOrder": [ "config" ], "inputs": { "config": { "id": "dialog-mission-status-chart", "type": "donut", "title": "Mission status mix", "subtitle": "Local chart payload opened by surface.open", "sizing": { "height": 360, "minHeight": 320 }, "dataSource": { "kind": "local", "items": [ { "status": "EM_ANDAMENTO", "missions": 11 }, { "status": "PLANEJADA", "missions": 7 }, { "status": "CONCLUIDA", "missions": 18 }, { "status": "SUSPENSA", "missions": 3 } ] }, "axes": { "x": { "field": "status", "type": "category", "label": "Status" }, "y": { "field": "missions", "type": "value", "label": "Missions" } }, "series": [ { "id": "missions", "name": "Missions", "categoryField": "status", "metric": { "field": "missions", "aggregation": "sum" } } ], "theme": { "palette": [ "#0f766e", "#2563eb", "#16a34a", "#dc2626" ], "legend": { "visible": true, "position": "bottom" }, "tooltip": { "enabled": true, "trigger": "item" } } } } } } }, "emitLocal": false, "showLoading": true, "placement": "trailing" }, { "id": "open-participant-roster-dialog", "icon": "open_in_new", "label": "Open roster", "kind": "button", "buttonVariant": "stroked", "showIf": { "==": [ { "var": "row.id" }, "mission-participants" ] }, "globalAction": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Mission participant roster", "icon": "groups", "subtitle": "Governed inline filters and a remote List rendered inside Praxis Dialog", "size": { "width": "1040px", "maxWidth": "96vw", "height": "760px", "maxHeight": "90vh" }, "widget": { "id": "praxis-dynamic-page", "bindingOrder": [ "page", "autoPersist", "strictValidation", "enableCustomization" ], "inputs": { "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "8px" }, "widgets": [ { "key": "missionParticipantFilter", "shell": { "kind": "none" }, "definition": { "id": "praxis-filter", "bindingOrder": [ "resourcePath", "filterId", "formId", "alwaysVisibleFields", "selectedFieldIds", "disablePersistence", "placeBooleansInActions", "showFilterSettings", "showAdvancedButton", "showAddButton", "showSearchButton" ], "inputs": { "resourcePath": "operations/missao-participantes", "filterId": "dialog-mission-participants-filter", "formId": "dialog-mission-participants-filter-form", "componentInstanceId": "dialog-mission-participants-filter", "alwaysVisibleFields": [ "papel", "resultado", "principal" ], "selectedFieldIds": [ "papel", "resultado", "principal" ], "disablePersistence": true, "placeBooleansInActions": true, "showFilterSettings": false, "showAdvancedButton": false, "showAddButton": true, "showSearchButton": false, "i18n": { "filtersAdd": "Add filter", "clear": "Clear filters", "apply": "Search" } }, "outputs": { "change": "emit", "clear": "emit" } } }, { "key": "missionParticipantList", "shell": { "kind": "none" }, "definition": { "id": "praxis-list", "bindingOrder": [ "listId", "queryContext", "config" ], "inputs": { "listId": "dialog-mission-participants-list", "componentInstanceId": "dialog-mission-participants-list", "queryContext": { "filters": {}, "page": { "index": 0, "size": 6 } }, "config": { "id": "dialog-mission-participants-list-config", "dataSource": { "resourcePath": "operations/missao-participantes", "sort": [ "ordem,asc" ] }, "layout": { "variant": "list", "density": "compact", "lines": 3, "dividers": "between", "pageSize": 6, "rowLayout": { "type": "grid", "columns": [ { "slot": "leading", "width": "44px", "align": "center" }, { "slot": "primary", "width": "minmax(160px, 1fr)" }, { "slot": "secondary", "width": "minmax(180px, 1.1fr)" }, { "slot": "meta", "width": "120px", "align": "start" }, { "slot": "trailing", "width": "110px", "align": "end" } ], "gap": "12px", "align": "center" } }, "selection": { "mode": "single", "compareBy": "funcionarioId", "return": "id" }, "templating": { "leading": { "type": "icon", "expr": "groups" }, "primary": { "type": "text", "expr": "${item.funcionarioNome}" }, "secondary": { "type": "text", "expr": "${item.missaoTitulo}" }, "meta": { "type": "chip", "expr": "${item.papel}", "variant": "outlined" }, "trailing": { "type": "chip", "expr": "${item.resultado}", "variant": "filled" } }, "ui": { "showSearch": false, "showSort": true, "sortOptions": [ { "label": "Operational order", "value": "ordem,asc" }, { "label": "ID", "value": "id,asc" }, { "label": "Role", "value": "papel,asc" } ], "showRange": true } } } } } ], "composition": { "version": "1.0.0", "links": [ { "id": "dialog:participant-filter-change->participant-list.queryContext", "intent": "event-propagation", "from": { "kind": "component-port", "ref": { "widget": "missionParticipantFilter", "port": "change", "direction": "output", "componentType": "praxis-filter" } }, "to": { "kind": "component-port", "ref": { "widget": "missionParticipantList", "port": "queryContext", "direction": "input", "componentType": "praxis-list" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "object-fragment", "sourceBindings": [ { "source": "payload" } ], "steps": [ { "id": "participant-filter-dto-to-list-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": "${source}", "page": { "index": 0, "size": 6 }, "meta": { "source": "praxis-filter-change", "resourcePath": "operations/missao-participantes" } } } } ] }, "policy": { "debounceMs": 80, "missingValuePolicy": "use-default", "distinct": true, "errorPolicy": "diagnostic" }, "metadata": { "label": "Synchronize participant filters with the roster", "description": "The debounced governed filter DTO updates the List queryContext and returns pagination to the first page.", "tags": [ "dialog", "filter", "list", "queryContext" ] } }, { "id": "dialog:participant-filter-clear->participant-list.queryContext", "intent": "event-propagation", "from": { "kind": "component-port", "ref": { "widget": "missionParticipantFilter", "port": "clear", "direction": "output", "componentType": "praxis-filter" } }, "to": { "kind": "component-port", "ref": { "widget": "missionParticipantList", "port": "queryContext", "direction": "input", "componentType": "praxis-list" } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "object-fragment", "sourceBindings": [ { "source": "constant", "value": {} } ], "steps": [ { "id": "clear-participant-list-query-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "filters": {}, "page": { "index": 0, "size": 6 }, "meta": { "source": "praxis-filter-clear", "resourcePath": "operations/missao-participantes" } } } } ] }, "policy": { "debounceMs": 0, "missingValuePolicy": "use-default", "distinct": true, "errorPolicy": "diagnostic" }, "metadata": { "label": "Clear participant filters from the roster", "description": "Clearing the Filter restores the unfiltered first page without a host handler.", "tags": [ "dialog", "filter", "list", "clear" ] } } ] } }, "autoPersist": false, "strictValidation": true, "enableCustomization": false } } } }, "emitLocal": false, "showLoading": true, "placement": "trailing" }, { "id": "open-operational-guidance-dialog", "icon": "open_in_new", "label": "Open note", "kind": "button", "buttonVariant": "stroked", "showIf": { "==": [ { "var": "row.id" }, "policy-note" ] }, "globalAction": { "actionId": "surface.open", "payload": { "presentation": "modal", "title": "Operational guidance", "icon": "policy", "subtitle": "Rich Text Block rendered inside Praxis Dialog", "size": { "width": "720px", "maxWidth": "90vw" }, "widget": { "id": "widget:rich-text-block", "inputs": { "title": "Surface action guidance", "content": "Use surface.open when an action should reveal a governed runtime surface without forcing the base page to reserve permanent layout space. The payload remains pure JSON and the host owns the dialog provider.", "variant": "emphasis" } } } }, "emitLocal": false, "showLoading": true, "placement": "trailing" } ], "ui": { "showSearch": false, "showSort": false, "showRange": false }, "a11y": { "ariaLabel": "Dialog surface launcher list" } } }, "outputs": { "itemClick": "emit", "selectionChange": "emit" } } } ] } } }, { "id": "field-editorial-metadata-editor", "title": "Field Editorial - metadata editor", "summary": "Renders the metadata editor for a field contract, making control-specific editorial rules visible to authors and agents.", "i18n": { "pt": { "title": "Field Editorial - editor de metadata", "summary": "Renderiza o editor de metadata de campo para tornar regras editoriais específicas visíveis a autores e agentes.", "demonstrates": [ "Explore Field Editorial - editor de metadata e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-metadata-editor materializa dynamic-fields/editorial com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Renderiza o editor de metadata de campo para tornar regras editoriais específicas visíveis a autores e agentes.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, metadata-editor.controlType, metadata-editor.seed.", "Verifique a conexão com as evidências canônicas praxis-metadata-editor.metadata.ts e field-metadata-editor.component.ts." ] } }, "publicRoute": "/examples/dynamic-page/field-editorial-metadata-editor", "publicUrl": "https://praxisui.dev/examples/dynamic-page/field-editorial-metadata-editor", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-metadata-editor", "resourcePath": "dynamic-fields/editorial", "resourceKey": "dynamic-fields.editorial", "requires": [ "praxis-metadata-editor.controlType", "fieldMetadata.seed", "metadata-editor.applied", "dynamic-fields.editorial-metadata" ], "tags": [ "metadata-editor", "field-editorial", "dynamic-fields", "authoring", "ai-recipe" ], "demonstrates": [ "Direct rendering of the package-owned Field Metadata Editor", "Seeded currency field metadata with validation, masks and submit hints", "Control-specific editor properties generated from the canonical Dynamic Fields registry", "applied output that returns a field metadata patch to the host" ], "platformFeatures": [ "dynamic-widget-resolution", "metadata-editor.controlType", "metadata-editor.seed", "metadata-editor.applied", "dynamic-fields.editorial-metadata", "field-metadata-ai-capabilities" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-metadata-editor/src/lib/praxis-metadata-editor.metadata.ts", "praxis-ui-angular/projects/praxis-metadata-editor/src/lib/components/field-metadata-editor/field-metadata-editor.component.ts", "praxis-ui-angular/projects/praxis-core/src/lib/metadata/field-control-type.constants.ts" ], "complexity": "intermediate", "catalogRole": "authoring-workflow", "learningStage": "governance", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-metadata-editor-rendered", "seeded-field-metadata-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because it demonstrates authoring metadata, not persisted business data.", "The seed mirrors the FieldDefinition shape consumed by Dynamic Form and Dynamic Fields." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-field-metadata-editor.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.fields.json" ], "sourcePath": "docs/examples/dynamic-page/examples/field-editorial-metadata-editor.json", "documentation": { "story": { "pt": "Field Editorial - editor de metadata parte de uma necessidade operacional concreta: Renderiza o editor de metadata de campo para tornar regras editoriais específicas visíveis a autores e agentes.", "en": "Field Editorial - metadata editor starts from a concrete operational need: Renders the metadata editor for a field contract, making control-specific editorial rules visible to authors and agents." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-metadata-editor transforma o contrato de dynamic-fields/editorial em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-metadata-editor turns the dynamic-fields/editorial contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-metadata-editor", "jsonPath": "page.widgets[].definition", "role": { "pt": "Expõe metadata de apresentação e comportamento em uma superfície de autoria controlada.", "en": "Exposes presentation and behavior metadata through a controlled authoring surface." }, "rationale": { "pt": "Permite revisar decisões editoriais sem editar objetos técnicos extensos nem duplicar o contrato do campo.", "en": "Allows editorial decisions to be reviewed without editing large technical objects or duplicating the field contract." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Estrutura da página", "en": "Page structure" }, "explanation": { "pt": "Define orientação, colunas e ritmo espacial antes de qualquer widget ser resolvido.", "en": "Defines orientation, columns and spatial rhythm before any widget is resolved." } }, { "jsonPath": "page.widgets[]", "title": { "pt": "Composição executável", "en": "Executable composition" }, "explanation": { "pt": "Registra as superfícies do cenário e entrega praxis-metadata-editor ao resolvedor de widgets.", "en": "Registers the scenario surfaces and hands praxis-metadata-editor to the widget resolver." } }, { "jsonPath": "page.widgets[].definition.inputs", "title": { "pt": "Contrato do componente", "en": "Component contract" }, "explanation": { "pt": "Concentra os dados e opções que explicam por que o runtime assume esta forma, sem esconder configuração no host.", "en": "Holds the data and options that explain the runtime shape without hiding configuration in the host." } }, { "jsonPath": "runtime", "title": { "pt": "Fronteira operacional", "en": "Operational boundary" }, "explanation": { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." } } ], "experiments": [ { "pt": "Altere uma escolha editorial, aplique-a e confirme o round-trip ao reabrir o editor.", "en": "Change an editorial choice, apply it and confirm the round trip by reopening the editor." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-field-metadata-editor.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-field-metadata-editor.json." } ] }, "envelope": { "id": "field-editorial-metadata-editor", "title": "Field Editorial - metadata editor", "summary": "Renders the metadata editor for a field contract, making control-specific editorial rules visible to authors and agents.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-metadata-editor", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/metadata-editor" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "dynamic-fields/editorial", "resourceKey": "dynamic-fields.editorial" }, "requires": [ "praxis-metadata-editor.controlType", "fieldMetadata.seed", "metadata-editor.applied", "dynamic-fields.editorial-metadata" ], "tags": [ "metadata-editor", "field-editorial", "dynamic-fields", "authoring", "ai-recipe" ], "demonstrates": [ "Direct rendering of the package-owned Field Metadata Editor", "Seeded currency field metadata with validation, masks and submit hints", "Control-specific editor properties generated from the canonical Dynamic Fields registry", "applied output that returns a field metadata patch to the host" ], "platformFeatures": [ "dynamic-widget-resolution", "metadata-editor.controlType", "metadata-editor.seed", "metadata-editor.applied", "dynamic-fields.editorial-metadata", "field-metadata-ai-capabilities" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-metadata-editor/src/lib/praxis-metadata-editor.metadata.ts", "praxis-ui-angular/projects/praxis-metadata-editor/src/lib/components/field-metadata-editor/field-metadata-editor.component.ts", "praxis-ui-angular/projects/praxis-core/src/lib/metadata/field-control-type.constants.ts" ], "complexity": "intermediate", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-metadata-editor-rendered", "seeded-field-metadata-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because it demonstrates authoring metadata, not persisted business data.", "The seed mirrors the FieldDefinition shape consumed by Dynamic Form and Dynamic Fields." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-field-metadata-editor.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-form.fields.json" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "fieldEditorialMetadataEditor", "shell": { "kind": "dashboard-card", "icon": "edit_note", "title": "Field metadata editor", "subtitle": "Control-specific editorial contract for currency fields" }, "definition": { "id": "praxis-metadata-editor", "bindingOrder": [ "controlType", "seed" ], "inputs": { "controlType": "currency", "seed": { "name": "salaryTarget", "label": "Salary target", "controlType": "currency", "placeholder": "R$ 0,00", "helpText": "Used by payroll simulations and mission assignment rules.", "currencyCode": "BRL", "locale": "pt-BR", "min": 0, "max": 50000, "validators": { "required": true, "min": 0, "max": 50000 }, "source": "local", "transient": true, "submitPolicy": "omit" } }, "outputs": { "applied": "emit", "cancel": "emit" } } } ] } } }, { "id": "editorial-governance-briefing", "title": "Editorial shell - governed rollout briefing", "summary": "Frames a regulated rollout with executive evidence, authenticated reviewer context, an explicit policy boundary and normalized institutional links.", "i18n": { "pt": { "title": "Editorial - briefing de governança", "summary": "Apresenta uma decisão regulada com evidências executivas, contexto autenticado da pessoa revisora, limite jurídico explícito e links institucionais normalizados.", "demonstrates": [ "Explore Editorial - briefing de governança e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como widget:hero-banner materializa governance/decision-package com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta uma decisão regulada com evidências executivas, contexto autenticado da pessoa revisora, limite jurídico explícito e links institucionais normalizados.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, widget:hero-banner.visual-summary, form:user-context-summary.context-projection.", "Verifique a conexão com as evidências canônicas Authenticated host identity and scope e Backend authorization, policy evaluation and audit boundary." ] } }, "publicRoute": "/examples/dynamic-page/editorial-governance-briefing", "publicUrl": "https://praxisui.dev/examples/dynamic-page/editorial-governance-briefing", "category": "composition", "mode": "local-only", "primaryComponent": "widget:hero-banner", "resourcePath": "governance/decision-package", "resourceKey": "governance.decision-package", "requires": [ "widget:hero-banner", "form:user-context-summary", "widget:legal-notice", "widget:footer-links", "editorial-content-policy", "widgetEvent" ], "tags": [ "editorial", "governance", "hero", "user-context", "legal-notice", "footer", "decision-briefing", "ai-recipe" ], "demonstrates": [ "Hero Banner frames the decision outcome, readiness evidence and status before operational detail", "User Context Summary projects authenticated host context without copying identity into formData or authorization rules", "Legal Notice explains the policy boundary without pretending that editorial content grants permission", "Footer Links normalizes trusted navigation through the shared editorial content policy", "Dynamic Page composes all four registered widgets without route-specific Angular markup" ], "platformFeatures": [ "dynamic-widget-resolution", "widget:hero-banner.visual-summary", "form:user-context-summary.context-projection", "form:user-context-summary.actionTriggered", "widget:legal-notice.safe-content", "widget:footer-links.normalized-links", "dynamic-page.widgetEvent" ], "backendSurfaces": [ "Authenticated host identity and scope", "Backend authorization, policy evaluation and audit boundary", "praxis-ui-angular/projects/praxis-core/src/lib/widgets" ], "complexity": "basic", "catalogRole": "composition", "learningStage": "enterprise", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "hero-summary-visible", "authenticated-context-visible", "legal-boundary-visible", "normalized-footer-links-visible" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "The recipe is local-only because its purpose is to prove editorial composition, context projection and content policy deterministically.", "The displayed reviewer context represents data supplied by an authenticated host; it is not authorization evidence.", "All business effects, capability checks, consent records and audit remain host- and backend-owned." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.editorial-governance-briefing.json", "praxis-ui-angular/projects/praxis-core/src/lib/widgets/praxis-hero-banner.metadata.ts", "praxis-ui-angular/projects/praxis-core/src/lib/widgets/praxis-user-context-summary.metadata.ts", "praxis-ui-angular/projects/praxis-core/src/lib/widgets/praxis-legal-notice.metadata.ts", "praxis-ui-angular/projects/praxis-core/src/lib/widgets/praxis-footer-links.metadata.ts" ], "sourcePath": "docs/examples/dynamic-page/examples/editorial-governance-briefing.json", "documentation": { "story": { "pt": "Um conselho de lançamento precisa avaliar uma entrada em mercado regulado. Antes de qualquer recomendação, a página deve explicar o pacote de decisão, mostrar quem está revisando e em qual escopo, destacar a fronteira da autoridade e apontar para evidências institucionais confiáveis.", "en": "A release council must assess entry into a regulated market. Before any recommendation, the page must explain the decision package, show who is reviewing and under which scope, state the authority boundary and point to trusted institutional evidence." }, "outcome": { "pt": "Quatro widgets editoriais registrados formam um briefing portátil e responsivo. A narrativa orienta a pessoa revisora sem transformar texto, identidade exibida ou links em regras de autorização ou execução de negócio.", "en": "Four registered editorial widgets form a portable, responsive briefing. The narrative guides the reviewer without turning copy, displayed identity or links into authorization or business execution rules." }, "componentRoles": [ { "component": "widget:hero-banner", "jsonPath": "page.widgets[launchBriefingHero]", "role": { "pt": "Enquadra a decisão, o estágio da revisão e as evidências executivas antes do detalhe.", "en": "Frames the decision, review stage and executive evidence before the detail." }, "rationale": { "pt": "Comunica prioridade e resultado esperado sem transformar a abertura em markup exclusivo da rota.", "en": "Communicates priority and expected outcome without turning the opening into route-specific markup." } }, { "component": "form:user-context-summary", "jsonPath": "page.widgets[reviewerContext]", "role": { "pt": "Projeta identidade, papel, organização e escopo fornecidos pelo host autenticado.", "en": "Projects identity, role, organization and scope supplied by the authenticated host." }, "rationale": { "pt": "Torna o contexto visível sem copiá-lo para formData nem usá-lo como prova de autorização.", "en": "Makes context visible without copying it into formData or using it as authorization evidence." } }, { "component": "widget:legal-notice", "jsonPath": "page.widgets[decisionPolicyNotice]", "role": { "pt": "Declara os limites entre orientação editorial, autorização e persistência da decisão.", "en": "States the boundaries between editorial guidance, authorization and decision persistence." }, "rationale": { "pt": "Evita que copy explicativa pareça conceder permissão ou substituir uma policy executável.", "en": "Prevents explanatory copy from appearing to grant permission or replace an executable policy." } }, { "component": "widget:footer-links", "jsonPath": "page.widgets[institutionalEvidenceLinks]", "role": { "pt": "Fecha o briefing com navegação institucional normalizada pela policy editorial.", "en": "Closes the briefing with institutional navigation normalized by editorial policy." }, "rationale": { "pt": "Centraliza links confiáveis sem roteamento por labels, aliases ou comandos textuais.", "en": "Centralizes trusted links without label-, alias- or text-command routing." } } ], "jsonWalkthrough": [ { "jsonPath": "page.layout", "title": { "pt": "Narrativa em uma coluna", "en": "Single-column narrative" }, "explanation": { "pt": "A ordem dos widgets é a ordem de leitura: decisão, contexto, limite e referências.", "en": "Widget order is reading order: decision, context, boundary and references." } }, { "jsonPath": "page.widgets[launchBriefingHero].definition.inputs.visualSummary", "title": { "pt": "Evidência executiva", "en": "Executive evidence" }, "explanation": { "pt": "Status, métricas e eventos resumem o pacote sem introduzir um dashboard paralelo.", "en": "Status, metrics and events summarize the package without introducing a parallel dashboard." } }, { "jsonPath": "page.widgets[reviewerContext].definition.inputs.context", "title": { "pt": "Contexto autenticado projetado", "en": "Projected authenticated context" }, "explanation": { "pt": "fields[].valuePath resolve valores do host; fallback mantém legibilidade quando um dado opcional falta.", "en": "fields[].valuePath resolves host values; fallback preserves readability when optional data is absent." } }, { "jsonPath": "page.widgets[reviewerContext].definition.outputs.actionTriggered", "title": { "pt": "Ação mediada pelo host", "en": "Host-mediated action" }, "explanation": { "pt": "O CTA emite actionId estável, mas não troca sessão, tenant ou escopo por conta própria.", "en": "The CTA emits a stable actionId but does not switch session, tenant or scope by itself." } }, { "jsonPath": "page.widgets[decisionPolicyNotice].definition.inputs", "title": { "pt": "Limite jurídico explícito", "en": "Explicit legal boundary" }, "explanation": { "pt": "severity controla a ênfase; content continua informativo e links passam pela normalização editorial.", "en": "severity controls emphasis; content remains informational and links pass through editorial normalization." } }, { "jsonPath": "page.widgets[institutionalEvidenceLinks].definition.inputs.links", "title": { "pt": "Referências institucionais", "en": "Institutional references" }, "explanation": { "pt": "Links são dados ordenados, não comandos; a policy rejeita destinos não aceitos.", "en": "Links are ordered data, not commands; policy rejects disallowed destinations." } } ], "experiments": [ { "pt": "Altere visualSummary.statusTone e uma métrica para comparar como a hierarquia comunica risco.", "en": "Change visualSummary.statusTone and one metric to compare how hierarchy communicates risk." }, { "pt": "Remova scope.market e confirme que o fallback mantém o briefing compreensível sem inventar autorização.", "en": "Remove scope.market and confirm the fallback keeps the briefing understandable without inventing authorization." }, { "pt": "Troque Legal Notice de warning para muted e avalie se a ênfase corresponde ao risco.", "en": "Change Legal Notice from warning to muted and assess whether emphasis matches risk." }, { "pt": "Alterne Footer Links para layout stacked e valide o ritmo em mobile sem alterar destinos.", "en": "Switch Footer Links to stacked layout and validate mobile rhythm without changing destinations." } ], "productionNotes": [ { "pt": "O contexto real deve vir da sessão autenticada; valores da receita são demonstração e nunca fundamentam autorização.", "en": "Real context must come from the authenticated session; recipe values are demonstration and never support authorization." }, { "pt": "Legal Notice não substitui capabilities, decisão canônica, consentimento, auditoria ou enforcement do backend.", "en": "Legal Notice does not replace capabilities, canonical decisions, consent, auditing or backend enforcement." }, { "pt": "Links continuam sujeitos à editorial-content-policy; não contorne a normalização com handlers derivados de labels.", "en": "Links remain subject to editorial-content-policy; do not bypass normalization with label-derived handlers." }, { "pt": "instanceId, analyticsId e actionId devem permanecer estáveis para correlação de telemetria e eventos.", "en": "instanceId, analyticsId and actionId must remain stable for telemetry and event correlation." } ] }, "envelope": { "id": "editorial-governance-briefing", "title": "Editorial shell - governed rollout briefing", "summary": "Frames a regulated rollout with executive evidence, authenticated reviewer context, an explicit policy boundary and normalized institutional links.", "component": "praxis-dynamic-page", "category": "composition", "primaryComponent": "widget:hero-banner", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "governance/decision-package", "resourceKey": "governance.decision-package" }, "requires": [ "widget:hero-banner", "form:user-context-summary", "widget:legal-notice", "widget:footer-links", "editorial-content-policy", "widgetEvent" ], "tags": [ "editorial", "governance", "hero", "user-context", "legal-notice", "footer", "decision-briefing", "ai-recipe" ], "demonstrates": [ "Hero Banner frames the decision outcome, readiness evidence and status before operational detail", "User Context Summary projects authenticated host context without copying identity into formData or authorization rules", "Legal Notice explains the policy boundary without pretending that editorial content grants permission", "Footer Links normalizes trusted navigation through the shared editorial content policy", "Dynamic Page composes all four registered widgets without route-specific Angular markup" ], "platformFeatures": [ "dynamic-widget-resolution", "widget:hero-banner.visual-summary", "form:user-context-summary.context-projection", "form:user-context-summary.actionTriggered", "widget:legal-notice.safe-content", "widget:footer-links.normalized-links", "dynamic-page.widgetEvent" ], "backendSurfaces": [ "Authenticated host identity and scope", "Backend authorization, policy evaluation and audit boundary", "praxis-ui-angular/projects/praxis-core/src/lib/widgets" ], "complexity": "basic", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "hero-summary-visible", "authenticated-context-visible", "legal-boundary-visible", "normalized-footer-links-visible" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "The recipe is local-only because its purpose is to prove editorial composition, context projection and content policy deterministically.", "The displayed reviewer context represents data supplied by an authenticated host; it is not authorization evidence.", "All business effects, capability checks, consent records and audit remain host- and backend-owned." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.editorial-governance-briefing.json", "praxis-ui-angular/projects/praxis-core/src/lib/widgets/praxis-hero-banner.metadata.ts", "praxis-ui-angular/projects/praxis-core/src/lib/widgets/praxis-user-context-summary.metadata.ts", "praxis-ui-angular/projects/praxis-core/src/lib/widgets/praxis-legal-notice.metadata.ts", "praxis-ui-angular/projects/praxis-core/src/lib/widgets/praxis-footer-links.metadata.ts" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "launchBriefingHero", "definition": { "id": "widget:hero-banner", "inputs": { "instanceId": "regulated-rollout-hero", "analyticsId": "dynamic-page.editorial-governance.hero", "ariaLabel": "Regulated market rollout briefing", "brandText": "Praxis Decision Operations", "badges": [ { "label": "Human approval required", "tone": "warning" }, { "label": "Evidence complete", "tone": "highlight" } ], "subtitle": "Release council briefing", "title": "Regulated market rollout", "titleAccent": "ready for governed review", "description": "One portable document frames the decision, identifies the active review scope and keeps policy evidence visible before any host-mediated approval.", "metaItems": [ { "label": "Decision package", "value": "DP-2026-091" }, { "label": "Review window", "value": "26–30 Aug 2026" }, { "label": "Owner", "value": "Enterprise Risk Office" } ], "visualSummary": { "eyebrow": "Readiness evidence", "title": "Release posture", "status": "Reviewable", "statusTone": "success", "items": [ { "label": "Controls mapped", "value": "18 / 18", "tone": "success" }, { "label": "Open exceptions", "value": "2", "tone": "warning" }, { "label": "Markets", "value": "3", "tone": "info" } ], "events": [ { "label": "Security attestation", "value": "Received", "tone": "success" }, { "label": "Legal review", "value": "Pending council", "tone": "warning" } ] }, "variant": "institutional", "appearance": "card" } } }, { "key": "reviewerContext", "definition": { "id": "form:user-context-summary", "inputs": { "instanceId": "regulated-rollout-reviewer-context", "analyticsId": "dynamic-page.editorial-governance.context", "ariaLabel": "Active review context", "title": "You are reviewing as", "subtitle": "This context is supplied by the authenticated host and remains outside the decision payload.", "appearance": "card", "source": "context", "context": { "identity": { "displayName": "Marina Costa", "role": "Release council member" }, "scope": { "organization": "Praxis Europe", "market": "EU regulated operations" } }, "fields": [ { "label": "Reviewer", "valuePath": "identity.displayName", "fallback": "Authenticated reviewer" }, { "label": "Role", "valuePath": "identity.role", "fallback": "Role unavailable" }, { "label": "Organization", "valuePath": "scope.organization", "fallback": "Organization unavailable" }, { "label": "Decision scope", "valuePath": "scope.market", "fallback": "Scope unavailable" } ], "actionId": "request-context-change", "actionLabel": "Review another scope" }, "outputs": { "actionTriggered": "emit" } } }, { "key": "decisionPolicyNotice", "definition": { "id": "widget:legal-notice", "inputs": { "instanceId": "regulated-rollout-policy-notice", "analyticsId": "dynamic-page.editorial-governance.policy", "ariaLabel": "Decision policy notice", "title": "Decision authority remains outside this briefing", "subtitle": "Read before recording a recommendation", "contentFormat": "plain", "content": "This page explains the current evidence package. It does not grant market access, replace capability checks or persist approval. The authenticated host and backend remain responsible for authorization, policy evaluation, audit and the final command.", "severity": "warning", "appearance": "card", "links": [ { "label": "Review governance model", "href": "/docs" }, { "label": "Inspect public examples", "href": "/examples" } ] } } }, { "key": "institutionalEvidenceLinks", "definition": { "id": "widget:footer-links", "inputs": { "instanceId": "regulated-rollout-footer", "analyticsId": "dynamic-page.editorial-governance.footer", "ariaLabel": "Institutional evidence links", "brandText": "Praxis Decision Operations", "secondaryText": "Portable editorial context. Governed decisions remain host- and backend-owned.", "layout": "inline", "appearance": "surface", "links": [ { "label": "Documentation", "href": "/docs" }, { "label": "Dynamic Page examples", "href": "/examples/dynamic-page" }, { "label": "Platform overview", "href": "/" } ] } } } ] } } }, { "id": "expansion-governed-case-dossier", "title": "Expansion - governed case dossier", "summary": "Organizes decision context, evidence and rationale as stable, lazy panels while preserving host ownership of authorization, policy evaluation and business effects.", "i18n": { "pt": { "title": "Expansion - dossiê governado de caso", "summary": "Organiza contexto de decisão, evidências e justificativa em painéis estáveis e lazy, preservando no host a autorização, a avaliação de políticas e os efeitos de negócio.", "demonstrates": [ "Explore Expansion - dossiê governado de caso e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-expansion materializa operations/case-review com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Organiza contexto de decisão, evidências e justificativa em painéis estáveis e lazy, preservando no host a autorização, a avaliação de políticas e os efeitos de negócio.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-expansion.config, praxis-expansion.stable-panel-identity.", "Verifique a conexão com as evidências canônicas Host authorization and decision command boundary e README.md." ] } }, "publicRoute": "/examples/dynamic-page/expansion-governed-case-dossier", "publicUrl": "https://praxisui.dev/examples/dynamic-page/expansion-governed-case-dossier", "category": "composition", "mode": "local-only", "primaryComponent": "praxis-expansion", "resourcePath": "operations/case-review", "resourceKey": "operations.case-review", "requires": [ "praxis-expansion.config", "expansionId", "panels.id", "panels.content", "panels.widgets", "panels.actionButtons", "widgetEvent" ], "tags": [ "expansion", "accordion", "lazy-content", "nested-widgets", "governance", "case-review", "ai-recipe" ], "demonstrates": [ "Stable expansionId and panel ids anchor persistence, authoring and panel-aware event paths", "Metadata fields in the initial panel make the essential decision context visible by default", "Nested Praxis List and Rich Text Block widgets materialize lazily when their panels open", "Panel action buttons emit local intent while authorization and business effects remain host-owned", "Expansion events and nested widget events remain observable through the Dynamic Page boundary" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-expansion.config", "praxis-expansion.stable-panel-identity", "praxis-expansion.lazy-content", "praxis-expansion.nested-widgets", "praxis-expansion.panel-actions", "praxis-expansion.widgetEvent", "praxis-list.local-evidence-register", "widget:rich-text-block" ], "backendSurfaces": [ "Host authorization and decision command boundary", "praxis-ui-angular/projects/praxis-expansion/README.md", "praxis-ui-angular/projects/praxis-expansion/src/lib/praxis-expansion.ts", "praxis-ui-angular/projects/praxis-expansion/src/lib/praxis-expansion.metadata.ts" ], "complexity": "intermediate", "catalogRole": "composition", "learningStage": "enterprise", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-expansion-rendered", "initial-panel-expanded", "nested-list-lazy-rendered", "panel-actions-visible" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "The recipe is intentionally local-only so disclosure behavior and nested materialization remain deterministic.", "Stable panel ids are part of the runtime contract and must not be replaced by translated titles or array indexes.", "Action identifiers express local intent only; a production host must authorize and execute every business effect." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.expansion-governed-case-dossier.json", "praxis-ui-angular/examples/ai-recipes/praxis-expansion.json", "praxis-ui-angular/projects/praxis-expansion/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/expansion-governed-case-dossier.json", "documentation": { "story": { "pt": "Uma analista de risco precisa revisar um caso denso sem perder a identidade, o responsável e a prioridade que orientam a decisão. Evidências e justificativa precisam permanecer próximas, mas só devem consumir atenção e runtime quando forem solicitadas.", "en": "A risk analyst must review a dense case without losing the identity, owner and priority guiding the decision. Evidence and rationale must stay nearby while consuming attention and runtime only when requested." }, "outcome": { "pt": "O primeiro painel mantém o contexto essencial aberto; os demais materializam lista e orientação sob demanda. IDs estáveis e eventos enriquecidos preservam rastreabilidade sem transformar o acordeão em dono da aprovação.", "en": "The first panel keeps essential context open while the others materialize a list and guidance on demand. Stable ids and enriched events preserve traceability without making the accordion own approval." }, "componentRoles": [ { "component": "praxis-expansion", "jsonPath": "page.widgets[governedCaseDossier].definition.inputs.config", "role": { "pt": "Coordena painéis, identidade, disclosure progressivo e materialização lazy.", "en": "Coordinates panels, identity, progressive disclosure and lazy materialization." }, "rationale": { "pt": "Mantém partes relacionadas da mesma revisão próximas sem renderizar nem destacar todo o detalhe de uma vez.", "en": "Keeps related parts of one review close without rendering or emphasizing every detail at once." } }, { "component": "praxis-list", "jsonPath": "config.panels[evidence-register].widgets[]", "role": { "pt": "Apresenta o registro de evidências quando a pessoa abre o painel correspondente.", "en": "Presents the evidence register when the reviewer opens its panel." }, "rationale": { "pt": "Preserva seleção e template de coleção no componente proprietário, em vez de achatar evidências no contrato do Expansion.", "en": "Keeps collection selection and templating in the owning component instead of flattening evidence into the Expansion contract." } }, { "component": "widget:rich-text-block", "jsonPath": "config.panels[decision-rationale].widgets[]", "role": { "pt": "Explica a fronteira entre coordenação visual e decisão de negócio.", "en": "Explains the boundary between visual coordination and business decision." }, "rationale": { "pt": "Mantém orientação editorial portável e separada da configuração estrutural dos painéis.", "en": "Keeps editorial guidance portable and separate from structural panel configuration." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.expansionId", "title": { "pt": "Identidade persistente", "en": "Persistent identity" }, "explanation": { "pt": "Define o escopo estável usado por persistência, diagnóstico e autoria; componentInstanceId diferencia repetições na mesma rota.", "en": "Defines the stable scope used by persistence, diagnostics and authoring; componentInstanceId disambiguates repetitions on one route." } }, { "jsonPath": "definition.inputs.config.accordion", "title": { "pt": "Política de disclosure", "en": "Disclosure policy" }, "explanation": { "pt": "Declara multiabertura, posição do toggle e identidade do grupo sem codificar comportamento no template host.", "en": "Declares multi-open behavior, toggle position and group identity without coding behavior in the host template." } }, { "jsonPath": "definition.inputs.config.panels[].id", "title": { "pt": "Âncoras semânticas", "en": "Semantic anchors" }, "explanation": { "pt": "IDs estáveis sustentam DOM, eventos, caminhos de widgets aninhados e futuras edições; títulos traduzidos não assumem essa função.", "en": "Stable ids support DOM, events, nested widget paths and future edits; translated titles do not take that role." } }, { "jsonPath": "definition.inputs.config.panels[].content", "title": { "pt": "Campos do contexto essencial", "en": "Essential context fields" }, "explanation": { "pt": "Campos metadata-driven ficam no painel inicial para tornar identidade, responsável e prioridade imediatamente legíveis.", "en": "Metadata-driven fields stay in the initial panel so identity, owner and priority are immediately readable." } }, { "jsonPath": "definition.inputs.config.panels[].widgets", "title": { "pt": "Composição lazy", "en": "Lazy composition" }, "explanation": { "pt": "List e Rich Text Block continuam com contratos próprios e só são instanciados quando o respectivo painel abre.", "en": "List and Rich Text Block keep their own contracts and instantiate only when their panel opens." } }, { "jsonPath": "definition.outputs.widgetEvent", "title": { "pt": "Proveniência dos eventos", "en": "Event provenance" }, "explanation": { "pt": "Eventos dos widgets filhos atravessam o container com caminho enriquecido por expansionId e panelId.", "en": "Nested widget events cross the container with a path enriched by expansionId and panelId." } } ], "experiments": [ { "pt": "Abra o painel de evidências e confirme que a lista só aparece depois da expansão; feche-o e compare a densidade da página.", "en": "Open the evidence panel and confirm the list appears only after expansion; close it and compare page density." }, { "pt": "Troque accordion.multi para false e teste como a política de foco altera a revisão sem mudar nenhum widget interno.", "en": "Set accordion.multi to false and test how focus policy changes the review without changing any nested widget." }, { "pt": "Mude qual painel começa com expanded: true e avalie se o novo estado inicial ainda apresenta o contexto mais importante.", "en": "Change which panel starts with expanded: true and assess whether the new initial state still presents the most important context." } ], "productionNotes": [ { "pt": "expansionId e panels[].id devem ser estáveis; não derive identidade de título, tradução ou índice quando houver persistência e autoria.", "en": "expansionId and panels[].id must remain stable; do not derive identity from title, translation or index when persistence and authoring exist." }, { "pt": "actionButtons emitem intenção local. Autorização, regras, efeitos, auditoria e persistência da decisão pertencem ao host e ao backend.", "en": "actionButtons emit local intent. Authorization, rules, effects, auditing and decision persistence belong to the host and backend." }, { "pt": "Widgets aninhados dependem do registry e dos providers do host; conteúdo lazy reduz custo inicial, mas não elimina responsabilidades de integração.", "en": "Nested widgets depend on the host registry and providers; lazy content reduces initial cost but does not remove integration responsibilities." } ] }, "envelope": { "id": "expansion-governed-case-dossier", "title": "Expansion - governed case dossier", "summary": "Organizes decision context, evidence and rationale as stable, lazy panels while preserving host ownership of authorization, policy evaluation and business effects.", "component": "praxis-dynamic-page", "category": "composition", "primaryComponent": "praxis-expansion", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/expansion" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/case-review", "resourceKey": "operations.case-review" }, "requires": [ "praxis-expansion.config", "expansionId", "panels.id", "panels.content", "panels.widgets", "panels.actionButtons", "widgetEvent" ], "tags": [ "expansion", "accordion", "lazy-content", "nested-widgets", "governance", "case-review", "ai-recipe" ], "demonstrates": [ "Stable expansionId and panel ids anchor persistence, authoring and panel-aware event paths", "Metadata fields in the initial panel make the essential decision context visible by default", "Nested Praxis List and Rich Text Block widgets materialize lazily when their panels open", "Panel action buttons emit local intent while authorization and business effects remain host-owned", "Expansion events and nested widget events remain observable through the Dynamic Page boundary" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-expansion.config", "praxis-expansion.stable-panel-identity", "praxis-expansion.lazy-content", "praxis-expansion.nested-widgets", "praxis-expansion.panel-actions", "praxis-expansion.widgetEvent", "praxis-list.local-evidence-register", "widget:rich-text-block" ], "backendSurfaces": [ "Host authorization and decision command boundary", "praxis-ui-angular/projects/praxis-expansion/README.md", "praxis-ui-angular/projects/praxis-expansion/src/lib/praxis-expansion.ts", "praxis-ui-angular/projects/praxis-expansion/src/lib/praxis-expansion.metadata.ts" ], "complexity": "intermediate", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-expansion-rendered", "initial-panel-expanded", "nested-list-lazy-rendered", "panel-actions-visible" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "The recipe is intentionally local-only so disclosure behavior and nested materialization remain deterministic.", "Stable panel ids are part of the runtime contract and must not be replaced by translated titles or array indexes.", "Action identifiers express local intent only; a production host must authorize and execute every business effect." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.expansion-governed-case-dossier.json", "praxis-ui-angular/examples/ai-recipes/praxis-expansion.json", "praxis-ui-angular/projects/praxis-expansion/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "governedCaseDossier", "shell": { "kind": "dashboard-card", "icon": "fact_check", "title": "Governed case dossier", "subtitle": "Progressive context, lazy evidence and panel-aware actions" }, "definition": { "id": "praxis-expansion", "bindingOrder": [ "expansionId", "componentInstanceId", "config", "context" ], "inputs": { "expansionId": "governed-case-dossier", "componentInstanceId": "dynamic-page-showcase", "enableCustomization": false, "strictValidation": true, "context": { "caseId": "CASE-2026-0842", "resourceKey": "operations.case-review", "reviewStage": "human-approval" }, "config": { "appearance": { "density": "comfortable", "container": { "panelGap": "12px" }, "header": { "titleWeight": "700", "descriptionWeight": "500" } }, "accordion": { "id": "case-review-sections", "multi": true, "displayMode": "default", "togglePosition": "after", "hideToggle": false }, "panels": [ { "id": "case-context", "title": "Decision context", "description": "Identity, ownership and review priority", "icon": "assignment", "expanded": true, "content": [ { "name": "caseReference", "label": "Case reference", "controlType": "input", "defaultValue": "CASE-2026-0842", "prefixIcon": "tag", "hint": "Stable domain identity remains owned by the host." }, { "name": "reviewOwner", "label": "Review owner", "controlType": "input", "defaultValue": "Enterprise Risk Office", "prefixIcon": "group" }, { "name": "priority", "label": "Priority", "controlType": "select", "defaultValue": "high", "options": [ { "text": "Standard", "value": "standard" }, { "text": "High", "value": "high" }, { "text": "Critical", "value": "critical" } ] } ], "actionButtons": [ { "label": "Acknowledge context", "icon": "visibility", "action": "acknowledge-case-context" } ] }, { "id": "evidence-register", "title": "Evidence register", "description": "Materialized only when the reviewer requests detail", "icon": "inventory_2", "widgets": [ { "id": "praxis-list", "inputs": { "listId": "case-evidence-register", "config": { "dataSource": { "data": [ { "id": 1, "title": "Identity verification", "owner": "People Operations", "status": "Verified", "risk": "Low" }, { "id": 2, "title": "Access review", "owner": "Security", "status": "Pending", "risk": "High" }, { "id": 3, "title": "Manager attestation", "owner": "Business Unit", "status": "Received", "risk": "Medium" } ] }, "selection": { "mode": "single", "compareBy": "id", "return": "id" }, "templating": { "leading": { "type": "icon", "expr": "description" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.owner}" }, "meta": { "type": "chip", "expr": "${item.risk}", "variant": "outlined" }, "trailing": { "type": "chip", "expr": "${item.status}", "variant": "filled" } } } }, "outputs": { "itemClick": "emit", "selectionChange": "emit" } } ], "actionButtons": [ { "label": "Request evidence", "icon": "add_task", "action": "request-case-evidence" } ] }, { "id": "decision-rationale", "title": "Decision rationale", "description": "Governance boundary and host-owned outcome", "icon": "gavel", "widgets": [ { "id": "widget:rich-text-block", "inputs": { "title": "The panel coordinates context; it does not decide", "content": "Praxis Expansion preserves progressive disclosure, stable identity and event provenance. Authorization, policy evaluation and durable approval remain explicit responsibilities of the host and backend.", "variant": "emphasis" } } ], "actionButtons": [ { "label": "Submit for approval", "icon": "send", "action": "submit-case-for-approval" } ] } ] } }, "outputs": { "opened": "emit", "closed": "emit", "expandedChange": "emit", "afterExpand": "emit", "afterCollapse": "emit", "widgetEvent": "emit" } } } ] } } }, { "id": "approval-audit-workbench", "title": "Approval - audit workbench", "summary": "Models audit signals, compliance context and remediation actions as a governed rich-content workbench.", "i18n": { "pt": { "title": "Aprovação - bancada de auditoria", "summary": "Modela sinais de auditoria, contexto de compliance e ações de correção em uma superfície governada.", "demonstrates": [ "Explore Aprovação - bancada de auditoria e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/approval-audit-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Modela sinais de auditoria, contexto de compliance e ações de correção em uma superfície governada.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.approval-audit-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/approval-audit-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/approval-audit-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/approval-audit-workbench", "resourceKey": "operations.approval-audit-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "audit", "compliance", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval compliance metrics authored as statGroup instead of host dashboard cards", "Selected audit case authored as lookupCard instead of host-authored evidence wrappers", "Compliance owner context authored as relatedRecord instead of custom relationship markup", "Portable audit evidence organized in tabs within the same RichContentDocument", "Governed audit actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-audit-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "approval-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-audit-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval audit workbench demonstrates a portable rich-content contract, not a backend audit endpoint.", "The same approval audit surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-audit-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/approval-audit-workbench.json", "documentation": { "story": { "pt": "Aprovação - bancada de auditoria parte de uma necessidade operacional concreta: Modela sinais de auditoria, contexto de compliance e ações de correção em uma superfície governada.", "en": "Approval - audit workbench starts from a concrete operational need: Models audit signals, compliance context and remediation actions as a governed rich-content workbench." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/approval-audit-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/approval-audit-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-audit-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-audit-workbench.json." } ] }, "envelope": { "id": "approval-audit-workbench", "title": "Approval - audit workbench", "summary": "Models audit signals, compliance context and remediation actions as a governed rich-content workbench.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/approval-audit-workbench", "resourceKey": "operations.approval-audit-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "audit", "compliance", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval compliance metrics authored as statGroup instead of host dashboard cards", "Selected audit case authored as lookupCard instead of host-authored evidence wrappers", "Compliance owner context authored as relatedRecord instead of custom relationship markup", "Portable audit evidence organized in tabs within the same RichContentDocument", "Governed audit actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-audit-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-audit-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval audit workbench demonstrates a portable rich-content contract, not a backend audit endpoint.", "The same approval audit surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-audit-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "approvalAuditWorkbench", "shell": { "kind": "dashboard-card", "icon": "policy", "title": "Approval audit workbench", "subtitle": "Portable rich-content surface for governed approval audit flows" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "approval-audit-workbench", "context": { "audit": { "caseId": "AUD-771", "title": "Expense delegation exception", "status": "Packet under review", "exceptions": "4", "sla": "6h", "severity": "Critical", "controlFamily": "Delegation of authority", "submitter": "Livia Costa" }, "owner": { "name": "Priya Nunes", "department": "Internal controls" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "warning", "icon": "policy", "titleExpr": "${audit.title}", "message": "Use a portable approval audit surface when the host must expose governed compliance and remediation actions without inventing approval-specific templates." }, { "type": "statGroup", "title": "Audit signals", "subtitle": "Canonical KPI block for approval audit surfaces", "layout": "grid", "items": [ { "label": "Exceptions", "valueExpr": "${audit.exceptions}", "captionExpr": "${audit.caseId}", "icon": "gpp_maybe" }, { "label": "SLA", "valueExpr": "${audit.sla}", "captionExpr": "${audit.status}", "icon": "schedule" }, { "label": "Severity", "valueExpr": "${audit.severity}", "captionExpr": "${audit.controlFamily}", "icon": "priority_high" } ] }, { "type": "lookupCard", "title": "Selected audit case", "status": "resolved", "subtitleExpr": "${audit.caseId}", "metaExpr": "${audit.title}", "ctaLabel": "Open case", "variant": "raised", "color": "primary", "action": { "actionId": "approval.audit.case.open", "payloadExpr": "${audit}" }, "fields": [ { "label": "Control family", "valueExpr": "${audit.controlFamily}" }, { "label": "Severity", "valueExpr": "${audit.severity}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open evidence packet", "variant": "stroked", "action": { "actionId": "approval.audit.packet.open", "payloadExpr": "${audit}" } } ] }, { "type": "tabs", "title": "Audit views", "subtitle": "Portable editorial tabs for evidence and policy context.", "appearance": "underline", "defaultTabId": "evidence", "items": [ { "id": "evidence", "label": "Evidence", "icon": "inventory_2", "content": [ { "type": "text", "text": "Tabs keep audit evidence, policy notes and remediation criteria inside the same RichContentDocument." } ] }, { "id": "policy", "label": "Policy", "icon": "policy", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Submitter", "valueExpr": "${audit.submitter}" }, { "label": "Control family", "valueExpr": "${audit.controlFamily}" }, { "label": "Remediation rule", "value": "Lock the packet and route to compliance whenever the policy owner is unresolved." } ] } ] } ] }, { "type": "relatedRecord", "title": "Compliance owner", "subtitleExpr": "${owner.name}", "relationLabel": "Audit lead", "metaExpr": "${owner.department}", "ctaLabel": "Open owner", "variant": "raised", "color": "primary", "action": { "actionId": "approval.audit.owner.open", "payloadExpr": "${owner}" }, "fields": [ { "label": "Control area", "value": "Finance / delegation", "hint": "Resolved from the current audit assignment context." } ], "secondaryActions": [ { "type": "actionButton", "label": "Assign reviewer", "variant": "stroked", "action": { "actionId": "approval.audit.owner.assignReviewer", "payloadExpr": "${audit}" } } ] }, { "type": "ctaGroup", "title": "Audit actions", "subtitle": "Governed audit and remediation outcomes", "message": "Use semantic audit actions instead of host-authored compliance button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Lock packet", "icon": "lock", "variant": "raised", "color": "primary", "action": { "actionId": "approval.audit.packet.lock", "payloadExpr": "${audit}" } }, { "type": "actionButton", "label": "Request remediation", "icon": "assignment_late", "variant": "stroked", "action": { "actionId": "approval.audit.remediation.request", "payloadExpr": "${audit}" } } ] }, { "type": "actionCard", "title": "Escalate compliance review", "subtitleExpr": "${audit.caseId}", "message": "Use actionCard when the approval host needs a governed audit escalation flow.", "metaExpr": "${audit.status}", "ctaLabel": "Escalate audit", "variant": "raised", "color": "primary", "action": { "actionId": "approval.audit.escalate", "payloadExpr": "${audit}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open evidence packet", "variant": "stroked", "action": { "actionId": "approval.audit.packet.open", "payloadExpr": "${audit}" } } ] } ] } } } } ] } } }, { "id": "approval-decision-workbench", "title": "Approval - decision workbench", "summary": "Models an approval decision workspace with portable blocks, KPIs and governed actions without a dedicated approval template.", "i18n": { "pt": { "title": "Aprovação - bancada de decisão", "summary": "Modela decisão de aprovação com blocos portáveis, KPIs e ações governadas sem template dedicado.", "demonstrates": [ "Explore Aprovação - bancada de decisão e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/approval-decision-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Modela decisão de aprovação com blocos portáveis, KPIs e ações governadas sem template dedicado.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.tabs.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.approval-decision-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/approval-decision-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/approval-decision-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/approval-decision-workbench", "resourceKey": "operations.approval-decision-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval KPIs authored as statGroup instead of host KPI cards", "Assigned approver context authored as relatedRecord instead of lookup wrapper markup", "Decision actions clustered in ctaGroup and actionCard with host-mediated execution", "Portable approval rationale organized in tabs within the same RichContentDocument" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-decision-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "approval-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-decision-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval workbench demonstrates a portable rich-content contract, not a backend approval endpoint.", "The same approval surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-decision-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/approval-decision-workbench.json", "documentation": { "story": { "pt": "Aprovação - bancada de decisão parte de uma necessidade operacional concreta: Modela decisão de aprovação com blocos portáveis, KPIs e ações governadas sem template dedicado.", "en": "Approval - decision workbench starts from a concrete operational need: Models an approval decision workspace with portable blocks, KPIs and governed actions without a dedicated approval template." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/approval-decision-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/approval-decision-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-decision-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-decision-workbench.json." } ] }, "envelope": { "id": "approval-decision-workbench", "title": "Approval - decision workbench", "summary": "Models an approval decision workspace with portable blocks, KPIs and governed actions without a dedicated approval template.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/approval-decision-workbench", "resourceKey": "operations.approval-decision-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval KPIs authored as statGroup instead of host KPI cards", "Assigned approver context authored as relatedRecord instead of lookup wrapper markup", "Decision actions clustered in ctaGroup and actionCard with host-mediated execution", "Portable approval rationale organized in tabs within the same RichContentDocument" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-decision-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-decision-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval workbench demonstrates a portable rich-content contract, not a backend approval endpoint.", "The same approval surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-decision-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "approvalDecisionWorkbench", "shell": { "kind": "dashboard-card", "icon": "approval", "title": "Approval decision workbench", "subtitle": "Portable rich-content surface for governed approval flows" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "approval-decision-workbench", "context": { "approval": { "requestId": "APR-2048", "title": "Payroll reconciliation package", "status": "Needs review", "amount": "$182.5k", "sla": "18h", "lane": "Finance / P0", "risk": "High", "submitter": "Ayla Hayes" }, "approver": { "name": "Mira Drax", "department": "Finance Governance" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "warning", "icon": "gavel", "titleExpr": "${approval.title}", "message": "Use a portable approval surface when the host must expose governed decision actions without inventing approval-specific templates." }, { "type": "statGroup", "title": "Approval signals", "subtitle": "Canonical KPI block for the decision workbench", "layout": "grid", "items": [ { "label": "Amount", "valueExpr": "${approval.amount}", "captionExpr": "${approval.requestId}", "icon": "payments" }, { "label": "SLA", "valueExpr": "${approval.sla}", "captionExpr": "${approval.status}", "icon": "schedule" }, { "label": "Risk", "valueExpr": "${approval.risk}", "captionExpr": "${approval.lane}", "icon": "priority_high" } ] }, { "type": "tabs", "title": "Approval views", "subtitle": "Portable editorial tabs for approval context and rationale.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Tabs keep approval rationale and operational notes inside the same RichContentDocument." } ] }, { "id": "rationale", "label": "Rationale", "icon": "rule", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Submitter", "valueExpr": "${approval.submitter}" }, { "label": "Approval lane", "valueExpr": "${approval.lane}" }, { "label": "Portability rule", "value": "Keep domain semantics in the rich-content document; keep execution in the host." } ] } ] } ] }, { "type": "relatedRecord", "title": "Assigned approver", "subtitleExpr": "${approver.name}", "relationLabel": "Current owner", "metaExpr": "${approver.department}", "ctaLabel": "Open approver", "variant": "raised", "color": "primary", "action": { "actionId": "approval.owner.open", "payloadExpr": "${approver}" }, "fields": [ { "label": "Approval lane", "valueExpr": "${approval.lane}", "hint": "Resolved from the current approval assignment context." } ], "secondaryActions": [ { "type": "actionButton", "label": "Reassign", "variant": "stroked", "action": { "actionId": "approval.owner.reassign", "payloadExpr": "${approval}" } } ] }, { "type": "ctaGroup", "title": "Decision", "subtitle": "Governed approval outcomes", "message": "Use semantic decision actions instead of host-authored approval button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Approve", "icon": "check_circle", "variant": "raised", "color": "primary", "action": { "actionId": "approval.decision.approve", "payloadExpr": "${approval}" } }, { "type": "actionButton", "label": "Request changes", "icon": "edit_note", "variant": "stroked", "action": { "actionId": "approval.decision.requestChanges", "payloadExpr": "${approval}" } } ] }, { "type": "actionCard", "title": "Inspect approval package", "subtitleExpr": "${approval.requestId}", "message": "Use actionCard when the approval host needs a governed deep-inspection flow.", "metaExpr": "${approval.status}", "ctaLabel": "Inspect package", "variant": "raised", "color": "primary", "action": { "actionId": "approval.package.inspect", "payloadExpr": "${approval}" }, "secondaryActions": [ { "type": "actionButton", "label": "Escalate", "variant": "stroked", "action": { "actionId": "approval.package.escalate", "payloadExpr": "${approval}" } } ] } ] } } } } ] } } }, { "id": "approval-delegation-exception-workbench", "title": "Approval - delegation exception workbench", "summary": "Models delegation exceptions and substitute coverage with governed actions, avoiding a one-off exception handling page.", "i18n": { "pt": { "title": "Aprovação - exceção de delegação", "summary": "Modela exceções de delegação e cobertura de substitutos sem criar uma página única para esse caso.", "demonstrates": [ "Explore Aprovação - exceção de delegação e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/approval-delegation-exception-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Modela exceções de delegação e cobertura de substitutos sem criar uma página única para esse caso.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.approval-delegation-exception-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/approval-delegation-exception-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/approval-delegation-exception-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/approval-delegation-exception-workbench", "resourceKey": "operations.approval-delegation-exception-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "delegation", "exception", "substitute-approver", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval delegation metrics authored as statGroup instead of host dashboard cards", "Selected exception authored as lookupCard instead of host-authored exception wrappers", "Substitute approver context authored as relatedRecord instead of custom delegate markup", "Portable policy and audit context organized in tabs within the same RichContentDocument", "Governed delegation actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-delegation-exception-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "approval-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-delegation-exception-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval delegation exception workbench demonstrates a portable rich-content contract, not a backend delegation endpoint.", "The same approval delegation exception surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-delegation-exception-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/approval-delegation-exception-workbench.json", "documentation": { "story": { "pt": "Aprovação - exceção de delegação parte de uma necessidade operacional concreta: Modela exceções de delegação e cobertura de substitutos sem criar uma página única para esse caso.", "en": "Approval - delegation exception workbench starts from a concrete operational need: Models delegation exceptions and substitute coverage with governed actions, avoiding a one-off exception handling page." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/approval-delegation-exception-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/approval-delegation-exception-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-delegation-exception-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-delegation-exception-workbench.json." } ] }, "envelope": { "id": "approval-delegation-exception-workbench", "title": "Approval - delegation exception workbench", "summary": "Models delegation exceptions and substitute coverage with governed actions, avoiding a one-off exception handling page.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/approval-delegation-exception-workbench", "resourceKey": "operations.approval-delegation-exception-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "delegation", "exception", "substitute-approver", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval delegation metrics authored as statGroup instead of host dashboard cards", "Selected exception authored as lookupCard instead of host-authored exception wrappers", "Substitute approver context authored as relatedRecord instead of custom delegate markup", "Portable policy and audit context organized in tabs within the same RichContentDocument", "Governed delegation actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-delegation-exception-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-delegation-exception-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval delegation exception workbench demonstrates a portable rich-content contract, not a backend delegation endpoint.", "The same approval delegation exception surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-delegation-exception-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "approvalDelegationExceptionWorkbench", "shell": { "kind": "dashboard-card", "icon": "rule", "title": "Approval delegation exception workbench", "subtitle": "Portable rich-content surface for substitute approval coverage" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "approval-delegation-exception-workbench", "context": { "exception": { "id": "EXC-418", "title": "Unavailable approver coverage", "state": "Delegate nomination pending", "blockedApprovals": "7", "coverageGaps": "3", "agingRisk": "High", "lane": "Procurement approval / substitute required", "threshold": "48h", "requester": "Amanda Rocha" }, "delegate": { "name": "Marina Lopes", "department": "Procurement governance", "scope": "Procurement contracts up to BRL 250k" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "warning", "icon": "rule", "titleExpr": "${exception.title}", "message": "Use a portable approval delegation exception surface when the host must expose substitute coverage and governed approval continuity actions without inventing approval-specific templates." }, { "type": "statGroup", "title": "Delegation signals", "subtitle": "Canonical KPI block for approval exception coverage surfaces", "layout": "grid", "items": [ { "label": "Blocked approvals", "valueExpr": "${exception.blockedApprovals}", "captionExpr": "${exception.state}", "icon": "block" }, { "label": "Coverage gaps", "valueExpr": "${exception.coverageGaps}", "caption": "Policy exceptions", "icon": "rule" }, { "label": "Aging risk", "valueExpr": "${exception.agingRisk}", "captionExpr": "${exception.threshold}", "icon": "priority_high" } ] }, { "type": "lookupCard", "title": "Selected exception", "status": "resolved", "subtitleExpr": "${exception.id}", "metaExpr": "${exception.title}", "ctaLabel": "Open exception", "variant": "raised", "color": "primary", "action": { "actionId": "approval.delegation.exception.open", "payloadExpr": "${exception}" }, "fields": [ { "label": "Policy lane", "valueExpr": "${exception.lane}" }, { "label": "Exception state", "valueExpr": "${exception.state}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open exception packet", "variant": "stroked", "action": { "actionId": "approval.delegation.packet.open", "payloadExpr": "${exception}" } } ] }, { "type": "tabs", "title": "Exception views", "subtitle": "Portable editorial tabs for delegation rationale, policy and audit context.", "appearance": "underline", "defaultTabId": "coverage", "items": [ { "id": "coverage", "label": "Coverage", "icon": "groups", "content": [ { "type": "text", "text": "Keep substitute coverage rationale, approver availability and delegation notes inside the same RichContentDocument." } ] }, { "id": "policy", "label": "Policy", "icon": "policy", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Requester", "valueExpr": "${exception.requester}" }, { "label": "Delegation rule", "value": "Require a qualified substitute when the primary approver is unavailable and the request age crosses the policy threshold." }, { "label": "Audit source", "value": "Delegation matrix, approval event history and exception justification." } ] } ] } ] }, { "type": "relatedRecord", "title": "Proposed delegate", "relationLabel": "Substitute approver", "subtitleExpr": "${delegate.name}", "metaExpr": "${delegate.department}", "ctaLabel": "Open delegate", "variant": "raised", "color": "primary", "action": { "actionId": "approval.delegation.delegate.open", "payloadExpr": "${delegate}" }, "fields": [ { "label": "Delegation scope", "valueExpr": "${delegate.scope}", "hint": "Resolved from the approval delegation matrix." } ], "secondaryActions": [ { "type": "actionButton", "label": "Review delegate fit", "variant": "stroked", "action": { "actionId": "approval.delegation.delegate.reviewFit", "payloadExpr": "${delegate}" } } ] }, { "type": "ctaGroup", "title": "Delegation actions", "subtitle": "Governed approval exception outcomes", "message": "Use semantic delegation actions instead of host-authored exception button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Approve delegation", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "approval.delegation.approve", "payloadExpr": "${exception}" } }, { "type": "actionButton", "label": "Request alternate delegate", "icon": "sync", "variant": "stroked", "action": { "actionId": "approval.delegation.requestAlternate", "payloadExpr": "${exception}" } } ] }, { "type": "actionCard", "title": "Escalate delegation exception", "subtitleExpr": "${exception.id}", "message": "Use actionCard when the approval host needs a governed escalation for unresolved delegation coverage gaps.", "metaExpr": "${exception.state}", "ctaLabel": "Escalate exception", "variant": "raised", "color": "primary", "action": { "actionId": "approval.delegation.exception.escalate", "payloadExpr": "${exception}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open exception packet", "variant": "stroked", "action": { "actionId": "approval.delegation.packet.open", "payloadExpr": "${exception}" } } ] } ] } } } } ] } } }, { "id": "approval-review-workbench", "title": "Approval - review workbench", "summary": "Models approval queue review with selected context and escalation actions as rich-content configuration rather than a custom review screen.", "i18n": { "pt": { "title": "Aprovação - bancada de revisão", "summary": "Modela revisão de fila de aprovação com contexto selecionado e ações de escalonamento por configuração.", "demonstrates": [ "Explore Aprovação - bancada de revisão e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/approval-review-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Modela revisão de fila de aprovação com contexto selecionado e ações de escalonamento por configuração.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.approval-review-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/approval-review-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/approval-review-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/approval-review-workbench", "resourceKey": "operations.approval-review-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "review", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval review queue metrics authored as statGroup instead of host dashboard cards", "Selected approval request authored as lookupCard instead of host-authored review wrappers", "Escalation owner context authored as relatedRecord instead of custom relationship markup", "Portable review evidence organized in tabs within the same RichContentDocument", "Governed review actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "approval-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-review-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval review workbench demonstrates a portable rich-content contract, not a backend review endpoint.", "The same approval review surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/approval-review-workbench.json", "documentation": { "story": { "pt": "Aprovação - bancada de revisão parte de uma necessidade operacional concreta: Modela revisão de fila de aprovação com contexto selecionado e ações de escalonamento por configuração.", "en": "Approval - review workbench starts from a concrete operational need: Models approval queue review with selected context and escalation actions as rich-content configuration rather than a custom review screen." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/approval-review-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/approval-review-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-review-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-review-workbench.json." } ] }, "envelope": { "id": "approval-review-workbench", "title": "Approval - review workbench", "summary": "Models approval queue review with selected context and escalation actions as rich-content configuration rather than a custom review screen.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/approval-review-workbench", "resourceKey": "operations.approval-review-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "review", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval review queue metrics authored as statGroup instead of host dashboard cards", "Selected approval request authored as lookupCard instead of host-authored review wrappers", "Escalation owner context authored as relatedRecord instead of custom relationship markup", "Portable review evidence organized in tabs within the same RichContentDocument", "Governed review actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-review-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval review workbench demonstrates a portable rich-content contract, not a backend review endpoint.", "The same approval review surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "approvalReviewWorkbench", "shell": { "kind": "dashboard-card", "icon": "fact_check", "title": "Approval review workbench", "subtitle": "Portable rich-content surface for governed approval review flows" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "approval-review-workbench", "context": { "review": { "requestId": "APR-4096", "title": "Vendor onboarding policy exception", "status": "Escalation candidate", "pending": "12", "escalations": "3", "risk": "High", "portfolio": "Vendor operations", "reviewWindow": "4h", "submitter": "Noemi Vega" }, "owner": { "name": "Noah Hart", "department": "Operations governance" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "warning", "icon": "fact_check", "titleExpr": "${review.title}", "message": "Use a portable approval review surface when the host must expose governed queue review and escalation actions without inventing approval-specific templates." }, { "type": "statGroup", "title": "Review signals", "subtitle": "Canonical KPI block for approval review surfaces", "layout": "grid", "items": [ { "label": "Pending", "valueExpr": "${review.pending}", "captionExpr": "${review.requestId}", "icon": "pending_actions" }, { "label": "Escalations", "valueExpr": "${review.escalations}", "captionExpr": "${review.status}", "icon": "warning" }, { "label": "Review window", "valueExpr": "${review.reviewWindow}", "captionExpr": "${review.risk}", "icon": "schedule" } ] }, { "type": "lookupCard", "title": "Selected request", "status": "resolved", "subtitleExpr": "${review.requestId}", "metaExpr": "${review.title}", "ctaLabel": "Open request", "variant": "raised", "color": "primary", "action": { "actionId": "approval.review.open", "payloadExpr": "${review}" }, "fields": [ { "label": "Portfolio", "valueExpr": "${review.portfolio}" }, { "label": "Risk", "valueExpr": "${review.risk}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "approval.review.dossier.open", "payloadExpr": "${review}" } } ] }, { "type": "tabs", "title": "Review views", "subtitle": "Portable editorial tabs for approval review context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Tabs keep approval review rationale, evidence notes and escalation criteria inside the same RichContentDocument." } ] }, { "id": "evidence", "label": "Evidence", "icon": "inventory_2", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Submitter", "valueExpr": "${review.submitter}" }, { "label": "Portfolio", "valueExpr": "${review.portfolio}" }, { "label": "Escalation rule", "value": "Escalate requests above the policy threshold or unresolved compliance exceptions." } ] } ] } ] }, { "type": "relatedRecord", "title": "Escalation owner", "subtitleExpr": "${owner.name}", "relationLabel": "Review lead", "metaExpr": "${owner.department}", "ctaLabel": "Open owner", "variant": "raised", "color": "primary", "action": { "actionId": "approval.review.owner.open", "payloadExpr": "${owner}" }, "fields": [ { "label": "Coverage", "value": "Vendor onboarding / P1", "hint": "Resolved from the current review assignment context." } ], "secondaryActions": [ { "type": "actionButton", "label": "Reassign", "variant": "stroked", "action": { "actionId": "approval.review.owner.reassign", "payloadExpr": "${review}" } } ] }, { "type": "ctaGroup", "title": "Review actions", "subtitle": "Governed approval review outcomes", "message": "Use semantic review actions instead of host-authored approval queue button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Approve review", "icon": "check_circle", "variant": "raised", "color": "primary", "action": { "actionId": "approval.review.approve", "payloadExpr": "${review}" } }, { "type": "actionButton", "label": "Request evidence", "icon": "fact_check", "variant": "stroked", "action": { "actionId": "approval.review.requestEvidence", "payloadExpr": "${review}" } } ] }, { "type": "actionCard", "title": "Escalate approval case", "subtitleExpr": "${review.requestId}", "message": "Use actionCard when the approval host needs a governed escalation flow.", "metaExpr": "${review.status}", "ctaLabel": "Escalate case", "variant": "raised", "color": "primary", "action": { "actionId": "approval.review.escalate", "payloadExpr": "${review}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "approval.review.dossier.open", "payloadExpr": "${review}" } } ] } ] } } } } ] } } }, { "id": "approval-sla-triage-workbench", "title": "Approval - SLA triage workbench", "summary": "Models SLA breach triage with queue signals and governed decisions while keeping the experience portable across hosts.", "i18n": { "pt": { "title": "Aprovação - triagem de SLA", "summary": "Modela triagem de SLA com sinais de fila e decisões governadas em uma experiência portável.", "demonstrates": [ "Explore Aprovação - triagem de SLA e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/approval-sla-triage-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Modela triagem de SLA com sinais de fila e decisões governadas em uma experiência portável.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.approval-sla-triage-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/approval-sla-triage-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/approval-sla-triage-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/approval-sla-triage-workbench", "resourceKey": "operations.approval-sla-triage-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "sla", "triage", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval SLA metrics authored as statGroup instead of host dashboard cards", "Selected queue case authored as lookupCard instead of host-authored queue wrappers", "Queue owner context authored as relatedRecord instead of custom relationship markup", "Portable SLA policy context organized in tabs within the same RichContentDocument", "Governed triage actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-sla-triage-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "approval-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-sla-triage-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval SLA triage workbench demonstrates a portable rich-content contract, not a backend SLA endpoint.", "The same approval SLA triage surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-sla-triage-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/approval-sla-triage-workbench.json", "documentation": { "story": { "pt": "Aprovação - triagem de SLA parte de uma necessidade operacional concreta: Modela triagem de SLA com sinais de fila e decisões governadas em uma experiência portável.", "en": "Approval - SLA triage workbench starts from a concrete operational need: Models SLA breach triage with queue signals and governed decisions while keeping the experience portable across hosts." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/approval-sla-triage-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/approval-sla-triage-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-sla-triage-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-sla-triage-workbench.json." } ] }, "envelope": { "id": "approval-sla-triage-workbench", "title": "Approval - SLA triage workbench", "summary": "Models SLA breach triage with queue signals and governed decisions while keeping the experience portable across hosts.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/approval-sla-triage-workbench", "resourceKey": "operations.approval-sla-triage-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "approval", "sla", "triage", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Approval SLA metrics authored as statGroup instead of host dashboard cards", "Selected queue case authored as lookupCard instead of host-authored queue wrappers", "Queue owner context authored as relatedRecord instead of custom relationship markup", "Portable SLA policy context organized in tabs within the same RichContentDocument", "Governed triage actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-sla-triage-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "approval-sla-triage-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the approval SLA triage workbench demonstrates a portable rich-content contract, not a backend SLA endpoint.", "The same approval SLA triage surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.approval-sla-triage-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "approvalSlaTriageWorkbench", "shell": { "kind": "dashboard-card", "icon": "timer", "title": "Approval SLA triage workbench", "subtitle": "Portable rich-content surface for governed approval queue triage" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "approval-sla-triage-workbench", "context": { "triage": { "caseId": "SLA-221", "title": "Procurement contract escalation", "status": "Breach in progress", "breaches": "5", "p1Queue": "11", "medianAge": "9h", "priority": "P1", "queue": "Procurement approvals", "submitter": "Amanda Rocha" }, "owner": { "name": "Helena Costa", "department": "Approval operations" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "warning", "icon": "timer", "titleExpr": "${triage.title}", "message": "Use a portable approval SLA triage surface when the host must expose governed breach intervention and queue triage actions without inventing approval-specific templates." }, { "type": "statGroup", "title": "Triage signals", "subtitle": "Canonical KPI block for approval SLA triage surfaces", "layout": "grid", "items": [ { "label": "Breaches", "valueExpr": "${triage.breaches}", "captionExpr": "${triage.status}", "icon": "timer_off" }, { "label": "P1 queue", "valueExpr": "${triage.p1Queue}", "captionExpr": "${triage.queue}", "icon": "priority_high" }, { "label": "Median age", "valueExpr": "${triage.medianAge}", "captionExpr": "${triage.priority}", "icon": "schedule" } ] }, { "type": "lookupCard", "title": "Selected queue case", "status": "resolved", "subtitleExpr": "${triage.caseId}", "metaExpr": "${triage.title}", "ctaLabel": "Open case", "variant": "raised", "color": "primary", "action": { "actionId": "approval.sla.case.open", "payloadExpr": "${triage}" }, "fields": [ { "label": "Queue", "valueExpr": "${triage.queue}" }, { "label": "Priority", "valueExpr": "${triage.priority}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open queue packet", "variant": "stroked", "action": { "actionId": "approval.sla.packet.open", "payloadExpr": "${triage}" } } ] }, { "type": "tabs", "title": "Triage views", "subtitle": "Portable editorial tabs for queue summary and SLA policy context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Keep queue rationale, breach context and reassignment notes inside the same RichContentDocument." } ] }, { "id": "policy", "label": "Policy", "icon": "policy", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Submitter", "valueExpr": "${triage.submitter}" }, { "label": "Triage rule", "value": "Escalate any P1 request above the SLA threshold or any queue with missing owner coverage." }, { "label": "Evidence source", "value": "SLA board snapshot, owner rota and approval event history." } ] } ] } ] }, { "type": "relatedRecord", "title": "Queue owner", "subtitleExpr": "${owner.name}", "relationLabel": "Triage lead", "metaExpr": "${owner.department}", "ctaLabel": "Open owner", "variant": "raised", "color": "primary", "action": { "actionId": "approval.sla.owner.open", "payloadExpr": "${owner}" }, "fields": [ { "label": "Coverage", "value": "Procurement / P1 / EMEA", "hint": "Resolved from the queue triage assignment." } ], "secondaryActions": [ { "type": "actionButton", "label": "Rebalance queue", "variant": "stroked", "action": { "actionId": "approval.sla.queue.rebalance", "payloadExpr": "${triage}" } } ] }, { "type": "ctaGroup", "title": "Triage actions", "subtitle": "Governed SLA triage outcomes", "message": "Use semantic triage actions instead of host-authored SLA queue button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Start triage", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "approval.sla.triage.start", "payloadExpr": "${triage}" } }, { "type": "actionButton", "label": "Request owner update", "icon": "sync", "variant": "stroked", "action": { "actionId": "approval.sla.owner.requestUpdate", "payloadExpr": "${triage}" } } ] }, { "type": "actionCard", "title": "Escalate SLA breach", "subtitleExpr": "${triage.caseId}", "message": "Use actionCard when the approval host needs a governed escalation flow for unresolved SLA breaches.", "metaExpr": "${triage.status}", "ctaLabel": "Escalate breach", "variant": "raised", "color": "primary", "action": { "actionId": "approval.sla.escalate", "payloadExpr": "${triage}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open queue packet", "variant": "stroked", "action": { "actionId": "approval.sla.packet.open", "payloadExpr": "${triage}" } } ] } ] } } } } ] } } }, { "id": "employee-compensation-review-workbench", "title": "Human Resources - compensation review workbench", "summary": "Presents compensation signals, reward context and decision actions in a runtime workspace that can vary without changing application code.", "i18n": { "pt": { "title": "Recursos Humanos - revisão de remuneração", "summary": "Apresenta sinais de remuneração, contexto de recompensa e ações de decisão que variam sem alterar código.", "demonstrates": [ "Explore Recursos Humanos - revisão de remuneração e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/employee-compensation-review-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta sinais de remuneração, contexto de recompensa e ações de decisão que variam sem alterar código.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.employee-compensation-review-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/employee-compensation-review-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-compensation-review-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/employee-compensation-review-workbench", "resourceKey": "operations.employee-compensation-review-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "compensation-review", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Compensation review signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored compensation wrappers", "Reward partner context authored as relatedRecord instead of custom relationship markup", "Portable compensation and budget rationale organized in tabs within the same RichContentDocument", "Governed compensation actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-compensation-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "employee-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-compensation-review-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the compensation review workbench demonstrates a portable rich-content contract, not a backend HR compensation endpoint.", "The same compensation review surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-compensation-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-compensation-review-workbench.json", "documentation": { "story": { "pt": "Recursos Humanos - revisão de remuneração parte de uma necessidade operacional concreta: Apresenta sinais de remuneração, contexto de recompensa e ações de decisão que variam sem alterar código.", "en": "Human Resources - compensation review workbench starts from a concrete operational need: Presents compensation signals, reward context and decision actions in a runtime workspace that can vary without changing application code." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/employee-compensation-review-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/employee-compensation-review-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-compensation-review-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-compensation-review-workbench.json." } ] }, "envelope": { "id": "employee-compensation-review-workbench", "title": "Human Resources - compensation review workbench", "summary": "Presents compensation signals, reward context and decision actions in a runtime workspace that can vary without changing application code.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/employee-compensation-review-workbench", "resourceKey": "operations.employee-compensation-review-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "compensation-review", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Compensation review signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored compensation wrappers", "Reward partner context authored as relatedRecord instead of custom relationship markup", "Portable compensation and budget rationale organized in tabs within the same RichContentDocument", "Governed compensation actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-compensation-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-compensation-review-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the compensation review workbench demonstrates a portable rich-content contract, not a backend HR compensation endpoint.", "The same compensation review surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-compensation-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeeCompensationReviewWorkbench", "shell": { "kind": "dashboard-card", "icon": "payments", "title": "Compensation review workbench", "subtitle": "Portable rich-content surface for governed HR compensation operations" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "employee-compensation-review-workbench", "context": { "employee": { "id": "EMP-440", "name": "Daniela Freitas", "role": "Staff Product Manager", "department": "Platform strategy", "cycle": "Q2", "budget": "18%", "proposedIncrease": "8%", "compaRatio": "0.97", "marketSignal": "Midpoint to +5%", "reviewWindow": "2d" }, "partner": { "name": "Nadia Costa", "department": "Rewards and mobility", "budgetLane": "Reward council / compensation" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "payments", "titleExpr": "${employee.name}", "message": "Use a portable HR compensation review surface when the host must expose budget signals, market context and governed reward actions without inventing people-ops templates." }, { "type": "statGroup", "title": "Compensation signals", "subtitle": "Canonical KPI block for compensation review workbenches", "layout": "grid", "items": [ { "label": "Cycle", "valueExpr": "${employee.cycle}", "captionExpr": "${employee.department}", "icon": "event" }, { "label": "Budget", "valueExpr": "${employee.budget}", "captionExpr": "${employee.reviewWindow}", "icon": "payments" }, { "label": "Increase", "valueExpr": "${employee.proposedIncrease}", "captionExpr": "${employee.marketSignal}", "icon": "trending_up" } ] }, { "type": "lookupCard", "title": "Selected employee", "status": "resolved", "subtitleExpr": "${employee.name}", "metaExpr": "${employee.role}", "ctaLabel": "Open employee", "variant": "raised", "color": "primary", "action": { "actionId": "hr.comp.employee.open", "payloadExpr": "${employee}" }, "fields": [ { "label": "Proposed increase", "valueExpr": "${employee.proposedIncrease}" }, { "label": "Compa-ratio", "valueExpr": "${employee.compaRatio}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.comp.dossier.open", "payloadExpr": "${employee}" } } ] }, { "type": "tabs", "title": "Compensation views", "subtitle": "Portable editorial tabs for compensation summary and budget context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Tabs keep reward notes, market context and proposal rationale inside the same RichContentDocument." } ] }, { "id": "budget", "label": "Budget", "icon": "account_balance_wallet", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Budget rule", "value": "Escalate any compensation proposal above the approved budget lane or any exception requiring leadership approval." }, { "label": "Evidence source", "valueExpr": "${employee.reviewWindow}" }, { "label": "Portability rule", "value": "Keep compensation semantics in the rich-content document; keep execution in the host." } ] } ] } ] }, { "type": "relatedRecord", "title": "Reward partner", "subtitleExpr": "${partner.name}", "relationLabel": "Partner", "metaExpr": "${partner.department}", "ctaLabel": "Open partner", "variant": "raised", "color": "primary", "action": { "actionId": "hr.comp.partner.open", "payloadExpr": "${partner}" }, "fields": [ { "label": "Budget lane", "valueExpr": "${partner.budgetLane}", "hint": "Resolved from the current compensation review assignment." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule comp review", "variant": "stroked", "action": { "actionId": "hr.comp.partner.scheduleReview", "payloadExpr": "${employee}" } } ] }, { "type": "ctaGroup", "title": "Compensation actions", "subtitle": "Governed HR compensation outcomes", "message": "Use semantic compensation actions instead of host-authored proposal button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm comp proposal", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "hr.comp.confirm", "payloadExpr": "${employee}" } }, { "type": "actionButton", "label": "Request budget follow-up", "icon": "flag", "variant": "stroked", "action": { "actionId": "hr.comp.budget.followUp", "payloadExpr": "${employee}" } } ] }, { "type": "actionCard", "title": "Escalate compensation case", "subtitleExpr": "${employee.id}", "message": "Use actionCard when the HR host needs a governed reward escalation or compensation exception flow.", "metaExpr": "${employee.role}", "ctaLabel": "Escalate compensation", "variant": "raised", "color": "primary", "action": { "actionId": "hr.comp.escalate", "payloadExpr": "${employee}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.comp.dossier.open", "payloadExpr": "${employee}" } } ] } ] } } } } ] } } }, { "id": "employee-insight-workbench", "title": "Human Resources - employee insight workbench", "summary": "Packages employee KPIs, reporting context and people-ops follow-up into a portable workspace over governed content blocks.", "i18n": { "pt": { "title": "Recursos Humanos - insight de funcionário", "summary": "Empacota KPIs de funcionário, contexto gerencial e follow-up de People Ops em uma superfície portável.", "demonstrates": [ "Explore Recursos Humanos - insight de funcionário e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/employee-insight-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Empacota KPIs de funcionário, contexto gerencial e follow-up de People Ops em uma superfície portável.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.employee-insight-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/employee-insight-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-insight-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/employee-insight-workbench", "resourceKey": "operations.employee-insight-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Employee KPIs authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored dossier wrappers", "Reporting manager context authored as relatedRecord instead of custom relationship markup", "Portable people-ops rationale organized in tabs within the same RichContentDocument", "Governed HR follow-up actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-insight-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "employee-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-insight-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the employee insight workbench demonstrates a portable rich-content contract, not a backend HR endpoint.", "The same employee surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-insight-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-insight-workbench.json", "documentation": { "story": { "pt": "Recursos Humanos - insight de funcionário parte de uma necessidade operacional concreta: Empacota KPIs de funcionário, contexto gerencial e follow-up de People Ops em uma superfície portável.", "en": "Human Resources - employee insight workbench starts from a concrete operational need: Packages employee KPIs, reporting context and people-ops follow-up into a portable workspace over governed content blocks." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/employee-insight-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/employee-insight-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-insight-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-insight-workbench.json." } ] }, "envelope": { "id": "employee-insight-workbench", "title": "Human Resources - employee insight workbench", "summary": "Packages employee KPIs, reporting context and people-ops follow-up into a portable workspace over governed content blocks.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/employee-insight-workbench", "resourceKey": "operations.employee-insight-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Employee KPIs authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored dossier wrappers", "Reporting manager context authored as relatedRecord instead of custom relationship markup", "Portable people-ops rationale organized in tabs within the same RichContentDocument", "Governed HR follow-up actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-insight-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-insight-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the employee insight workbench demonstrates a portable rich-content contract, not a backend HR endpoint.", "The same employee surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-insight-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeeInsightWorkbench", "shell": { "kind": "dashboard-card", "icon": "badge", "title": "Employee insight workbench", "subtitle": "Portable rich-content surface for people operations follow-up" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "employee-insight-workbench", "context": { "employee": { "id": "EMP-2048", "name": "Carla Mendes", "role": "Senior HRBP", "department": "People Operations", "tenure": "4.2y", "performance": "Exceeds", "engagement": "82", "nextMilestone": "Promotion calibration", "reviewWindow": "6d" }, "manager": { "name": "Ana Silva", "department": "People leadership" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "groups", "titleExpr": "${employee.name}", "message": "Use a portable HR surface when the host must expose employee insights and governed follow-up actions without inventing people-ops templates." }, { "type": "statGroup", "title": "Workforce signals", "subtitle": "Canonical KPI block for employee insight surfaces", "layout": "grid", "items": [ { "label": "Tenure", "valueExpr": "${employee.tenure}", "captionExpr": "${employee.department}", "icon": "schedule" }, { "label": "Performance", "valueExpr": "${employee.performance}", "captionExpr": "${employee.nextMilestone}", "icon": "military_tech" }, { "label": "Engagement", "valueExpr": "${employee.engagement}", "caption": "Pulse score", "icon": "favorite" } ] }, { "type": "lookupCard", "title": "Selected employee", "status": "resolved", "subtitleExpr": "${employee.name}", "metaExpr": "${employee.role}", "ctaLabel": "Open employee", "variant": "raised", "color": "primary", "action": { "actionId": "employee.lookup.open", "payloadExpr": "${employee}" }, "fields": [ { "label": "Department", "valueExpr": "${employee.department}" }, { "label": "Next milestone", "valueExpr": "${employee.nextMilestone}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "employee.dossier.open", "payloadExpr": "${employee}" } } ] }, { "type": "tabs", "title": "Employee views", "subtitle": "Portable editorial tabs for people operations context.", "appearance": "underline", "defaultTabId": "overview", "items": [ { "id": "overview", "label": "Overview", "icon": "dashboard", "content": [ { "type": "text", "text": "Tabs keep coaching notes, org context and review readiness inside the same RichContentDocument." } ] }, { "id": "review", "label": "Review", "icon": "assignment", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Review window", "valueExpr": "${employee.reviewWindow}" }, { "label": "Next milestone", "valueExpr": "${employee.nextMilestone}" }, { "label": "Portability rule", "value": "Keep domain semantics in the rich-content document; keep execution in the host." } ] } ] } ] }, { "type": "relatedRecord", "title": "Reporting manager", "subtitleExpr": "${manager.name}", "relationLabel": "Manager", "metaExpr": "${manager.department}", "ctaLabel": "Open manager", "variant": "raised", "color": "primary", "action": { "actionId": "employee.manager.open", "payloadExpr": "${manager}" }, "fields": [ { "label": "Team", "valueExpr": "${employee.department}", "hint": "Resolved from the reporting chain." } ], "secondaryActions": [ { "type": "actionButton", "label": "Plan 1:1", "variant": "stroked", "action": { "actionId": "employee.manager.planOneOnOne", "payloadExpr": "${employee}" } } ] }, { "type": "ctaGroup", "title": "Guided actions", "subtitle": "Governed HR follow-up actions", "message": "Use semantic action clusters instead of host-authored employee button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Start review", "icon": "fact_check", "variant": "raised", "color": "primary", "action": { "actionId": "employee.review.start", "payloadExpr": "${employee}" } }, { "type": "actionButton", "label": "Plan promotion", "icon": "trending_up", "variant": "stroked", "action": { "actionId": "employee.promotion.plan", "payloadExpr": "${employee}" } } ] }, { "type": "actionCard", "title": "Open employee dossier", "subtitleExpr": "${employee.id}", "message": "Use actionCard when the HR host needs a governed dossier or case-review flow.", "metaExpr": "${employee.role}", "ctaLabel": "Open dossier", "variant": "raised", "color": "primary", "action": { "actionId": "employee.dossier.open", "payloadExpr": "${employee}" }, "secondaryActions": [ { "type": "actionButton", "label": "Start retention plan", "variant": "stroked", "action": { "actionId": "employee.retention.start", "payloadExpr": "${employee}" } } ] } ] } } } } ] } } }, { "id": "employee-internal-mobility-workbench", "title": "Human Resources - internal mobility workbench", "summary": "Presents mobility signals, target-role context and transition actions without creating a separate mobility application page.", "i18n": { "pt": { "title": "Recursos Humanos - mobilidade interna", "summary": "Apresenta mobilidade interna, contexto de vaga-alvo e ações de transição sem criar outra página de aplicação.", "demonstrates": [ "Explore Recursos Humanos - mobilidade interna e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/employee-internal-mobility-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta mobilidade interna, contexto de vaga-alvo e ações de transição sem criar outra página de aplicação.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.employee-internal-mobility-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/employee-internal-mobility-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-internal-mobility-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/employee-internal-mobility-workbench", "resourceKey": "operations.employee-internal-mobility-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "internal-mobility", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Mobility signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored mobility wrappers", "Target role context authored as relatedRecord instead of custom opportunity markup", "Portable mobility and fit rationale organized in tabs within the same RichContentDocument", "Governed mobility actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-internal-mobility-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "employee-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-internal-mobility-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the internal mobility workbench demonstrates a portable rich-content contract, not a backend HR mobility endpoint.", "The same mobility surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-internal-mobility-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-internal-mobility-workbench.json", "documentation": { "story": { "pt": "Recursos Humanos - mobilidade interna parte de uma necessidade operacional concreta: Apresenta mobilidade interna, contexto de vaga-alvo e ações de transição sem criar outra página de aplicação.", "en": "Human Resources - internal mobility workbench starts from a concrete operational need: Presents mobility signals, target-role context and transition actions without creating a separate mobility application page." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/employee-internal-mobility-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/employee-internal-mobility-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-internal-mobility-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-internal-mobility-workbench.json." } ] }, "envelope": { "id": "employee-internal-mobility-workbench", "title": "Human Resources - internal mobility workbench", "summary": "Presents mobility signals, target-role context and transition actions without creating a separate mobility application page.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/employee-internal-mobility-workbench", "resourceKey": "operations.employee-internal-mobility-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "internal-mobility", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Mobility signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored mobility wrappers", "Target role context authored as relatedRecord instead of custom opportunity markup", "Portable mobility and fit rationale organized in tabs within the same RichContentDocument", "Governed mobility actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-internal-mobility-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-internal-mobility-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the internal mobility workbench demonstrates a portable rich-content contract, not a backend HR mobility endpoint.", "The same mobility surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-internal-mobility-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeeInternalMobilityWorkbench", "shell": { "kind": "dashboard-card", "icon": "swap_horiz", "title": "Internal mobility workbench", "subtitle": "Portable rich-content surface for governed HR mobility operations" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "employee-internal-mobility-workbench", "context": { "mobility": { "employeeId": "EMP-903", "employeeName": "Rafael Nunes", "currentRole": "Senior Product Analyst", "currentArea": "Digital experience", "manager": "Lucas Almeida", "readiness": "87", "openRoles": "2", "window": "Q3" }, "targetRole": { "name": "Staff Product Manager", "department": "Digital experience", "lane": "Product leadership" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "swap_horiz", "titleExpr": "${mobility.employeeName}", "message": "Use a portable HR internal mobility surface when the host must expose readiness signals, target role context and governed transition actions without inventing people-ops templates." }, { "type": "statGroup", "title": "Mobility signals", "subtitle": "Canonical KPI block for internal mobility workbenches", "layout": "grid", "items": [ { "label": "Readiness", "valueExpr": "${mobility.readiness}", "caption": "Mobility score", "icon": "monitoring" }, { "label": "Open roles", "valueExpr": "${mobility.openRoles}", "caption": "Matched opportunities", "icon": "workspaces" }, { "label": "Window", "valueExpr": "${mobility.window}", "caption": "Target move", "icon": "calendar_month" } ] }, { "type": "lookupCard", "title": "Selected employee", "status": "resolved", "subtitleExpr": "${mobility.employeeName}", "metaExpr": "${mobility.currentArea}", "ctaLabel": "Open employee", "variant": "raised", "color": "primary", "action": { "actionId": "hr.mobility.employee.open", "payloadExpr": "${mobility}" }, "fields": [ { "label": "Current role", "valueExpr": "${mobility.currentRole}" }, { "label": "Manager", "valueExpr": "${mobility.manager}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.mobility.dossier.open", "payloadExpr": "${mobility}" } } ] }, { "type": "tabs", "title": "Mobility views", "subtitle": "Portable editorial tabs for fit, readiness and governance context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Keep readiness rationale, target role notes and move risks inside the same RichContentDocument." } ] }, { "id": "fit", "label": "Fit", "icon": "checklist", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Fit rule", "value": "Escalate any mobility move that changes compensation band or leaves critical coverage gaps unresolved." }, { "label": "Evidence source", "value": "Career matrix, calibration notes and manager alignment summary." } ] } ] } ] }, { "type": "relatedRecord", "title": "Target role", "relationLabel": "Role opportunity", "subtitleExpr": "${targetRole.name}", "metaExpr": "${targetRole.department}", "ctaLabel": "Open role", "variant": "raised", "color": "primary", "action": { "actionId": "hr.mobility.role.open", "payloadExpr": "${targetRole}" }, "fields": [ { "label": "Mobility lane", "valueExpr": "${targetRole.lane}", "hint": "Resolved from the current mobility assignment." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule panel review", "variant": "stroked", "action": { "actionId": "hr.mobility.panel.schedule", "payloadExpr": "${mobility}" } } ] }, { "type": "ctaGroup", "title": "Mobility actions", "subtitle": "Governed HR mobility outcomes", "message": "Use semantic mobility actions instead of host-authored transition button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Start mobility review", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "hr.mobility.review.start", "payloadExpr": "${mobility}" } }, { "type": "actionButton", "label": "Request manager alignment", "icon": "forum", "variant": "stroked", "action": { "actionId": "hr.mobility.manager.requestAlignment", "payloadExpr": "${mobility}" } } ] }, { "type": "actionCard", "title": "Escalate mobility risk", "subtitleExpr": "${mobility.employeeId}", "message": "Use actionCard when the HR host needs a governed escalation for unresolved mobility blockers or retention risks.", "metaExpr": "${mobility.currentRole}", "ctaLabel": "Escalate mobility risk", "variant": "raised", "color": "primary", "action": { "actionId": "hr.mobility.escalate", "payloadExpr": "${mobility}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.mobility.dossier.open", "payloadExpr": "${mobility}" } } ] } ] } } } } ] } } }, { "id": "employee-leave-absence-workbench", "title": "Human Resources - leave and absence workbench", "summary": "Presents leave signals, coverage context and absence actions as governed runtime content.", "i18n": { "pt": { "title": "Recursos Humanos - afastamentos", "summary": "Apresenta afastamentos, cobertura e ações de ausência como conteúdo governado em runtime.", "demonstrates": [ "Explore Recursos Humanos - afastamentos e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/employee-leave-absence-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta afastamentos, cobertura e ações de ausência como conteúdo governado em runtime.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.employee-leave-absence-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/employee-leave-absence-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-leave-absence-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/employee-leave-absence-workbench", "resourceKey": "operations.employee-leave-absence-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "leave-tracking", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Leave signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored leave wrappers", "Coverage partner context authored as relatedRecord instead of custom relationship markup", "Portable leave and compliance rationale organized in tabs within the same RichContentDocument", "Governed leave actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-leave-absence-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "employee-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-leave-absence-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the leave and absence workbench demonstrates a portable rich-content contract, not a backend HR leave endpoint.", "The same leave surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-leave-absence-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-leave-absence-workbench.json", "documentation": { "story": { "pt": "Recursos Humanos - afastamentos parte de uma necessidade operacional concreta: Apresenta afastamentos, cobertura e ações de ausência como conteúdo governado em runtime.", "en": "Human Resources - leave and absence workbench starts from a concrete operational need: Presents leave signals, coverage context and absence actions as governed runtime content." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/employee-leave-absence-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/employee-leave-absence-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-leave-absence-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-leave-absence-workbench.json." } ] }, "envelope": { "id": "employee-leave-absence-workbench", "title": "Human Resources - leave and absence workbench", "summary": "Presents leave signals, coverage context and absence actions as governed runtime content.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/employee-leave-absence-workbench", "resourceKey": "operations.employee-leave-absence-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "leave-tracking", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Leave signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored leave wrappers", "Coverage partner context authored as relatedRecord instead of custom relationship markup", "Portable leave and compliance rationale organized in tabs within the same RichContentDocument", "Governed leave actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-leave-absence-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-leave-absence-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the leave and absence workbench demonstrates a portable rich-content contract, not a backend HR leave endpoint.", "The same leave surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-leave-absence-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeeLeaveAbsenceWorkbench", "shell": { "kind": "dashboard-card", "icon": "event_available", "title": "Leave and absence workbench", "subtitle": "Portable rich-content surface for governed HR leave operations" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "employee-leave-absence-workbench", "context": { "leave": { "employeeId": "EMP-708", "employeeName": "Marina Reis", "role": "Senior Product Analyst", "leaveType": "Parental leave", "window": "12d", "coverage": "1", "returnDate": "2026-06-08", "coverageOwner": "Carla Mendes" }, "partner": { "name": "Mariana Torres", "department": "People operations", "lane": "Leave compliance / backfill coordination" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "event_available", "titleExpr": "${leave.employeeName}", "message": "Use a portable HR leave and absence surface when the host must expose leave signals, coverage context and governed absence actions without inventing people-ops templates." }, { "type": "statGroup", "title": "Leave signals", "subtitle": "Canonical KPI block for leave and absence workbenches", "layout": "grid", "items": [ { "label": "Window", "valueExpr": "${leave.window}", "captionExpr": "${leave.leaveType}", "icon": "calendar_month" }, { "label": "Coverage", "valueExpr": "${leave.coverage}", "caption": "Open handoffs", "icon": "groups" }, { "label": "Return", "valueExpr": "${leave.returnDate}", "caption": "Expected return", "icon": "event_available" } ] }, { "type": "lookupCard", "title": "Selected employee", "status": "resolved", "subtitleExpr": "${leave.employeeName}", "metaExpr": "${leave.role}", "ctaLabel": "Open employee", "variant": "raised", "color": "primary", "action": { "actionId": "hr.leave.employee.open", "payloadExpr": "${leave}" }, "fields": [ { "label": "Leave type", "valueExpr": "${leave.leaveType}" }, { "label": "Coverage owner", "valueExpr": "${leave.coverageOwner}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.leave.dossier.open", "payloadExpr": "${leave}" } } ] }, { "type": "tabs", "title": "Leave views", "subtitle": "Portable editorial tabs for leave summary and compliance context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Keep leave rationale, coverage notes and return planning inside the same RichContentDocument." } ] }, { "id": "compliance", "label": "Compliance", "icon": "policy", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Policy rule", "value": "Escalate any leave extension or missing coverage handoff before payroll and access deadlines." }, { "label": "Evidence source", "value": "Leave policy snapshot, manager notes and return-to-work checklist." } ] } ] } ] }, { "type": "relatedRecord", "title": "Coverage partner", "relationLabel": "HR partner", "subtitleExpr": "${partner.name}", "metaExpr": "${partner.department}", "ctaLabel": "Open partner", "variant": "raised", "color": "primary", "action": { "actionId": "hr.leave.partner.open", "payloadExpr": "${partner}" }, "fields": [ { "label": "Coverage lane", "valueExpr": "${partner.lane}", "hint": "Resolved from the current leave assignment." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule return sync", "variant": "stroked", "action": { "actionId": "hr.leave.return.scheduleSync", "payloadExpr": "${leave}" } } ] }, { "type": "ctaGroup", "title": "Leave actions", "subtitle": "Governed HR leave outcomes", "message": "Use semantic leave actions instead of host-authored absence button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm leave plan", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "hr.leave.confirm", "payloadExpr": "${leave}" } }, { "type": "actionButton", "label": "Request coverage update", "icon": "sync", "variant": "stroked", "action": { "actionId": "hr.leave.coverage.requestUpdate", "payloadExpr": "${leave}" } } ] }, { "type": "actionCard", "title": "Escalate leave risk", "subtitleExpr": "${leave.employeeId}", "message": "Use actionCard when the HR host needs a governed escalation for unresolved leave blockers or return planning risks.", "metaExpr": "${leave.leaveType}", "ctaLabel": "Escalate leave risk", "variant": "raised", "color": "primary", "action": { "actionId": "hr.leave.escalate", "payloadExpr": "${leave}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.leave.dossier.open", "payloadExpr": "${leave}" } } ] } ] } } } } ] } } }, { "id": "employee-offboarding-workbench", "title": "Human Resources - offboarding workbench", "summary": "Presents exit signals, transition ownership and departure actions as a governed offboarding workspace.", "i18n": { "pt": { "title": "Recursos Humanos - desligamento", "summary": "Apresenta sinais de desligamento, transição de responsabilidade e ações de saída em um workspace governado.", "demonstrates": [ "Explore Recursos Humanos - desligamento e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/employee-offboarding-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta sinais de desligamento, transição de responsabilidade e ações de saída em um workspace governado.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.employee-offboarding-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/employee-offboarding-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-offboarding-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/employee-offboarding-workbench", "resourceKey": "operations.employee-offboarding-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "offboarding", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Offboarding signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored departure wrappers", "Transition-owner context authored as relatedRecord instead of custom relationship markup", "Portable offboarding and compliance rationale organized in tabs within the same RichContentDocument", "Governed departure actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-offboarding-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "employee-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-offboarding-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the offboarding workbench demonstrates a portable rich-content contract, not a backend HR departure endpoint.", "The same offboarding surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-offboarding-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-offboarding-workbench.json", "documentation": { "story": { "pt": "Recursos Humanos - desligamento parte de uma necessidade operacional concreta: Apresenta sinais de desligamento, transição de responsabilidade e ações de saída em um workspace governado.", "en": "Human Resources - offboarding workbench starts from a concrete operational need: Presents exit signals, transition ownership and departure actions as a governed offboarding workspace." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/employee-offboarding-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/employee-offboarding-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-offboarding-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-offboarding-workbench.json." } ] }, "envelope": { "id": "employee-offboarding-workbench", "title": "Human Resources - offboarding workbench", "summary": "Presents exit signals, transition ownership and departure actions as a governed offboarding workspace.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/employee-offboarding-workbench", "resourceKey": "operations.employee-offboarding-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "offboarding", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Offboarding signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored departure wrappers", "Transition-owner context authored as relatedRecord instead of custom relationship markup", "Portable offboarding and compliance rationale organized in tabs within the same RichContentDocument", "Governed departure actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-offboarding-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-offboarding-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the offboarding workbench demonstrates a portable rich-content contract, not a backend HR departure endpoint.", "The same offboarding surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-offboarding-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeeOffboardingWorkbench", "shell": { "kind": "dashboard-card", "icon": "exit_to_app", "title": "Offboarding workbench", "subtitle": "Portable rich-content surface for governed HR departure operations" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "employee-offboarding-workbench", "context": { "employee": { "id": "EMP-640", "name": "Diego Nunes", "role": "Staff Product Designer", "department": "Product design", "lastDay": "2026-05-12", "noticeWindow": "14d", "reason": "Voluntary departure", "coverage": "3", "risk": "Moderate" }, "owner": { "name": "Marina Costa", "department": "People operations", "lane": "Exit compliance / access revocation" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "exit_to_app", "titleExpr": "${employee.name}", "message": "Use a portable HR offboarding surface when the host must expose exit signals, transition ownership and governed departure actions without inventing people-ops templates." }, { "type": "statGroup", "title": "Exit signals", "subtitle": "Canonical KPI block for offboarding workbenches", "layout": "grid", "items": [ { "label": "Notice", "valueExpr": "${employee.noticeWindow}", "captionExpr": "${employee.lastDay}", "icon": "event_busy" }, { "label": "Coverage", "valueExpr": "${employee.coverage}", "caption": "Open handoffs", "icon": "handover" }, { "label": "Risk", "valueExpr": "${employee.risk}", "captionExpr": "${employee.reason}", "icon": "warning" } ] }, { "type": "lookupCard", "title": "Selected employee", "status": "resolved", "subtitleExpr": "${employee.name}", "metaExpr": "${employee.role}", "ctaLabel": "Open employee", "variant": "raised", "color": "primary", "action": { "actionId": "hr.offboarding.employee.open", "payloadExpr": "${employee}" }, "fields": [ { "label": "Last day", "valueExpr": "${employee.lastDay}" }, { "label": "Reason", "valueExpr": "${employee.reason}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.offboarding.dossier.open", "payloadExpr": "${employee}" } } ] }, { "type": "tabs", "title": "Offboarding views", "subtitle": "Portable editorial tabs for transition summary and compliance context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Keep departure rationale, handoff progress and exit readiness inside the same RichContentDocument." } ] }, { "id": "compliance", "label": "Compliance", "icon": "policy", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Asset rule", "value": "Escalate any missing asset return or access closure before the final payroll checkpoint." }, { "label": "Knowledge transfer", "value": "Document ownership transitions and successor coverage inside the same governed surface." } ] } ] } ] }, { "type": "relatedRecord", "title": "Transition owner", "subtitleExpr": "${owner.name}", "relationLabel": "HR partner", "metaExpr": "${owner.department}", "ctaLabel": "Open owner", "variant": "raised", "color": "primary", "action": { "actionId": "hr.offboarding.owner.open", "payloadExpr": "${owner}" }, "fields": [ { "label": "Checklist lane", "valueExpr": "${owner.lane}", "hint": "Resolved from the current offboarding assignment." } ], "secondaryActions": [ { "type": "actionButton", "label": "Plan exit interview", "variant": "stroked", "action": { "actionId": "hr.offboarding.exitInterview.plan", "payloadExpr": "${employee}" } } ] }, { "type": "ctaGroup", "title": "Offboarding actions", "subtitle": "Governed HR departure outcomes", "message": "Use semantic offboarding actions instead of host-authored departure button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm offboarding plan", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "hr.offboarding.confirm", "payloadExpr": "${employee}" } }, { "type": "actionButton", "label": "Request handoff update", "icon": "sync", "variant": "stroked", "action": { "actionId": "hr.offboarding.handoff.requestUpdate", "payloadExpr": "${employee}" } } ] }, { "type": "actionCard", "title": "Escalate departure risk", "subtitleExpr": "${employee.id}", "message": "Use actionCard when the HR host needs a governed escalation for unresolved exit blockers or access closure risks.", "metaExpr": "${employee.role}", "ctaLabel": "Escalate risk", "variant": "raised", "color": "primary", "action": { "actionId": "hr.offboarding.escalate", "payloadExpr": "${employee}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.offboarding.dossier.open", "payloadExpr": "${employee}" } } ] } ] } } } } ] } } }, { "id": "employee-performance-review-workbench", "title": "Human Resources - performance review workbench", "summary": "Presents performance review signals, calibration context and review actions as governed runtime content instead of a static HR template.", "i18n": { "pt": { "title": "Recursos Humanos - revisão de performance", "summary": "Apresenta sinais de performance, calibração e ações de revisão como conteúdo governado em runtime.", "demonstrates": [ "Explore Recursos Humanos - revisão de performance e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/employee-performance-review-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta sinais de performance, calibração e ações de revisão como conteúdo governado em runtime.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.employee-performance-review-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/employee-performance-review-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-performance-review-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/employee-performance-review-workbench", "resourceKey": "operations.employee-performance-review-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "performance-review", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Performance review signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored review wrappers", "Review manager context authored as relatedRecord instead of custom relationship markup", "Portable review and calibration rationale organized in tabs within the same RichContentDocument", "Governed HR review actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-performance-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "employee-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-performance-review-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the performance review workbench demonstrates a portable rich-content contract, not a backend HR review endpoint.", "The same performance review surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-performance-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-performance-review-workbench.json", "documentation": { "story": { "pt": "Recursos Humanos - revisão de performance parte de uma necessidade operacional concreta: Apresenta sinais de performance, calibração e ações de revisão como conteúdo governado em runtime.", "en": "Human Resources - performance review workbench starts from a concrete operational need: Presents performance review signals, calibration context and review actions as governed runtime content instead of a static HR template." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/employee-performance-review-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/employee-performance-review-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-performance-review-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-performance-review-workbench.json." } ] }, "envelope": { "id": "employee-performance-review-workbench", "title": "Human Resources - performance review workbench", "summary": "Presents performance review signals, calibration context and review actions as governed runtime content instead of a static HR template.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/employee-performance-review-workbench", "resourceKey": "operations.employee-performance-review-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "performance-review", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Performance review signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored review wrappers", "Review manager context authored as relatedRecord instead of custom relationship markup", "Portable review and calibration rationale organized in tabs within the same RichContentDocument", "Governed HR review actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-performance-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-performance-review-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the performance review workbench demonstrates a portable rich-content contract, not a backend HR review endpoint.", "The same performance review surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-performance-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeePerformanceReviewWorkbench", "shell": { "kind": "dashboard-card", "icon": "military_tech", "title": "Performance review workbench", "subtitle": "Portable rich-content surface for governed HR review operations" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "employee-performance-review-workbench", "context": { "employee": { "id": "EMP-320", "name": "Rafaela Nunes", "role": "Senior Product Designer", "department": "Experience Design", "cycle": "Q2", "calibration": "2", "rating": "Exceeds", "promotionReadiness": "Stretch role ready", "reviewWindow": "3d" }, "manager": { "name": "Marcos Lima", "department": "Design leadership", "reviewLane": "Design council" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "military_tech", "titleExpr": "${employee.name}", "message": "Use a portable HR performance review surface when the host must expose review signals, calibration context and governed actions without inventing people-ops templates." }, { "type": "statGroup", "title": "Review signals", "subtitle": "Canonical KPI block for performance review workbenches", "layout": "grid", "items": [ { "label": "Cycle", "valueExpr": "${employee.cycle}", "captionExpr": "${employee.department}", "icon": "event" }, { "label": "Calibration", "valueExpr": "${employee.calibration}", "captionExpr": "${employee.reviewWindow}", "icon": "balance" }, { "label": "Rating", "valueExpr": "${employee.rating}", "captionExpr": "${employee.promotionReadiness}", "icon": "emoji_events" } ] }, { "type": "lookupCard", "title": "Selected employee", "status": "resolved", "subtitleExpr": "${employee.name}", "metaExpr": "${employee.role}", "ctaLabel": "Open employee", "variant": "raised", "color": "primary", "action": { "actionId": "hr.review.employee.open", "payloadExpr": "${employee}" }, "fields": [ { "label": "Current rating", "valueExpr": "${employee.rating}" }, { "label": "Promotion readiness", "valueExpr": "${employee.promotionReadiness}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.review.dossier.open", "payloadExpr": "${employee}" } } ] }, { "type": "tabs", "title": "Review views", "subtitle": "Portable editorial tabs for review and calibration context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Tabs keep review notes, promotion context and calibration rationale inside the same RichContentDocument." } ] }, { "id": "calibration", "label": "Calibration", "icon": "tune", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Calibration rule", "value": "Escalate any rating change that requires council approval." }, { "label": "Evidence source", "valueExpr": "${employee.reviewWindow}" }, { "label": "Portability rule", "value": "Keep review semantics in the rich-content document; keep execution in the host." } ] } ] } ] }, { "type": "relatedRecord", "title": "Review manager", "subtitleExpr": "${manager.name}", "relationLabel": "Manager", "metaExpr": "${manager.department}", "ctaLabel": "Open manager", "variant": "raised", "color": "primary", "action": { "actionId": "hr.review.manager.open", "payloadExpr": "${manager}" }, "fields": [ { "label": "Review lane", "valueExpr": "${manager.reviewLane}", "hint": "Resolved from the current review assignment." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule calibration", "variant": "stroked", "action": { "actionId": "hr.review.manager.scheduleCalibration", "payloadExpr": "${employee}" } } ] }, { "type": "ctaGroup", "title": "Review actions", "subtitle": "Governed HR review outcomes", "message": "Use semantic review actions instead of host-authored performance review button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm review", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "hr.review.confirm", "payloadExpr": "${employee}" } }, { "type": "actionButton", "label": "Request calibration follow-up", "icon": "flag", "variant": "stroked", "action": { "actionId": "hr.review.calibration.followUp", "payloadExpr": "${employee}" } } ] }, { "type": "actionCard", "title": "Escalate review case", "subtitleExpr": "${employee.id}", "message": "Use actionCard when the HR host needs a governed escalation or calibration flow.", "metaExpr": "${employee.role}", "ctaLabel": "Escalate review", "variant": "raised", "color": "primary", "action": { "actionId": "hr.review.escalate", "payloadExpr": "${employee}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.review.dossier.open", "payloadExpr": "${employee}" } } ] } ] } } } } ] } } }, { "id": "employee-promotion-review-workbench", "title": "Human Resources - promotion review workbench", "summary": "Presents promotion evidence, sponsor context and decision actions as a governed people-ops surface.", "i18n": { "pt": { "title": "Recursos Humanos - revisão de promoção", "summary": "Apresenta evidências de promoção, contexto de sponsor e ações de decisão como superfície governada.", "demonstrates": [ "Explore Recursos Humanos - revisão de promoção e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/employee-promotion-review-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta evidências de promoção, contexto de sponsor e ações de decisão como superfície governada.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.employee-promotion-review-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/employee-promotion-review-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-promotion-review-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/employee-promotion-review-workbench", "resourceKey": "operations.employee-promotion-review-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "promotion-review", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Promotion review signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored promotion wrappers", "Promotion sponsor context authored as relatedRecord instead of custom relationship markup", "Portable promotion and sponsor rationale organized in tabs within the same RichContentDocument", "Governed promotion actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-promotion-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "employee-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-promotion-review-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the promotion review workbench demonstrates a portable rich-content contract, not a backend HR promotion endpoint.", "The same promotion review surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-promotion-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-promotion-review-workbench.json", "documentation": { "story": { "pt": "Recursos Humanos - revisão de promoção parte de uma necessidade operacional concreta: Apresenta evidências de promoção, contexto de sponsor e ações de decisão como superfície governada.", "en": "Human Resources - promotion review workbench starts from a concrete operational need: Presents promotion evidence, sponsor context and decision actions as a governed people-ops surface." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/employee-promotion-review-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/employee-promotion-review-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-promotion-review-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-promotion-review-workbench.json." } ] }, "envelope": { "id": "employee-promotion-review-workbench", "title": "Human Resources - promotion review workbench", "summary": "Presents promotion evidence, sponsor context and decision actions as a governed people-ops surface.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/employee-promotion-review-workbench", "resourceKey": "operations.employee-promotion-review-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "promotion-review", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Promotion review signals authored as statGroup instead of host summary cards", "Selected employee context authored as lookupCard instead of host-authored promotion wrappers", "Promotion sponsor context authored as relatedRecord instead of custom relationship markup", "Portable promotion and sponsor rationale organized in tabs within the same RichContentDocument", "Governed promotion actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-promotion-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-promotion-review-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the promotion review workbench demonstrates a portable rich-content contract, not a backend HR promotion endpoint.", "The same promotion review surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-promotion-review-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeePromotionReviewWorkbench", "shell": { "kind": "dashboard-card", "icon": "north_star", "title": "Promotion review workbench", "subtitle": "Portable rich-content surface for governed HR promotion operations" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "employee-promotion-review-workbench", "context": { "employee": { "id": "EMP-512", "name": "Larissa Azevedo", "role": "Senior Platform Engineer", "department": "Platform engineering", "cycle": "Q2", "readiness": "Ready now", "targetRole": "Staff Platform Engineer", "impactSignal": "Cross-team platform leadership", "reviewWindow": "5d" }, "sponsor": { "name": "Helena Souza", "department": "Leadership sponsor", "promotionLane": "Leadership council / role leveling" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "north_star", "titleExpr": "${employee.name}", "message": "Use a portable HR promotion review surface when the host must expose readiness signals, sponsor context and governed promotion actions without inventing people-ops templates." }, { "type": "statGroup", "title": "Promotion signals", "subtitle": "Canonical KPI block for promotion review workbenches", "layout": "grid", "items": [ { "label": "Cycle", "valueExpr": "${employee.cycle}", "captionExpr": "${employee.department}", "icon": "event" }, { "label": "Readiness", "valueExpr": "${employee.readiness}", "captionExpr": "${employee.reviewWindow}", "icon": "trending_up" }, { "label": "Target role", "valueExpr": "${employee.targetRole}", "captionExpr": "${employee.impactSignal}", "icon": "north" } ] }, { "type": "lookupCard", "title": "Selected employee", "status": "resolved", "subtitleExpr": "${employee.name}", "metaExpr": "${employee.role}", "ctaLabel": "Open employee", "variant": "raised", "color": "primary", "action": { "actionId": "hr.promotion.employee.open", "payloadExpr": "${employee}" }, "fields": [ { "label": "Target role", "valueExpr": "${employee.targetRole}" }, { "label": "Impact signal", "valueExpr": "${employee.impactSignal}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.promotion.dossier.open", "payloadExpr": "${employee}" } } ] }, { "type": "tabs", "title": "Promotion views", "subtitle": "Portable editorial tabs for promotion summary and sponsor context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Tabs keep promotion notes, readiness signals and sponsor rationale inside the same RichContentDocument." } ] }, { "id": "sponsor", "label": "Sponsor", "icon": "groups", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Promotion rule", "value": "Escalate any readiness change that requires panel approval or role leveling exception." }, { "label": "Evidence source", "valueExpr": "${employee.reviewWindow}" }, { "label": "Portability rule", "value": "Keep promotion semantics in the rich-content document; keep execution in the host." } ] } ] } ] }, { "type": "relatedRecord", "title": "Promotion sponsor", "subtitleExpr": "${sponsor.name}", "relationLabel": "Sponsor", "metaExpr": "${sponsor.department}", "ctaLabel": "Open sponsor", "variant": "raised", "color": "primary", "action": { "actionId": "hr.promotion.sponsor.open", "payloadExpr": "${sponsor}" }, "fields": [ { "label": "Promotion lane", "valueExpr": "${sponsor.promotionLane}", "hint": "Resolved from the current promotion review assignment." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule sponsor review", "variant": "stroked", "action": { "actionId": "hr.promotion.sponsor.scheduleReview", "payloadExpr": "${employee}" } } ] }, { "type": "ctaGroup", "title": "Promotion actions", "subtitle": "Governed HR promotion outcomes", "message": "Use semantic promotion actions instead of host-authored readiness button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm promotion plan", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "hr.promotion.confirm", "payloadExpr": "${employee}" } }, { "type": "actionButton", "label": "Request sponsor follow-up", "icon": "flag", "variant": "stroked", "action": { "actionId": "hr.promotion.sponsor.followUp", "payloadExpr": "${employee}" } } ] }, { "type": "actionCard", "title": "Escalate promotion case", "subtitleExpr": "${employee.id}", "message": "Use actionCard when the HR host needs a governed promotion escalation or leveling exception flow.", "metaExpr": "${employee.role}", "ctaLabel": "Escalate promotion", "variant": "raised", "color": "primary", "action": { "actionId": "hr.promotion.escalate", "payloadExpr": "${employee}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.promotion.dossier.open", "payloadExpr": "${employee}" } } ] } ] } } } } ] } } }, { "id": "employee-succession-planning-workbench", "title": "Human Resources - succession planning workbench", "summary": "Presents succession signals, sponsor context and planning actions as a portable HR decision surface.", "i18n": { "pt": { "title": "Recursos Humanos - sucessão", "summary": "Apresenta sinais de sucessão, contexto de sponsor e ações de planejamento como superfície portátil.", "demonstrates": [ "Explore Recursos Humanos - sucessão e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/employee-succession-planning-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta sinais de sucessão, contexto de sponsor e ações de planejamento como superfície portátil.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.employee-succession-planning-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/employee-succession-planning-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-succession-planning-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/employee-succession-planning-workbench", "resourceKey": "operations.employee-succession-planning-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "succession-planning", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Succession signals authored as statGroup instead of host summary cards", "Target-role context authored as lookupCard instead of host-authored succession wrappers", "Succession sponsor context authored as relatedRecord instead of custom relationship markup", "Portable succession and pipeline rationale organized in tabs within the same RichContentDocument", "Governed succession actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-succession-planning-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "employee-decision-workbenches", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-succession-planning-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the succession planning workbench demonstrates a portable rich-content contract, not a backend HR succession endpoint.", "The same succession planning surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-succession-planning-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-succession-planning-workbench.json", "documentation": { "story": { "pt": "Recursos Humanos - sucessão parte de uma necessidade operacional concreta: Apresenta sinais de sucessão, contexto de sponsor e ações de planejamento como superfície portátil.", "en": "Human Resources - succession planning workbench starts from a concrete operational need: Presents succession signals, sponsor context and planning actions as a portable HR decision surface." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/employee-succession-planning-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/employee-succession-planning-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-succession-planning-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-succession-planning-workbench.json." } ] }, "envelope": { "id": "employee-succession-planning-workbench", "title": "Human Resources - succession planning workbench", "summary": "Presents succession signals, sponsor context and planning actions as a portable HR decision surface.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/employee-succession-planning-workbench", "resourceKey": "operations.employee-succession-planning-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "human-resources", "succession-planning", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Succession signals authored as statGroup instead of host summary cards", "Target-role context authored as lookupCard instead of host-authored succession wrappers", "Succession sponsor context authored as relatedRecord instead of custom relationship markup", "Portable succession and pipeline rationale organized in tabs within the same RichContentDocument", "Governed succession actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-succession-planning-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "employee-succession-planning-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the succession planning workbench demonstrates a portable rich-content contract, not a backend HR succession endpoint.", "The same succession planning surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-succession-planning-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeeSuccessionPlanningWorkbench", "shell": { "kind": "dashboard-card", "icon": "account_tree", "title": "Succession planning workbench", "subtitle": "Portable rich-content surface for governed HR succession planning" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "employee-succession-planning-workbench", "context": { "plan": { "role": "Principal Platform Lead", "incumbent": "Patricia Almeida", "bench": "2", "risk": "Moderate", "window": "90d", "readiness": "Ready in < 6 months" }, "sponsor": { "name": "Helena Souza", "department": "Leadership sponsor", "lane": "Leadership council / critical roles" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "account_tree", "titleExpr": "${plan.role}", "message": "Use a portable HR succession planning surface when the host must expose readiness signals, sponsor context and governed succession actions without inventing people-ops templates." }, { "type": "statGroup", "title": "Succession signals", "subtitle": "Canonical KPI block for succession planning workbenches", "layout": "grid", "items": [ { "label": "Bench", "valueExpr": "${plan.bench}", "caption": "Ready successors", "icon": "groups" }, { "label": "Risk", "valueExpr": "${plan.risk}", "caption": "Coverage continuity", "icon": "warning" }, { "label": "Window", "valueExpr": "${plan.window}", "caption": "Planning horizon", "icon": "schedule" } ] }, { "type": "lookupCard", "title": "Target role", "status": "resolved", "subtitleExpr": "${plan.role}", "meta": "Succession planning", "ctaLabel": "Open successor plan", "variant": "raised", "color": "primary", "action": { "actionId": "hr.succession.plan.open", "payloadExpr": "${plan}" }, "fields": [ { "label": "Current incumbent", "valueExpr": "${plan.incumbent}" }, { "label": "Readiness", "valueExpr": "${plan.readiness}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.succession.dossier.open", "payloadExpr": "${plan}" } } ] }, { "type": "tabs", "title": "Succession views", "subtitle": "Portable editorial tabs for readiness summary and pipeline context.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Keep succession rationale, readiness notes and pipeline context inside the same RichContentDocument." } ] }, { "id": "pipeline", "label": "Pipeline", "icon": "account_tree", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Planning rule", "value": "Escalate any succession gap with no ready-now successor or no sponsor alignment in the current cycle." }, { "label": "Evidence source", "value": "Performance history, promotion outlook and sponsor alignment notes." } ] } ] } ] }, { "type": "relatedRecord", "title": "Succession sponsor", "relationLabel": "Sponsor", "subtitleExpr": "${sponsor.name}", "metaExpr": "${sponsor.department}", "ctaLabel": "Open sponsor", "variant": "raised", "color": "primary", "action": { "actionId": "hr.succession.sponsor.open", "payloadExpr": "${sponsor}" }, "fields": [ { "label": "Planning lane", "valueExpr": "${sponsor.lane}", "hint": "Resolved from the current succession planning assignment." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule sponsor sync", "variant": "stroked", "action": { "actionId": "hr.succession.sponsor.scheduleSync", "payloadExpr": "${plan}" } } ] }, { "type": "ctaGroup", "title": "Succession actions", "subtitle": "Governed HR succession outcomes", "message": "Use semantic succession actions instead of host-authored planning button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm succession plan", "icon": "task_alt", "variant": "raised", "color": "primary", "action": { "actionId": "hr.succession.confirm", "payloadExpr": "${plan}" } }, { "type": "actionButton", "label": "Request readiness follow-up", "icon": "sync", "variant": "stroked", "action": { "actionId": "hr.succession.readiness.followUp", "payloadExpr": "${plan}" } } ] }, { "type": "actionCard", "title": "Escalate succession gap", "subtitleExpr": "${plan.role}", "message": "Use actionCard when the HR host needs a governed escalation for unresolved succession gaps or sponsor exceptions.", "metaExpr": "${plan.readiness}", "ctaLabel": "Escalate gap", "variant": "raised", "color": "primary", "action": { "actionId": "hr.succession.escalate", "payloadExpr": "${plan}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "hr.succession.dossier.open", "payloadExpr": "${plan}" } } ] } ] } } } } ] } } }, { "id": "onboarding-day-30-coaching-workbench", "title": "Onboarding - day-30 coaching workbench", "summary": "Presents day-30 coaching signals, manager context and development actions as a governed onboarding surface.", "i18n": { "pt": { "title": "Onboarding - coaching do dia 30", "summary": "Apresenta sinais de coaching do dia 30, contexto do gestor e ações de desenvolvimento como superfície governada.", "demonstrates": [ "Explore Onboarding - coaching do dia 30 e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/onboarding-day-30-coaching-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta sinais de coaching do dia 30, contexto do gestor e ações de desenvolvimento como superfície governada.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.onboarding-day-30-coaching-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/onboarding-day-30-coaching-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/onboarding-day-30-coaching-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/onboarding-day-30-coaching-workbench", "resourceKey": "operations.onboarding-day-30-coaching-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "day-30", "coaching", "manager-follow-up", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Day-30 coaching metrics authored as statGroup instead of host-authored manager coaching cards", "Selected hire context authored as lookupCard instead of host-authored coaching wrappers", "Coaching owner context authored as relatedRecord instead of custom manager markup", "Portable coaching goals and blockers organized in tabs within the same RichContentDocument", "Governed coaching actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-day-30-coaching-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "onboarding-journeys", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-day-30-coaching-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding day-30 coaching workbench demonstrates a portable rich-content contract, not a backend coaching endpoint.", "The same onboarding coaching surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-day-30-coaching-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/onboarding-day-30-coaching-workbench.json", "documentation": { "story": { "pt": "Onboarding - coaching do dia 30 parte de uma necessidade operacional concreta: Apresenta sinais de coaching do dia 30, contexto do gestor e ações de desenvolvimento como superfície governada.", "en": "Onboarding - day-30 coaching workbench starts from a concrete operational need: Presents day-30 coaching signals, manager context and development actions as a governed onboarding surface." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/onboarding-day-30-coaching-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/onboarding-day-30-coaching-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-day-30-coaching-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-day-30-coaching-workbench.json." } ] }, "envelope": { "id": "onboarding-day-30-coaching-workbench", "title": "Onboarding - day-30 coaching workbench", "summary": "Presents day-30 coaching signals, manager context and development actions as a governed onboarding surface.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/onboarding-day-30-coaching-workbench", "resourceKey": "operations.onboarding-day-30-coaching-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "day-30", "coaching", "manager-follow-up", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Day-30 coaching metrics authored as statGroup instead of host-authored manager coaching cards", "Selected hire context authored as lookupCard instead of host-authored coaching wrappers", "Coaching owner context authored as relatedRecord instead of custom manager markup", "Portable coaching goals and blockers organized in tabs within the same RichContentDocument", "Governed coaching actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-day-30-coaching-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-day-30-coaching-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding day-30 coaching workbench demonstrates a portable rich-content contract, not a backend coaching endpoint.", "The same onboarding coaching surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-day-30-coaching-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "onboardingDay30CoachingWorkbench", "shell": { "kind": "dashboard-card", "icon": "psychology", "title": "Onboarding day-30 coaching workbench", "subtitle": "Portable rich-content surface for governed coaching" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "onboarding-day-30-coaching-workbench", "context": { "hire": { "id": "ONB-830", "name": "Tiago Almeida", "role": "Customer Success Engineer", "department": "Customer platform", "focus": "Role clarity and first-month delivery plan", "confidence": "8.1", "openGoals": "4", "risk": "Medium", "pulse": "Needs stakeholder alignment" }, "manager": { "name": "Helena Souza", "department": "Engineering leadership", "lane": "First-month development plan" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "psychology", "titleExpr": "${hire.name}", "message": "Use a portable onboarding day-30 coaching surface when the host must expose governed coaching and manager development actions without inventing onboarding-specific templates." }, { "type": "statGroup", "title": "Day-30 coaching signals", "subtitle": "Canonical KPI block for onboarding coaching surfaces", "layout": "grid", "items": [ { "label": "Confidence", "valueExpr": "${hire.confidence}", "captionExpr": "${hire.id}", "icon": "psychology" }, { "label": "Open goals", "valueExpr": "${hire.openGoals}", "caption": "Needs manager review", "icon": "flag" }, { "label": "Coaching risk", "valueExpr": "${hire.risk}", "captionExpr": "${hire.pulse}", "icon": "report" } ] }, { "type": "lookupCard", "title": "Selected hire", "status": "resolved", "subtitleExpr": "${hire.name}", "metaExpr": "${hire.role}", "ctaLabel": "Open hire", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.day30.hire.open", "payloadExpr": "${hire}" }, "fields": [ { "label": "Department", "valueExpr": "${hire.department}" }, { "label": "Coaching focus", "valueExpr": "${hire.focus}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.day30.dossier.open", "payloadExpr": "${hire}" } } ] }, { "type": "tabs", "title": "Coaching views", "subtitle": "Portable editorial tabs for goals, blockers and next steps.", "appearance": "underline", "defaultTabId": "goals", "items": [ { "id": "goals", "label": "Goals", "icon": "flag", "content": [ { "type": "text", "text": "Keep day-30 goals, first-month outcomes and coaching notes inside the same RichContentDocument." } ] }, { "id": "blockers", "label": "Blockers", "icon": "warning", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Coaching blocker", "value": "Stakeholder map and role expectations need a manager-led reset." }, { "label": "Coaching rule", "value": "Escalate when day-30 confidence drops below target or when two coaching goals remain unowned after manager review." } ] } ] } ] }, { "type": "relatedRecord", "title": "Coaching owner", "subtitleExpr": "${manager.name}", "relationLabel": "Manager", "metaExpr": "${manager.department}", "ctaLabel": "Open manager", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.day30.manager.open", "payloadExpr": "${manager}" }, "fields": [ { "label": "Coaching lane", "valueExpr": "${manager.lane}", "hint": "Resolved from the day-30 coaching assignment context." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule coaching sync", "variant": "stroked", "action": { "actionId": "onboarding.day30.manager.scheduleSync", "payloadExpr": "${hire}" } } ] }, { "type": "ctaGroup", "title": "Coaching actions", "subtitle": "Governed day-30 coaching outcomes", "message": "Use semantic coaching actions instead of host-authored onboarding manager button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm coaching plan", "icon": "check_circle", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.day30.coaching.confirm", "payloadExpr": "${hire}" } }, { "type": "actionButton", "label": "Request goal update", "icon": "flag", "variant": "stroked", "action": { "actionId": "onboarding.day30.goals.requestUpdate", "payloadExpr": "${hire}" } } ] }, { "type": "actionCard", "title": "Escalate coaching risk", "subtitleExpr": "${hire.id}", "message": "Use actionCard when the onboarding host needs a governed escalation flow for unresolved first-month coaching risks.", "metaExpr": "${hire.pulse}", "ctaLabel": "Escalate coaching risk", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.day30.coaching.escalate", "payloadExpr": "${hire}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.day30.dossier.open", "payloadExpr": "${hire}" } } ] } ] } } } } ] } } }, { "id": "onboarding-equipment-access-recovery-workbench", "title": "Onboarding - equipment and access recovery workbench", "summary": "Presents equipment and access recovery signals with owner context and remediation actions in one governed workspace.", "i18n": { "pt": { "title": "Onboarding - recuperação de acessos", "summary": "Apresenta recuperação de equipamento e acesso com dono, contexto e ações de remediação em um workspace governado.", "demonstrates": [ "Explore Onboarding - recuperação de acessos e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/onboarding-equipment-access-recovery-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta recuperação de equipamento e acesso com dono, contexto e ações de remediação em um workspace governado.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.onboarding-equipment-access-recovery-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/onboarding-equipment-access-recovery-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/onboarding-equipment-access-recovery-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/onboarding-equipment-access-recovery-workbench", "resourceKey": "operations.onboarding-equipment-access-recovery-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "recovery", "access", "equipment", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Recovery metrics authored as statGroup instead of host-authored access summary cards", "Selected hire context authored as lookupCard instead of host-authored recovery wrappers", "Access owner context authored as relatedRecord instead of custom relationship markup", "Portable recovery notes and blockers organized in tabs within the same RichContentDocument", "Governed recovery actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-equipment-access-recovery-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "onboarding-journeys", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-recovery-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding equipment and access recovery workbench demonstrates a portable rich-content contract, not a backend recovery endpoint.", "The same onboarding recovery surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-equipment-access-recovery-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/onboarding-equipment-access-recovery-workbench.json", "documentation": { "story": { "pt": "Onboarding - recuperação de acessos parte de uma necessidade operacional concreta: Apresenta recuperação de equipamento e acesso com dono, contexto e ações de remediação em um workspace governado.", "en": "Onboarding - equipment and access recovery workbench starts from a concrete operational need: Presents equipment and access recovery signals with owner context and remediation actions in one governed workspace." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/onboarding-equipment-access-recovery-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/onboarding-equipment-access-recovery-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-equipment-access-recovery-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-equipment-access-recovery-workbench.json." } ] }, "envelope": { "id": "onboarding-equipment-access-recovery-workbench", "title": "Onboarding - equipment and access recovery workbench", "summary": "Presents equipment and access recovery signals with owner context and remediation actions in one governed workspace.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/onboarding-equipment-access-recovery-workbench", "resourceKey": "operations.onboarding-equipment-access-recovery-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "recovery", "access", "equipment", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Recovery metrics authored as statGroup instead of host-authored access summary cards", "Selected hire context authored as lookupCard instead of host-authored recovery wrappers", "Access owner context authored as relatedRecord instead of custom relationship markup", "Portable recovery notes and blockers organized in tabs within the same RichContentDocument", "Governed recovery actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-equipment-access-recovery-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-recovery-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding equipment and access recovery workbench demonstrates a portable rich-content contract, not a backend recovery endpoint.", "The same onboarding recovery surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-equipment-access-recovery-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "onboardingEquipmentAccessRecoveryWorkbench", "shell": { "kind": "dashboard-card", "icon": "vpn_key", "title": "Onboarding equipment and access recovery workbench", "subtitle": "Portable rich-content surface for governed access recovery" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "onboarding-equipment-access-recovery-workbench", "context": { "hire": { "id": "ONB-741", "name": "Rafaela Dias", "role": "Platform Engineer", "department": "Developer experience", "blocker": "VPN and SSO provisioning", "openBlockers": "3", "criticalApps": "2", "recoverySla": "6h", "deviceState": "Laptop delivered / account pending" }, "owner": { "name": "Marcos Lima", "department": "IT operations", "lane": "Identity and device setup" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "warning", "icon": "vpn_key", "titleExpr": "${hire.name}", "message": "Use a portable onboarding equipment and access recovery surface when the host must expose governed access recovery and device remediation actions without inventing onboarding-specific templates." }, { "type": "statGroup", "title": "Recovery signals", "subtitle": "Canonical KPI block for onboarding recovery surfaces", "layout": "grid", "items": [ { "label": "Open blockers", "valueExpr": "${hire.openBlockers}", "captionExpr": "${hire.id}", "icon": "warning" }, { "label": "Critical apps", "valueExpr": "${hire.criticalApps}", "caption": "Still missing", "icon": "apps" }, { "label": "Recovery SLA", "valueExpr": "${hire.recoverySla}", "captionExpr": "${hire.blocker}", "icon": "schedule" } ] }, { "type": "lookupCard", "title": "Selected hire", "status": "resolved", "subtitleExpr": "${hire.name}", "metaExpr": "${hire.role}", "ctaLabel": "Open hire", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.recovery.hire.open", "payloadExpr": "${hire}" }, "fields": [ { "label": "Department", "valueExpr": "${hire.department}" }, { "label": "Device state", "valueExpr": "${hire.deviceState}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.recovery.dossier.open", "payloadExpr": "${hire}" } } ] }, { "type": "tabs", "title": "Recovery views", "subtitle": "Portable editorial tabs for recovery status and blocker details.", "appearance": "underline", "defaultTabId": "status", "items": [ { "id": "status", "label": "Status", "icon": "dashboard", "content": [ { "type": "text", "text": "Keep access status, recovery notes and remediation evidence inside the same RichContentDocument." } ] }, { "id": "blockers", "label": "Blockers", "icon": "warning", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Missing access", "value": "SSO, analytics workspace and VPN group mapping." }, { "label": "Recovery rule", "value": "Escalate any access or device blocker still unresolved after the first business day or any blocker affecting payroll, identity or secure access." } ] } ] } ] }, { "type": "relatedRecord", "title": "Access owner", "subtitleExpr": "${owner.name}", "relationLabel": "Ops owner", "metaExpr": "${owner.department}", "ctaLabel": "Open owner", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.recovery.owner.open", "payloadExpr": "${owner}" }, "fields": [ { "label": "Recovery lane", "valueExpr": "${owner.lane}", "hint": "Resolved from the recovery assignment context." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule recovery sync", "variant": "stroked", "action": { "actionId": "onboarding.recovery.owner.scheduleSync", "payloadExpr": "${hire}" } } ] }, { "type": "ctaGroup", "title": "Recovery actions", "subtitle": "Governed onboarding recovery outcomes", "message": "Use semantic recovery actions instead of host-authored onboarding access button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm recovery plan", "icon": "check_circle", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.recovery.confirm", "payloadExpr": "${hire}" } }, { "type": "actionButton", "label": "Request access reset", "icon": "restart_alt", "variant": "stroked", "action": { "actionId": "onboarding.recovery.access.reset", "payloadExpr": "${hire}" } } ] }, { "type": "actionCard", "title": "Escalate recovery risk", "subtitleExpr": "${hire.id}", "message": "Use actionCard when the onboarding host needs a governed escalation flow for unresolved access or equipment blockers.", "metaExpr": "${hire.blocker}", "ctaLabel": "Escalate recovery risk", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.recovery.escalate", "payloadExpr": "${hire}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.recovery.dossier.open", "payloadExpr": "${hire}" } } ] } ] } } } } ] } } }, { "id": "onboarding-journey-workbench", "title": "Onboarding - journey workbench", "summary": "Presents onboarding KPIs, buddy context and next-step actions as a governed journey surface.", "i18n": { "pt": { "title": "Onboarding - jornada", "summary": "Apresenta KPIs de onboarding, contexto do buddy e próximos passos em uma jornada governada.", "demonstrates": [ "Explore Onboarding - jornada e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/onboarding-journey-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta KPIs de onboarding, contexto do buddy e próximos passos em uma jornada governada.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.onboarding-journey-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/onboarding-journey-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/onboarding-journey-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/onboarding-journey-workbench", "resourceKey": "operations.onboarding-journey-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Onboarding KPIs authored as statGroup instead of host progress cards", "Selected hire context authored as lookupCard instead of host-authored journey wrappers", "Assigned buddy context authored as relatedRecord instead of custom relationship markup", "Portable onboarding rationale organized in tabs within the same RichContentDocument", "Governed onboarding actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-journey-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "onboarding-journeys", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-journey-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding workbench demonstrates a portable rich-content contract, not a backend onboarding endpoint.", "The same onboarding surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-journey-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/onboarding-journey-workbench.json", "documentation": { "story": { "pt": "Onboarding - jornada parte de uma necessidade operacional concreta: Apresenta KPIs de onboarding, contexto do buddy e próximos passos em uma jornada governada.", "en": "Onboarding - journey workbench starts from a concrete operational need: Presents onboarding KPIs, buddy context and next-step actions as a governed journey surface." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/onboarding-journey-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/onboarding-journey-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-journey-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-journey-workbench.json." } ] }, "envelope": { "id": "onboarding-journey-workbench", "title": "Onboarding - journey workbench", "summary": "Presents onboarding KPIs, buddy context and next-step actions as a governed journey surface.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/onboarding-journey-workbench", "resourceKey": "operations.onboarding-journey-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Onboarding KPIs authored as statGroup instead of host progress cards", "Selected hire context authored as lookupCard instead of host-authored journey wrappers", "Assigned buddy context authored as relatedRecord instead of custom relationship markup", "Portable onboarding rationale organized in tabs within the same RichContentDocument", "Governed onboarding actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-journey-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-journey-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding workbench demonstrates a portable rich-content contract, not a backend onboarding endpoint.", "The same onboarding surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-journey-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "onboardingJourneyWorkbench", "shell": { "kind": "dashboard-card", "icon": "person_add", "title": "Onboarding journey workbench", "subtitle": "Portable rich-content surface for governed onboarding flows" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "onboarding-journey-workbench", "context": { "hire": { "id": "ONB-301", "name": "Leonardo Ramos", "role": "Platform Engineer", "department": "Platform Engineering", "day": "D+3", "pendingTasks": "5", "equipment": "Awaiting delivery", "welcomeTrack": "Platform foundation", "reviewWindow": "Friday" }, "buddy": { "name": "Marina Costa", "department": "Engineering enablement" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "person_add", "titleExpr": "${hire.name}", "message": "Use a portable onboarding surface when the host must expose governed journey actions without inventing onboarding-specific templates." }, { "type": "statGroup", "title": "Onboarding signals", "subtitle": "Canonical KPI block for onboarding journey surfaces", "layout": "grid", "items": [ { "label": "Day", "valueExpr": "${hire.day}", "captionExpr": "${hire.department}", "icon": "event" }, { "label": "Tasks left", "valueExpr": "${hire.pendingTasks}", "captionExpr": "${hire.welcomeTrack}", "icon": "task_alt" }, { "label": "Equipment", "valueExpr": "${hire.equipment}", "caption": "Provisioning status", "icon": "laptop_mac" } ] }, { "type": "lookupCard", "title": "Selected hire", "status": "resolved", "subtitleExpr": "${hire.name}", "metaExpr": "${hire.role}", "ctaLabel": "Open hire", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.hire.open", "payloadExpr": "${hire}" }, "fields": [ { "label": "Department", "valueExpr": "${hire.department}" }, { "label": "Welcome track", "valueExpr": "${hire.welcomeTrack}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.dossier.open", "payloadExpr": "${hire}" } } ] }, { "type": "tabs", "title": "Journey views", "subtitle": "Portable editorial tabs for onboarding context.", "appearance": "underline", "defaultTabId": "overview", "items": [ { "id": "overview", "label": "Overview", "icon": "dashboard", "content": [ { "type": "text", "text": "Tabs keep journey notes, provisioning context and first-week readiness inside the same RichContentDocument." } ] }, { "id": "readiness", "label": "Readiness", "icon": "assignment_turned_in", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Review window", "valueExpr": "${hire.reviewWindow}" }, { "label": "Equipment", "valueExpr": "${hire.equipment}" }, { "label": "Portability rule", "value": "Keep journey semantics in the rich-content document; keep execution in the host." } ] } ] } ] }, { "type": "relatedRecord", "title": "Assigned buddy", "subtitleExpr": "${buddy.name}", "relationLabel": "Buddy", "metaExpr": "${buddy.department}", "ctaLabel": "Open buddy", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.buddy.open", "payloadExpr": "${buddy}" }, "fields": [ { "label": "Welcome track", "valueExpr": "${hire.welcomeTrack}", "hint": "Resolved from the current onboarding plan." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule intro", "variant": "stroked", "action": { "actionId": "onboarding.buddy.scheduleIntro", "payloadExpr": "${hire}" } } ] }, { "type": "ctaGroup", "title": "Journey actions", "subtitle": "Governed onboarding follow-up actions", "message": "Use semantic action clusters instead of host-authored onboarding button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Start checklist", "icon": "checklist", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.checklist.start", "payloadExpr": "${hire}" } }, { "type": "actionButton", "label": "Request equipment", "icon": "inventory_2", "variant": "stroked", "action": { "actionId": "onboarding.equipment.request", "payloadExpr": "${hire}" } } ] }, { "type": "actionCard", "title": "Open onboarding dossier", "subtitleExpr": "${hire.id}", "message": "Use actionCard when the onboarding host needs a governed dossier or coordinator workflow.", "metaExpr": "${hire.role}", "ctaLabel": "Open dossier", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.dossier.open", "payloadExpr": "${hire}" }, "secondaryActions": [ { "type": "actionButton", "label": "Escalate blocker", "variant": "stroked", "action": { "actionId": "onboarding.blocker.escalate", "payloadExpr": "${hire}" } } ] } ] } } } } ] } } }, { "id": "onboarding-manager-follow-up-workbench", "title": "Onboarding - manager follow-up workbench", "summary": "Presents manager follow-up signals, coaching context and onboarding actions as governed runtime content.", "i18n": { "pt": { "title": "Onboarding - follow-up do gestor", "summary": "Apresenta sinais de follow-up do gestor, contexto de coaching e ações governadas de onboarding.", "demonstrates": [ "Explore Onboarding - follow-up do gestor e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/onboarding-manager-follow-up-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta sinais de follow-up do gestor, contexto de coaching e ações governadas de onboarding.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.onboarding-manager-follow-up-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/onboarding-manager-follow-up-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/onboarding-manager-follow-up-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/onboarding-manager-follow-up-workbench", "resourceKey": "operations.onboarding-manager-follow-up-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "manager-follow-up", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Manager follow-up metrics authored as statGroup instead of host manager summary cards", "Selected hire context authored as lookupCard instead of host-authored follow-up wrappers", "Assigned manager context authored as relatedRecord instead of custom relationship markup", "Portable follow-up notes and blockers organized in tabs within the same RichContentDocument", "Governed follow-up actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-manager-follow-up-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "onboarding-journeys", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-follow-up-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding manager follow-up workbench demonstrates a portable rich-content contract, not a backend follow-up endpoint.", "The same onboarding follow-up surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-manager-follow-up-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/onboarding-manager-follow-up-workbench.json", "documentation": { "story": { "pt": "Onboarding - follow-up do gestor parte de uma necessidade operacional concreta: Apresenta sinais de follow-up do gestor, contexto de coaching e ações governadas de onboarding.", "en": "Onboarding - manager follow-up workbench starts from a concrete operational need: Presents manager follow-up signals, coaching context and onboarding actions as governed runtime content." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/onboarding-manager-follow-up-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/onboarding-manager-follow-up-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-manager-follow-up-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-manager-follow-up-workbench.json." } ] }, "envelope": { "id": "onboarding-manager-follow-up-workbench", "title": "Onboarding - manager follow-up workbench", "summary": "Presents manager follow-up signals, coaching context and onboarding actions as governed runtime content.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/onboarding-manager-follow-up-workbench", "resourceKey": "operations.onboarding-manager-follow-up-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "manager-follow-up", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "Manager follow-up metrics authored as statGroup instead of host manager summary cards", "Selected hire context authored as lookupCard instead of host-authored follow-up wrappers", "Assigned manager context authored as relatedRecord instead of custom relationship markup", "Portable follow-up notes and blockers organized in tabs within the same RichContentDocument", "Governed follow-up actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-manager-follow-up-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-follow-up-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding manager follow-up workbench demonstrates a portable rich-content contract, not a backend follow-up endpoint.", "The same onboarding follow-up surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-manager-follow-up-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "onboardingManagerFollowUpWorkbench", "shell": { "kind": "dashboard-card", "icon": "supervisor_account", "title": "Onboarding manager follow-up workbench", "subtitle": "Portable rich-content surface for governed manager follow-up" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "onboarding-manager-follow-up-workbench", "context": { "hire": { "id": "ONB-680", "name": "Bianca Torres", "role": "Product Analyst", "department": "Platform strategy", "focus": "First 30-day goals", "checkIns": "3", "openBlockers": "2", "sentiment": "7.8", "pulse": "Needs role clarity" }, "manager": { "name": "Helena Souza", "department": "Engineering leadership", "lane": "30-day coaching plan" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "supervisor_account", "titleExpr": "${hire.name}", "message": "Use a portable onboarding manager follow-up surface when the host must expose governed coaching and manager follow-up actions without inventing onboarding-specific templates." }, { "type": "statGroup", "title": "Follow-up signals", "subtitle": "Canonical KPI block for onboarding manager follow-up surfaces", "layout": "grid", "items": [ { "label": "Check-ins", "valueExpr": "${hire.checkIns}", "captionExpr": "${hire.id}", "icon": "event_note" }, { "label": "Open blockers", "valueExpr": "${hire.openBlockers}", "caption": "Needs manager action", "icon": "warning" }, { "label": "Sentiment", "valueExpr": "${hire.sentiment}", "captionExpr": "${hire.pulse}", "icon": "sentiment_satisfied" } ] }, { "type": "lookupCard", "title": "Selected hire", "status": "resolved", "subtitleExpr": "${hire.name}", "metaExpr": "${hire.role}", "ctaLabel": "Open hire", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.followup.hire.open", "payloadExpr": "${hire}" }, "fields": [ { "label": "Department", "valueExpr": "${hire.department}" }, { "label": "Current focus", "valueExpr": "${hire.focus}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.followup.dossier.open", "payloadExpr": "${hire}" } } ] }, { "type": "tabs", "title": "Follow-up views", "subtitle": "Portable editorial tabs for manager notes and blockers.", "appearance": "underline", "defaultTabId": "summary", "items": [ { "id": "summary", "label": "Summary", "icon": "dashboard", "content": [ { "type": "text", "text": "Keep manager follow-up notes, pulse observations and enablement actions inside the same RichContentDocument." } ] }, { "id": "blockers", "label": "Blockers", "icon": "warning", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Open blocker", "value": "Role expectations and stakeholder map still need clarification." }, { "label": "Follow-up rule", "value": "Escalate any blocker still unresolved after the second manager follow-up or any sentiment drop below 7." } ] } ] } ] }, { "type": "relatedRecord", "title": "Assigned manager", "subtitleExpr": "${manager.name}", "relationLabel": "Manager", "metaExpr": "${manager.department}", "ctaLabel": "Open manager", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.followup.manager.open", "payloadExpr": "${manager}" }, "fields": [ { "label": "Follow-up lane", "valueExpr": "${manager.lane}", "hint": "Resolved from the follow-up assignment context." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule manager sync", "variant": "stroked", "action": { "actionId": "onboarding.followup.manager.scheduleSync", "payloadExpr": "${hire}" } } ] }, { "type": "ctaGroup", "title": "Follow-up actions", "subtitle": "Governed onboarding follow-up outcomes", "message": "Use semantic follow-up actions instead of host-authored onboarding manager button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm follow-up plan", "icon": "check_circle", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.followup.confirm", "payloadExpr": "${hire}" } }, { "type": "actionButton", "label": "Request coaching update", "icon": "forum", "variant": "stroked", "action": { "actionId": "onboarding.followup.coaching.requestUpdate", "payloadExpr": "${hire}" } } ] }, { "type": "actionCard", "title": "Escalate onboarding risk", "subtitleExpr": "${hire.id}", "message": "Use actionCard when the onboarding host needs a governed escalation flow for unresolved manager follow-up risks.", "metaExpr": "${hire.pulse}", "ctaLabel": "Escalate follow-up risk", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.followup.escalate", "payloadExpr": "${hire}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.followup.dossier.open", "payloadExpr": "${hire}" } } ] } ] } } } } ] } } }, { "id": "onboarding-readiness-workbench", "title": "Onboarding - readiness workbench", "summary": "Presents first-week readiness, manager context and blocker actions as a portable onboarding workspace.", "i18n": { "pt": { "title": "Onboarding - prontidão inicial", "summary": "Apresenta prontidão da primeira semana, contexto do gestor e ações sobre bloqueios em uma superfície portável.", "demonstrates": [ "Explore Onboarding - prontidão inicial e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-rich-content materializa operations/onboarding-readiness-workbench com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Apresenta prontidão da primeira semana, contexto do gestor e ações sobre bloqueios em uma superfície portável.", "Confirme no resultado capacidades da plataforma como praxis-rich-content.document, rich-content.statGroup, rich-content.lookupCard.", "Verifique a conexão com as evidências canônicas praxis-rich-content.metadata.ts e praxis-dynamic-page.onboarding-readiness-workbench.json." ] } }, "publicRoute": "/examples/dynamic-page/onboarding-readiness-workbench", "publicUrl": "https://praxisui.dev/examples/dynamic-page/onboarding-readiness-workbench", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-rich-content", "resourcePath": "operations/onboarding-readiness-workbench", "resourceKey": "operations.onboarding-readiness-workbench", "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "readiness", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "First-week readiness metrics authored as statGroup instead of host progress cards", "Selected hire context authored as lookupCard instead of host-authored readiness wrappers", "Assigned manager context authored as relatedRecord instead of custom relationship markup", "Portable blockers and readiness notes organized in tabs within the same RichContentDocument", "Governed readiness actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-readiness-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "onboarding-journeys", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-readiness-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding readiness workbench demonstrates a portable rich-content contract, not a backend readiness endpoint.", "The same onboarding readiness surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-readiness-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "sourcePath": "docs/examples/dynamic-page/examples/onboarding-readiness-workbench.json", "documentation": { "story": { "pt": "Onboarding - prontidão inicial parte de uma necessidade operacional concreta: Apresenta prontidão da primeira semana, contexto do gestor e ações sobre bloqueios em uma superfície portável.", "en": "Onboarding - readiness workbench starts from a concrete operational need: Presents first-week readiness, manager context and blocker actions as a portable onboarding workspace." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-rich-content transforma o contrato de operations/onboarding-readiness-workbench em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-rich-content turns the operations/onboarding-readiness-workbench contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.document.blocks", "title": { "pt": "Sequência editorial", "en": "Editorial sequence" }, "explanation": { "pt": "Ordena contexto, métricas, detalhes e ações como uma narrativa operacional executável.", "en": "Orders context, metrics, details and actions as an executable operational narrative." } }, { "jsonPath": "definition.inputs.context", "title": { "pt": "Contexto resolvido", "en": "Resolved context" }, "explanation": { "pt": "Fornece valores usados pelas expressões sem incorporá-los de forma rígida ao documento editorial.", "en": "Provides values used by expressions without hard-coding them into the editorial document." } }, { "jsonPath": "definition.inputs.document.blocks[].action", "title": { "pt": "Ações semânticas", "en": "Semantic actions" }, "explanation": { "pt": "Declara a intenção da ação; autorização e execução continuam mediadas pelo host.", "en": "Declares action intent while authorization and execution remain host-mediated." } } ], "experiments": [ { "pt": "Reordene um bloco editorial ou altere sua ênfase e acompanhe a recomposição sem rebuild.", "en": "Reorder an editorial block or change its emphasis and watch the composition update without a rebuild." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-readiness-workbench.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-readiness-workbench.json." } ] }, "envelope": { "id": "onboarding-readiness-workbench", "title": "Onboarding - readiness workbench", "summary": "Presents first-week readiness, manager context and blocker actions as a portable onboarding workspace.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-rich-content", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/rich-content" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "operations/onboarding-readiness-workbench", "resourceKey": "operations.onboarding-readiness-workbench" }, "requires": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "actionButton" ], "tags": [ "onboarding", "readiness", "rich-content", "workbench", "governed-actions", "ai-recipe" ], "demonstrates": [ "First-week readiness metrics authored as statGroup instead of host progress cards", "Selected hire context authored as lookupCard instead of host-authored readiness wrappers", "Assigned manager context authored as relatedRecord instead of custom relationship markup", "Portable blockers and readiness notes organized in tabs within the same RichContentDocument", "Governed readiness actions clustered in ctaGroup and actionCard with host-mediated execution" ], "platformFeatures": [ "praxis-rich-content.document", "rich-content.statGroup", "rich-content.lookupCard", "rich-content.tabs", "rich-content.relatedRecord", "rich-content.ctaGroup", "rich-content.actionCard", "hostCapabilities.runtime-only" ], "backendSurfaces": [ "praxis-ui-angular/projects/praxis-rich-content/src/lib/praxis-rich-content.metadata.ts", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-readiness-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-rich-content-rendered", "onboarding-readiness-actions-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because the onboarding readiness workbench demonstrates a portable rich-content contract, not a backend readiness endpoint.", "The same onboarding readiness surface can be hosted by dynamic pages, dialogs, tabs or page-builder workspaces without reauthoring the semantic document." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.onboarding-readiness-workbench.json", "praxis-ui-angular/projects/praxis-rich-content/README.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "onboardingReadinessWorkbench", "shell": { "kind": "dashboard-card", "icon": "checklist", "title": "Onboarding readiness workbench", "subtitle": "Portable rich-content surface for governed first-week readiness" }, "definition": { "id": "praxis-rich-content", "bindingOrder": [ "document", "context", "layout", "rootClassName" ], "inputs": { "layout": "block", "rootClassName": "onboarding-readiness-workbench", "context": { "hire": { "id": "ONB-512", "name": "Bianca Torres", "role": "Product Analyst", "department": "Platform strategy", "startDate": "Monday", "readiness": "82%", "pendingEquipment": "2", "blocker": "Badge access and laptop delivery", "weekPlan": "Platform immersion" }, "manager": { "name": "Helena Souza", "department": "Engineering leadership" } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "callout", "tone": "info", "icon": "checklist", "titleExpr": "${hire.name}", "message": "Use a portable onboarding readiness surface when the host must expose governed first-week actions without inventing onboarding-specific templates." }, { "type": "statGroup", "title": "Readiness signals", "subtitle": "Canonical KPI block for onboarding readiness surfaces", "layout": "grid", "items": [ { "label": "Checklist", "valueExpr": "${hire.readiness}", "captionExpr": "${hire.id}", "icon": "checklist" }, { "label": "Equipment", "valueExpr": "${hire.pendingEquipment}", "caption": "Pending deliveries", "icon": "laptop_mac" }, { "label": "Start date", "valueExpr": "${hire.startDate}", "captionExpr": "${hire.department}", "icon": "event" } ] }, { "type": "lookupCard", "title": "Selected hire", "status": "resolved", "subtitleExpr": "${hire.name}", "metaExpr": "${hire.role}", "ctaLabel": "Open hire", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.readiness.hire.open", "payloadExpr": "${hire}" }, "fields": [ { "label": "Department", "valueExpr": "${hire.department}" }, { "label": "Start date", "valueExpr": "${hire.startDate}" } ], "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.readiness.dossier.open", "payloadExpr": "${hire}" } } ] }, { "type": "tabs", "title": "Readiness views", "subtitle": "Portable editorial tabs for readiness and blockers.", "appearance": "underline", "defaultTabId": "readiness", "items": [ { "id": "readiness", "label": "Readiness", "icon": "task_alt", "content": [ { "type": "text", "text": "Tabs keep first-week readiness notes, blockers and operational evidence inside the same RichContentDocument." } ] }, { "id": "blockers", "label": "Blockers", "icon": "warning", "content": [ { "type": "keyValueList", "layout": "stacked", "items": [ { "label": "Pending item", "valueExpr": "${hire.blocker}" }, { "label": "Readiness rule", "value": "Escalate any blocker that still exists by day two or blocks manager onboarding milestones." } ] } ] } ] }, { "type": "relatedRecord", "title": "Assigned manager", "subtitleExpr": "${manager.name}", "relationLabel": "Manager", "metaExpr": "${manager.department}", "ctaLabel": "Open manager", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.readiness.manager.open", "payloadExpr": "${manager}" }, "fields": [ { "label": "Week one plan", "valueExpr": "${hire.weekPlan}", "hint": "Resolved from the readiness assignment context." } ], "secondaryActions": [ { "type": "actionButton", "label": "Schedule check-in", "variant": "stroked", "action": { "actionId": "onboarding.readiness.manager.scheduleCheckIn", "payloadExpr": "${hire}" } } ] }, { "type": "ctaGroup", "title": "Readiness actions", "subtitle": "Governed onboarding readiness outcomes", "message": "Use semantic readiness actions instead of host-authored onboarding button bars.", "layout": "split", "actions": [ { "type": "actionButton", "label": "Confirm readiness", "icon": "check_circle", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.readiness.confirm", "payloadExpr": "${hire}" } }, { "type": "actionButton", "label": "Request equipment follow-up", "icon": "inventory", "variant": "stroked", "action": { "actionId": "onboarding.readiness.equipment.followUp", "payloadExpr": "${hire}" } } ] }, { "type": "actionCard", "title": "Escalate onboarding blocker", "subtitleExpr": "${hire.id}", "message": "Use actionCard when the onboarding host needs a governed blocker escalation flow.", "metaExpr": "${hire.blocker}", "ctaLabel": "Escalate blocker", "variant": "raised", "color": "primary", "action": { "actionId": "onboarding.readiness.blocker.escalate", "payloadExpr": "${hire}" }, "secondaryActions": [ { "type": "actionButton", "label": "Open dossier", "variant": "stroked", "action": { "actionId": "onboarding.readiness.dossier.open", "payloadExpr": "${hire}" } } ] } ] } } } } ] } } }, { "id": "employee-operations-casework", "title": "Central de operações de pessoas", "summary": "Reúne carteira de funcionários, atualizações de vínculo e um dossiê completo com folha, carreira, dependentes, missões e equipamentos.", "i18n": { "pt": { "title": "Central de operações de pessoas", "summary": "Reúne carteira de funcionários, atualizações de vínculo e um dossiê completo com folha, carreira, dependentes, missões e equipamentos.", "demonstrates": [ "Tabela corporativa com avatar, status, chips, badges, valores, filtros rápidos e avançados, atalhos salvos, exportação e ações por linha", "Cadastro, consulta e edição em gavetas laterais, sem interromper o contexto da carteira", "Inativação e reativação com motivo, vigência, validação e disponibilidade definida pelo backend", "Uma seleção atualiza o dossiê e sete conjuntos de dados relacionados sem lógica de negócio duplicada na aplicação", "O inspetor compara o plano semântico de autoria com o JSON executável já expandido pelo compilador", "Cinco abas carregadas sob demanda preservam o contexto e mantêm a jornada responsiva", "Folha, competências, carreira, dependentes, endereço, missões e equipamentos conectados à mesma pessoa selecionada" ], "promptSuggestions": [ "Como o contrato JSON conecta a pessoa selecionada ao dossiê em abas?", "Quais regras o backend aplica ao inativar ou reativar um vínculo?", "Como os formulários preservam o contexto sem duplicar regras na interface?", "Qual é a diferença entre o plano de autoria e o JSON executável da página?" ] }, "en": { "title": "People operations workspace", "summary": "Brings together the employee portfolio, employment updates, and a complete dossier covering payroll, career, dependents, missions, and equipment." } }, "publicRoute": "/examples/dynamic-page/employee-operations-casework", "publicUrl": "https://praxisui.dev/examples/dynamic-page/employee-operations-casework", "category": "page", "mode": "remote-metadata-driven", "primaryComponent": "praxis-crud", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios", "requires": [ "schemas.filtered", "filter", "surfaces", "actions", "capabilities", "resource.identity", "surface.relatedResource", "praxis-related-resource-outlet", "composition.links", "component-port.nestedPath", "remote-data" ], "tags": [ "human-resources", "enterprise", "casework", "crud", "drawer", "workflow-actions", "master-detail", "tabs", "related-resource", "quickstart" ], "demonstrates": [ "Rich employee table with avatar, status, chips, badges, currency, quick and advanced filters and row actions", "Saved filter shortcuts, visible-column export and density/column controls governed by the table contract", "Create, view and edit forms opened in drawers from canonical CRUD surface discovery", "Deactivate and reactivate forms materialized from backend workflow action request schemas", "Stable idempotency keys per action form attempt, allowing safe replay after network timeouts", "One employee selection driving a dossier form and seven related collections through composition.links", "A public inspector comparing the semantic authoring plan with the compiler-expanded executable JSON", "Five lazy tabs preserving context while controlling initial cost on a dense corporate journey", "Payroll, skills, career, dependents, address, missions and equipment custody resolved from surface.relatedResource", "Backend availability remaining authoritative even when JSON Logic hides irrelevant row affordances" ], "promptSuggestions": [ "Show how the JSON connects table selection to the nested dossier tabs", "Where does the backend govern deactivate and reactivate forms?", "Compare CRUD drawers with workflow action forms" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "remote-filter", "schema-driven-form", "crud.drawer", "workflow-action.discovery", "workflow-action.idempotency", "resource-action-open-adapter", "table.rich-renderers", "table.quick-filters", "table.advanced-filters", "table.saved-filter-shortcuts", "table.export", "table.columns-visibility", "table.density-toggle", "tabs.lazy-nested-widgets", "surface.relatedResource", "resource.identity", "praxis-related-resource-outlet", "composition.links", "authoring.ui-composition-plan", "component-port.nestedPath", "state.values" ], "backendSurfaces": [ "GET /schemas/filtered", "GET /schemas/surfaces?resource=human-resources.funcionarios", "GET /schemas/actions?resource=human-resources.funcionarios", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/{id}", "GET /api/human-resources/funcionarios/{id}/surfaces", "GET /api/human-resources/funcionarios/{id}/actions", "GET /api/human-resources/funcionarios/{id}/capabilities", "POST /api/human-resources/funcionarios/{id}/actions/deactivate", "POST /api/human-resources/funcionarios/{id}/actions/reactivate", "GET /api/human-resources/funcionarios/{id}/payroll-history", "GET /api/human-resources/funcionarios/{id}/skills", "GET /api/human-resources/funcionarios/{id}/career-history", "GET /api/human-resources/funcionarios/{id}/dependents", "GET /api/human-resources/funcionarios/{id}/address", "GET /api/human-resources/funcionarios/{id}/mission-participations", "GET /api/human-resources/funcionarios/{id}/equipment-custody" ], "complexity": "advanced", "catalogRole": "composition", "learningStage": "enterprise", "variantFamilyId": "employee-workspace-compositions", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-crud-rendered", "rich-columns-rendered", "advanced-filter-modal-opens", "praxis-tabs-rendered", "nested-selection-propagates", "inspector-base-contract-visible" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-surfaces-human-resources-funcionarios", "funcionarios-filter-basic", "funcionarios-get-by-id", "missao-participantes-stats-papel", "equipamento-alocacoes-filter-status-danificado", "employee-state-snapshot-actions", "employee-equipment-custody-surface", "employee-payroll-history-related-resource" ], "pendingHttpIds": [], "notes": [ "Reference API: https://praxis-api-quickstart.onrender.com", "The published Quickstart resolves deactivate/reactivate availability from persisted employee state; the read-only action snapshot is confirmed for employee 194.", "The published equipment-custody relatedResource surface is confirmed for employee 194; an empty collection remains a valid governed custody state.", "The published payroll-history relatedResource surface is confirmed for employee 194 and returns governed nominal payroll rows.", "Recommended example: the public Quickstart evidence and the declared browser checks were verified together on 2026-08-02.", "The JSON tab remains the complete governing contract; the host only provides runtime services and drawer/surface bridges.", "Salary and employee identity are sensitive; production hosts must enforce backend authorization, field access, masking and audit." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-operations-casework.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-operations-casework.ui-composition-plan.artifact.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-operations-casework.page.json", "praxis-ui-angular/examples/ai-recipes/praxis-related-resource-outlet.json", "praxis-ui-angular/examples/ai-recipes/praxis-crud.json" ], "sourcePath": "docs/examples/dynamic-page/examples/employee-operations-casework.json", "documentation": { "story": { "pt": "Central de operações de pessoas parte de uma necessidade operacional concreta: Reúne carteira de funcionários, atualizações de vínculo e um dossiê completo com folha, carreira, dependentes, missões e equipamentos.", "en": "Central de operações de pessoas starts from a concrete operational need: Reúne carteira de funcionários, atualizações de vínculo e um dossiê completo com folha, carreira, dependentes, missões e equipamentos." }, "outcome": { "pt": "Ao abrir o exemplo, acompanhe como praxis-crud transforma o contrato de human-resources/funcionarios em um resultado navegável no runtime.", "en": "When you open the example, follow how praxis-crud turns the human-resources/funcionarios contract into a navigable runtime result." }, "componentRoles": [ { "component": "praxis-crud", "jsonPath": "page.widgets[].definition", "role": { "pt": "Coordena consulta, criação, edição e exclusão sobre um recurso.", "en": "Coordinates browse, create, edit and delete operations for a resource." }, "rationale": { "pt": "Reúne operações governadas em uma superfície consistente sem duplicar shells de manutenção.", "en": "Brings governed operations into one consistent surface without duplicating maintenance shells." } }, { "component": "praxis-related-resource-outlet", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Materializa uma capacidade registrada dentro do documento Dynamic Page.", "en": "Materializes a registered capability inside the Dynamic Page document." }, "rationale": { "pt": "Reutiliza o contrato oficial do componente em vez de introduzir uma implementação exclusiva na rota.", "en": "Reuses the component official contract instead of introducing a route-specific implementation." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.resource", "title": { "pt": "Identidade do recurso", "en": "Resource identity" }, "explanation": { "pt": "Mantém consulta e mutações ligadas ao mesmo recurso e às suas capacidades publicadas.", "en": "Keeps browse and mutations tied to the same resource and its published capabilities." } }, { "jsonPath": "definition.inputs.config.openModes", "title": { "pt": "Modos de abertura", "en": "Open modes" }, "explanation": { "pt": "Define onde criação, detalhe e edição aparecem sem codificar shells diferentes para cada ação.", "en": "Defines where create, detail and edit appear without coding different shells for every action." } }, { "jsonPath": "definition.inputs.config.actions", "title": { "pt": "Operações disponíveis", "en": "Available operations" }, "explanation": { "pt": "Projeta somente ações compatíveis com o contrato e com a mediação do host.", "en": "Projects only actions compatible with the contract and host mediation." } } ], "experiments": [ { "pt": "Desabilite uma operação ou altere seu modo de abertura e observe a adaptação da superfície.", "en": "Disable an operation or change its open mode and observe how the surface adapts." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Os dados e as capacidades continuam pertencendo à API; o documento apenas materializa a experiência publicada.", "en": "Data and capabilities remain owned by the API; the document only materializes the published experience." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-operations-casework.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-operations-casework.json." } ] }, "envelope": { "id": "employee-operations-casework", "title": "Central de operações de pessoas", "summary": "Reúne carteira de funcionários, atualizações de vínculo e um dossiê completo com folha, carreira, dependentes, missões e equipamentos.", "i18n": { "pt": { "title": "Central de operações de pessoas", "summary": "Reúne carteira de funcionários, atualizações de vínculo e um dossiê completo com folha, carreira, dependentes, missões e equipamentos.", "demonstrates": [ "Tabela corporativa com avatar, status, chips, badges, valores, filtros rápidos e avançados, atalhos salvos, exportação e ações por linha", "Cadastro, consulta e edição em gavetas laterais, sem interromper o contexto da carteira", "Inativação e reativação com motivo, vigência, validação e disponibilidade definida pelo backend", "Uma seleção atualiza o dossiê e sete conjuntos de dados relacionados sem lógica de negócio duplicada na aplicação", "O inspetor compara o plano semântico de autoria com o JSON executável já expandido pelo compilador", "Cinco abas carregadas sob demanda preservam o contexto e mantêm a jornada responsiva", "Folha, competências, carreira, dependentes, endereço, missões e equipamentos conectados à mesma pessoa selecionada" ], "promptSuggestions": [ "Como o contrato JSON conecta a pessoa selecionada ao dossiê em abas?", "Quais regras o backend aplica ao inativar ou reativar um vínculo?", "Como os formulários preservam o contexto sem duplicar regras na interface?", "Qual é a diferença entre o plano de autoria e o JSON executável da página?" ] }, "en": { "title": "People operations workspace", "summary": "Brings together the employee portfolio, employment updates, and a complete dossier covering payroll, career, dependents, missions, and equipment." } }, "component": "praxis-dynamic-page", "category": "page", "primaryComponent": "praxis-crud", "runtime": { "mode": "remote-metadata-driven", "minPraxisUiPackage": "@praxisui/core" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/funcionarios", "resourceKey": "human-resources.funcionarios" }, "requires": [ "schemas.filtered", "filter", "surfaces", "actions", "capabilities", "resource.identity", "surface.relatedResource", "praxis-related-resource-outlet", "composition.links", "component-port.nestedPath", "remote-data" ], "tags": [ "human-resources", "enterprise", "casework", "crud", "drawer", "workflow-actions", "master-detail", "tabs", "related-resource", "quickstart" ], "demonstrates": [ "Rich employee table with avatar, status, chips, badges, currency, quick and advanced filters and row actions", "Saved filter shortcuts, visible-column export and density/column controls governed by the table contract", "Create, view and edit forms opened in drawers from canonical CRUD surface discovery", "Deactivate and reactivate forms materialized from backend workflow action request schemas", "Stable idempotency keys per action form attempt, allowing safe replay after network timeouts", "One employee selection driving a dossier form and seven related collections through composition.links", "A public inspector comparing the semantic authoring plan with the compiler-expanded executable JSON", "Five lazy tabs preserving context while controlling initial cost on a dense corporate journey", "Payroll, skills, career, dependents, address, missions and equipment custody resolved from surface.relatedResource", "Backend availability remaining authoritative even when JSON Logic hides irrelevant row affordances" ], "promptSuggestions": [ "Show how the JSON connects table selection to the nested dossier tabs", "Where does the backend govern deactivate and reactivate forms?", "Compare CRUD drawers with workflow action forms" ], "platformFeatures": [ "dynamic-widget-resolution", "host-api-wiring", "remote-filter", "schema-driven-form", "crud.drawer", "workflow-action.discovery", "workflow-action.idempotency", "resource-action-open-adapter", "table.rich-renderers", "table.quick-filters", "table.advanced-filters", "table.saved-filter-shortcuts", "table.export", "table.columns-visibility", "table.density-toggle", "tabs.lazy-nested-widgets", "surface.relatedResource", "resource.identity", "praxis-related-resource-outlet", "composition.links", "authoring.ui-composition-plan", "component-port.nestedPath", "state.values" ], "backendSurfaces": [ "GET /schemas/filtered", "GET /schemas/surfaces?resource=human-resources.funcionarios", "GET /schemas/actions?resource=human-resources.funcionarios", "POST /api/human-resources/funcionarios/filter", "GET /api/human-resources/funcionarios/{id}", "GET /api/human-resources/funcionarios/{id}/surfaces", "GET /api/human-resources/funcionarios/{id}/actions", "GET /api/human-resources/funcionarios/{id}/capabilities", "POST /api/human-resources/funcionarios/{id}/actions/deactivate", "POST /api/human-resources/funcionarios/{id}/actions/reactivate", "GET /api/human-resources/funcionarios/{id}/payroll-history", "GET /api/human-resources/funcionarios/{id}/skills", "GET /api/human-resources/funcionarios/{id}/career-history", "GET /api/human-resources/funcionarios/{id}/dependents", "GET /api/human-resources/funcionarios/{id}/address", "GET /api/human-resources/funcionarios/{id}/mission-participations", "GET /api/human-resources/funcionarios/{id}/equipment-custody" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-crud-rendered", "rich-columns-rendered", "advanced-filter-modal-opens", "praxis-tabs-rendered", "nested-selection-propagates", "inspector-base-contract-visible" ] }, "operationalEvidence": { "recommendedHttpIds": [ "schemas-surfaces-human-resources-funcionarios", "funcionarios-filter-basic", "funcionarios-get-by-id", "missao-participantes-stats-papel", "equipamento-alocacoes-filter-status-danificado", "employee-state-snapshot-actions", "employee-equipment-custody-surface", "employee-payroll-history-related-resource" ], "pendingHttpIds": [], "notes": [ "Reference API: https://praxis-api-quickstart.onrender.com", "The published Quickstart resolves deactivate/reactivate availability from persisted employee state; the read-only action snapshot is confirmed for employee 194.", "The published equipment-custody relatedResource surface is confirmed for employee 194; an empty collection remains a valid governed custody state.", "The published payroll-history relatedResource surface is confirmed for employee 194 and returns governed nominal payroll rows.", "Recommended example: the public Quickstart evidence and the declared browser checks were verified together on 2026-08-02.", "The JSON tab remains the complete governing contract; the host only provides runtime services and drawer/surface bridges.", "Salary and employee identity are sensitive; production hosts must enforce backend authorization, field access, masking and audit." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-operations-casework.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-operations-casework.ui-composition-plan.artifact.json", "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.employee-operations-casework.page.json", "praxis-ui-angular/examples/ai-recipes/praxis-related-resource-outlet.json", "praxis-ui-angular/examples/ai-recipes/praxis-crud.json" ], "page": { "i18n": { "fallbackLocale": "pt-BR", "dictionaries": { "pt-BR": { "employeeOperations.portfolio.shell.title": "Gestão de pessoas", "employeeOperations.portfolio.shell.subtitle": "Encontre funcionários, atualize vínculos e consulte o dossiê sem sair da carteira", "employeeOperations.portfolio.resource.title": "Funcionários", "employeeOperations.portfolio.resource.formTitle": "Cadastro do funcionário", "employeeOperations.portfolio.toolbar.title": "Carteira de funcionários", "employeeOperations.portfolio.toolbar.subtitle": "Dados cadastrais, área, vínculo e remuneração em uma única visão", "employeeOperations.portfolio.search.placeholder": "Buscar por nome, e-mail, cargo ou departamento", "employeeOperations.portfolio.quickFilter.active": "Ativos", "employeeOperations.portfolio.quickFilter.inactive": "Inativos", "employeeOperations.portfolio.column.person": "Pessoa", "employeeOperations.portfolio.column.employee": "Funcionário", "employeeOperations.portfolio.column.employment": "Vínculo", "employeeOperations.portfolio.column.role": "Cargo", "employeeOperations.portfolio.column.department": "Departamento", "employeeOperations.portfolio.column.hiredAt": "Admissão", "employeeOperations.portfolio.column.salary": "Salário base", "employeeOperations.portfolio.column.contact": "Contato", "employeeOperations.portfolio.status.active": "Ativo", "employeeOperations.portfolio.status.inactive": "Inativo", "employeeOperations.portfolio.actions.header": "Ações", "employeeOperations.portfolio.actions.tooltip": "Visualizar, editar ou atualizar o vínculo", "employeeOperations.portfolio.action.view": "Visualizar", "employeeOperations.portfolio.action.view.tooltip": "Ver dados do funcionário", "employeeOperations.portfolio.action.edit": "Editar", "employeeOperations.portfolio.action.edit.tooltip": "Editar dados do funcionário", "employeeOperations.portfolio.action.deactivate": "Inativar", "employeeOperations.portfolio.action.deactivate.tooltip": "Inativar vínculo e registrar motivo e vigência", "employeeOperations.portfolio.action.reactivate": "Reativar", "employeeOperations.portfolio.action.reactivate.tooltip": "Reativar vínculo e registrar motivo e vigência", "employeeOperations.dossier.shell.title": "Dossiê do funcionário", "employeeOperations.dossier.shell.subtitle": "Selecione uma pessoa para consultar dados, folha, carreira e atividades relacionadas", "employeeOperations.dossier.ariaLabel": "Perspectivas do dossiê operacional do funcionário", "employeeOperations.dossier.tab.summary": "Dossiê", "employeeOperations.dossier.tab.payroll": "Folha", "employeeOperations.dossier.tab.career": "Carreira", "employeeOperations.dossier.tab.people": "Pessoas", "employeeOperations.dossier.tab.operations": "Operação", "employeeOperations.dossier.context.meta": "Contexto ativo do dossiê", "employeeOperations.dossier.context.employeeId": "ID do funcionário", "employeeOperations.dossier.callout.title": "Comece por aqui", "employeeOperations.dossier.callout.message": "Selecione uma pessoa na carteira para atualizar todo o dossiê. Use as ações da linha para visualizar, editar, inativar ou reativar o vínculo.", "employeeOperations.payroll.title": "Histórico analítico de folha", "employeeOperations.payroll.subtitle": "Competência, composição e eventos do funcionário selecionado", "employeeOperations.column.period": "Competência", "employeeOperations.column.gross": "Bruto", "employeeOperations.column.discounts": "Descontos", "employeeOperations.column.net": "Líquido", "employeeOperations.column.events": "Eventos", "employeeOperations.column.composition": "Composição", "employeeOperations.skills.title": "Matriz de competências", "employeeOperations.column.skill": "Competência", "employeeOperations.column.proficiency": "Proficiência", "employeeOperations.column.origin": "Origem", "employeeOperations.career.title": "Histórico de cargos", "employeeOperations.column.start": "Início", "employeeOperations.column.end": "Fim", "employeeOperations.column.context": "Contexto", "employeeOperations.dependents.title": "Dependentes e elegibilidade", "employeeOperations.column.dependent": "Dependente", "employeeOperations.column.relationship": "Parentesco", "employeeOperations.column.birthDate": "Nascimento", "employeeOperations.address.title": "Endereço cadastral", "employeeOperations.column.street": "Logradouro", "employeeOperations.column.number": "Número", "employeeOperations.column.city": "Cidade", "employeeOperations.missions.title": "Participações em missões", "employeeOperations.column.mission": "Missão", "employeeOperations.column.assignment": "Papel", "employeeOperations.column.leadership": "Liderança", "employeeOperations.column.result": "Resultado", "employeeOperations.equipment.title": "Equipamentos sob custódia", "employeeOperations.column.equipment": "Equipamento", "employeeOperations.column.status": "Status", "employeeOperations.column.custodyStart": "Início da custódia", "employeeOperations.column.custodyEnd": "Encerramento" }, "en-US": { "employeeOperations.portfolio.shell.title": "People operations", "employeeOperations.portfolio.shell.subtitle": "Find employees, update employment records, and review the dossier without leaving the portfolio", "employeeOperations.portfolio.resource.title": "Employees", "employeeOperations.portfolio.resource.formTitle": "Employee record", "employeeOperations.portfolio.toolbar.title": "Employee portfolio", "employeeOperations.portfolio.toolbar.subtitle": "Profile, department, employment, and compensation data in one view", "employeeOperations.portfolio.search.placeholder": "Search by name, email, role, or department", "employeeOperations.portfolio.quickFilter.active": "Active", "employeeOperations.portfolio.quickFilter.inactive": "Inactive", "employeeOperations.portfolio.column.person": "Person", "employeeOperations.portfolio.column.employee": "Employee", "employeeOperations.portfolio.column.employment": "Employment", "employeeOperations.portfolio.column.role": "Role", "employeeOperations.portfolio.column.department": "Department", "employeeOperations.portfolio.column.hiredAt": "Hire date", "employeeOperations.portfolio.column.salary": "Base salary", "employeeOperations.portfolio.column.contact": "Contact", "employeeOperations.portfolio.status.active": "Active", "employeeOperations.portfolio.status.inactive": "Inactive", "employeeOperations.portfolio.actions.header": "Actions", "employeeOperations.portfolio.actions.tooltip": "View, edit, or update the employment record", "employeeOperations.portfolio.action.view": "View", "employeeOperations.portfolio.action.view.tooltip": "View employee details", "employeeOperations.portfolio.action.edit": "Edit", "employeeOperations.portfolio.action.edit.tooltip": "Edit employee details", "employeeOperations.portfolio.action.deactivate": "Deactivate", "employeeOperations.portfolio.action.deactivate.tooltip": "Deactivate the employment record and provide reason and effective date", "employeeOperations.portfolio.action.reactivate": "Reactivate", "employeeOperations.portfolio.action.reactivate.tooltip": "Reactivate the employment record and provide reason and effective date", "employeeOperations.dossier.shell.title": "Employee dossier", "employeeOperations.dossier.shell.subtitle": "Select a person to review profile, payroll, career, and related activities", "employeeOperations.dossier.ariaLabel": "Operational employee dossier perspectives", "employeeOperations.dossier.tab.summary": "Dossier", "employeeOperations.dossier.tab.payroll": "Payroll", "employeeOperations.dossier.tab.career": "Career", "employeeOperations.dossier.tab.people": "People", "employeeOperations.dossier.tab.operations": "Operations", "employeeOperations.dossier.context.meta": "Active dossier context", "employeeOperations.dossier.context.employeeId": "Employee ID", "employeeOperations.dossier.callout.title": "Start here", "employeeOperations.dossier.callout.message": "Select a person in the portfolio to update the entire dossier. Use the row actions to view, edit, deactivate, or reactivate the employment record.", "employeeOperations.payroll.title": "Payroll history", "employeeOperations.payroll.subtitle": "Period, composition, and events for the selected employee", "employeeOperations.column.period": "Period", "employeeOperations.column.gross": "Gross", "employeeOperations.column.discounts": "Deductions", "employeeOperations.column.net": "Net", "employeeOperations.column.events": "Events", "employeeOperations.column.composition": "Composition", "employeeOperations.skills.title": "Skills matrix", "employeeOperations.column.skill": "Skill", "employeeOperations.column.proficiency": "Proficiency", "employeeOperations.column.origin": "Source", "employeeOperations.career.title": "Role history", "employeeOperations.column.start": "Start", "employeeOperations.column.end": "End", "employeeOperations.column.context": "Context", "employeeOperations.dependents.title": "Dependents and eligibility", "employeeOperations.column.dependent": "Dependent", "employeeOperations.column.relationship": "Relationship", "employeeOperations.column.birthDate": "Birth date", "employeeOperations.address.title": "Registered address", "employeeOperations.column.street": "Street", "employeeOperations.column.number": "Number", "employeeOperations.column.city": "City", "employeeOperations.missions.title": "Mission assignments", "employeeOperations.column.mission": "Mission", "employeeOperations.column.assignment": "Assignment", "employeeOperations.column.leadership": "Leadership", "employeeOperations.column.result": "Result", "employeeOperations.equipment.title": "Equipment in custody", "employeeOperations.column.equipment": "Equipment", "employeeOperations.column.status": "Status", "employeeOperations.column.custodyStart": "Custody started", "employeeOperations.column.custodyEnd": "Closed" } } }, "layout": { "orientation": "columns", "columns": 1, "gap": "20px" }, "state": { "values": {}, "schema": { "selection": { "persist": false, "mergeStrategy": "replace", "description": "Operational employee selection remains runtime-only and is never persisted with the authored page.", "tags": [ "runtime-context", "employee-selection" ], "initial": null } } }, "widgets": [ { "key": "employeePortfolio", "shell": { "kind": "dashboard-card", "icon": "groups", "title": { "key": "employeeOperations.portfolio.shell.title", "text": "Gestão de pessoas" }, "subtitle": { "key": "employeeOperations.portfolio.shell.subtitle", "text": "Encontre funcionários, atualize vínculos e consulte o dossiê sem sair da carteira" }, "windowActions": { "collapsible": false, "fullscreen": true } }, "definition": { "id": "praxis-crud", "bindingOrder": [ "crudId", "componentInstanceId", "tableConfigPersistenceStrategy", "metadata" ], "inputs": { "crudId": "employee-operations-casework", "componentInstanceId": "employee-operations-casework", "tableConfigPersistenceStrategy": "volatile", "metadata": { "component": "praxis-crud", "resource": { "path": "human-resources/funcionarios", "idField": "id", "endpointKey": "human-resources.funcionarios", "title": { "key": "employeeOperations.portfolio.resource.title", "text": "Funcionários" }, "formTitle": { "key": "employeeOperations.portfolio.resource.formTitle", "text": "Cadastro do funcionário" } }, "form": { "actions": { "placement": "afterSections", "sticky": true } }, "table": { "ai": { "assistant": { "enabled": false } }, "toolbar": { "visible": true, "title": { "key": "employeeOperations.portfolio.toolbar.title", "text": "Carteira de funcionários" }, "subtitle": { "key": "employeeOperations.portfolio.toolbar.subtitle", "text": "Dados cadastrais, área, vínculo e remuneração em uma única visão" }, "search": { "enabled": true, "placeholder": { "key": "employeeOperations.portfolio.search.placeholder", "text": "Buscar por nome, e-mail, cargo ou departamento" } }, "filters": { "enabled": true, "showAdvancedButton": true, "quickFilters": [ { "id": "active-employees", "label": { "key": "employeeOperations.portfolio.quickFilter.active", "text": "Ativos" }, "icon": "check_circle", "filter": { "ativo": true } }, { "id": "inactive-employees", "label": { "key": "employeeOperations.portfolio.quickFilter.inactive", "text": "Inativos" }, "icon": "block", "filter": { "ativo": false } } ] }, "columnsVisibility": { "enabled": true }, "densityToggle": { "enabled": true } }, "columns": [ { "field": "avatarUrl", "header": { "key": "employeeOperations.portfolio.column.person", "text": "Pessoa" }, "type": "string", "width": "64px", "renderer": { "type": "avatar", "avatar": { "srcField": "avatarUrl", "altField": "nomeCompleto", "initialsField": "nomeCompleto", "shape": "circle", "size": 36 } } }, { "field": "nomeCompleto", "header": { "key": "employeeOperations.portfolio.column.employee", "text": "Funcionário" }, "type": "string", "width": "180px", "sticky": "start" }, { "field": "ativo", "header": { "key": "employeeOperations.portfolio.column.employment", "text": "Vínculo" }, "type": "boolean", "format": "active-inactive", "width": "104px", "align": "center", "conditionalRenderers": [ { "condition": { "==": [ { "var": "ativo" }, true ] }, "renderer": { "type": "badge", "badge": { "text": { "key": "employeeOperations.portfolio.status.active", "text": "Ativo" }, "color": "success", "variant": "filled", "icon": "check_circle" } } }, { "condition": { "==": [ { "var": "ativo" }, false ] }, "renderer": { "type": "badge", "badge": { "text": { "key": "employeeOperations.portfolio.status.inactive", "text": "Inativo" }, "color": "warn", "variant": "outlined", "icon": "block" } } } ] }, { "field": "cargoNome", "header": { "key": "employeeOperations.portfolio.column.role", "text": "Cargo" }, "type": "string", "width": "190px", "renderer": { "type": "chip", "chip": { "textField": "cargoNome", "variant": "outlined", "color": "primary" } } }, { "field": "departamentoNome", "header": { "key": "employeeOperations.portfolio.column.department", "text": "Departamento" }, "type": "string", "width": "244px", "renderer": { "type": "badge", "badge": { "textField": "departamentoNome", "variant": "soft", "color": "accent" } } }, { "field": "dataAdmissao", "header": { "key": "employeeOperations.portfolio.column.hiredAt", "text": "Admissão" }, "type": "date", "format": "dd/MM/yyyy", "width": "132px" }, { "field": "salario", "header": { "key": "employeeOperations.portfolio.column.salary", "text": "Salário base" }, "type": "currency", "format": "BRL|symbol|2", "align": "end", "width": "150px" }, { "field": "email", "header": { "key": "employeeOperations.portfolio.column.contact", "text": "Contato" }, "type": "string", "width": "240px" } ], "behavior": { "pagination": { "enabled": true, "strategy": "server", "pageSize": 8, "pageSizeOptions": [ 8, 16, 32 ], "position": "bottom" }, "sorting": { "enabled": true, "strategy": "server", "defaultSort": { "column": "id", "direction": "asc" } }, "filtering": { "enabled": true, "strategy": "server", "debounceTime": 300, "advancedFilters": { "enabled": true, "settings": { "alwaysVisibleFields": [ "departamentoIdsIn", "dataAdmissaoRange", "salarioBetween" ], "allowSaveTags": true, "tags": [ { "id": "executive-pay-band", "label": "Faixa executiva", "patch": { "salarioBetween": [ 39000, 40000 ] } } ], "advancedOpenMode": "modal", "advancedClearButtonsEnabled": true, "changeDebounceMs": 300 } } }, "selection": { "enabled": true, "type": "single", "mode": "row", "persistSelection": false }, "density": "compact" }, "actions": { "row": { "enabled": true, "display": "icons", "position": "end", "sticky": "end", "header": { "label": { "key": "employeeOperations.portfolio.actions.header", "text": "Ações" }, "icon": "bolt", "tooltip": { "key": "employeeOperations.portfolio.actions.tooltip", "text": "Visualizar, editar ou atualizar o vínculo" } }, "behavior": { "enabled": true, "maxInline": { "xs": 0, "sm": 1, "md": 2, "lg": 1 }, "autoStrategy": "breakpoints" }, "actions": [ { "id": "view", "label": { "key": "employeeOperations.portfolio.action.view", "text": "Visualizar" }, "icon": "visibility", "action": "view", "tooltip": { "key": "employeeOperations.portfolio.action.view.tooltip", "text": "Ver dados do funcionário" } }, { "id": "edit", "label": { "key": "employeeOperations.portfolio.action.edit", "text": "Editar" }, "icon": "edit", "action": "edit", "tooltip": { "key": "employeeOperations.portfolio.action.edit.tooltip", "text": "Editar dados do funcionário" } }, { "id": "deactivate", "label": { "key": "employeeOperations.portfolio.action.deactivate", "text": "Inativar" }, "icon": "person_off", "color": "warn", "action": "deactivate", "tooltip": { "key": "employeeOperations.portfolio.action.deactivate.tooltip", "text": "Inativar vínculo e registrar motivo e vigência" }, "visibleWhen": { "==": [ { "var": "ativo" }, true ] } }, { "id": "reactivate", "label": { "key": "employeeOperations.portfolio.action.reactivate", "text": "Reativar" }, "icon": "person_add", "color": "primary", "action": "reactivate", "tooltip": { "key": "employeeOperations.portfolio.action.reactivate.tooltip", "text": "Reativar vínculo e registrar motivo e vigência" }, "visibleWhen": { "==": [ { "var": "ativo" }, false ] } } ] } }, "appearance": { "density": "compact", "stickyHeader": true, "stripedRows": false, "hoverHighlight": true, "responsive": { "breakpoints": { "mobile": 640 }, "mobile": { "horizontalScroll": false, "cardMode": true, "priorityColumns": [ "nomeCompleto", "ativo", "cargoNome" ] } } }, "export": { "enabled": true, "formats": [ "csv", "excel" ], "general": { "includeHeaders": true, "respectFilters": true, "applyFormatting": true, "defaultFileName": "carteira-funcionarios", "includeColumns": "visible", "scope": "currentPage", "maxRows": 500 }, "excel": { "sheetName": "Funcionários", "autoFitColumns": true, "freezeHeaders": true } } }, "defaults": { "openMode": "drawer" }, "actions": [ { "action": "create", "openMode": "drawer" }, { "action": "view", "openMode": "drawer" }, { "action": "edit", "openMode": "drawer" } ] } }, "outputs": { "rowClick": "emit", "rowAction": "emit", "selectionChange": "emit", "afterSave": "emit", "afterDelete": "emit" } } }, { "key": "employeeCaseTabs", "shell": { "kind": "dashboard-card", "icon": "folder_shared", "title": { "key": "employeeOperations.dossier.shell.title", "text": "Dossiê do funcionário" }, "subtitle": { "key": "employeeOperations.dossier.shell.subtitle", "text": "Selecione uma pessoa para consultar dados, folha, carreira e atividades relacionadas" }, "windowActions": { "collapsible": false, "fullscreen": true } }, "definition": { "id": "praxis-tabs", "bindingOrder": [ "tabsId", "componentInstanceId", "configPersistenceStrategy", "config", "selectedIndex" ], "inputs": { "tabsId": "employee-dossier-tabs", "componentInstanceId": "employee-dossier-tabs", "configPersistenceStrategy": "input-first", "selectedIndex": 0, "config": { "appearance": { "density": "comfortable" }, "group": { "dynamicHeight": true, "fitInkBarToContent": true, "stretchTabs": false, "ariaLabel": { "key": "employeeOperations.dossier.ariaLabel", "text": "Perspectivas do dossiê operacional do funcionário" } }, "behavior": { "lazyLoad": true, "reorderable": false, "closeable": false }, "tabs": [ { "id": "dossier", "textLabel": { "key": "employeeOperations.dossier.tab.summary", "text": "Dossiê" }, "icon": "badge", "widgets": [ { "id": "praxis-rich-content", "childWidgetKey": "employee-dossier-context", "bindingOrder": [ "document", "context", "layout" ], "inputs": { "layout": "block", "context": { "selection": { "employee": null } }, "document": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "lookupResult", "titleExpr": "${selection.employee.nomeCompleto}", "subtitleExpr": "${selection.employee.cargoNome}", "status": "resolved", "meta": { "key": "employeeOperations.dossier.context.meta", "text": "Contexto ativo do dossiê" }, "fields": [ { "label": { "key": "employeeOperations.portfolio.column.department", "text": "Departamento" }, "valueExpr": "${selection.employee.departamentoNome}" }, { "label": { "key": "employeeOperations.dossier.context.employeeId", "text": "ID do funcionário" }, "valueExpr": "${selection.employee.id}" } ] }, { "type": "callout", "visibleWhen": { "==": [ { "var": "selection.employee" }, null ] }, "tone": "info", "icon": "touch_app", "title": { "key": "employeeOperations.dossier.callout.title", "text": "Comece por aqui" }, "message": { "key": "employeeOperations.dossier.callout.message", "text": "Selecione uma pessoa na carteira para atualizar todo o dossiê. Use as ações da linha para visualizar, editar, inativar ou reativar o vínculo." } } ] } } }, { "id": "praxis-dynamic-form", "childWidgetKey": "employee-dossier-form", "bindingOrder": [ "formId", "componentInstanceId", "resourcePath", "resourceId", "mode", "config" ], "inputs": { "formId": "employee-operations-dossier", "componentInstanceId": "employee-operations-dossier", "resourcePath": "human-resources/funcionarios", "resourceId": null, "mode": "view", "config": { "appearance": { "density": "comfortable" } } }, "outputs": { "customAction": "emit", "initializationError": "emit" } } ] }, { "id": "payroll", "textLabel": { "key": "employeeOperations.dossier.tab.payroll", "text": "Folha" }, "icon": "payments", "widgets": [ { "id": "praxis-related-resource-outlet", "childWidgetKey": "employee-payroll-history", "bindingOrder": [ "surfaceId", "parentResourcePath", "parentResourceId", "parentIdentity", "mode", "tableId", "tableConfig" ], "inputs": { "surfaceId": "payroll-history", "parentResourcePath": "human-resources/funcionarios", "parentResourceId": null, "mode": "inline", "tableId": "employee-payroll-history", "tableConfig": { "toolbar": { "visible": true, "title": { "key": "employeeOperations.payroll.title", "text": "Histórico analítico de folha" }, "subtitle": { "key": "employeeOperations.payroll.subtitle", "text": "Competência, composição e eventos do funcionário selecionado" } }, "columns": [], "behavior": { "pagination": { "enabled": true, "strategy": "server", "pageSize": 6, "pageSizeOptions": [ 6, 12 ] } }, "columnProjection": { "source": "schema", "include": [ "competencia", "salarioBruto", "totalDescontos", "salarioLiquido", "qtdEventos", "composicaoFolha" ], "overrides": { "competencia": { "header": { "key": "employeeOperations.column.period", "text": "Competência" }, "format": "MM/yyyy", "width": "120px" }, "salarioBruto": { "header": { "key": "employeeOperations.column.gross", "text": "Bruto" }, "type": "currency", "format": "BRL|symbol|2", "align": "end" }, "totalDescontos": { "header": { "key": "employeeOperations.column.discounts", "text": "Descontos" }, "type": "currency", "format": "BRL|symbol|2", "align": "end" }, "salarioLiquido": { "header": { "key": "employeeOperations.column.net", "text": "Líquido" }, "type": "currency", "format": "BRL|symbol|2", "align": "end" }, "qtdEventos": { "header": { "key": "employeeOperations.column.events", "text": "Eventos" }, "align": "center", "width": "100px" }, "composicaoFolha": { "header": { "key": "employeeOperations.column.composition", "text": "Composição" }, "renderer": { "type": "badge", "badge": { "textField": "composicaoFolha", "variant": "soft", "color": "primary" } } } } } } }, "outputs": { "widgetEvent": "emit", "resourceEvent": "emit", "surfaceOpen": "emit" } } ] }, { "id": "career", "textLabel": { "key": "employeeOperations.dossier.tab.career", "text": "Carreira" }, "icon": "trending_up", "widgets": [ { "id": "praxis-related-resource-outlet", "childWidgetKey": "employee-skills", "bindingOrder": [ "surfaceId", "parentResourcePath", "parentResourceId", "parentIdentity", "mode", "tableId", "tableConfig" ], "inputs": { "surfaceId": "skills", "parentResourcePath": "human-resources/funcionarios", "parentResourceId": null, "mode": "inline", "tableId": "employee-skill-matrix", "tableConfig": { "toolbar": { "visible": true, "title": { "key": "employeeOperations.skills.title", "text": "Matriz de competências" } }, "columns": [], "behavior": { "pagination": { "enabled": false } }, "columnProjection": { "source": "schema", "include": [ "habilidadeNome", "proficiencia", "origem" ], "overrides": { "habilidadeNome": { "header": { "key": "employeeOperations.column.skill", "text": "Competência" } }, "proficiencia": { "header": { "key": "employeeOperations.column.proficiency", "text": "Proficiência" }, "renderer": { "type": "progress", "progress": { "valueExpr": "proficiencia", "color": "primary", "showLabel": true } } }, "origem": { "header": { "key": "employeeOperations.column.origin", "text": "Origem" }, "renderer": { "type": "badge", "badge": { "textField": "origem", "variant": "outlined", "color": "accent" } } } } } } }, "outputs": { "widgetEvent": "emit", "resourceEvent": "emit", "surfaceOpen": "emit" } }, { "id": "praxis-related-resource-outlet", "childWidgetKey": "employee-career-history", "bindingOrder": [ "surfaceId", "parentResourcePath", "parentResourceId", "parentIdentity", "mode", "tableId", "tableConfig" ], "inputs": { "surfaceId": "career-history", "parentResourcePath": "human-resources/funcionarios", "parentResourceId": null, "mode": "inline", "tableId": "employee-career-history", "tableConfig": { "toolbar": { "visible": true, "title": { "key": "employeeOperations.career.title", "text": "Histórico de cargos" } }, "columns": [], "behavior": { "pagination": { "enabled": false } }, "columnProjection": { "source": "schema", "include": [ "cargoNome", "dataInicio", "dataFim", "observacoes" ], "overrides": { "cargoNome": { "header": { "key": "employeeOperations.portfolio.column.role", "text": "Cargo" }, "sticky": "start" }, "dataInicio": { "header": { "key": "employeeOperations.column.start", "text": "Início" } }, "dataFim": { "header": { "key": "employeeOperations.column.end", "text": "Fim" } }, "observacoes": { "header": { "key": "employeeOperations.column.context", "text": "Contexto" } } } } } }, "outputs": { "widgetEvent": "emit", "resourceEvent": "emit", "surfaceOpen": "emit" } } ] }, { "id": "people", "textLabel": { "key": "employeeOperations.dossier.tab.people", "text": "Pessoas" }, "icon": "family_restroom", "widgets": [ { "id": "praxis-related-resource-outlet", "childWidgetKey": "employee-dependents", "bindingOrder": [ "surfaceId", "parentResourcePath", "parentResourceId", "parentIdentity", "mode", "tableId", "tableConfig" ], "inputs": { "surfaceId": "dependents", "parentResourcePath": "human-resources/funcionarios", "parentResourceId": null, "mode": "inline", "tableId": "employee-dependents", "tableConfig": { "toolbar": { "visible": true, "title": { "key": "employeeOperations.dependents.title", "text": "Dependentes e elegibilidade" } }, "columns": [], "behavior": { "pagination": { "enabled": false } }, "columnProjection": { "source": "schema", "include": [ "nomeCompleto", "parentesco", "dataNascimento" ], "overrides": { "nomeCompleto": { "header": { "key": "employeeOperations.column.dependent", "text": "Dependente" }, "sticky": "start" }, "parentesco": { "header": { "key": "employeeOperations.column.relationship", "text": "Parentesco" }, "renderer": { "type": "chip", "chip": { "textField": "parentesco", "variant": "outlined", "color": "primary" } } }, "dataNascimento": { "header": { "key": "employeeOperations.column.birthDate", "text": "Nascimento" } } } } } }, "outputs": { "widgetEvent": "emit", "resourceEvent": "emit", "surfaceOpen": "emit" } }, { "id": "praxis-related-resource-outlet", "childWidgetKey": "employee-address", "bindingOrder": [ "surfaceId", "parentResourcePath", "parentResourceId", "parentIdentity", "mode", "tableId", "tableConfig" ], "inputs": { "surfaceId": "address", "parentResourcePath": "human-resources/funcionarios", "parentResourceId": null, "mode": "inline", "tableId": "employee-address", "tableConfig": { "toolbar": { "visible": true, "title": { "key": "employeeOperations.address.title", "text": "Endereço cadastral" } }, "columns": [], "behavior": { "pagination": { "enabled": false } }, "columnProjection": { "source": "schema", "include": [ "logradouro", "numero", "cidade", "estado", "cep" ], "overrides": { "logradouro": { "header": { "key": "employeeOperations.column.street", "text": "Logradouro" }, "sticky": "start" }, "numero": { "header": { "key": "employeeOperations.column.number", "text": "Número" }, "width": "100px" }, "cidade": { "header": { "key": "employeeOperations.column.city", "text": "Cidade" } }, "estado": { "header": "UF", "width": "80px" }, "cep": { "header": "CEP", "width": "120px" } } } } }, "outputs": { "widgetEvent": "emit", "resourceEvent": "emit", "surfaceOpen": "emit" } } ] }, { "id": "operations", "textLabel": { "key": "employeeOperations.dossier.tab.operations", "text": "Operação" }, "icon": "hub", "widgets": [ { "id": "praxis-related-resource-outlet", "childWidgetKey": "employee-missions", "bindingOrder": [ "surfaceId", "parentResourcePath", "parentResourceId", "parentIdentity", "mode", "tableId", "tableConfig" ], "inputs": { "surfaceId": "mission-participations", "parentResourcePath": "human-resources/funcionarios", "parentResourceId": null, "mode": "inline", "tableId": "employee-mission-participations", "tableConfig": { "toolbar": { "visible": true, "title": { "key": "employeeOperations.missions.title", "text": "Participações em missões" } }, "columns": [], "behavior": { "pagination": { "enabled": true, "strategy": "server", "pageSize": 5, "pageSizeOptions": [ 5, 10 ] } }, "columnProjection": { "source": "schema", "include": [ "missaoTitulo", "papel", "principal", "resultado" ], "overrides": { "missaoTitulo": { "header": { "key": "employeeOperations.column.mission", "text": "Missão" }, "sticky": "start" }, "papel": { "header": { "key": "employeeOperations.column.assignment", "text": "Papel" }, "renderer": { "type": "badge", "badge": { "textField": "papel", "variant": "soft", "color": "primary" } } }, "principal": { "header": { "key": "employeeOperations.column.leadership", "text": "Liderança" }, "format": "yes-no", "align": "center" }, "resultado": { "header": { "key": "employeeOperations.column.result", "text": "Resultado" }, "renderer": { "type": "badge", "badge": { "textField": "resultado", "variant": "outlined", "color": "accent" } } } } } } }, "outputs": { "widgetEvent": "emit", "resourceEvent": "emit", "surfaceOpen": "emit" } }, { "id": "praxis-related-resource-outlet", "childWidgetKey": "employee-equipment-custody", "bindingOrder": [ "surfaceId", "parentResourcePath", "parentResourceId", "parentIdentity", "mode", "tableId", "tableConfig" ], "inputs": { "surfaceId": "equipment-custody", "parentResourcePath": "human-resources/funcionarios", "parentResourceId": null, "mode": "inline", "tableId": "employee-equipment-custody", "tableConfig": { "toolbar": { "visible": true, "title": { "key": "employeeOperations.equipment.title", "text": "Equipamentos sob custódia" } }, "columns": [], "behavior": { "pagination": { "enabled": false } }, "columnProjection": { "source": "schema", "include": [ "equipamentoId", "status", "inicio", "fim" ], "overrides": { "equipamentoId": { "header": { "key": "employeeOperations.column.equipment", "text": "Equipamento" }, "sticky": "start" }, "status": { "header": { "key": "employeeOperations.column.status", "text": "Status" }, "renderer": { "type": "badge", "badge": { "textField": "status", "variant": "soft", "color": "accent" } } }, "inicio": { "header": { "key": "employeeOperations.column.custodyStart", "text": "Início da custódia" } }, "fim": { "header": { "key": "employeeOperations.column.custodyEnd", "text": "Encerramento" } } } } } }, "outputs": { "widgetEvent": "emit", "resourceEvent": "emit", "surfaceOpen": "emit" } } ] } ] } }, "outputs": { "selectedIndexChange": "emit" } } } ], "composition": { "version": "1.0.0", "links": [ { "id": "employee-casework:portfolio.rowClick->state.selection.employeeId", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "employeePortfolio", "port": "rowClick", "direction": "output", "componentType": "praxis-crud" } }, "to": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values", "writable": true } }, "condition": { ">": [ { "var": "payload.row.id" }, 0 ] }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "employee-casework:pick-employee-id", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.id" } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true, "debounceMs": 50 } }, { "id": "employee-casework:portfolio.rowClick->state.selection.employeeIdentity", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "employeePortfolio", "port": "rowClick", "direction": "output", "componentType": "praxis-crud" } }, "to": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "employee-casework:pick-employee-identity", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.resourceIdentity" } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true, "debounceMs": 50 } }, { "id": "employee-casework:portfolio.rowClick->state.selection.employee", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "employeePortfolio", "port": "rowClick", "direction": "output", "componentType": "praxis-crud" } }, "to": { "kind": "state", "ref": { "path": "selection.employee", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "employee-casework:pick-employee-record", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row" } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true, "debounceMs": 50 } }, { "id": "employee-casework:portfolio.rowAction->state.selection.employeeId", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "employeePortfolio", "port": "rowAction", "direction": "output", "componentType": "praxis-crud" } }, "to": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values", "writable": true } }, "condition": { ">": [ { "var": "payload.row.id" }, 0 ] }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "employee-casework:pick-action-employee-id", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row.id" } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true, "debounceMs": 50 } }, { "id": "employee-casework:portfolio.rowAction->state.selection.employeeIdentity", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "employeePortfolio", "port": "rowAction", "direction": "output", "componentType": "praxis-crud" } }, "to": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "employee-casework:pick-action-employee-identity", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.resourceIdentity" } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true, "debounceMs": 50 } }, { "id": "employee-casework:portfolio.rowAction->state.selection.employee", "intent": "state-write", "from": { "kind": "component-port", "ref": { "widget": "employeePortfolio", "port": "rowAction", "direction": "output", "componentType": "praxis-crud" } }, "to": { "kind": "state", "ref": { "path": "selection.employee", "layer": "values", "writable": true } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "single-value", "sourceBindings": [ { "source": "event" } ], "steps": [ { "id": "employee-casework:pick-action-employee-record", "kind": "pick-path", "phase": "link-propagation", "input": { "source": "event" }, "config": { "path": "payload.row" } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true, "debounceMs": 50 } }, { "id": "employee-casework:state.employee->dossier-context.context", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employee", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "context", "direction": "input", "componentType": "praxis-rich-content", "nestedPath": [ { "kind": "tab", "id": "dossier", "index": 0 }, { "kind": "widget", "key": "employee-dossier-context", "componentType": "praxis-rich-content" } ] } }, "transform": { "version": "2.0", "phase": "link-propagation", "mode": "object-fragment", "sourceBindings": [ { "source": "state", "path": "selection.employee" } ], "steps": [ { "id": "employee-casework:employee-context", "kind": "object-template", "phase": "link-propagation", "config": { "template": { "selection": { "employee": "${source}" } } } } ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeId->dossier-form.resourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "resourceId", "direction": "input", "componentType": "praxis-dynamic-form", "nestedPath": [ { "kind": "tab", "id": "dossier", "index": 0 }, { "kind": "widget", "key": "employee-dossier-form", "componentType": "praxis-dynamic-form" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeId->payroll.parentResourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentResourceId", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "payroll", "index": 1 }, { "kind": "widget", "key": "employee-payroll-history", "componentType": "praxis-related-resource-outlet" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeId->skills.parentResourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentResourceId", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "career", "index": 2 }, { "kind": "widget", "key": "employee-skills", "componentType": "praxis-related-resource-outlet" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeId->career.parentResourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentResourceId", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "career", "index": 2 }, { "kind": "widget", "key": "employee-career-history", "componentType": "praxis-related-resource-outlet" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeId->dependents.parentResourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentResourceId", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "people", "index": 3 }, { "kind": "widget", "key": "employee-dependents", "componentType": "praxis-related-resource-outlet" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeId->address.parentResourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentResourceId", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "people", "index": 3 }, { "kind": "widget", "key": "employee-address", "componentType": "praxis-related-resource-outlet" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeId->missions.parentResourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentResourceId", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "operations", "index": 4 }, { "kind": "widget", "key": "employee-missions", "componentType": "praxis-related-resource-outlet" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeId->equipment.parentResourceId", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeId", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentResourceId", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "operations", "index": 4 }, { "kind": "widget", "key": "employee-equipment-custody", "componentType": "praxis-related-resource-outlet" } ] } }, "condition": { ">": [ { "var": "source" }, 0 ] }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeIdentity->payroll.parentIdentity", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentIdentity", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "payroll", "index": 1 }, { "kind": "widget", "key": "employee-payroll-history", "componentType": "praxis-related-resource-outlet" } ] } }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeIdentity->skills.parentIdentity", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentIdentity", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "career", "index": 2 }, { "kind": "widget", "key": "employee-skills", "componentType": "praxis-related-resource-outlet" } ] } }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeIdentity->career.parentIdentity", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentIdentity", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "career", "index": 2 }, { "kind": "widget", "key": "employee-career-history", "componentType": "praxis-related-resource-outlet" } ] } }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeIdentity->dependents.parentIdentity", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentIdentity", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "people", "index": 3 }, { "kind": "widget", "key": "employee-dependents", "componentType": "praxis-related-resource-outlet" } ] } }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeIdentity->address.parentIdentity", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentIdentity", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "people", "index": 3 }, { "kind": "widget", "key": "employee-address", "componentType": "praxis-related-resource-outlet" } ] } }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeIdentity->missions.parentIdentity", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentIdentity", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "operations", "index": 4 }, { "kind": "widget", "key": "employee-missions", "componentType": "praxis-related-resource-outlet" } ] } }, "policy": { "missingValuePolicy": "skip", "distinct": true } }, { "id": "employee-casework:state.employeeIdentity->equipment.parentIdentity", "intent": "state-read", "from": { "kind": "state", "ref": { "path": "selection.employeeIdentity", "layer": "values" } }, "to": { "kind": "component-port", "ref": { "widget": "employeeCaseTabs", "port": "parentIdentity", "direction": "input", "componentType": "praxis-related-resource-outlet", "nestedPath": [ { "kind": "tab", "id": "operations", "index": 4 }, { "kind": "widget", "key": "employee-equipment-custody", "componentType": "praxis-related-resource-outlet" } ] } }, "policy": { "missingValuePolicy": "skip", "distinct": true } } ] } } } }, { "id": "stepper-onboarding-workflow", "title": "Stepper - onboarding workflow", "summary": "Combines intake, evidence, validation and approval review into a guided workflow that can evolve through step metadata instead of another wizard implementation.", "i18n": { "pt": { "title": "Stepper - workflow de onboarding", "summary": "Combina cadastro, evidência, validação e aprovação em um workflow guiado que evolui por metadata de etapas.", "demonstrates": [ "Explore Stepper - workflow de onboarding e use os controles disponíveis para percorrer o cenário até o resultado visível.", "Observe como praxis-stepper materializa human-resources/onboarding-workflow com um contrato de runtime explícito.", "Compare o comportamento em runtime com a promessa do cenário: Combina cadastro, evidência, validação e aprovação em um workflow guiado que evolui por metadata de etapas.", "Confirme no resultado capacidades da plataforma como dynamic-widget-resolution, praxis-stepper.steps, praxis-stepper.linear-navigation.", "Verifique a conexão com as evidências canônicas filtered?schemaType=response e {id}&operation=get&schemaType=response." ] } }, "publicRoute": "/examples/dynamic-page/stepper-onboarding-workflow", "publicUrl": "https://praxisui.dev/examples/dynamic-page/stepper-onboarding-workflow", "category": "feature", "mode": "local-only", "primaryComponent": "praxis-stepper", "resourcePath": "human-resources/onboarding-workflow", "resourceKey": "human-resources.onboarding-workflow", "requires": [ "praxis-stepper.config", "steps.form", "stepBlocksBeforeForm", "steps.widgets", "praxis-files-upload", "praxis-list", "widgetEvent" ], "tags": [ "stepper", "workflow", "form", "files-upload", "approval", "local-workflow", "ai-recipe" ], "demonstrates": [ "Linear guided workflow with persisted stepperId and explicit navigation labels", "Step-local Dynamic Form config with sections, validators, conditional fields and actions", "RichContentDocument surfaces before and after step forms without legacy wizard-only blocks", "Nested host-owned widgets through steps[].widgets: files upload and approval checklist", "Workflow-level events exposed through selectionChange, stepFormReady, stepFormValueChange and widgetEvent" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-stepper.steps", "praxis-stepper.linear-navigation", "praxis-stepper.stepBlocksBeforeForm", "praxis-stepper.form-config", "praxis-stepper.widgets", "praxis-files-upload.nested-widget", "praxis-list.approval-checklist", "widgetEvent.bubbling" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=response", "GET /schemas/filtered?path=/api/human-resources/funcionarios/{id}&operation=get&schemaType=response", "Host files API: POST {baseUrl}/upload", "praxis-ui-angular/projects/praxis-stepper/docs/stepper-api-reference.md", "praxis-ui-angular/projects/praxis-stepper/docs/host-stepper-integration.md" ], "complexity": "advanced", "catalogRole": "runtime-widget", "learningStage": "enterprise", "variantFamilyId": "onboarding-journeys", "featuredRank": 6, "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-stepper-rendered", "step-form-rendered", "nested-upload-rendered", "nested-list-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because it demonstrates a host-owned workflow contract rather than a quickstart mutation endpoint.", "The form step uses local config to show rules and validators without creating employee records in the reference API.", "The evidence step keeps the files API boundary explicit through the nested praxis-files-upload baseUrl input." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.stepper-onboarding-workflow.json", "praxis-ui-angular/examples/ai-recipes/praxis-stepper.json", "praxis-ui-angular/projects/praxis-stepper/docs/stepper-api-reference.md" ], "sourcePath": "docs/examples/dynamic-page/examples/stepper-onboarding-workflow.json", "documentation": { "story": { "pt": "People Ops precisa conduzir uma admissão que começa no cadastro, exige evidências e termina em aprovação. Em vez de criar outro wizard, o exemplo descreve a jornada como etapas governadas e combina componentes especializados dentro delas.", "en": "People Ops needs to run an onboarding journey that starts with intake, requires evidence and ends in approval. Instead of another wizard, the example describes governed steps and combines specialized components inside them." }, "outcome": { "pt": "O visitante percorre formulário, upload e checklist dentro do mesmo workflow e pode identificar exatamente quais trechos do JSON controlam navegação, validação, conteúdo e eventos.", "en": "The visitor moves through form, upload and checklist in one workflow and can identify exactly which JSON sections control navigation, validation, content and events." }, "componentRoles": [ { "component": "praxis-stepper", "jsonPath": "page.widgets[].definition", "role": { "pt": "Orquestra etapas, navegação linear, formulários e widgets aninhados.", "en": "Orchestrates steps, linear navigation, forms and nested widgets." }, "rationale": { "pt": "Transforma um processo em metadata de etapas, evitando implementar outro wizard específico no host.", "en": "Turns a process into step metadata instead of implementing another host-specific wizard." } }, { "component": "praxis-dynamic-form", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Materializa campos, seções, validações e ações a partir de configuração explícita.", "en": "Materializes fields, sections, validation and actions from explicit configuration." }, "rationale": { "pt": "Mantém a experiência de coleta alinhada ao contrato sem criar um formulário Angular exclusivo para o cenário.", "en": "Keeps data collection aligned with the contract without creating a scenario-specific Angular form." } }, { "component": "praxis-rich-content", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Organiza conteúdo editorial estruturado, contexto e chamadas para ação.", "en": "Organizes structured editorial content, context and calls to action." }, "rationale": { "pt": "Separa narrativa e orientação do código do host, preservando uma superfície portável e governável.", "en": "Separates narrative and guidance from host code while preserving a portable, governable surface." } }, { "component": "praxis-files-upload", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Coleta arquivos e explicita políticas, estado e integração com a API de evidências.", "en": "Collects files and exposes policies, state and evidence API integration." }, "rationale": { "pt": "Mantém a fronteira de upload pertencente ao host, sem esconder segurança ou persistência em um exemplo visual.", "en": "Keeps the upload boundary owned by the host instead of hiding security or persistence in a visual example." } }, { "component": "praxis-list", "jsonPath": "page.widgets[].definition.inputs", "role": { "pt": "Apresenta coleções escaneáveis, estados e ações por item.", "en": "Presents scannable collections, states and per-item actions." }, "rationale": { "pt": "É mais adequado que uma tabela quando a leitura de contexto por item importa mais que a comparação por colunas.", "en": "It is better than a table when item context matters more than column-by-column comparison." } } ], "jsonWalkthrough": [ { "jsonPath": "definition.inputs.config.steps[]", "title": { "pt": "Jornada e navegação", "en": "Journey and navigation" }, "explanation": { "pt": "Ordena etapas, rótulos e progressão linear como metadata revisável.", "en": "Orders steps, labels and linear progression as reviewable metadata." } }, { "jsonPath": "steps[].form", "title": { "pt": "Cadastro e validação", "en": "Intake and validation" }, "explanation": { "pt": "Insere um Dynamic Form com seções, regras condicionais e ações próprias da etapa.", "en": "Embeds a Dynamic Form with sections, conditional rules and step-specific actions." } }, { "jsonPath": "steps[].widgets", "title": { "pt": "Evidência e aprovação", "en": "Evidence and approval" }, "explanation": { "pt": "Hospeda Files Upload e List sem fazer o Stepper assumir responsabilidades desses componentes.", "en": "Hosts Files Upload and List without making Stepper own their responsibilities." } }, { "jsonPath": "definition.outputs", "title": { "pt": "Eventos para o host", "en": "Events for the host" }, "explanation": { "pt": "Publica mudança de etapa, prontidão e eventos aninhados para integração e observabilidade.", "en": "Publishes step changes, readiness and nested events for integration and observability." } } ], "experiments": [ { "pt": "Torne uma etapa opcional ou altere sua ordem e verifique como a jornada responde ao novo contrato.", "en": "Make a step optional or change its order and verify how the journey responds to the new contract." }, { "pt": "Localize o widget principal em page.widgets[] e altere apenas um input por vez para relacionar causa e efeito.", "en": "Find the primary widget in page.widgets[] and change one input at a time to relate cause and effect." }, { "pt": "Use “Restaurar baseline” depois do teste para comparar sua variação com a receita oficial.", "en": "Use “Restore baseline” after the test to compare your variation with the official recipe." } ], "productionNotes": [ { "pt": "Este cenário usa dados locais para que a composição possa ser explorada sem credenciais nem mutações reais.", "en": "This scenario uses local data so the composition can be explored without credentials or real mutations." }, { "pt": "Autenticação, autorização, persistência e regras de negócio permanecem responsabilidades do backend e do app host.", "en": "Authentication, authorization, persistence and business rules remain responsibilities of the backend and host app." }, { "pt": "A referência canônica está publicada em praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.stepper-onboarding-workflow.json.", "en": "The canonical reference is published at praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.stepper-onboarding-workflow.json." } ] }, "envelope": { "id": "stepper-onboarding-workflow", "title": "Stepper - onboarding workflow", "summary": "Combines intake, evidence, validation and approval review into a guided workflow that can evolve through step metadata instead of another wizard implementation.", "component": "praxis-dynamic-page", "category": "feature", "primaryComponent": "praxis-stepper", "runtime": { "mode": "local-only", "minPraxisUiPackage": "@praxisui/stepper" }, "api": { "origin": "https://praxis-enterprise-proof-sandbox-v2.onrender.com", "baseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/api", "schemasBaseUrl": "https://praxis-enterprise-proof-sandbox-v2.onrender.com/schemas", "resourcePath": "human-resources/onboarding-workflow", "resourceKey": "human-resources.onboarding-workflow" }, "requires": [ "praxis-stepper.config", "steps.form", "stepBlocksBeforeForm", "steps.widgets", "praxis-files-upload", "praxis-list", "widgetEvent" ], "tags": [ "stepper", "workflow", "form", "files-upload", "approval", "local-workflow", "ai-recipe" ], "demonstrates": [ "Linear guided workflow with persisted stepperId and explicit navigation labels", "Step-local Dynamic Form config with sections, validators, conditional fields and actions", "RichContentDocument surfaces before and after step forms without legacy wizard-only blocks", "Nested host-owned widgets through steps[].widgets: files upload and approval checklist", "Workflow-level events exposed through selectionChange, stepFormReady, stepFormValueChange and widgetEvent" ], "platformFeatures": [ "dynamic-widget-resolution", "praxis-stepper.steps", "praxis-stepper.linear-navigation", "praxis-stepper.stepBlocksBeforeForm", "praxis-stepper.form-config", "praxis-stepper.widgets", "praxis-files-upload.nested-widget", "praxis-list.approval-checklist", "widgetEvent.bubbling" ], "backendSurfaces": [ "GET /schemas/filtered?schemaType=response", "GET /schemas/filtered?path=/api/human-resources/funcionarios/{id}&operation=get&schemaType=response", "Host files API: POST {baseUrl}/upload", "praxis-ui-angular/projects/praxis-stepper/docs/stepper-api-reference.md", "praxis-ui-angular/projects/praxis-stepper/docs/host-stepper-integration.md" ], "complexity": "advanced", "validation": { "level": "browser-smoke", "checks": [ "json-envelope", "dynamic-page-rendered", "praxis-stepper-rendered", "step-form-rendered", "nested-upload-rendered", "nested-list-rendered" ] }, "operationalEvidence": { "recommendedHttpIds": [], "pendingHttpIds": [], "notes": [ "This example is local-only because it demonstrates a host-owned workflow contract rather than a quickstart mutation endpoint.", "The form step uses local config to show rules and validators without creating employee records in the reference API.", "The evidence step keeps the files API boundary explicit through the nested praxis-files-upload baseUrl input." ] }, "sourceRecipes": [ "praxis-ui-angular/examples/ai-recipes/praxis-dynamic-page.stepper-onboarding-workflow.json", "praxis-ui-angular/examples/ai-recipes/praxis-stepper.json", "praxis-ui-angular/projects/praxis-stepper/docs/stepper-api-reference.md" ], "page": { "layout": { "orientation": "columns", "columns": 1, "gap": "16px" }, "widgets": [ { "key": "employeeOnboardingStepper", "shell": { "kind": "dashboard-card", "icon": "assignment_turned_in", "title": "Employee onboarding workflow", "subtitle": "Stepper with form rules, evidence upload and approval checklist" }, "definition": { "id": "praxis-stepper", "bindingOrder": [ "stepperId", "componentInstanceId", "config", "stepperContext" ], "inputs": { "stepperId": "employee-onboarding-workflow", "componentInstanceId": "dynamic-page-showcase", "enableCustomization": true, "stepperContext": { "workflowId": "employee-onboarding-demo", "resourcePath": "human-resources/funcionarios", "evidenceBaseUrl": "/api/files" }, "config": { "orientation": "horizontal", "linear": true, "labelPosition": "bottom", "selectedIndex": 0, "density": "comfortable", "appearance": { "preset": "ft-light", "icons": { "number": "radio_button_unchecked", "done": "check_circle", "edit": "edit_note", "error": "error" } }, "navigation": { "visible": true, "prevLabel": "Back", "nextLabel": "Continue", "prevIcon": "arrow_back", "nextIcon": "arrow_forward", "variant": "stroked", "color": "primary", "align": "space-between" }, "steps": [ { "id": "employee-intake", "label": "Employee", "description": "Capture employee identity, assignment and workflow-only risk fields.", "editable": true, "stepBlocksBeforeForm": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "text", "text": "The step owns its local Dynamic Form config. Backend metadata can replace this config later without changing the Stepper host template." }, { "type": "badge", "label": "form rules" }, { "type": "badge", "label": "validators" } ] }, "form": { "mode": "create", "formId": "employee-onboarding-intake-form", "schemaSource": "resource", "config": { "metadata": { "name": "Employee onboarding intake", "version": "1.0.0" }, "behavior": { "reactiveValidation": true, "reactiveValidationDebounceMs": 200 }, "sections": [ { "id": "identity", "title": "Identity", "description": "Candidate identity and contact data.", "appearance": "outlined", "rows": [ { "id": "identity-row", "columns": [ { "id": "identity-main", "span": { "md": 6, "lg": 6 }, "fields": [ "nomeCompleto", "email" ] }, { "id": "identity-contact", "span": { "md": 6, "lg": 6 }, "fields": [ "telefone", "dataNascimento" ] } ] } ] }, { "id": "assignment", "title": "Assignment", "description": "Initial role and payroll policy.", "appearance": "outlined", "rows": [ { "id": "assignment-row", "columns": [ { "id": "assignment-main", "span": { "md": 6, "lg": 6 }, "fields": [ "cargoId", "departamentoId" ] }, { "id": "assignment-payroll", "span": { "md": 6, "lg": 6 }, "fields": [ "salario", "requiresSecurityReview" ] } ] } ] }, { "id": "security-review", "title": "Security review", "description": "Visible only when the role requires additional checks.", "appearance": "outlined", "rows": [ { "id": "security-row", "columns": [ { "id": "security-main", "fields": [ "riskLevel", "securityNotes" ] } ] } ] } ], "fieldMetadata": [ { "name": "nomeCompleto", "label": "Nome Completo", "controlType": "input", "validators": { "required": true, "minLength": 3, "maxLength": 160 } }, { "name": "email", "label": "Email", "controlType": "email", "validators": { "required": true, "email": true } }, { "name": "telefone", "label": "Telefone", "controlType": "phone", "validators": { "required": true } }, { "name": "dataNascimento", "label": "Data de Nascimento", "controlType": "date", "validators": { "required": true } }, { "name": "cargoId", "label": "Cargo", "controlType": "select", "validators": { "required": true }, "options": [ { "label": "Analista de Operacoes", "value": "analyst" }, { "label": "Agente de Campo", "value": "field-agent" }, { "label": "Diretor de P&D", "value": "director-rd" } ] }, { "name": "departamentoId", "label": "Departamento", "controlType": "select", "validators": { "required": true }, "options": [ { "label": "Operacoes", "value": "operations" }, { "label": "Pesquisa", "value": "research" }, { "label": "Seguranca", "value": "security" } ] }, { "name": "salario", "label": "Salario inicial", "controlType": "currency", "currencyCode": "BRL", "locale": "pt-BR", "validators": { "required": true, "min": 1800 } }, { "name": "requiresSecurityReview", "label": "Requires security review", "controlType": "toggle" }, { "name": "riskLevel", "label": "Risk level", "controlType": "select", "options": [ { "label": "Standard", "value": "STANDARD" }, { "label": "Elevated", "value": "ELEVATED" }, { "label": "Restricted", "value": "RESTRICTED" } ], "conditionalDisplay": { "===": [ { "var": "requiresSecurityReview" }, true ] }, "conditionalRequired": { "===": [ { "var": "requiresSecurityReview" }, true ] } }, { "name": "securityNotes", "label": "Security notes", "controlType": "textarea", "rows": 3, "validators": { "minLength": 12, "maxLength": 500 }, "conditionalDisplay": { "===": [ { "var": "requiresSecurityReview" }, true ] }, "conditionalRequired": { "===": [ { "var": "requiresSecurityReview" }, true ] } } ], "formRules": [ { "id": "security-review-section-visibility", "name": "Security section visibility", "targetType": "section", "targetId": "security-review", "condition": { "===": [ { "var": "requiresSecurityReview" }, true ] }, "effect": { "propertiesWhenTrue": { "visible": true }, "propertiesWhenFalse": { "visible": false } } } ], "actions": { "submit": { "id": "save-intake-draft", "label": "Save draft", "icon": "save", "color": "primary", "visible": true, "type": "submit" }, "reset": { "id": "reset-intake", "label": "Reset", "visible": true, "type": "reset" }, "position": "right", "placement": "afterSections" } } }, "stepBlocksAfterForm": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "badge", "label": "stepFormReady" }, { "type": "badge", "label": "stepFormValueChange" } ] } }, { "id": "evidence", "label": "Evidence", "description": "Collect supporting files through a nested Files Upload widget.", "optional": true, "editable": true, "stepBlocksBeforeForm": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "text", "text": "Use steps[].widgets when a step needs a real runtime component. Here the host keeps the files API boundary explicit through baseUrl." }, { "type": "badge", "label": "steps[].widgets" }, { "type": "badge", "label": "praxis-files-upload" } ] }, "widgets": [ { "id": "praxis-files-upload", "inputs": { "filesUploadId": "employee-onboarding-evidence", "componentInstanceId": "stepper-evidence", "baseUrl": "/api/files", "displayMode": "compact", "config": { "strategy": "direct", "ui": { "showDropzone": true, "accept": [ "application/pdf", "image/png", "image/jpeg", ".pdf", ".png", ".jpg" ], "showConflictPolicySelector": true, "showMetadataForm": true, "showProgress": true, "manualUpload": true }, "limits": { "maxFileSizeBytes": 10485760, "maxFilesPerBulk": 4, "maxBulkSizeBytes": 31457280 }, "options": { "defaultConflictPolicy": "MAKE_UNIQUE", "strictValidation": true, "allowedExtensions": [ "pdf", "png", "jpg", "jpeg" ], "acceptMimeTypes": [ "application/pdf", "image/png", "image/jpeg" ], "targetDirectory": "employee-onboarding", "enableVirusScanning": true } } } } ] }, { "id": "approval", "label": "Approval", "description": "Review completion criteria before sending the workflow to the host.", "editable": true, "stepBlocksBeforeForm": { "kind": "praxis.rich-content", "version": "1.0.0", "nodes": [ { "type": "text", "text": "The final step can combine local review state with events from previous steps. No custom Angular shell is required." }, { "type": "badge", "label": "widgetEvent" }, { "type": "badge", "label": "approval checklist" } ] }, "widgets": [ { "id": "praxis-list", "inputs": { "listId": "employee-onboarding-approval-checklist", "config": { "id": "employee-onboarding-approval-checklist-config", "dataSource": { "data": [ { "id": 1, "title": "Identity fields validated", "owner": "People Ops", "status": "Required", "priority": "P0" }, { "id": 2, "title": "Evidence attached or waived", "owner": "Hiring Manager", "status": "Required", "priority": "P0" }, { "id": 3, "title": "Security review completed", "owner": "Security", "status": "Conditional", "priority": "P1" } ] }, "layout": { "variant": "list", "density": "compact", "lines": 2, "dividers": "between", "pageSize": 5 }, "selection": { "mode": "multiple", "compareBy": "id", "return": "id" }, "templating": { "leading": { "type": "icon", "expr": "task_alt" }, "primary": { "type": "text", "expr": "${item.title}" }, "secondary": { "type": "text", "expr": "${item.owner}" }, "meta": { "type": "chip", "expr": "${item.priority}", "variant": "filled" }, "trailing": { "type": "chip", "expr": "${item.status}", "variant": "outlined" } }, "ui": { "showSearch": false, "showSort": false, "showRange": false } } } } ] } ] } }, "outputs": { "selectionChange": "emit", "selectedIndexChange": "emit", "stepFormReady": "emit", "stepFormValueChange": "emit", "widgetEvent": "emit" } } } ] } } } ] }