this.gui 1.3.22 → 1.3.26

package/src/gui/Theme/fromTokens.ts

@@ -0,0 +1,273 @@
+// src/themes/fromTokens.ts
+import { createTheme, type Theme } from '@mui/material/styles';
+import { buildShadows } from '@/gui/Theme/styles/buildShadows';
+// Helpers ------------------------------------------------------------
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    section: {
+      default: string;
+      subtle: string;
+      strong: string;
+    };
+    blur: {
+      light: string;
+      medium: string;
+      heavy: string;
+      all: string;
+    };
+  }
+  interface PaletteOptions {
+    section?: {
+      default?: string;
+      subtle?: string;
+      strong?: string;
+    };
+    blur?: {
+      light?: string;
+      medium?: string;
+      heavy?: string;
+      all?: string;
+    };
+  }
+}
+
+export const pxToRem = (n: number): string => `${n / 16}rem`;
+const pick = <T = any,>(obj: any, path: Array<string | number>, fallback?: T): T => {
+  // Safely read nested token value supporting multiple token shapes
+  // - Tokens Studio style: { $value: '...' }
+  // - simple style: { value: '...' }
+  // - raw primitive values
+  const raw = path.reduce<any>((acc, k) => (acc && acc[k] !== undefined ? acc[k] : undefined), obj) ?? undefined;
+  if (raw && typeof raw === 'object') {
+    if ('$value' in raw) return (raw as any).$value as T;
+    if ('value' in raw) return (raw as any).value as T;
+  }
+  return (raw ?? fallback) as T;
+};
+
+const readNumber = (v: unknown, fb: number): number => {
+  if (v === undefined || v === null) return fb;
+  const n = typeof v === 'string' ? parseFloat(v) : (v as number);
+  return Number.isFinite(n) ? (n as number) : fb;
+};
+
+// Main compiler ------------------------------------------------------
+export function makeMuiTheme(themeTokens: any, modeTokens: any, mode: 'light' | 'dark' = 'light'): Theme {
+  const g = themeTokens || {};
+  const c = modeTokens?.color || {};
+  const blurTokens = pick(modeTokens, ['blur'], pick(c, ['blur'], undefined));
+  const blurRadiusTokens =
+    pick(g, ['blur', 'radius'], undefined) ??
+    pick(g, ['custom', 'blurRadius'], undefined) ??
+    pick(g, ['blurRadius'], undefined);
+  // Core primitives
+  const radius = readNumber(pick(g, ['radius', 'md'], 10), 10);
+  const spacing = readNumber(pick(g, ['spacing', 'base'], 8), 8);
+  const fontFamily = pick<string>(g, ['font', 'family'], 'Roboto, sans-serif');
+  const borderDefault =
+    pick<string | undefined>(g, ['border', 'default'], undefined) ??
+    (mode === 'dark' ? 'rgb(45,45,55)' : 'rgba(0,0,0,0.08)');
+  // Extended tokens
+  const semantic = modeTokens?.extendedColors || modeTokens?.semantic || {};
+  const gradients = semantic?.gradients || {};
+  const overlays = semantic?.overlays || {};
+  const zIndexTokens = g.zIndex || {};
+  const breakpointsTokens = g.breakpoints || {};
+  const motion = g.motion || {};
+  const opacity = g.opacity || {};
+  const iconSizes = g.iconSizes || {};
+  const lineHeights = g.lineHeights || {};
+  const shadowsTokens = g.shadows;
+  // Build MUI theme
+  const theme = createTheme({
+    // Palette accepts custom keys like `link` and `background.nav` in our design system,
+    // so we cast to any to avoid fighting MUI's strict palette types.
+    palette: {
+      mode,
+      primary: { main: pick(c, ['primary'], '#1976d2') },
+      secondary: { main: pick(c, ['secondary'], '#9c27b0') },
+      icon: { main: pick(c, ['icon'], '#5e5e5e') },
+      background: {
+        default: pick(c, ['background','default'], mode === 'dark' ? '#121214' : '#f8f9fa'),
+        paper: pick(c, ['background','paper'], mode === 'dark' ? '#181a1c' : '#fff'),
+        nav: pick(c, ['background','nav'], mode === 'dark' ? '#16181a' : '#fdfdfd'),
+      },
+      text: {
+        primary: pick(c, ['textPrimary'], mode === 'dark' ? '#fff' : '#111'),
+        secondary: pick(
+          c,
+          ['textSecondary'],
+          mode === 'dark' ? 'rgba(255,255,255,0.7)' : '#444'
+        ),
+      },
+      link: {
+        main: pick(c, ['link'], mode === 'dark' ? '#00aa96' : '#008c7d'),
+        visited: pick(c, ['linkVisited'], mode === 'dark' ? '#008278' : '#006e64'),
+      },
+      error:   { main: pick(semantic, ['error'],   mode === 'dark' ? '#ef5350' : '#d32f2f') },
+      warning: { main: pick(semantic, ['warning'], '#ed6c02') },
+      info:    { main: pick(semantic, ['info'],    '#0288d1') },
+      success: { main: pick(semantic, ['success'], '#2e7d32') },
+      divider: pick(c, ['border'], borderDefault),
+      action: {
+        hoverOpacity:     readNumber(pick(opacity, ['hover'],     0.08), 0.08),
+        selectedOpacity:  readNumber(pick(opacity, ['selected'],  0.12), 0.12),
+        disabledOpacity:  readNumber(pick(opacity, ['disabled'],  0.38), 0.38),
+        focusOpacity:     readNumber(pick(opacity, ['focus'],     0.12), 0.12),
+        activatedOpacity: readNumber(pick(opacity, ['activated'], 0.12), 0.12),
+      },
+      section: mode === 'dark' ? {
+        default: '#121212',
+        subtle: '#1a1a1a',
+        strong: '#202020',
+      } : {
+        default: '#f9f9fb',
+        subtle: '#ffffff',
+        strong: '#f0f2f5',
+      },
+      blur: blurTokens ?? (
+        mode === 'dark'
+          ? {
+              light: 'rgba(25, 37, 36, 1)',
+              medium: 'rgba(25, 37, 36, 1)',
+              heavy: 'rgba(25, 37, 36, 1)',
+              all: 'rgba(25, 37, 36, 1)',
+            }
+          : {
+              light: 'rgba(255, 245, 250, 1)',
+              medium: 'rgba(255, 240, 245, 1)',
+              heavy: 'rgba(255, 235, 240, 1)',
+              all: 'rgba(255, 220, 230, 1)',
+            }
+      ),
+    },
+    // All tokens exposed under theme.custom for easy access
+    custom: {
+      border: pick(c, ['border'], borderDefault),
+      gradients,
+      overlays,
+      iconSizes,
+      lineHeights,
+      blurRadius: {
+        light: pick(blurRadiusTokens, ['light'], '6px'),
+        medium: pick(blurRadiusTokens, ['medium'], '12px'),
+        heavy: pick(blurRadiusTokens, ['heavy'], '24px'),
+        all: pick(blurRadiusTokens, ['all'], '32px'),
+      },
+    },
+    shape: { borderRadius: Number.isFinite(radius) ? (radius as number) : 10 },
+    spacing: Number.isFinite(spacing) ? (spacing as number) : 8,
+    breakpoints: {
+      values: {
+        xs: readNumber(pick(breakpointsTokens, ['values', 'xs'], 0), 0),
+        sm: readNumber(pick(breakpointsTokens, ['values', 'sm'], 600), 600),
+        md: readNumber(pick(breakpointsTokens, ['values', 'md'], 900), 900),
+        lg: readNumber(pick(breakpointsTokens, ['values', 'lg'], 1200), 1200),
+        xl: readNumber(pick(breakpointsTokens, ['values', 'xl'], 1536), 1536),
+      },
+    },
+    zIndex: {
+      appBar: readNumber(pick(zIndexTokens, ['appBar'], 1100), 1100),
+      drawer: readNumber(pick(zIndexTokens, ['drawer'], 1200), 1200),
+      modal: readNumber(pick(zIndexTokens, ['modal'], 1300), 1300),
+      snackbar: readNumber(pick(zIndexTokens, ['snackbar'], 1400), 1400),
+      tooltip: readNumber(pick(zIndexTokens, ['tooltip'], 1500), 1500),
+    },
+    transitions: {
+      easing: {
+        easeInOut: pick(motion, ['easing', 'standard'], 'cubic-bezier(0.4, 0, 0.2, 1)'),
+        easeOut: pick(motion, ['easing', 'decelerate'], 'cubic-bezier(0.0, 0, 0.2, 1)'),
+        easeIn: pick(motion, ['easing', 'accelerate'], 'cubic-bezier(0.4, 0, 1, 1)'),
+        sharp: pick(motion, ['easing', 'sharp'], 'cubic-bezier(0.4, 0, 0.6, 1)'),
+      },
+      duration: {
+        shortest: readNumber(pick(motion, ['duration', 'shortest'], 150), 150),
+        shorter: readNumber(pick(motion, ['duration', 'shorter'], 200), 200),
+        short: readNumber(pick(motion, ['duration', 'short'], 250), 250),
+        standard: readNumber(pick(motion, ['duration', 'standard'], 300), 300),
+        complex: readNumber(pick(motion, ['duration', 'complex'], 375), 375),
+        enteringScreen: readNumber(pick(motion, ['duration', 'entering'], 225), 225),
+        leavingScreen: readNumber(pick(motion, ['duration', 'leaving'], 195), 195),
+      },
+    },
+    typography: {
+      fontFamily,
+      // existing variants
+      h1: { fontSize: pxToRem(40), fontWeight: 600, lineHeight: 1.2, letterSpacing: '-0.01em' },
+      h2: { fontSize: pxToRem(32), fontWeight: 600, lineHeight: 1.25 },
+      h3: { fontSize: pxToRem(26), fontWeight: 600, lineHeight: 1.3 },
+      h4: { fontSize: pxToRem(21), fontWeight: 600, lineHeight: 1.35 },
+      h5: { fontSize: pxToRem(18), fontWeight: 600, lineHeight: 1.35 },
+      subtitle1: { fontSize: pxToRem(16), fontWeight: 600, lineHeight: 1.4 },
+      body1: { fontSize: pxToRem(16), lineHeight: 1.6 },
+      body2: { fontSize: pxToRem(14), lineHeight: 1.6 },
+      button: { textTransform: 'none', fontWeight: 700, letterSpacing: '0.02em' },
+    },
+    shadows: buildShadows(shadowsTokens, mode),
+    layout: {
+      insets: {
+        left:   readNumber(pick(g, ['layout', 'insets', 'left'],   0), 0),
+        right:  readNumber(pick(g, ['layout', 'insets', 'right'],  0), 0),
+        top:    readNumber(pick(g, ['layout', 'insets', 'top'],    0), 0),
+        bottom: readNumber(pick(g, ['layout', 'insets', 'bottom'], 0), 0),
+      },
+    },
+    components: {
+      MuiButton: {
+        defaultProps: { disableElevation: true },
+        styleOverrides: {
+          root: ({ theme }) => ({ borderRadius: theme.shape.borderRadius }),
+          sizeLarge: { padding: '12px 20px' },
+          sizeMedium: { padding: '10px 18px' },
+          sizeSmall: { padding: '8px 14px' },
+        },
+      },
+      MuiPaper: { styleOverrides: { rounded: { borderRadius: 14 } } },
+      MuiTextField: { defaultProps: { size: 'small' } },
+      MuiCssBaseline: {
+        styleOverrides: (theme) => ({
+          ':root': {
+            '--gui-primary': theme.palette.primary.main,
+            '--gui-secondary': theme.palette.secondary.main,
+            '--gui-bg-default': theme.palette.background.default,
+            '--gui-bg-paper': theme.palette.background.paper,
+            '--gui-bg-nav': theme.palette.background.nav || theme.palette.background.paper,
+            '--gui-text-primary': theme.palette.text.primary,
+            '--gui-text-secondary': theme.palette.text.secondary,
+            '--gui-link': theme.palette.link.main,
+            '--gui-link-visited': theme.palette.link.visited || theme.palette.link.main,
+            '--gui-border': theme.custom?.border || theme.palette.divider,
+            // Motion / opacity / icon sizes CSS vars for non-MUI DOM
+            '--gui-ease-standard': theme.transitions.easing.easeInOut,
+            '--gui-duration-standard': `${theme.transitions.duration.standard}ms`,
+            '--gui-opacity-hover': theme.palette.action.hoverOpacity,
+            '--gui-opacity-disabled': theme.palette.action.disabledOpacity,
+            '--gui-icon-size-sm': (iconSizes as any).sm ?? '16px',
+            '--gui-icon-size-md': (iconSizes as any).md ?? '20px',
+            '--gui-icon-size-lg': (iconSizes as any).lg ?? '24px',
+            '--gui-radius': `${theme.shape.borderRadius}px`,
+            '--gui-font-family': theme.typography.fontFamily,
+            '--gui-spacing': typeof theme.spacing === 'function' ? theme.spacing(1) : `${(theme as any).spacing}px`,
+            '--gui-inset-left': theme.layout.insets.left + 'px',
+            '--gui-inset-right': theme.layout.insets.right + 'px',
+            '--gui-inset-top': theme.layout.insets.top + 'px',
+            '--gui-inset-bottom': theme.layout.insets.bottom + 'px',
+          },
+          body: {
+            fontFamily: theme.typography.fontFamily,
+            backgroundColor: theme.palette.background.default,
+            color: theme.palette.text.primary,
+          },
+          a: {
+            color: theme.palette.link.main,
+            textDecoration: 'none',
+            '&:hover': { textDecoration: 'underline' },
+            '&:visited': { color: theme.palette.link.visited || theme.palette.link.main },
+          },
+        }),
+      },
+    },
+  });
+  return theme;
+}

