@decido/ui 0.0.0

package/src/components/landing/landing-waitlist.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import LandingCard from './landing-card'; // Assuming LandingCard is now a React component
+
+interface FormData {
+  placeholder: string;
+  button_text: string;
+}
+
+interface SuccessData {
+  title: string;
+  subtitle: string;
+  message: string;
+}
+
+interface TrustIndicator {
+  icon: string;
+  color: string;
+  text: string;
+}
+
+interface LandingWaitlistProps {
+  data: {
+    title: string;
+    subtitle: string;
+    urgency: string;
+    form: FormData;
+    success: SuccessData;
+    trust_indicators: TrustIndicator[];
+  };
+}
+
+const LandingWaitlist: React.FC<LandingWaitlistProps> = ({ data }) => {
+  const [email, setEmail] = useState('');
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Here you would typically send the email to your backend
+    console.log('Submitting email:', email);
+    setShowSuccess(true);
+    setEmail(''); // Clear the input
+  };
+
+  if (!data) return null;
+
+  return (
+    <div id="waitlist-section" className="scroll-reveal max-w-2xl mx-auto mb-20" style={{ animationDelay: '0.8s' }}>
+      <LandingCard>
+        <div className="absolute inset-0 bg-linear-to-br from-purple-900/20 via-transparent to-cyan-900/20"></div>
+        <div className="relative z-10">
+          <div className="text-center mb-8">
+            <h3 className="text-3xl font-bold mb-4">
+              <span className="gradient-text">{data.title}</span>
+            </h3>
+            <p className="text-gray-300 text-lg">{data.subtitle}</p>
+            <div className="inline-flex items-center mt-4 bg-yellow-900/30 border border-yellow-500/30 rounded-full px-4 py-2 text-sm">
+              <i className="fas fa-fire text-yellow-400 mr-2"></i>
+              <span className="text-yellow-300" dangerouslySetInnerHTML={{ __html: data.urgency }}></span>
+            </div>
+          </div>
+          
+          {!showSuccess ? (
+            <form id="waitlistForm" className="form-premium space-y-6" onSubmit={handleSubmit}>
+              <div className="relative group">
+                <div className="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
+                  <i className="fas fa-envelope text-gray-400 group-focus-within:text-purple-400 transition-colors"></i>
+                </div>
+                <input
+                  type="email"
+                  id="email"
+                  required
+                  placeholder={data.form.placeholder}
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full pl-14 pr-6 py-6 rounded-2xl text-white placeholder-gray-400 text-lg font-medium focus:outline-none"
+                />
+              </div>
+              <button type="submit" className="btn-premium w-full text-white font-bold py-6 px-8 rounded-2xl text-lg relative overflow-hidden group">
+                <span className="relative z-10 flex items-center justify-center">
+                  <i className="fas fa-rocket mr-3"></i>
+                  {data.form.button_text}
+                  <i className="fas fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform"></i>
+                </span>
+              </button>
+            </form>
+          ) : (
+            <div id="successMessage" className="mt-8">
+              <div className="bg-linear-to-r from-green-900/40 to-emerald-900/40 border-2 border-green-500/30 rounded-3xl p-8 text-center">
+                <div className="text-6xl mb-4">🎉</div>
+                <h4 className="text-2xl font-bold text-green-400 mb-3">{data.success.title}</h4>
+                <p className="text-green-300 mb-4 text-lg">{data.success.subtitle}</p>
+                <div className="bg-green-900/30 rounded-xl p-4">
+                  <p className="text-sm text-green-300"><i className="fas fa-check-circle mr-2"></i>{data.success.message}</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="mt-8 text-center">
+            <div className="flex flex-wrap items-center justify-center gap-6 text-sm text-gray-400">
+              {data.trust_indicators.map((indicator, index) => (
+                <div key={index} className="flex items-center">
+                  <i className={`${indicator.icon} mr-2 ${indicator.color}`}></i>
+                  <span>{indicator.text}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </LandingCard>
+    </div>
+  );
+};
+
+export default LandingWaitlist;

package/src/components/theming/ColorPicker.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import { useTheme } from '@decido/shell';
+
+interface ColorPickerProps {
+  label: string;
+  tokenName: string;
+  value: string;
+}
+
+const ColorPicker: React.FC<ColorPickerProps> = ({ label, tokenName, value }) => {
+  const [color, setColor] = useState(value);
+  const { setToken } = useTheme();
+
+  useEffect(() => {
+    setColor(value);
+  }, [value]);
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setColor(newValue);
+    // setToken expects the key name without the --ds- prefix, as defined in useTheme.ts
+    // @ts-ignore
+    setToken(tokenName, newValue);
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <label htmlFor={`color-input-${tokenName}`}>{label}</label>
+      <input
+        id={`color-input-${tokenName}`}
+        type="color"
+        className="w-10 h-8 border-none bg-transparent cursor-pointer"
+        value={color}
+        onChange={handleInput}
+      />
+    </div>
+  );
+};
+
+export default ColorPicker;

package/src/components/theming/ThemePanel.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTheme } from '@decido/shell';
+import ColorPicker from './ColorPicker';
+import DecidoButton from '../DecidoButton';
+
+interface ThemePanelProps {
+  // Define props if any, for now, it takes none.
+}
+
+const ThemePanel: React.FC<ThemePanelProps> = () => {
+  const { currentThemeId, getAllPresets, setTheme } = useTheme();
+  const presets = getAllPresets();
+
+  return (
+    <div className="p-6 glass-card rounded-2xl space-y-8">
+      <div>
+        <h3 className="font-bold text-lg mb-4">Temas Disponibles (Aura)</h3>
+        <div className="flex gap-4 flex-wrap">
+          {presets.map(preset => (
+            //@ts-ignore
+            <DecidoButton 
+              key={preset.id} 
+              onClick={() => setTheme(preset.id)} 
+              className={`btn-secondary ${currentThemeId === preset.id ? 'ring-2 ring-primary' : ''}`}
+            >
+              {preset.name}
+            </DecidoButton>
+          ))}
+        </div>
+      </div>
+      <div>
+        <h3 className="font-bold text-lg mb-4">Personalización Manual</h3>
+        <div className="space-y-3">
+          <ColorPicker label="Superficie Primaria" tokenName="surface-primary" value="#0a0a0f" />
+          <ColorPicker label="Acento Principal" tokenName="accent-blue" value="#4a9eff" />
+          <ColorPicker label="Texto Principal" tokenName="text-primary" value="#e8e8f0" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ThemePanel;

package/src/css/base.css

@@ -0,0 +1,483 @@
+/* /css/base.css */
+@import "@fortawesome/fontawesome-free/css/all.min.css";
+@tailwind base;
+
+/* Define las variables globales (tokens de diseño) para toda la aplicación.
+  Incluye la paleta de colores, tipografías y espaciados base.
+*/
+@layer base {
+  :root {
+    /* Paleta de Colores Principal */
+    --color-primary: 139 92 246;      /* #8B5CF6 */
+    --color-secondary: 6 182 212;     /* #06B6D4 */
+    --color-accent: 245 158 11;       /* #F59E0B */
+    --color-success: 16 185 129;      /* #10B981 */
+    --color-danger: 239 68 68;        /* #EF4444 */
+    --color-info: 59 130 246;         /* #3b82f6 */
+    --color-dark: 15 15 35;           /* #0F0F23 */
+    --color-darker: 7 7 32;           /* #070720 */
+
+    /* Paleta de Fondos */
+    --bg-dark: theme("colors.dark");
+    --bg-darker: theme("colors.darker");
+    --bg-surface: rgba(255, 255, 255, 0.05);
+    --bg-surface-hover: rgba(255, 255, 255, 0.1);
+    --bg-premium: rgba(15, 15, 35, 0.5);
+
+    /* Paleta de Texto */
+    --text-primary: #ffffff;
+    --text-secondary: #9ca3af; /* gray-400 */
+    --text-muted: #6b7280; /* gray-500 */
+    --text-accent: var(--accent);
+
+    /* Tipografía */
+    --font-family-sans: theme("fontFamily.inter");
+    --font-family-mono: theme("fontFamily.mono");
+  }
+
+  body {
+    background-color: var(--bg-darker);
+    color: var(--text-primary);
+    font-family: var(--font-family-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow: hidden; /* Cada panel gestiona su propio scroll */
+  }
+
+  /* Estilos globales para la barra de scroll */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--bg-darker);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, var(--primary), var(--secondary));
+    border-radius: 4px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(to bottom, #7c3aed, #0891b2);
+  }
+}
+/* TODO: Revisar estos estilos son de los temas */
+
+:root {
+  /* Color tokens */
+  --color-primary: #0066cc;
+  --color-secondary: #666666;
+  --color-accent: #ff6b35;
+  --color-background: #ffffff;
+  --color-surface: #f8f9fa;
+  --color-text: #333333;
+  --color-text-secondary: #666666;
+  --color-border: #e1e5e9;
+  --color-success: #28a745;
+  --color-warning: #ffc107;
+  --color-error: #dc3545;
+  --color-info: #17a2b8;
+
+  /* Spacing tokens */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* Typography tokens */
+  --font-family: system-ui, -apple-system, sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+
+  /* Shadow tokens */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* Workbench layout CSS variables */
+:root {
+  --panel-height: 250px;
+  --sidebar-width: 280px;
+  --sidebar-right-width: 350px;
+  --activity-bar-width: 48px;
+  --status-bar-height: 24px;
+  --top-bar-height: 35px;
+}
+
+/* Base workbench styles */
+.workbench-container {
+  font-family: var(--font-family);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.workbench-grid {
+  display: grid;
+  grid-template-columns: var(--activity-bar-width) var(--sidebar-width) 1fr var(--sidebar-right-width);
+  grid-template-rows: var(--top-bar-height) 1fr var(--panel-height) var(--status-bar-height);
+  grid-template-areas:
+    "top-bar top-bar top-bar top-bar"
+    "activity-bar sidebar main sidebar-right"
+    "activity-bar sidebar panel sidebar-right"
+    "status-bar status-bar status-bar status-bar";
+  height: 100vh;
+}
+
+.workbench-grid.sidebar-hidden {
+  grid-template-columns: var(--activity-bar-width) 0 1fr var(--sidebar-right-width);
+}
+
+.workbench-grid.sidebar-right-hidden {
+  grid-template-columns: var(--activity-bar-width) var(--sidebar-width) 1fr 0;
+}
+
+.workbench-grid.panel-hidden {
+  grid-template-rows: var(--top-bar-height) 1fr var(--status-bar-height);
+  grid-template-areas:
+    "top-bar top-bar top-bar top-bar"
+    "activity-bar sidebar main sidebar-right"
+    "status-bar status-bar status-bar status-bar";
+}
+
+/* Activity Bar */
+.activity-bar {
+  grid-area: activity-bar;
+  background-color: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-sm);
+}
+
+.activity-bar-item {
+  width: 32px;
+  height: 32px;
+  margin-bottom: var(--spacing-sm);
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: all 0.2s ease;
+}
+
+.activity-bar-item:hover {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+.activity-bar-item.active {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+/* Sidebar */
+.sidebar {
+  grid-area: sidebar;
+  background-color: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  overflow: hidden;
+}
+
+.sidebar.hidden {
+  display: none;
+}
+
+.sidebar-header {
+  padding: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-title {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  margin: 0;
+}
+
+.sidebar-content {
+  padding: var(--spacing-md);
+  height: calc(100% - 60px);
+  overflow-y: auto;
+}
+
+/* Main content area */
+.main-content {
+  grid-area: main;
+  background-color: var(--color-background);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Editor panes */
+.pane-container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.editor-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  border-right: 1px solid var(--color-border);
+}
+
+.editor-pane:last-child {
+  border-right: none;
+}
+
+.editor-pane.active {
+  border-top: 2px solid var(--color-primary);
+}
+
+.tab-bar {
+  display: flex;
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  min-height: 35px;
+  align-items: center;
+}
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-sm) var(--spacing-md);
+  cursor: pointer;
+  border-right: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+  color: var(--color-text-secondary);
+  transition: all 0.2s ease;
+}
+
+.tab-item:hover {
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.tab-item.active {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  border-bottom: 2px solid var(--color-primary);
+}
+
+.tab-title {
+  margin-left: var(--spacing-sm);
+  margin-right: var(--spacing-sm);
+}
+
+.close-tab-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 2px;
+  transition: all 0.2s ease;
+}
+
+.close-tab-btn:hover {
+  background-color: var(--color-error);
+  color: var(--color-background);
+}
+
+.tab-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Panel */
+.panel {
+  grid-area: panel;
+  background-color: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
+  overflow: hidden;
+}
+
+.panel.hidden {
+  display: none;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  height: 35px;
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.panel-tabs {
+  display: flex;
+  flex: 1;
+}
+
+.panel-tab {
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: all 0.2s ease;
+}
+
+.panel-tab:hover {
+  color: var(--color-text);
+}
+
+.panel-tab.active {
+  color: var(--color-text);
+  border-bottom: 2px solid var(--color-primary);
+}
+
+.panel-content {
+  height: calc(100% - 35px);
+  overflow-y: auto;
+  padding: var(--spacing-md);
+}
+
+/* Status Bar */
+.status-bar {
+  grid-area: status-bar;
+  background-color: var(--color-primary);
+  color: var(--color-background);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--spacing-md);
+  font-size: var(--font-size-sm);
+}
+
+.status-bar-left,
+.status-bar-right {
+  display: flex;
+  align-items: center;
+}
+
+.status-bar-item {
+  margin-right: var(--spacing-md);
+}
+
+/* Top Bar */
+.top-bar {
+  grid-area: top-bar;
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--spacing-md);
+}
+
+.top-bar-section {
+  display: flex;
+  align-items: center;
+}
+
+.top-bar-button {
+  background: none;
+  border: none;
+  padding: var(--spacing-sm);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.top-bar-button:hover {
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+/* Resizers */
+.sidebar-resizer,
+.h-resizer {
+  background-color: var(--color-border);
+  cursor: col-resize;
+  width: 1px;
+  transition: background-color 0.2s ease;
+}
+
+.sidebar-resizer:hover,
+.h-resizer:hover {
+  background-color: var(--color-primary);
+}
+
+.h-resizer {
+  cursor: row-resize;
+  height: 1px;
+  width: 100%;
+}
+
+/* Drag and Drop */
+.dragging {
+  opacity: 0.5;
+}
+
+.drop-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 102, 204, 0.1);
+  border: 2px dashed var(--color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  color: var(--color-primary);
+  z-index: 1000;
+}
+
+.drop-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--color-primary);
+  z-index: 1000;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .workbench-grid {
+    grid-template-columns: var(--activity-bar-width) 1fr;
+    grid-template-areas:
+      "top-bar top-bar"
+      "activity-bar main"
+      "activity-bar panel"
+      "status-bar status-bar";
+  }
+  
+  .sidebar,
+  .sidebar-right {
+    position: fixed;
+    top: var(--top-bar-height);
+    bottom: var(--status-bar-height);
+    left: var(--activity-bar-width);
+    width: 300px;
+    z-index: 1000;
+    box-shadow: var(--shadow-lg);
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+  
+  .sidebar.visible {
+    transform: translateX(0);
+  }
+}