this.gui 1.0.17 → 1.1.0

package/src/gui/molecules/Utilities/ThemeModeToggle/ThemeModeToggle.stories.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Box, Stack, Typography, Paper } from "@/gui/atoms";
+import GuiProvider from '@/context/GuiProvider';
+import ThemeModeToggle from './ThemeModeToggle';
+
+// ======================= Meta =======================
+const meta: Meta<typeof ThemeModeToggle> = {
+  title: 'Molecules/Utilities/ThemeModeToggle',
+  component: ThemeModeToggle,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <GuiProvider>
+          <Box sx={{ p: 2 }}>
+            <Story />
+          </Box>
+        </GuiProvider>
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A compact **theme mode switcher** that plugs into \`GuiProvider\`.
+
+- **Variants**
+  - \`minimal\`: icon-only button (sun/moon).
+  - \`switch\`: MUI-like switch with state.
+- Sizing follows the component's internal defaults for each variant.
+
+The component reads and updates the active mode via **GuiProvider**
+(\`useThemeContext()\`). No extra state wiring needed.
+
+**Design guidance**
+- Put it near the global theme selector, app bar, or user menu.
+- If you need a fully custom look, wrap it and style via \`sx\` on the parent.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['minimal', 'switch'],
+      description: 'Visual style of the toggle.',
+    },
+    show: {
+      control: { type: 'radio' },
+      options: ['icons', 'label', 'both'],
+      description: 'What to render: icons, label, or both.',
+    },
+    id: { control: 'text', table: { category: 'DOM' } },
+    className: { control: 'text', table: { category: 'DOM' } },
+    'data-testid': { control: 'text', table: { category: 'Testing' } },
+  },
+  args: {
+    variant: 'switch',
+    show: 'both',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ThemeModeToggle>;
+
+// ======================= Stories =======================
+export const Playground: Story = {
+  render: (args) => (
+    <Paper elevation={0} sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
+      <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+        Try switching mode
+      </Typography>
+      <ThemeModeToggle {...args} />
+    </Paper>
+  ),
+};
+
+export const MinimalIconsOnly: Story = {
+  name: 'Minimal / Icons only',
+  args: { variant: 'minimal', show: 'icons' },
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <Typography variant="body2">Icon button that toggles light/dark</Typography>
+      <ThemeModeToggle {...args} />
+    </Stack>
+  ),
+};
+
+export const MinimalWithLabel: Story = {
+  name: 'Minimal / Icon + Label',
+  args: { variant: 'minimal', show: 'both' },
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <Typography variant="body2">Icon + label</Typography>
+      <ThemeModeToggle {...args} />
+    </Stack>
+  ),
+};
+
+export const SwitchIconsOnly: Story = {
+  name: 'Switch / Icons only',
+  args: { variant: 'switch', show: 'icons' },
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <Typography variant="body2">Compact switch</Typography>
+      <ThemeModeToggle {...args} />
+    </Stack>
+  ),
+};
+
+export const SwitchWithLabel: Story = {
+  name: 'Switch / With label',
+  args: { variant: 'switch', show: 'both' },
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <Typography variant="body2">Accessible labeled switch</Typography>
+      <ThemeModeToggle {...args} />
+    </Stack>
+  ),
+};
+
+// ======================= Docs-only snippets =======================
+export const UsageSnippets: Story = {
+  name: 'Docs: Usage snippets',
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### Minimal (icon button)
+~~~tsx
+<ThemeModeToggle variant="minimal" show="icons" />
+~~~
+
+### Switch (with label)
+~~~tsx
+<ThemeModeToggle variant="switch" show="both" />
+~~~
+
+This component reads and updates the active mode from **GuiProvider**.
+It does not require props for state; just render it once in your layout.
+        `,
+      },
+    },
+  },
+  render: () => (
+    <Stack direction="column" spacing={1}>
+      <ThemeModeToggle variant="minimal" show="icons" />
+      <ThemeModeToggle variant="switch" show="both" />
+    </Stack>
+  ),
+};