package/src/gui/Theme/gui.css

@@ -0,0 +1,31 @@
+/* themes/GUI.css  
+GUI Theme CSS Variables and Layout */
+:root {
+  /* Layout insets, injected and/or overridden by theme or runtime */
+  --gui-inset-left: 0px;
+  --gui-inset-right: 0px;
+  --gui-inset-top: 48px;
+  --gui-inset-bottom: 0px;
+  /* Example additional tokens */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --z-index-navbar: 1100;
+  --z-index-drawer: 1200;
+}
+
+/* Default body layout respecting insets */
+body {
+  padding-top: var(--gui-inset-top);
+  padding-left: var(--gui-inset-left);
+  padding-right: var(--gui-inset-right);
+  padding-bottom: var(--gui-inset-bottom);
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/* Utility container class */
+.gui-container {
+  padding: var(--gui-inset-top) var(--gui-inset-right) var(--gui-inset-bottom) var(--gui-inset-left);
+  box-sizing: border-box;
+}

package/src/gui/Theme/index.ts

@@ -0,0 +1,17 @@
+// src/themes/index.ts
+// Global tokens shared by all themes (radius, spacing, zIndex, etc.)
+export type { Theme } from '@mui/material/styles';
+// Theme persistence utilities
+export { getInitialThemeId, usePersistentThemeId } from './utils/persistence';
+// Theme context and provider
+export { ThemeContext, useThemeContext } from '@/gui/contexts/ThemeContext';
+export { default as GuiProvider } from './GuiProvider';
+// Theme catalog access
+export {
+  GuiThemes,
+  FlatGuiThemes,
+  getGuiThemes,
+  getFlatGuiThemes,
+  getGuiTheme,
+  getFlatGuiTheme,
+} from './utils/catalog';

package/src/gui/Theme/styles/buildShadows.ts

@@ -0,0 +1,83 @@
+// themes/styles/buildShadows.ts
+import { Theme } from '@mui/material/styles';
+export const buildShadows = (shadowTokens: any, mode: 'light' | 'dark'): Theme['shadows'] => {
+  const DEFAULT_SHADOWS: string[] =
+    mode === 'dark'
+      ? [
+          'none',
+          '0px 1px 2px rgba(0,0,0,0.6)',
+          '0px 2px 4px rgba(0,0,0,0.55)',
+          '0px 3px 6px rgba(0,0,0,0.5)',
+          '0px 4px 8px rgba(0,0,0,0.45)',
+          '0px 5px 10px rgba(0,0,0,0.4)',
+          '0px 6px 12px rgba(0,0,0,0.38)',
+          '0px 7px 14px rgba(0,0,0,0.36)',
+          '0px 8px 16px rgba(0,0,0,0.34)',
+          '0px 9px 18px rgba(0,0,0,0.32)',
+          '0px 10px 20px rgba(0,0,0,0.3)',
+          '0px 11px 22px rgba(0,0,0,0.28)',
+          '0px 12px 24px rgba(0,0,0,0.26)',
+          '0px 13px 26px rgba(0,0,0,0.24)',
+          '0px 14px 28px rgba(0,0,0,0.22)',
+          '0px 15px 30px rgba(0,0,0,0.2)',
+          '0px 16px 32px rgba(0,0,0,0.19)',
+          '0px 17px 34px rgba(0,0,0,0.18)',
+          '0px 18px 36px rgba(0,0,0,0.17)',
+          '0px 19px 38px rgba(0,0,0,0.16)',
+          '0px 20px 40px rgba(0,0,0,0.15)',
+          '0px 22px 44px rgba(0,0,0,0.14)',
+          '0px 24px 48px rgba(0,0,0,0.13)',
+          '0px 26px 52px rgba(0,0,0,0.12)',
+          '0px 28px 56px rgba(0,0,0,0.11)',
+        ]
+      : [
+          'none',
+          '0px 1px 2px rgba(0,0,0,0.08)',
+          '0px 2px 4px rgba(0,0,0,0.1)',
+          '0px 3px 6px rgba(0,0,0,0.12)',
+          '0px 4px 8px rgba(0,0,0,0.14)',
+          '0px 5px 10px rgba(0,0,0,0.15)',
+          '0px 6px 12px rgba(0,0,0,0.16)',
+          '0px 7px 14px rgba(0,0,0,0.17)',
+          '0px 8px 16px rgba(0,0,0,0.18)',
+          '0px 9px 18px rgba(0,0,0,0.19)',
+          '0px 10px 20px rgba(0,0,0,0.2)',
+          '0px 11px 22px rgba(0,0,0,0.21)',
+          '0px 12px 24px rgba(0,0,0,0.22)',
+          '0px 13px 26px rgba(0,0,0,0.23)',
+          '0px 14px 28px rgba(0,0,0,0.24)',
+          '0px 15px 30px rgba(0,0,0,0.25)',
+          '0px 16px 32px rgba(0,0,0,0.26)',
+          '0px 17px 34px rgba(0,0,0,0.27)',
+          '0px 18px 36px rgba(0,0,0,0.28)',
+          '0px 19px 38px rgba(0,0,0,0.29)',
+          '0px 20px 40px rgba(0,0,0,0.3)',
+          '0px 22px 44px rgba(0,0,0,0.31)',
+          '0px 24px 48px rgba(0,0,0,0.32)',
+          '0px 26px 52px rgba(0,0,0,0.33)',
+          '0px 28px 56px rgba(0,0,0,0.34)',
+        ];
+
+  const ensureArrayLen = <T,>(arr: T[] | unknown, len: number, filler: T): T[] => {
+    const a = Array.isArray(arr) ? ([...arr] as T[]) : [];
+    for (let i = a.length; i < len; i++) a.push(filler);
+    return a.slice(0, len);
+  };
+
+  if (Array.isArray(shadowTokens)) {
+    return ensureArrayLen<string>(shadowTokens, 25, DEFAULT_SHADOWS[0]) as Theme['shadows'];
+  }
+
+  if (shadowTokens && typeof shadowTokens === 'object') {
+    const arr: string[] = [];
+    for (let i = 0; i < 25; i++) {
+      const v =
+        shadowTokens?.[i] ??
+        shadowTokens?.[`s${i}`];
+      arr.push(v ?? DEFAULT_SHADOWS[i] ?? DEFAULT_SHADOWS[0]);
+    }
+    return arr as Theme['shadows'];
+  }
+
+  return DEFAULT_SHADOWS as Theme['shadows'];
+};

package/src/gui/Theme/styles/theme.tokens.ts

@@ -0,0 +1,108 @@
+//themes/styles/theme.tokens.ts
+export const themeTokens = {
+  description: "Unified base design tokens for This.GUI — used as foundation for all themes and modes.",
+  radius: {
+    md: {
+      type: "radius",
+      value: "10px"
+    }
+  },
+  spacing: {
+    base: {
+      type: "spacing",
+      value: "8"
+    }
+  },
+  border: {
+    default: {
+      type: "color",
+      value: "rgba(0, 0, 0, 0.08)"
+    }
+  },
+  font: {
+    family: {
+      type: "fontFamily",
+      value: "Roboto, sans-serif"
+    },
+    weightBold: {
+      type: "fontWeight",
+      value: "700"
+    },
+    weightSemibold: {
+      type: "fontWeight",
+      value: "600"
+    },
+    sizeBase: {
+      type: "fontSize",
+      value: "16"
+    },
+    letterTight: {
+      type: "letterSpacing",
+      value: "-0.01em"
+    }
+  },
+  color: {
+    description: "Extended semantic colors, gradients, overlays",
+    success: { type: "color", value: "#4caf50" },
+    warning: { type: "color", value: "#ff9800" },
+    error: { type: "color", value: "#f44336" },
+    info: { type: "color", value: "#2196f3" },
+    gradientPrimary: { type: "gradient", value: "linear-gradient(135deg, #00aa96 0%, #008c7d 100%)" }
+  },
+  insets: {
+    description: "Offsets reserved for permanent drawers",
+    type: "object",
+    left: {
+      type: "size",
+      value: "0px"
+    },
+    right: {
+      type: "size",
+      value: "0px"
+    }
+  },
+  shadows: {
+    description: "Consistent elevation levels, AR/3D ready",
+    sm: { type: "shadow", value: "0px 1px 2px rgba(0, 0, 0, 0.05)" },
+    md: { type: "shadow", value: "0px 3px 6px rgba(0, 0, 0, 0.1)" },
+    lg: { type: "shadow", value: "0px 8px 16px rgba(0, 0, 0, 0.15)" }
+  },
+  zIndex: {
+    description: "Advanced layering control",
+    nav: { type: "number", value: 1100 },
+    modal: { type: "number", value: 1300 },
+    tooltip: { type: "number", value: 1500 }
+  },
+  breakpoints: {
+    description: "Declarative responsive interfaces",
+    xs: { type: "breakpoint", value: "0px" },
+    sm: { type: "breakpoint", value: "600px" },
+    md: { type: "breakpoint", value: "900px" },
+    lg: { type: "breakpoint", value: "1200px" },
+    xl: { type: "breakpoint", value: "1536px" }
+  },
+  motion: {
+    description: "Animation and transition tokens",
+    durationFast: { type: "duration", value: "150ms" },
+    durationBase: { type: "duration", value: "300ms" },
+    easingStandard: { type: "easing", value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+  },
+  opacity: {
+    description: "Universal interaction effects",
+    disabled: { type: "opacity", value: "0.38" },
+    hover: { type: "opacity", value: "0.08" },
+    focus: { type: "opacity", value: "0.12" }
+  },
+  icon: {
+    description: "Scalable icon sizes for generated GUIs",
+    sm: { type: "size", value: "16px" },
+    md: { type: "size", value: "24px" },
+    lg: { type: "size", value: "32px" }
+  },
+  lineHeight: {
+    description: "Better typographic control",
+    tight: { type: "lineHeight", value: "1.1" },
+    base: { type: "lineHeight", value: "1.5" },
+    relaxed: { type: "lineHeight", value: "1.75" }
+  }
+};

package/src/gui/Theme/utils/catalog.ts

@@ -0,0 +1,61 @@
+// src/themes/catalog/catalog.ts
+// A collection of theme manifests
+// and their associated modes (light/dark) with token paths.
+// It also provides utility functions to access and manipulate the theme catalog.
+import neuronsManifest from '../catalog/neurons/manifest';
+import ghostShellManifest from '../catalog/GhostShell/manifest';
+import PrinceOfDarknessManifest from '../catalog/PrinceOfDarkness/manifest';
+import muiManifest from '../catalog/MUI/manifest';
+import lunaManifest from '../catalog/LunaHex/manifest';
+import cherryByteManifest from '../catalog/CherryByte/manifest';
+import SeafoamManifest from '../catalog/Seafoam/manifest';
+import { FlatGuiTheme } from '@/types/theme'; //definiciones de tipos
+export const GuiThemes = [neuronsManifest, ghostShellManifest, PrinceOfDarknessManifest, muiManifest, lunaManifest, cherryByteManifest, SeafoamManifest];
+/*
+ FlatGuiThemes (plano)
+	•	Es un array plano de modos individuales.
+	•	Cada GuiTheme en esta lista representa una única combinación de:
+	•	themeId
+	•	themeName
+	•	mode (light o dark)
+	•	tokens
+	•	manifest
+	•	Esto es útil para renderizar selects, listas visuales, previews, etc.
+  */
+export const FlatGuiThemes = GuiThemes.flatMap((manifest) => {
+  return (['light', 'dark'] as const).flatMap((mode) => {
+    return [{
+      themeId: manifest.themeId ?? '',
+      themeName: manifest.themeName ?? '',
+      description: manifest.description,
+      author: manifest.author,
+      version: manifest.version,
+      license: manifest.license,
+      homepage: manifest.homepage,
+      tags: manifest.tags,
+      createdAt: manifest.createdAt,
+      updatedAt: manifest.updatedAt,
+      badgeUrl: manifest.badgeUrl,
+      mode,
+      // Si los tokens ya están cargados/resueltos en este punto:
+      tokens: manifest.mode?.[mode] ?? {},
+    }];
+  });
+});
+/*
+	•	Representa la colección de temas, donde cada tema tiene dos modos (light y dark).
+	•	Es decir, el theme completo, tal como viene en el manifest.*/
+
+
+export function getGuiThemes() {
+  return GuiThemes;
+}
+export function getGuiTheme(themeId: string) {
+  return GuiThemes.find(theme => theme.themeId === themeId);
+}
+export function getFlatGuiThemes(): FlatGuiTheme[] {
+  return FlatGuiThemes;
+}
+export function getFlatGuiTheme(themeId: string, mode: 'light' | 'dark') {
+  return FlatGuiThemes.find(theme => theme.themeId === themeId && theme.mode === mode);
+}

package/src/gui/Theme/utils/persistence.ts

@@ -0,0 +1,66 @@
+//src/themes/utils/persistence.ts
+// Utility to persist user's themeId using localStorage.
+import { useState, useEffect } from 'react';
+/**
+ * Retrieves the initial themeId from localStorage.
+ * Falls back to the provided default if not found or on error.
+ *
+ * @param fallback - The fallback themeId to use if none is stored.
+ * @returns The stored themeId or the fallback value.
+ */
+export function getInitialThemeId(fallback: string): string {
+  try {
+    return localStorage.getItem('this.gui:themeId') || fallback;
+  } catch {
+    return fallback;
+  }
+}
+/**
+ * React hook to persist and manage the themeId using localStorage.
+ * Returns a [themeId, setThemeId] tuple just like useState.
+ *
+ * @param fallback - The fallback themeId if no previous value is stored.
+ * @returns A tuple [themeId, setThemeId] that syncs with localStorage.
+ */
+export function usePersistentThemeId(
+  fallback: string
+): [string, React.Dispatch<React.SetStateAction<string>>] {
+  const [themeId, setThemeId] = useState<string>(() => getInitialThemeId(fallback));
+  useEffect(() => {
+    try {
+      localStorage.setItem('this.gui:themeId', themeId);
+    } catch {
+      // fail silently
+    }
+  }, [themeId]);
+  return [themeId, setThemeId];
+}
+
+/**
+ * React hook to persist and manage the theme mode (light/dark) using localStorage.
+ * Returns a [mode, setMode] tuple just like useState.
+ *
+ * @param fallback - The fallback mode if no previous value is stored.
+ * @returns A tuple [mode, setMode] that syncs with localStorage.
+ */
+export function usePersistentThemeMode(
+  fallback: 'light' | 'dark'
+): ['light' | 'dark', React.Dispatch<React.SetStateAction<'light' | 'dark'>>] {
+  const [mode, setMode] = useState<'light' | 'dark'>(() => {
+    try {
+      const stored = localStorage.getItem('this.gui:themeMode');
+      if (stored === 'dark' || stored === 'light') return stored;
+      return fallback;
+    } catch {
+      return fallback;
+    }
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem('this.gui:themeMode', mode);
+    } catch {
+      // fail silently
+    }
+  }, [mode]);
+  return [mode, setMode];
+}

package/src/gui/Theme/utils/themeUtils.ts

@@ -0,0 +1,34 @@
+//src/themes/utils/themeUtils.ts
+import { Theme } from '@mui/material/styles';
+export type Insets = { left: number; right: number; top: number; bottom: number };
+// Helper to get CSS variable from theme
+export const getCssVar = (theme: Theme, name: string) => {
+  return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`) || theme.palette?.[name as keyof typeof theme.palette];
+};
+
+// Generates a string of CSS custom properties based on theme.palette
+export const generatePaletteCssVars = (theme: Theme, prefix = '--palette') => {
+  const cssVars: Record<string, string> = {};
+  Object.entries(theme.palette).forEach(([key, value]) => {
+    if (!value || typeof value === 'function') return;
+    if (typeof value === 'object') {
+      Object.entries(value).forEach(([subKey, subVal]) => {
+        const varName = `${prefix}-${key}-${subKey}`;
+        cssVars[varName] = String(subVal);
+      });
+    } else {
+      const varName = `${prefix}-${key}`;
+      cssVars[varName] = String(value);
+    }
+  });
+  return cssVars;
+};
+
+// Appends generated CSS variables to the document root
+export const applyThemeCssVars = (theme: Theme) => {
+  const cssVars = generatePaletteCssVars(theme);
+  const root = document.documentElement;
+  Object.entries(cssVars).forEach(([key, val]) => {
+    root.style.setProperty(key, val);
+  });
+};