@decido/ui 0.0.0

package/src/css/layout.css

@@ -0,0 +1,289 @@
+/* /css/layout.css */
+
+/* Variables específicas del layout */
+:root {
+  --sidebar-width: 320px;
+  --sidebar-right-width: 350px;
+  --activity-bar-width: 50px;
+  --status-bar-height: 25px;
+  --panel-height: 250px;
+  --resizer-width: 5px;
+  --top-bar-height: 48px;
+}
+
+/* #region estructura del Grid */
+#app-grid-layout {
+  height: 100%;
+  width: 100%;
+  display: grid;
+
+  /* 6 columnas: activity, sidebar, resizer, main, resizer, sidebar-right */
+  grid-template-columns:
+    var(--activity-bar-width) var(--sidebar-width) var(--resizer-width) 1fr var(--resizer-width) var(--sidebar-right-width);
+
+  grid-template-rows:
+    var(--top-bar-height) 1fr var(--resizer-width) var(--panel-height) var(--status-bar-height);
+
+  grid-template-areas:
+    "top-bar top-bar top-bar top-bar top-bar top-bar"
+    "activity sidebar v-resizer main v-resizer-right sidebar-right"
+    "activity panel-resizer panel-resizer panel-resizer panel-resizer panel-resizer"
+    "activity panel panel panel panel panel"
+    "statusbar statusbar statusbar statusbar statusbar statusbar";
+
+  background-color: var(--bg-darker);
+  /* transition: grid-template-columns 0.2s ease-in-out; */
+}
+
+/* #endregion */
+
+/* #region Asignación de Áreas Grid --- */
+#app-top-bar {
+  grid-area: top-bar;
+}
+
+#app-activity-bar {
+  grid-area: activity;
+}
+
+#app-sidebar {
+  grid-area: sidebar;
+}
+
+#app-sidebar-resizer {
+  grid-area: v-resizer;
+}
+
+#app-main {
+  grid-area: main;
+  overflow: hidden;
+}
+
+#app-sidebar-right-resizer {
+  grid-area: v-resizer-right;
+}
+
+#app-sidebar-right {
+  grid-area: sidebar-right;
+}
+
+#app-panel-resize-handle {
+  grid-area: panel-resizer;
+}
+
+#app-panel {
+  grid-area: panel;
+}
+
+#app-status-bar {
+  grid-area: statusbar;
+}
+
+/* #endregion */
+
+/* --- Estilos de los Paneles Principales --- */
+
+/* #region topbar */
+#app-top-bar {
+  @apply border-b border-white/5 flex items-center justify-between px-4;
+}
+
+.top-bar-section {
+  @apply flex items-center gap-2;
+}
+
+.top-bar-button {
+  @apply w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:bg-white/10 hover:text-white transition-colors;
+}
+
+/* .top-bar-button.active {
+  @apply bg-primary/20 text-primary;
+} */
+
+.top-bar-separator {
+  @apply w-px h-6 bg-white/10 mx-2;
+}
+
+/* #endregion */
+
+/* #region Activity bar */
+/* #app-activity-bar {
+  @apply bg-darker flex flex-col items-center py-2 gap-2 border-r border-white/5;
+} */
+
+.logo-icon {
+  @apply mb-4;
+}
+
+.activity-bar-item {
+  @apply w-10 h-10 flex items-center justify-center text-xl rounded-lg text-gray-500 relative transition-all duration-200;
+}
+
+.activity-bar-item:hover {
+  @apply bg-white/10 text-white;
+}
+
+/* .activity-bar-item.active {
+  @apply bg-primary/20 text-primary;
+} */
+
+.activity-bar-item.active::before {
+  content: "";
+  @apply absolute left-0 top-1/4 h-1/2 w-1 bg-primary rounded-r-full;
+}
+
+/* #endregion */
+
+/* #region Sidebar left --- */
+/* #app-sidebar {
+  @apply bg-dark flex flex-col overflow-hidden;
+} */
+
+#app-sidebar.hidden {
+  width: 0px;
+  min-width: 0px;
+  border-right: none;
+}
+
+.sidebar-header {
+  @apply p-4 flex justify-between items-center border-b border-white/5 flex-shrink-0;
+}
+
+.sidebar-title {
+  @apply text-sm uppercase font-bold text-gray-400 tracking-wider;
+}
+
+.sidebar-close-btn {
+  @apply text-gray-500 hover:text-white;
+}
+
+.sidebar-content {
+  @apply p-4 overflow-y-auto flex-grow;
+}
+
+/* #endregion */
+
+/* #region Sidebar right --- */
+/* #app-sidebar-right {
+  @apply bg-dark flex flex-col overflow-hidden border-l border-white/5;
+} */
+
+#app-sidebar-right.hidden {
+  width: 0px;
+  min-width: 0px;
+  border-right: none;
+}
+
+/* #endregion */
+
+/* #app-panel {
+  @apply bg-dark flex flex-col overflow-hidden;
+} */
+
+/* #app-status-bar {
+  @apply bg-primary/10 text-xs text-gray-400 border-t border-white/5 flex items-center justify-between px-4;
+} */
+
+/* Estilos para los separadores redimensionables */
+.sidebar-resizer.v-resizer {
+  background: var(--bg-darker);
+  cursor: col-resize;
+  transition: background-color 0.2s;
+}
+
+.sidebar-resizer.v-resizer:hover {
+  background: var(--primary);
+}
+
+#app-panel-resize-handle {
+  background: var(--bg-darker);
+  cursor: row-resize;
+  transition: background-color 0.2s;
+}
+
+#app-panel-resize-handle:hover {
+  background: var(--primary);
+}
+
+/* --- Lógica para Ocultar Paneles --- */
+#app-grid-layout.sidebar-hidden {
+  grid-template-columns:
+    var(--activity-bar-width) 0px 0px 1fr var(--resizer-width) var(--sidebar-right-width);
+}
+
+#app-grid-layout.sidebar-right-hidden {
+  grid-template-columns:
+    var(--activity-bar-width) var(--sidebar-width) var(--resizer-width) 1fr 0px 0px;
+}
+
+#app-grid-layout.panel-hidden {
+  grid-template-rows: var(--top-bar-height) 1fr 0px 0px var(--status-bar-height);
+}
+
+
+/* --- Estilos para Redimensionamiento (Resizer/Splitter) --- */
+.pane-resizer {
+  flex: 0 0 5px;
+  background: var(--bg-main);
+  cursor: col-resize;
+  transition: background-color 0.2s;
+  z-index: 10;
+}
+
+.pane-resizer:hover {
+  background: var(--color-primary);
+}
+
+/* --- Estilos para Arrastrar y Soltar (Drag & Drop) --- */
+.tab-item.dragging {
+  opacity: 0.4;
+  background: var(--color-primary);
+}
+
+.drop-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--color-primary);
+  pointer-events: none;
+  z-index: 20;
+}
+
+.drop-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(var(--color-primary-rgb, 0, 122, 204), 0.2);
+  border: 2px dashed var(--color-primary);
+  pointer-events: none;
+  z-index: 20;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-primary);
+}
+
+/* --- Fix: Ensure Editor Pane and Tab Content take full height --- */
+.editor-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.tab-content {
+  flex-grow: 1;
+  height: 0;
+  /* Important for flex child scrolling/containment */
+  width: 100%;
+  position: relative;
+}
+
+/* Fix for Custom Element Wrapper (React Mount Point) */
+.tab-content>* {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

package/src/css/login-view.css

@@ -0,0 +1,45 @@
+.login-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh; /* Full viewport height */
+    width: 100vw; /* Full viewport width */
+    position: fixed; /* Cover the entire page */
+    top: 0;
+    left: 0;
+    background: var(--darker);
+}
+.login-box {
+    max-width: 400px;
+    width: 100%;
+    padding: 3rem;
+    background: var(--dark);
+    border-radius: 16px;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+}
+.login-title {
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 2rem;
+}
+.login-form .form-group {
+    margin-bottom: 1.5rem;
+}
+.login-form .form-actions {
+    margin-top: 2rem;
+}
+.register-link {
+    text-align: center;
+    margin-top: 1.5rem;
+}
+.register-link a {
+    color: var(--secondary);
+    text-decoration: none;
+    font-weight: 500;
+}
+.register-link a:hover {
+    text-decoration: underline;
+}