package/src/gui/molecules/Utilities/ThemeModeToggle/ThemeModeToggle.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Switch from '@mui/material/Switch';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import { useThemeContext } from '@/context/GuiProvider';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import type { SxProps, Theme } from '@mui/material/styles';
+type ThemeModeToggleProps = {
+  variant?: 'minimal' | 'switch';
+  show?: 'icons' | 'label' | 'both';
+  switchSize?: 'small' | 'medium';
+  iconSize?: 'small' | 'medium' | 'large';
+  // Granular styling
+  sx?: SxProps<Theme>;          // root container (IconButton or Box)
+  iconSx?: SxProps<Theme>;      // both Light/Dark icons
+  switchSx?: SxProps<Theme>;    // Switch component (when variant='switch')
+  labelSx?: SxProps<Theme>;     // Typography label
+  id?: string;
+  className?: string;
+  ['data-testid']?: string;
+};
+
+const ThemeModeToggle: React.FC<ThemeModeToggleProps> = ({
+  variant = 'minimal',
+  show = 'icons',
+  switchSize = 'medium',
+  iconSize = 'medium',
+  sx,
+  iconSx,
+  switchSx,
+  labelSx,
+  id,
+  className,
+  ['data-testid']: dataTestId,
+}) => {
+  const { mode, toggleMode } = useThemeContext();
+  const isLight = mode === 'light';
+  const labelText = isLight ? 'Light' : 'Dark';
+  if (variant === 'switch') {
+    return (
+      <Box
+        id={id}
+        display="flex"
+        alignItems="center"
+        onClick={toggleMode}
+        sx={sx ? ([{ cursor: 'pointer' }, sx] as SxProps<Theme>) : ({ cursor: 'pointer' } as SxProps<Theme>)}
+        className={className}
+        data-testid={dataTestId}
+      >
+        {show !== 'label' && (
+          <>
+            <LightModeIcon color={isLight ? 'primary' : 'disabled'} sx={iconSx} />
+            <Switch
+              checked={!isLight}
+              onChange={toggleMode}
+              color="primary"
+              size={switchSize}
+              inputProps={{ 'aria-label': 'toggle theme mode' }}
+              sx={switchSx}
+            />
+            <DarkModeIcon color={!isLight ? 'primary' : 'disabled'} sx={iconSx} />
+          </>
+        )}
+        {(show === 'label' || show === 'both') && (
+          <Typography
+            sx={
+              labelSx
+                ? ([{ ml: show === 'both' ? 1 : 0 }, labelSx] as SxProps<Theme>)
+                : ({ ml: show === 'both' ? 1 : 0 } as SxProps<Theme>)
+            }
+          >
+            {labelText}
+          </Typography>
+        )}
+      </Box>
+    );
+  }
+
+  // variant === 'minimal'
+  return (
+    <IconButton id={id} onClick={toggleMode} color="inherit" aria-label="toggle theme mode" size={iconSize} className={className} data-testid={dataTestId} sx={sx}>
+      {show !== 'label' && (isLight ? <LightModeIcon sx={iconSx} /> : <DarkModeIcon sx={iconSx} />)}
+      {(show === 'label' || show === 'both') && (
+        <Typography
+          sx={
+            labelSx
+              ? ([{ ml: show === 'both' ? 1 : 0 }, labelSx] as SxProps<Theme>)
+              : ({ ml: show === 'both' ? 1 : 0 } as SxProps<Theme>)
+          }
+        >
+          {labelText}
+        </Typography>
+      )}
+    </IconButton>
+  );
+};
+
+export default ThemeModeToggle;

package/src/gui/molecules/Utilities/ThemeSelector.jsx

