{
"request": {
"app": "Hotel",
"screen": "hotel-rooms",
"style": "refined"
},
"selection_order": [
"implemented functional screens",
"patterns",
"implemented components",
"research candidates",
"effects"
],
"screens": [
{
"id": "hotel-rooms",
"name": "Habitaciones",
"level": "screen",
"app": "Hotel",
"pattern": "hotel-room-control",
"description": "Pantalla completa curada: Habitaciones. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/hotel-rooms.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "hotel-dashboard",
"name": "Hotel Dashboard",
"level": "screen",
"app": "Hotel",
"pattern": "hotel-operations-dashboard",
"description": "Pantalla completa curada: Hotel Dashboard. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/hotel-dashboard.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "hotel-reservations",
"name": "Reservas Hotel",
"level": "screen",
"app": "Hotel",
"pattern": "hotel-reservations-workspace",
"description": "Pantalla completa curada: Reservas Hotel. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/hotel-reservations.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "restaurant-pos-screen",
"name": "POS Restaurante",
"level": "screen",
"app": "Restaurante",
"pattern": "restaurant-pos",
"description": "Pantalla completa curada: POS Restaurante. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/restaurant-pos-screen.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "restaurant-kitchen-screen",
"name": "Cocina",
"level": "screen",
"app": "Restaurante",
"pattern": "restaurant-kitchen",
"description": "Pantalla completa curada: Cocina. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/restaurant-kitchen-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "education-dashboard",
"name": "Panel Académico",
"level": "screen",
"app": "Educación",
"pattern": "education-command-center",
"description": "Pantalla completa curada: Panel Académico. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/education-dashboard.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "student-360-screen",
"name": "Alumno 360",
"level": "screen",
"app": "Educación",
"pattern": "education-student-360",
"description": "Pantalla completa curada: Alumno 360. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/student-360-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "crm-pipeline-screen",
"name": "Pipeline Comercial",
"level": "screen",
"app": "CRM",
"pattern": "crm-pipeline",
"description": "Pantalla completa curada: Pipeline Comercial. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/crm-pipeline-screen.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "fleet-dashboard",
"name": "Centro de Flotas",
"level": "screen",
"app": "Flotas",
"pattern": "fleet-live-operations",
"description": "Pantalla completa curada: Centro de Flotas. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/fleet-dashboard.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "fleet-maintenance-screen",
"name": "Mantenimiento Flotas",
"level": "screen",
"app": "Flotas",
"pattern": "fleet-maintenance",
"description": "Pantalla completa curada: Mantenimiento Flotas. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget"
],
"route": "/screens/fleet-maintenance-screen.php",
"interactive": true,
"php84": true,
"mobile_first": true,
"implementation_owner": "APREP UI",
"template_version": "1.1.0"
},
{
"id": "ai-workspace-screen",
"name": "Workspace IA",
"level": "screen",
"app": "General",
"pattern": "ai-workspace",
"description": "Pantalla completa curada: Workspace IA. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/ai-workspace-screen.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
},
{
"id": "analytics-screen",
"name": "Analytics",
"level": "screen",
"app": "General",
"pattern": "analytics-workspace",
"description": "Pantalla completa curada: Analytics. Diseñada para parecer producto maduro, no plantilla genérica.",
"style": [
"refined",
"enterprise",
"editorial-density"
],
"mobile": true,
"dark_mode": true,
"status": "implemented",
"avoid": [
"excessive gradients",
"gratuitous glassmorphism",
"too many equal cards",
"constant animation"
],
"quality_gate": [
"task hierarchy",
"keyboard/focus states",
"responsive composition",
"loading/empty/error states",
"performance budget",
"functional demo",
"responsive navigation",
"light/dark theme",
"loading/empty/error state examples",
"reduced motion support"
],
"route": "/screens/analytics-screen.php",
"implementation_owner": "APREP UI",
"php84": true,
"mobile_first": true,
"interactive": true,
"template_version": "0.7.0",
"reusable_modules": [
"search-filter",
"sortable-table",
"modal",
"drawer",
"toast",
"loading-state",
"empty-state",
"error-state",
"command-palette",
"tabs"
]
}
],
"patterns": [
{
"id": "hotel-operations-dashboard",
"name": "Hotel Operations Dashboard",
"app": "Hotel",
"description": "Composición reutilizable para hotel operations dashboard con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"data-table",
"timeline",
"stepper",
"status-card",
"success-check",
"tabs",
"booking-card",
"vehicle-status"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "implemented"
},
{
"id": "hotel-reservations-workspace",
"name": "Reservas Hotel Workspace",
"app": "Hotel",
"description": "Composición reutilizable para reservas hotel workspace con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"otp-input",
"segmented-control",
"skeleton-card",
"sidebar-nav",
"kanban-card",
"student-progress",
"animated-counter",
"spotlight-card"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "implemented"
},
{
"id": "hotel-room-control",
"name": "Control de Habitaciones",
"app": "Hotel",
"description": "Composición reutilizable para control de habitaciones con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"toast-stack",
"command-palette",
"bottom-nav",
"order-ticket",
"crm-lead",
"marquee",
"ai-thinking",
"generation-progress"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "implemented"
},
{
"id": "executive-dashboard",
"name": "Dashboard Ejecutivo",
"app": "General",
"description": "Composición reutilizable para dashboard ejecutivo con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"kpi-card",
"progress-ring",
"filter-chips",
"floating-input",
"file-drop",
"toast-stack",
"command-palette",
"bottom-nav"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "implemented"
},
{
"id": "restaurant-pos",
"name": "POS Restaurante",
"app": "Restaurante",
"description": "Composición reutilizable para pos restaurante con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"tabs",
"booking-card",
"vehicle-status",
"shimmer-button",
"blur-reveal",
"ai-message",
"swipe-action",
"kpi-with-sparkline"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "restaurant-kitchen",
"name": "Kitchen Command Center",
"app": "Restaurante",
"description": "Composición reutilizable para kitchen command center con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"student-progress",
"animated-counter",
"spotlight-card",
"ai-composer",
"mobile-sheet",
"kpi-delta-compact",
"kpi-comparison",
"bento-executive-grid"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "restaurant-finance",
"name": "Restaurante Finanzas",
"app": "Restaurante",
"description": "Composición reutilizable para restaurante finanzas con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"marquee",
"ai-thinking",
"generation-progress",
"executive-kpi",
"kpi-goal-ring",
"metric-heat-card",
"trend-summary",
"occupancy-gauge"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "education-command-center",
"name": "Centro Académico",
"app": "Educación",
"description": "Composición reutilizable para centro académico con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"ai-message",
"swipe-action",
"kpi-with-sparkline",
"stat-split-card",
"bento-operations-grid",
"revenue-snapshot",
"health-score-card",
"live-operations-card"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "education-student-360",
"name": "Alumno 360",
"app": "Educación",
"description": "Composición reutilizable para alumno 360 con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"kpi-delta-compact",
"kpi-comparison",
"bento-executive-grid",
"activity-pulse",
"goal-tracker",
"executive-summary-banner",
"forecast-kpi",
"compact-dense-table"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "education-attendance",
"name": "Asistencia Inteligente",
"app": "Educación",
"description": "Composición reutilizable para asistencia inteligente con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"metric-heat-card",
"trend-summary",
"occupancy-gauge",
"metric-strip",
"alert-kpi",
"sticky-header-table",
"expandable-row-table",
"saved-filter-views"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "crm-pipeline",
"name": "CRM Pipeline",
"app": "CRM",
"description": "Composición reutilizable para crm pipeline con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"revenue-snapshot",
"health-score-card",
"live-operations-card",
"data-grid-pro",
"responsive-card-table",
"advanced-filter-bar",
"search-with-suggestions",
"cursor-pagination"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
},
{
"id": "crm-account-360",
"name": "Cliente 360",
"app": "CRM",
"description": "Composición reutilizable para cliente 360 con jerarquía editorial, densidad controlada y motion discreto.",
"components": [
"executive-summary-banner",
"forecast-kpi",
"compact-dense-table",
"column-visibility-menu",
"date-range-filter",
"pagination-compact",
"grouped-data-list",
"tree-view"
],
"priority": "recommended",
"mobile_strategy": "Reordenar por tarea, cards táctiles, acciones primarias accesibles con el pulgar.",
"craft_rules": [
"no decorative overload",
"one primary action",
"clear hierarchy",
"purposeful motion"
],
"status": "research-ready"
}
],
"components": [
{
"id": "kpi-card",
"name": "KPI Card",
"category": "Dashboard",
"source": "ReUI / shadcn",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Métrica principal con tendencia, icono y contexto comparativo.",
"tags": [
"kpi",
"métrica",
"ventas"
],
"preview": "kpi",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"dashboard",
"kpi",
"métrica",
"ventas",
"hotel",
"restaurant",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=kpi-card",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "bento-metrics",
"name": "Bento Metrics",
"category": "Dashboard",
"source": "Magic UI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM"
],
"description": "Panel compacto tipo bento para resumir varios indicadores.",
"tags": [
"bento",
"dashboard",
"resumen"
],
"preview": "bento",
"snippet": "...
",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"dashboard",
"bento",
"dashboard",
"resumen",
"hotel",
"restaurant",
"education",
"crm"
],
"preview_url": "component.php?id=bento-metrics",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "mini-chart-card",
"name": "Mini Chart Card",
"category": "Dashboard",
"source": "ReUI",
"apps": [
"Hotel",
"Restaurante",
"CRM",
"Flotas"
],
"description": "Tarjeta KPI con sparkline SVG sin librerías externas.",
"tags": [
"chart",
"sparkline",
"kpi"
],
"preview": "mini-chart",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 3,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"dashboard",
"chart",
"sparkline",
"kpi",
"hotel",
"restaurant",
"crm",
"fleet"
],
"preview_url": "component.php?id=mini-chart-card",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "progress-ring",
"name": "Progress Ring",
"category": "Dashboard",
"source": "Rare UI / custom",
"apps": [
"Educación",
"CRM",
"Flotas"
],
"description": "Progreso circular para metas, cumplimiento o avance.",
"tags": [
"progreso",
"metas",
"score"
],
"preview": "progress-ring",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 3,
"restaurant": 3,
"education": 10,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"dashboard",
"progreso",
"metas",
"score",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=progress-ring",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "stat-list",
"name": "Stat List",
"category": "Dashboard",
"source": "shadcn",
"apps": [
"Hotel",
"Restaurante",
"Educación"
],
"description": "Listado limpio de métricas secundarias con variación.",
"tags": [
"estadísticas",
"lista",
"resumen"
],
"preview": "stat-list",
"snippet": "...
",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 3,
"fleet": 3
},
"selection_hints": [
"dashboard",
"estadísticas",
"lista",
"resumen",
"hotel",
"restaurant",
"education"
],
"preview_url": "component.php?id=stat-list",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "data-table",
"name": "Data Table",
"category": "Data",
"source": "ReUI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM",
"Flotas"
],
"description": "Tabla empresarial responsive con estados y acciones.",
"tags": [
"tabla",
"datos",
"acciones"
],
"preview": "data-table",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"data",
"tabla",
"datos",
"acciones",
"hotel",
"restaurant",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=data-table",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "filter-chips",
"name": "Filter Chips",
"category": "Data",
"source": "Origin UI",
"apps": [
"Hotel",
"Restaurante",
"CRM"
],
"description": "Filtros rápidos con selección múltiple y contador.",
"tags": [
"filtros",
"chips",
"buscar"
],
"preview": "filter-chips",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 3,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"data",
"filtros",
"chips",
"buscar",
"hotel",
"restaurant",
"crm"
],
"preview_url": "component.php?id=filter-chips",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "empty-state",
"name": "Empty State",
"category": "Data",
"source": "shadcn",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM"
],
"description": "Estado vacío accionable para listas sin información.",
"tags": [
"vacío",
"empty",
"cta"
],
"preview": "empty-state",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"data",
"vacío",
"empty",
"cta",
"hotel",
"restaurant",
"education",
"crm"
],
"preview_url": "component.php?id=empty-state",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "timeline",
"name": "Timeline",
"category": "Data",
"source": "ReUI",
"apps": [
"Hotel",
"Educación",
"CRM",
"Flotas"
],
"description": "Historial vertical de eventos, cambios y auditoría.",
"tags": [
"timeline",
"historial",
"auditoría"
],
"preview": "timeline",
"snippet": "...
",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 3,
"education": 10,
"crm": 10,
"fleet": 10
},
"selection_hints": [
"data",
"timeline",
"historial",
"auditoría",
"hotel",
"education",
"crm",
"fleet"
],
"preview_url": "component.php?id=timeline",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "floating-input",
"name": "Floating Input",
"category": "Forms",
"source": "Origin UI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM"
],
"description": "Campo con etiqueta flotante y estado de validación.",
"tags": [
"input",
"formulario",
"floating"
],
"preview": "floating-input",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"forms",
"input",
"formulario",
"floating",
"hotel",
"restaurant",
"education",
"crm"
],
"preview_url": "component.php?id=floating-input",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "otp-input",
"name": "OTP Input",
"category": "Forms",
"source": "Rare UI",
"apps": [
"Hotel",
"Restaurante",
"Educación",
"CRM"
],
"description": "Ingreso OTP con navegación automática entre casillas.",
"tags": [
"otp",
"seguridad",
"login"
],
"preview": "otp",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 10,
"fleet": 3
},
"selection_hints": [
"forms",
"otp",
"seguridad",
"login",
"hotel",
"restaurant",
"education",
"crm"
],
"preview_url": "component.php?id=otp-input",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
},
{
"id": "stepper",
"name": "Stepper",
"category": "Forms",
"source": "ReUI",
"apps": [
"Hotel",
"Restaurante",
"Educación"
],
"description": "Flujo por pasos para reservas, registros u onboarding.",
"tags": [
"pasos",
"wizard",
"formulario"
],
"preview": "stepper",
"snippet": "",
"version": "0.3.0",
"status": "implemented",
"license_status": "APREP implementation; verify upstream inspiration license before importing external code",
"runtime": [
"PHP 8.4",
"HTML5",
"CSS3",
"Vanilla JavaScript"
],
"requirements": {
"react": false,
"node": false,
"npm": false,
"database": false
},
"capabilities": {
"mobile": true,
"dark_mode": true,
"keyboard_accessible": "review",
"reduced_motion": "supported-by-global-tokens"
},
"recommended_for": {
"hotel": 10,
"restaurant": 10,
"education": 10,
"crm": 3,
"fleet": 3
},
"selection_hints": [
"forms",
"pasos",
"wizard",
"formulario",
"hotel",
"restaurant",
"education"
],
"preview_url": "component.php?id=stepper",
"level": "component",
"implementation_owner": "APREP UI",
"php84": true,
"mobile": true,
"dark_mode": true,
"license_policy": "APREP implementation; source attribution is inspiration/reference",
"craft": {
"visual_noise": "low",
"hierarchy": "strong",
"animation": "subtle",
"ai_look_risk": "low"
},
"visual_style": [
"refined",
"professional",
"product-ui"
]
}
],
"effects": [
{
"id": "stagger-reveal",
"name": "Stagger Reveal",
"level": "effect",
"source_id": "aceternity",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "reveal-on-view",
"name": "Reveal On View",
"level": "effect",
"source_id": "aceternity",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "soft-spotlight",
"name": "Soft Spotlight",
"level": "effect",
"source_id": "magic-ui",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "border-beam-quiet",
"name": "Border Beam Quiet",
"level": "effect",
"source_id": "aceternity",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "shimmer-controlled",
"name": "Shimmer Controlled",
"level": "effect",
"source_id": "motion",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "blur-fade",
"name": "Blur Fade",
"level": "effect",
"source_id": "magic-ui",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "hover-lift",
"name": "Hover Lift",
"level": "effect",
"source_id": "motion",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
},
{
"id": "hover-tilt-micro",
"name": "Hover Tilt Micro",
"level": "effect",
"source_id": "magic-ui",
"status": "recipe",
"intensity": "subtle",
"recommended_for": [
"product-ui"
],
"rule": "Motion must communicate state, hierarchy, focus, or causality; never animate continuously without purpose.",
"reduced_motion": true
}
],
"reusable_modules": "/api/modules.php",
"templates_api": "/api/templates.php",
"rules": [
"Prefer implemented functional Screens when available.",
"Inspect an implemented Screen route before composing a new layout.",
"Prefer implemented APREP UI assets.",
"Use research-ready items as design briefs, not copied third-party code.",
"Verify external licenses before literal source reuse.",
"PHP 8.4 + semantic HTML/CSS/native JS by default.",
"Use purposeful motion only.",
"Avoid generic AI aesthetics."
]
}