@decido/shell 1.0.0

package/src/store/useShellRegistry.ts

@@ -0,0 +1,123 @@
+/**
+ * useShellRegistry — Centralized registry for shell types.
+ * 
+ * Replaces the scattered `registerMorphComponent` / `getMorphComponent` pattern
+ * with a unified ShellType → Component mapping.
+ * 
+ * Built-in shells: markdown, iframe, shell-vscode, shell-canvas
+ * Plugins register custom shells via `registerShell('my-shell', MyComponent)`
+ */
+import React from 'react';
+
+// ── Shell Types ──
+
+export type BuiltInShellType = 'markdown' | 'iframe' | 'shell-vscode' | 'shell-canvas';
+export type ShellType = BuiltInShellType | (string & {});
+
+/** Props that every shell component receives */
+export interface ShellProps {
+    /** Unique instance ID */
+    instanceId: string;
+    /** Data payload from the morph instance */
+    data: Record<string, any>;
+    /** Current artifacts for this instance */
+    artifacts: MorphArtifact[];
+    /** Index of the active artifact */
+    activeArtifactIndex: number;
+    /** Callback to update artifact data */
+    onArtifactUpdate?: (artifactId: string, data: Record<string, any>) => void;
+}
+
+/** Artifact within a morph instance (file/version) */
+export interface MorphArtifact {
+    id: string;
+    name: string;
+    version: number;
+    shellType: ShellType;
+    data: Record<string, any>;
+    updatedAt: number;
+}
+
+// ── Shell Metadata ──
+
+export interface ShellMeta {
+    icon: string;
+    color: string;
+    label: string;
+}
+
+const shellMetaRegistry = new Map<string, ShellMeta>();
+
+const DEFAULT_SHELL_META: Record<string, ShellMeta> = {
+    'markdown':           { icon: '📝', color: '#10b981', label: 'Markdown' },
+    'iframe':             { icon: '🖥️', color: '#6b7280', label: 'iFrame' },
+    'nexusai-preview':    { icon: '🌐', color: '#3b82f6', label: 'Web Preview' },
+    'shell-vscode':       { icon: '💻', color: '#007acc', label: 'VS Code' },
+    'shell-canvas':       { icon: '🖼️', color: '#f59e0b', label: 'Canvas' },
+    'shell-theme-editor': { icon: '🎨', color: '#a855f7', label: 'Theme Editor' },
+};
+
+// ── Registry ──
+
+const shellRegistry = new Map<string, React.ComponentType<ShellProps>>();
+
+/**
+ * Register a shell type with optional metadata.
+ * Built-in shells are registered at boot. Plugins call this for custom shells.
+ * @example registerShell('my-plugin-viewer', MyViewerComponent, { icon: '🔧', color: '#f00', label: 'My Viewer' })
+ */
+export function registerShell(type: ShellType, component: React.ComponentType<ShellProps>, meta?: ShellMeta) {
+    shellRegistry.set(type, component);
+    if (meta) shellMetaRegistry.set(type, meta);
+    else if (DEFAULT_SHELL_META[type]) shellMetaRegistry.set(type, DEFAULT_SHELL_META[type]);
+}
+
+/**
+ * Resolve a shell type to its React component.
+ * Returns undefined if the shell type is not registered.
+ */
+export function resolveShell(type: ShellType): React.ComponentType<ShellProps> | undefined {
+    return shellRegistry.get(type);
+}
+
+/**
+ * Check if a shell type is registered.
+ */
+export function isShellRegistered(type: ShellType): boolean {
+    return shellRegistry.has(type);
+}
+
+/**
+ * Get all registered shell type IDs (for UI dropdowns).
+ */
+export function getRegisteredShellTypes(): string[] {
+    return Array.from(shellRegistry.keys());
+}
+
+/**
+ * Get metadata for a shell type.
+ */
+export function getShellMeta(type: string): ShellMeta {
+    return shellMetaRegistry.get(type) || { icon: '📦', color: '#71717a', label: type };
+}
+
+// ── Legacy compatibility ──
+// Bridge to the old registerMorphComponent API during migration
+
+/**
+ * @deprecated Use registerShell() instead
+ */
+export function registerMorphComponentCompat(id: string, component: React.ComponentType<any>) {
+    // Wrap legacy components to match ShellProps interface
+    const WrappedComponent: React.ComponentType<ShellProps> = (props) => {
+        return React.createElement(component, { ...(props.data || {}), ...props });
+    };
+    shellRegistry.set(id, WrappedComponent);
+}
+
+/**
+ * @deprecated Use resolveShell() instead
+ */
+export function getMorphComponentCompat(id: string): React.ComponentType<any> | undefined {
+    return shellRegistry.get(id) as React.ComponentType<any> | undefined;
+}