@@ -0,0 +1,281 @@
+// src/gui/molecules/Utilities/ThemeSelector.jsx
+import React from 'react';
+import {
+  IconButton, // .yes
+  Tooltip, // .yes
+  Menu, //yes
+  MenuItem,//yes
+  ListItemIcon,//yes
+  ListItemText, // yes
+  Box, // .yes
+  Divider, // .yes
+  Typography // .yes
+} from '@/gui/atoms';
+import MuiSwitch from '@mui/material/Switch';
+import * as MuiIcons from '@mui/icons-material';
+import { useThemeContext } from '@/context/GuiProvider';
+import { AVAILABLE_THEMES } from '@/themes';
+import { useTheme } from '@mui/material/styles';
+// Icons ---------------------------------------------------------------
+const Sun = MuiIcons.WbSunnyRounded || MuiIcons.WbSunny;
+const Moon = MuiIcons.DarkModeRounded || MuiIcons.NightlightRound;
+const Check = MuiIcons.Check || MuiIcons.Done;
+const Info = MuiIcons.InfoOutlined || MuiIcons.Info;
+const Brush = MuiIcons.Brush || MuiIcons.Edit;
+const Palette = MuiIcons.Palette || MuiIcons.ColorLens;
+// Render an icon spec from manifest (or string name for MUI icons)
+const IconRenderer = ({ icon, fontSize = 'small', sx }) => {
+  if (typeof icon === 'string') {
+    const Comp = MuiIcons[icon] || Palette;
+    return <Comp fontSize={fontSize} sx={sx} />;
+  }
+  if (!icon || typeof icon !== 'object') return <Palette fontSize={fontSize} sx={sx} />;
+  const { type, value } = icon;
+  if (type === 'mui') {
+    const Comp = MuiIcons[value] || Palette;
+    return <Comp fontSize={fontSize} sx={sx} />;
+  }
+  if (type === 'url' || type === 'data') {
+    return <img src={value} alt="" style={{ display: 'inline-block', width: 18, height: 18 }} />;
+  }
+  if (type === 'svg') {
+    return (
+      <span aria-hidden style={{ display: 'inline-block', width: 18, height: 18 }}
+        dangerouslySetInnerHTML={{ __html: value }} />
+    );
+  }
+  return <Palette fontSize={fontSize} sx={sx} />;
+};
+
+// Group available themes by family id. Each item is expected like:
+// { id: 'neurons-light', family: 'neurons', name: 'Neurons Light', mode: 'light', manifest }
+function groupByFamily(items = []) {
+  const map = new Map();
+  for (const t of items) {
+    const family = String(t.family || t.id || t?.manifest?.id || '').trim();
+    if (!family) continue;
+    const entry = map.get(family) || { family, meta: t.manifest || {}, modes: {} };
+    entry.meta = t.manifest || entry.meta;
+    const hasMode = typeof t.mode === 'string' && t.mode.length > 0;
+    if (hasMode) {
+      const mode = String(t.mode).toLowerCase();
+      entry.modes[mode] = t;
+    } else if (t.manifest && t.manifest.modes && typeof t.manifest.modes === 'object') {
+      for (const mk of Object.keys(t.manifest.modes)) {
+        const modeKey = String(mk).toLowerCase();
+        if (!entry.modes[modeKey]) {
+          entry.modes[modeKey] = {
+            id: `${family}-${modeKey}`,
+            family,
+            name: `${t.manifest.name || family} ${modeKey[0].toUpperCase()}${modeKey.slice(1)}`,
+            mode: modeKey,
+            manifest: t.manifest,
+          };
+        }
+      }
+    }
+    map.set(family, entry);
+  }
+  return Array.from(map.values());
+}
+
+// Build up to N tiny color swatches from an item that may carry a compiled palette
+const getPreviewSwatches = (item, fallbackTheme, limit = 8) => {
+  const p = item?.palette || item?.theme?.palette || fallbackTheme?.palette;
+  if (!p) return [];
+  const candidates = [
+    { key: 'background.default', label: 'background.default', value: p.background?.default },
+    { key: 'background.paper',   label: 'background.paper',   value: p.background?.paper },
+    { key: 'primary.main',       label: 'primary.main',       value: p.primary?.main },
+    { key: 'secondary.main',     label: 'secondary.main',     value: p.secondary?.main },
+    { key: 'link.main',          label: 'link.main',          value: p.link?.main || p.secondary?.main || p.primary?.main },
+    { key: 'text.primary',       label: 'text.primary',       value: p.text?.primary },
+    { key: 'text.secondary',     label: 'text.secondary',     value: p.text?.secondary },
+    { key: 'divider',            label: 'divider',            value: p.divider },
+  ];
+  return candidates.filter(c => Boolean(c.value)).slice(0, limit);
+};
+
+export default function ThemeSelector({ tooltip = 'Seleccionar tema / modo' }) {
+  const {
+    themeKey,
+    family,
+    mode,
+    availableFlat,
+    availableFamilies,
+    getManifestForFamily,
+    setMode,
+    setFamilyAndMode,
+  } = useThemeContext();
+  const items = Array.isArray(availableFlat) && availableFlat.length > 0 ? availableFlat : AVAILABLE_THEMES;
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const [expandedFamily, setExpandedFamily] = React.useState(null);
+  const families = groupByFamily(items);
+  // Active entry comes from provider’s themeKey/family/mode
+  const active = items.find((t) => t.id === themeKey) || items[0];
+  const activeFamily = family || active?.family || (families[0]?.family ?? '');
+  const activeFamilyMeta =
+    (typeof getManifestForFamily === 'function' ? getManifestForFamily(activeFamily) : undefined) ||
+    families.find((f) => f.family === activeFamily)?.meta;
+  const activeIconSpec = activeFamilyMeta?.icon;
+  const handleOpen = (e) => setAnchorEl(e.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+  const disabled = items.length === 0;
+  // -- Helpers ---------------------------------------------------------------
+  const parseFamilyAndMode = (id, fallbackFamily = activeFamily) => {
+    if (!id) return { family: fallbackFamily, mode: 'light' };
+    const parts = String(id).split('-');
+    const m = parts.pop();
+    const fam = parts.join('-') || fallbackFamily;
+    return { family: fam, mode: m };
+  };
+
+  const applyMode = (fam, m) => {
+    if (typeof setFamilyAndMode === 'function') {
+      try { setFamilyAndMode(fam, m); } catch {}
+    } else if (typeof setMode === 'function' && fam === activeFamily) {
+      try { setMode(m); } catch {}
+    }
+  };
+
+  const handleSelect = (id) => {
+    if (!id) return;
+    const { family: fam, mode: m } = parseFamilyAndMode(id, activeFamily);
+    applyMode(fam, m);
+    handleClose();
+  };
+
+  const muiTheme = useTheme();
+  const activeFamilyEntry = families.find((f) => f.family === activeFamily);
+  const lightMode = activeFamilyEntry?.modes?.light;
+  const darkMode = activeFamilyEntry?.modes?.dark;
+  const isDarkSelected = mode === 'dark' || (!!darkMode && themeKey === darkMode.id);
+  const isLightSelected = mode === 'light' || (!!lightMode && themeKey === lightMode.id);
+  return (
+    <>
+      <Tooltip title={tooltip}>
+        <span>
+          <IconButton onClick={handleOpen} disabled={disabled} aria-label="theme-selector" size="small">
+            <IconRenderer icon={activeIconSpec || 'Palette'} fontSize="small" />
+          </IconButton>
+        </span>
+      </Tooltip>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose} keepMounted>
+        {families.length === 0 ? (
+          <MenuItem disabled>No themes available</MenuItem>
+        ) : (
+          families.map((fam, idx) => {
+            const { family, meta, modes } = fam;
+            const light = modes.light;
+            const dark = modes.dark;
+            const isActiveLight = !!light && themeKey === light.id;
+            const isActiveDark = !!dark && themeKey === dark.id;
+            return (
+              <Box key={family} component="div" sx={{ minWidth: 280 }}>
+                {/* Header: theme name + info icon (not disabled; full-contrast) */}
+                <MenuItem
+                  disableRipple
+                  sx={{
+                    cursor: 'default',
+                    opacity: 1,
+                    '&:hover': { backgroundColor: 'transparent' },
+                    py: 1,
+                  }}
+                >
+                  <ListItemIcon sx={{ minWidth: 34, color: 'text.secondary' }}>
+                    <IconRenderer icon={meta?.icon || 'Palette'} fontSize="small" />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={
+                      <Typography variant="subtitle1" sx={{ fontWeight: 700, color: 'text.primary', lineHeight: 1.2 }}>
+                        {meta?.name || family}
+                      </Typography>
+                    }
+                    secondary={
+                      meta?.description ? (
+                        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                          {meta.description}
+                        </Typography>
+                      ) : undefined
+                    }
+                  />
+                  <IconButton
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setExpandedFamily(expandedFamily === family ? null : family);
+                    }}
+                  >
+                    <Info fontSize="small" />
+                  </IconButton>
+                </MenuItem>
+
+                {/* Single row: Light / Dark pills, preview swatches, active check */}
+                <Box sx={{ display: 'flex', alignItems: 'center', px: 1.5, pb: 1 }}>
+                  {/* Preview swatches */}
+                  <Box sx={{ display: 'flex', gap: 0.75, ml: 'auto', mr: 1 }}>
+                    {getPreviewSwatches(
+                      isDarkSelected ? dark : (isLightSelected ? light : (dark || light)),
+                      muiTheme
+                    ).map((sw, i) => (
+                      <Tooltip key={`${family}-sw-${sw.key}-${i}`} title={sw.label}>
+                        <Box
+                          sx={{
+                            width: 14,
+                            height: 14,
+                            borderRadius: '4px',
+                            ...(String(sw.value).includes('gradient')
+                              ? { background: sw.value }
+                              : { bgcolor: sw.value }),
+                            border: '1px solid rgba(0,0,0,0.2)',
+                          }}
+                        />
+                      </Tooltip>
+                    ))}
+                  </Box>
+                  {/* Removed checkmark line */}
+                  {/* Controls: Sun • Switch • Moon (compact group) aligned right */}
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+                    <Sun fontSize="small" sx={{ opacity: light ? 1 : 0.4 }} />
+                    <MuiSwitch
+                      size="small"
+                      checked={isDarkSelected}
+                      disabled={!light || !dark}
+                      onChange={(e) => {
+                        const checked = e.target.checked;
+                        const nextMode = checked ? 'dark' : 'light';
+                        if (typeof setMode === 'function') {
+                          try { setMode(nextMode); } catch {}
+                        } else {
+                          applyMode(activeFamily, nextMode);
+                        }
+                      }}
+                      inputProps={{ 'aria-label': 'Toggle light/dark mode' }}
+                    />
+                    <Moon fontSize="small" sx={{ opacity: dark ? 1 : 0.4 }} />
+                  </Box>
+                </Box>
+                {/* Expanded manifest info */}
+                {expandedFamily === family && (
+                  <Box sx={{ px: 2, pb: 1.25, color: 'text.secondary', fontSize: 12 }}>
+                    {meta?.author && (
+                      <div><strong>Author:</strong> {typeof meta.author === 'string' ? meta.author : meta.author?.name}</div>
+                    )}
+                    {meta?.version && <div><strong>Version:</strong> {meta.version}</div>}
+                    {meta?.homepage && <div><strong>Homepage:</strong> {meta.homepage}</div>}
+                    {meta?.license && <div><strong>License:</strong> {meta.license}</div>}
+                    {Array.isArray(meta?.tags) && meta.tags.length > 0 && (
+                      <div><strong>Tags:</strong> {meta.tags.join(', ')}</div>
+                    )}
+                  </Box>
+                )}
+                {idx < families.length - 1 ? <Divider sx={{ my: 0.5 }} /> : null}
+              </Box>
+            );
+          })
+        )}
+      </Menu>
+    </>
+  );
+}