package/src/css/style.css

@@ -0,0 +1,20 @@
+/* /css/style.css (Punto de Entrada Principal) */
+
+/* 1. Fundamentos y variables de diseño */
+@import url("./base.css");
+
+/* 2. Estructura principal de la aplicación */
+@import url("./layout.css");
+
+/* 3. Estilos para componentes reutilizables */
+@import url("./components.css");
+
+/* 4. Estilos para herramientas de desarrollo (opcional) */
+@import url("./debug-panel.css");
+
+/* 5. Estilos específicos de módulos (si los hubiera globales) */
+/* Idealmente, estos se cargan desde el propio módulo */
+/* @import url("../src/modules/decido.marketplace/styles/marketplace.css"); */
+
+/* 6. Estilos estructurales del Workbench */
+@import url("./workbench.css");

package/src/css/welcome-view.css

@@ -0,0 +1,56 @@
+.welcome-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: var(--text-primary);
+}
+.logo {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    border-radius: 24px;
+    padding: 20px;
+    margin-bottom: 2rem;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+.logo i {
+    font-size: 4rem;
+    color: white;
+}
+.welcome-title {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+.welcome-subtitle {
+    font-size: 1.2rem;
+    color: var(--text-secondary);
+    margin-bottom: 3rem;
+}
+.quick-links-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    max-width: 650px;
+}
+.quick-link {
+    background: var(--bg-content);
+    border: 1px solid var(--border-color);
+    padding: 1.5rem;
+    border-radius: 12px;
+    text-decoration: none;
+    color: var(--text-secondary);
+    transition: all 0.2s ease-in-out;
+}
+.quick-link:hover {
+    transform: translateY(-5px);
+    background: var(--bg-main);
+    color: var(--primary);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+.quick-link i {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+    display: block;
+}