package/src/store/useSuggestionsStore.ts

@@ -0,0 +1,57 @@
+/**
+ * useSuggestionsStore — Zustand store for managing chat suggestions.
+ * 
+ * Supports: seed phrases (user CRUD), AI-generated suggestions,
+ * and plugin-registered suggestions via SDK.
+ */
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface SuggestionsState {
+    seeds: string[];
+    generated: string[];
+    pluginSuggestions: Record<string, string[]>;
+
+    addSeed: (seed: string) => void;
+    removeSeed: (index: number) => void;
+    updateSeed: (index: number, value: string) => void;
+    setGenerated: (suggestions: string[]) => void;
+    registerPluginSuggestions: (pluginId: string, items: string[]) => void;
+    unregisterPluginSuggestions: (pluginId: string) => void;
+    getAllSuggestions: () => string[];
+}
+
+export const useSuggestionsStore = create<SuggestionsState>()(
+    persist(
+        (set, get) => ({
+            seeds: [
+                'Explícame cómo funciona este flujo',
+                'Crea un grafo de onboarding',
+                'Analiza el rendimiento del sistema',
+            ],
+            generated: [],
+            pluginSuggestions: {},
+
+            addSeed: (seed) => set(s => ({ seeds: [...s.seeds, seed] })),
+            removeSeed: (index) => set(s => ({ seeds: s.seeds.filter((_, i) => i !== index) })),
+            updateSeed: (index, value) => set(s => ({
+                seeds: s.seeds.map((seed, i) => i === index ? value : seed)
+            })),
+            setGenerated: (suggestions) => set({ generated: suggestions }),
+            registerPluginSuggestions: (pluginId, items) => set(s => ({
+                pluginSuggestions: { ...s.pluginSuggestions, [pluginId]: items }
+            })),
+            unregisterPluginSuggestions: (pluginId) => set(s => {
+                const next = { ...s.pluginSuggestions };
+                delete next[pluginId];
+                return { pluginSuggestions: next };
+            }),
+            getAllSuggestions: () => {
+                const s = get();
+                const plugin = Object.values(s.pluginSuggestions).flat();
+                return [...s.generated, ...s.seeds, ...plugin];
+            },
+        }),
+        { name: 'decido-suggestions-store' }
+    )
+);

package/src/store/useThemeStore.ts