package/src/gui/utils/nodeID.ts

@@ -0,0 +1,8 @@
+// src/gui/utils/nodeID.ts
+export function ensureNodeId(type: string, providedId?: string): string {
+  if (providedId) return providedId;
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return `${type}-${crypto.randomUUID()}`;
+  }
+  return `${type}-${Math.random().toString(36).slice(2)}`;
+}

package/src/index.js

@@ -0,0 +1,111 @@
+// this.gui/src/index.js
+console.log("[this.gui] loaded.");
+// TEMPLATES
+import MinimalLayout from "./templates/Minimal";
+// THEME
+import { GuiProvider, useThemeContext } from "./context/GuiProvider";
+// APPBARS
+import TopBar from "@/gui/molecules/AppBars/TopBar/TopBar";
+import Footer from "@/gui/molecules/AppBars/Footer/Footer";
+import LeftSidebar from "@/gui/molecules/AppBars/LeftSidebar/LeftSidebar";
+import RightSidebar from "@/gui/molecules/AppBars/RightSidebar/RightSidebar";
+import StickyOptionsTop from "@/gui/molecules/AppBars/StickyOptions/StickyOptionsTop";
+import TopBarAndSideBar from "@/gui/molecules/AppBars/TopBarAndSideBar/TopBarAndSideBar";//REMOVE SOON
+import RightContextDrawer from "@/gui/molecules/AppBars/RightContextDrawer/RightContextDrawer"; //REMOVE SOON
+// TEXT
+import TextTitle from "./components/generics/Text/TextTitle";
+import TextParagraph from "./components/generics/Text/TextParagraph";
+import TextList from "./components/generics/Text/TextList";
+import TextQuote from "./components/generics/Text/TextQuote";
+// MEDIA
+import Img from "./components/generics/Media/Img";
+import VideoEmbed from "./components/generics/Media/VideoEmbed";
+// ORGANIZATION
+import TableOfContents from "./components/generics/Organization/TableOfContents";
+import Tabs from "./components/generics/Organization/Tabs";
+// LAYOUT
+import PageContainer from "./components/generics/Layout/PageContainer";
+import Gridx from "./components/generics/Layout/Gridx";
+import Section from "./components/generics/Layout/Section";
+import SectionHeader from "./components/generics/Layout/SectionHeader";
+import PageDivider from "./components/generics/Layout/PageDivider";
+import Hero2 from "./components/generics/Layout/Hero2";
+// CODE
+import CodeBlock from "./components/generics/Code/CodeBlock";
+// FEEDBACK
+import Callout from "./components/generics/Feedback/Callout";
+// Cards
+import ModuleCard from "./components/generics/Cards/ModuleCard";
+import LilBox from "./components/generics/Cards/LilBox";
+import Gridme from "./components/generics/Cards/Gridme";
+// Chats
+import FullChatBot from "./components/generics/Chats/FullChatBot";
+
+// Named exports (para `import { TextTitle } from "this.gui"`)
+export {
+  GuiProvider, 
+  useThemeContext,
+  TopBar, 
+  Footer, 
+  StickyOptionsTop, 
+  LeftSidebar, 
+  RightSidebar,
+  MinimalLayout, //soon to be removed
+  TopBarAndSideBar, //soon to be removed
+  RightContextDrawer, //soon to be removed
+  TextTitle, 
+  TextParagraph,
+  TextList,
+  TextQuote,
+  Img,
+  VideoEmbed,
+  TableOfContents,
+  Tabs,
+  PageContainer,
+  Gridx, 
+  Section, 
+  SectionHeader, 
+  PageDivider, 
+  Hero2,
+  CodeBlock,
+  Callout,
+  ModuleCard, 
+  LilBox,
+  Gridme,
+  FullChatBot,
+};
+
+// Default namespace (para `import GUI from "this.gui"`)
+const GUI = {
+  GuiProvider, 
+  useThemeContext,
+  NavBar, 
+  LeftDrawer, 
+  RightDrawer,
+  StickyOptionsTop,
+  TopBarAndSideBar, // soon to be removed 
+  RightContextDrawer, // soon to be removed
+  TextTitle, 
+  TextParagraph, 
+  TextList, 
+  TextQuote,
+  Img, 
+  VideoEmbed,
+  TableOfContents, 
+  Tabs,
+  PageContainer, 
+  Gridx, 
+  Section, 
+  SectionHeader, 
+  PageDivider, 
+  Hero2,
+  CodeBlock,
+  MinimalLayout,
+  Footer, 
+  Callout,
+  ModuleCard, 
+  LilBox, 
+  Gridme,
+  FullChatBot,
+};
+export default GUI;