@@ -0,0 +1,399 @@
+/**
+ * Decido Aura — Theme Store
+ *
+ * Consolidated Zustand store for runtime theme management.
+ * Sets `--ds-*` CSS custom properties on `:root` which are
+ * read by the TW4 `@theme` contract in tokens.css.
+ *
+ * Usage:
+ *   const { setTheme, currentTheme } = useTheme();
+ *   setTheme('midnight-blue');
+ */
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+// ── Types ──
+
+export interface ThemeTokens {
+  /* Surface */
+  'surface-primary': string;
+  'surface-secondary': string;
+  'surface-tertiary': string;
+  'surface-elevated': string;
+  'surface-glass': string;
+  'surface-overlay': string;
+  /* Text */
+  'text-primary': string;
+  'text-secondary': string;
+  'text-muted': string;
+  'text-inverse': string;
+  /* Accent */
+  'accent-blue': string;
+  'accent-purple': string;
+  'accent-green': string;
+  'accent-red': string;
+  'accent-amber': string;
+  'accent-cyan': string;
+  /* Border */
+  'border-subtle': string;
+  'border-default': string;
+  'border-strong': string;
+  'border-glow': string;
+  /* Status */
+  'status-ok': string;
+  'status-warn': string;
+  'status-error': string;
+  'status-info': string;
+}
+
+export interface ThemeMeta {
+  'radius-xs': string;
+  'radius-sm': string;
+  'radius-md': string;
+  'radius-lg': string;
+  'radius-xl': string;
+  'blur-xs': string;
+  'blur-sm': string;
+  'blur-md': string;
+  'blur-lg': string;
+  'blur-xl': string;
+  'font-sans': string;
+  'font-mono': string;
+}
+
+export interface ThemePreset {
+  id: string;
+  name: string;
+  description: string;
+  preview: { bg: string; accent: string; text: string };
+  tokens: ThemeTokens;
+  meta: ThemeMeta;
+}
+
+// ── Default Meta ──
+
+const DEFAULT_META: ThemeMeta = {
+  'radius-xs': '4px',
+  'radius-sm': '6px',
+  'radius-md': '10px',
+  'radius-lg': '16px',
+  'radius-xl': '24px',
+  'blur-xs': '4px',
+  'blur-sm': '8px',
+  'blur-md': '16px',
+  'blur-lg': '24px',
+  'blur-xl': '40px',
+  'font-sans': "'Inter', 'system-ui', sans-serif",
+  'font-mono': "'JetBrains Mono', 'Fira Code', monospace",
+};
+
+// ── Presets ──
+
+export const THEME_DECIDO_DARK: ThemePreset = {
+  id: 'decido-dark',
+  name: 'Decido Dark',
+  description: 'Tema por defecto — oscuro con acentos púrpura y cyan',
+  preview: { bg: '#0a0a0f', accent: '#a855f7', text: '#e8e8f0' },
+  tokens: {
+    'surface-primary': '#0a0a0f',
+    'surface-secondary': '#12121a',
+    'surface-tertiary': '#1a1a26',
+    'surface-elevated': '#22222e',
+    'surface-glass': 'rgba(255, 255, 255, 0.03)',
+    'surface-overlay': 'rgba(0, 0, 0, 0.6)',
+    'text-primary': '#e8e8f0',
+    'text-secondary': '#9898b0',
+    'text-muted': '#5a5a72',
+    'text-inverse': '#0a0a0f',
+    'accent-blue': '#4a9eff',
+    'accent-purple': '#a855f7',
+    'accent-green': '#34d399',
+    'accent-red': '#f87171',
+    'accent-amber': '#fbbf24',
+    'accent-cyan': '#22d3ee',
+    'border-subtle': 'rgba(255, 255, 255, 0.06)',
+    'border-default': 'rgba(255, 255, 255, 0.1)',
+    'border-strong': 'rgba(255, 255, 255, 0.2)',
+    'border-glow': 'rgba(168, 85, 247, 0.5)',
+    'status-ok': '#34d399',
+    'status-warn': '#fbbf24',
+    'status-error': '#f87171',
+    'status-info': '#4a9eff',
+  },
+  meta: DEFAULT_META,
+};
+
+export const THEME_MIDNIGHT_BLUE: ThemePreset = {
+  id: 'midnight-blue',
+  name: 'Midnight Blue',
+  description: 'Azul profundo con tonos slate',
+  preview: { bg: '#0b1120', accent: '#3b82f6', text: '#f1f5f9' },
+  tokens: {
+    'surface-primary': '#0b1120',
+    'surface-secondary': '#111827',
+    'surface-tertiary': '#1e293b',
+    'surface-elevated': '#273548',
+    'surface-glass': 'rgba(30, 41, 59, 0.5)',
+    'surface-overlay': 'rgba(11, 17, 32, 0.7)',
+    'text-primary': '#f1f5f9',
+    'text-secondary': '#94a3b8',
+    'text-muted': '#64748b',
+    'text-inverse': '#0b1120',
+    'accent-blue': '#3b82f6',
+    'accent-purple': '#8b5cf6',
+    'accent-green': '#22c55e',
+    'accent-red': '#ef4444',
+    'accent-amber': '#f59e0b',
+    'accent-cyan': '#06b6d4',
+    'border-subtle': 'rgba(148, 163, 184, 0.06)',
+    'border-default': 'rgba(148, 163, 184, 0.12)',
+    'border-strong': 'rgba(148, 163, 184, 0.25)',
+    'border-glow': 'rgba(59, 130, 246, 0.5)',
+    'status-ok': '#22c55e',
+    'status-warn': '#f59e0b',
+    'status-error': '#ef4444',
+    'status-info': '#3b82f6',
+  },
+  meta: DEFAULT_META,
+};
+
+export const THEME_EMERALD_NOIR: ThemePreset = {
+  id: 'emerald-noir',
+  name: 'Emerald Noir',
+  description: 'Oscuro con acentos esmeralda',
+  preview: { bg: '#0a0f0d', accent: '#34d399', text: '#ecfdf5' },
+  tokens: {
+    'surface-primary': '#0a0f0d',
+    'surface-secondary': '#0f1a15',
+    'surface-tertiary': '#162620',
+    'surface-elevated': '#1e332b',
+    'surface-glass': 'rgba(22, 38, 32, 0.5)',
+    'surface-overlay': 'rgba(10, 15, 13, 0.7)',
+    'text-primary': '#ecfdf5',
+    'text-secondary': '#a7f3d0',
+    'text-muted': '#6ee7b7',
+    'text-inverse': '#0a0f0d',
+    'accent-blue': '#2dd4bf',
+    'accent-purple': '#a78bfa',
+    'accent-green': '#34d399',
+    'accent-red': '#fb7185',
+    'accent-amber': '#fbbf24',
+    'accent-cyan': '#2dd4bf',
+    'border-subtle': 'rgba(167, 243, 208, 0.06)',
+    'border-default': 'rgba(167, 243, 208, 0.12)',
+    'border-strong': 'rgba(167, 243, 208, 0.25)',
+    'border-glow': 'rgba(52, 211, 153, 0.5)',
+    'status-ok': '#34d399',
+    'status-warn': '#fbbf24',
+    'status-error': '#fb7185',
+    'status-info': '#2dd4bf',
+  },
+  meta: DEFAULT_META,
+};
+
+export const THEME_ROSE_GOLD: ThemePreset = {
+  id: 'rose-gold',
+  name: 'Rose Gold',
+  description: 'Elegante con tonos rosa y dorado',
+  preview: { bg: '#120a0d', accent: '#f472b6', text: '#fdf2f8' },
+  tokens: {
+    'surface-primary': '#120a0d',
+    'surface-secondary': '#1a1015',
+    'surface-tertiary': '#26161e',
+    'surface-elevated': '#331c28',
+    'surface-glass': 'rgba(38, 22, 30, 0.5)',
+    'surface-overlay': 'rgba(18, 10, 13, 0.7)',
+    'text-primary': '#fdf2f8',
+    'text-secondary': '#f9a8d4',
+    'text-muted': '#f472b6',
+    'text-inverse': '#120a0d',
+    'accent-blue': '#e879f9',
+    'accent-purple': '#f472b6',
+    'accent-green': '#34d399',
+    'accent-red': '#fb7185',
+    'accent-amber': '#fcd34d',
+    'accent-cyan': '#e879f9',
+    'border-subtle': 'rgba(249, 168, 212, 0.06)',
+    'border-default': 'rgba(249, 168, 212, 0.12)',
+    'border-strong': 'rgba(249, 168, 212, 0.25)',
+    'border-glow': 'rgba(244, 114, 182, 0.5)',
+    'status-ok': '#34d399',
+    'status-warn': '#fcd34d',
+    'status-error': '#fb7185',
+    'status-info': '#e879f9',
+  },
+  meta: DEFAULT_META,
+};
+
+export const THEME_OLED_PURE: ThemePreset = {
+  id: 'oled-pure',
+  name: 'OLED Pure',
+  description: 'Negro absoluto para pantallas OLED',
+  preview: { bg: '#000000', accent: '#a855f7', text: '#ffffff' },
+  tokens: {
+    'surface-primary': '#000000',
+    'surface-secondary': '#0a0a0a',
+    'surface-tertiary': '#141414',
+    'surface-elevated': '#1e1e1e',
+    'surface-glass': 'rgba(255, 255, 255, 0.02)',
+    'surface-overlay': 'rgba(0, 0, 0, 0.8)',
+    'text-primary': '#ffffff',
+    'text-secondary': '#a0a0a0',
+    'text-muted': '#666666',
+    'text-inverse': '#000000',
+    'accent-blue': '#4a9eff',
+    'accent-purple': '#a855f7',
+    'accent-green': '#34d399',
+    'accent-red': '#f87171',
+    'accent-amber': '#fbbf24',
+    'accent-cyan': '#22d3ee',
+    'border-subtle': 'rgba(255, 255, 255, 0.04)',
+    'border-default': 'rgba(255, 255, 255, 0.08)',
+    'border-strong': 'rgba(255, 255, 255, 0.15)',
+    'border-glow': 'rgba(168, 85, 247, 0.5)',
+    'status-ok': '#4ade80',
+    'status-warn': '#fbbf24',
+    'status-error': '#f87171',
+    'status-info': '#4a9eff',
+  },
+  meta: DEFAULT_META,
+};
+
+// ── Light Theme ──
+
+export const THEME_DECIDO_LIGHT: ThemePreset = {
+  id: 'decido-light',
+  name: 'Decido Light',
+  description: 'Tema claro premium — ideal para trabajo diurno',
+  preview: { bg: '#f8f9fb', accent: '#6366f1', text: '#1a1a2e' },
+  tokens: {
+    'surface-primary': '#f8f9fb',
+    'surface-secondary': '#ffffff',
+    'surface-tertiary': '#eef0f4',
+    'surface-elevated': '#ffffff',
+    'surface-glass': 'rgba(0, 0, 0, 0.03)',
+    'surface-overlay': 'rgba(0, 0, 0, 0.4)',
+    'text-primary': '#1a1a2e',
+    'text-secondary': '#64648c',
+    'text-muted': '#9898b0',
+    'text-inverse': '#ffffff',
+    'accent-blue': '#3b82f6',
+    'accent-purple': '#6366f1',
+    'accent-green': '#10b981',
+    'accent-red': '#ef4444',
+    'accent-amber': '#f59e0b',
+    'accent-cyan': '#06b6d4',
+    'border-subtle': 'rgba(0, 0, 0, 0.06)',
+    'border-default': 'rgba(0, 0, 0, 0.12)',
+    'border-strong': 'rgba(0, 0, 0, 0.2)',
+    'border-glow': 'rgba(99, 102, 241, 0.4)',
+    'status-ok': '#10b981',
+    'status-warn': '#f59e0b',
+    'status-error': '#ef4444',
+    'status-info': '#3b82f6',
+  },
+  meta: DEFAULT_META,
+};
+
+// ── All presets ──
+
+export const THEME_PRESETS: ThemePreset[] = [
+  THEME_DECIDO_DARK,
+  THEME_DECIDO_LIGHT,
+  THEME_MIDNIGHT_BLUE,
+  THEME_EMERALD_NOIR,
+  THEME_ROSE_GOLD,
+  THEME_OLED_PURE,
+];
+
+// ── Inject helper ──
+
+function injectTokens(tokens: ThemeTokens, meta: ThemeMeta) {
+  const root = document.documentElement;
+  Object.entries(tokens).forEach(([key, value]) => {
+    root.style.setProperty(`--ds-${key}`, value);
+  });
+  Object.entries(meta).forEach(([key, value]) => {
+    root.style.setProperty(`--ds-${key}`, value);
+  });
+}
+
+// ── Store ──
+
+interface ThemeState {
+  currentThemeId: string;
+  customPresets: ThemePreset[];
+  /* Actions */
+  setTheme: (themeId: string) => void;
+  setToken: (name: keyof ThemeTokens, value: string) => void;
+  addPreset: (preset: ThemePreset) => void;
+  inject: () => void;
+  exportCSS: () => string;
+  /* Getters */
+  getCurrentPreset: () => ThemePreset;
+  getAllPresets: () => ThemePreset[];
+}
+
+export const useTheme = create<ThemeState>()(
+  persist(
+    (set, get) => ({
+      currentThemeId: 'decido-dark',
+      customPresets: [],
+
+      setTheme: (themeId) => {
+        set({ currentThemeId: themeId });
+        const preset = get().getCurrentPreset();
+        injectTokens(preset.tokens, preset.meta);
+      },
+
+      setToken: (name, value) => {
+        document.documentElement.style.setProperty(`--ds-${name}`, value);
+      },
+
+      addPreset: (preset) => {
+        set((s) => ({
+          customPresets: [...s.customPresets.filter((p) => p.id !== preset.id), preset],
+        }));
+      },
+
+      inject: () => {
+        const preset = get().getCurrentPreset();
+        injectTokens(preset.tokens, preset.meta);
+      },
+
+      exportCSS: () => {
+        const preset = get().getCurrentPreset();
+        const lines = [`:root {`];
+        Object.entries(preset.tokens).forEach(([k, v]) => {
+          lines.push(`  --ds-${k}: ${v};`);
+        });
+        Object.entries(preset.meta).forEach(([k, v]) => {
+          lines.push(`  --ds-${k}: ${v};`);
+        });
+        lines.push(`}`);
+        return lines.join('\n');
+      },
+
+      getCurrentPreset: () => {
+        const { currentThemeId, customPresets } = get();
+        return (
+          [...THEME_PRESETS, ...customPresets].find((p) => p.id === currentThemeId) ??
+          THEME_DECIDO_DARK
+        );
+      },
+
+      getAllPresets: () => {
+        return [...THEME_PRESETS, ...get().customPresets];
+      },
+    }),
+    {
+      name: 'decido-aura-theme',
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          // Re-inject theme on page load
+          setTimeout(() => state.inject(), 0);
+        }
+      },
+    }
+  )
+);