package/src/registry/GuiRegistry.ts

@@ -0,0 +1,19 @@
+import { createRegistry } from "./factory";
+import ButtonResolver from "../gui/atoms/Button/Button.resolver";
+import LinkResolver from "../gui/atoms/Link/Link.resolver";
+import TypographyResolver from "@/gui/atoms/Typography/Typography.resolver";
+import DrawerResolver from "@/gui/atoms/Drawer/Drawer.resolver";
+import NavBarResolver from "@/gui/molecules/AppBars/TopBar/TopBar.resolver";
+import FooterResolver from "@/gui/molecules/AppBars/Footer/Footer.resolver";
+// etc...
+export const GuiRegistry = createRegistry([
+  //Atoms
+  ButtonResolver,
+  TypographyResolver,
+  LinkResolver,
+  DrawerResolver,
+  //Molecules
+  NavBarResolver,
+  FooterResolver,
+  // ...
+]);

package/src/registry/factory.ts

@@ -0,0 +1,12 @@
+import type { RegistryEntry, GuiRegistry } from "./types";
+
+export function createRegistry(entries: RegistryEntry[]): GuiRegistry {
+  return entries.reduce<GuiRegistry>((acc, e) => {
+    acc[e.type] = e;
+    return acc;
+  }, {} as GuiRegistry);
+}
+
+export function extendRegistry(base: GuiRegistry, entries: RegistryEntry[]): GuiRegistry {
+  return { ...base, ...createRegistry(entries) };
+}