this.gui 1.3.40 → 1.3.42

package/dist/init/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "thisgui-demo",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^6.30.1",
+    "this.gui": "^1.2.18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.9.0",
+    "vite": "^6.0.0"
+  }
+}

package/dist/init/src/App.tsx

@@ -0,0 +1,40 @@
+//Include this.GUI components as a showviewcase
+import "./index.css";
+import { useState } from "react";
+export default function App() {
+  const defaultText = "Generation powered by AI.";
+  const [text, setText] = useState(defaultText);
+  const handleFocus = () => {
+    if (text === defaultText) setText("");
+  };
+  const handleBlur = () => {
+    if (text.trim() === "") setText(defaultText);
+  };
+
+  return (
+    <div style={{ textAlign: "center", padding: "2rem" }}>
+      <p style={{ textAlign: "center" }}>
+      <img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/v1760629119/this.gui.neurons.me_mkapde.png" alt=".GUI logo" width="244" />
+      </p>
+      <h1>.GUI</h1>
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        style={{ 
+          textAlign: "center", 
+          border: "none", 
+          fontSize: "1.2rem", 
+          background: "transparent", 
+          outline: "none", 
+          width: "80%",
+          opacity: text === defaultText ? 0.4 : 1,
+          transition: "opacity 0.3s ease"
+        }}
+      />
+      <hr style={{ margin: "2rem auto", width: "60%" }} />
+    </div>
+  );
+}

package/dist/init/src/index.css

@@ -0,0 +1,16 @@
+:root {
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  color: #1f2933;
+  background-color: #f5f7fb;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+.app-container {
+  max-width: 960px;
+  margin: 96px auto;
+  padding: 0 24px;
+}

package/dist/init/src/main.tsx

@@ -0,0 +1,13 @@
+// init/src/main.tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import { GuiProvider } from "this.gui";
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <GuiProvider>
+        <App />
+    </GuiProvider>
+  </React.StrictMode>
+);

package/dist/init/src/router/DerivableRouter.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
+type DerivableRouterContextType = {
+  currentPath: string;
+  navigate: (path: string) => void;
+};
+
+const DerivableRouterContext = createContext<DerivableRouterContextType | undefined>(undefined);
+export const DerivableRouterProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [currentPath, setCurrentPath] = useState<string>(location.pathname);
+  useEffect(() => {
+    setCurrentPath(location.pathname);
+  }, [location.pathname]);
+  return (
+    <DerivableRouterContext.Provider value={{ currentPath, navigate }}>
+      {children}
+    </DerivableRouterContext.Provider>
+  );
+};
+
+export const useDerivableRouter = (): DerivableRouterContextType => {
+  const ctx = useContext(DerivableRouterContext);
+  if (!ctx) {
+    throw new Error('useDerivableRouter must be used within a DerivableRouterProvider');
+  }
+  return ctx;
+};
+
+// Wrapper to ensure routing context
+export const DerivableRouterRoot: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <BrowserRouter>
+    <DerivableRouterProvider>{children}</DerivableRouterProvider>
+  </BrowserRouter>
+);

package/dist/init/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src"]
+}

package/dist/init/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': '/src'
+    }
+  }
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "this.gui",
   "private": false,
-  "version": "1.3.40",
+  "version": "1.3.42",
   "type": "module",
   "main": "./dist/this.gui.cjs",
   "module": "./dist/this.gui.es.js",
@@ -22,14 +22,16 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "bin": {
     "gui": "./dist/bin/cli.js"
   },
   "scripts": {
-    "build": "vite build && npm run build:cli",
+    "build": "vite build && npm run build:cli && npm run build:copy-init",
     "build:cli": "tsc --project tsconfig.cli.json",
+    "build:copy-init": "node -e \"const fs=require('fs-extra'); if(!fs.existsSync('init')){throw new Error('init directory missing at project root');} fs.removeSync('dist/init'); fs.copySync('init','dist/init');\"",
     "pack:local": "npm run build && npm pack",
     "prepublishOnly": "npm run build",
     "dev": "vite",

package/src/GUI.tsx

@@ -0,0 +1,46 @@
+// src/GUI.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { GuiProvider } from '../index';
+import { QRouter } from '@/QRouter/QRouter';
+
+export const GUI = ({ title = 'this.GUI', children }: { title?: string; children?: React.ReactNode }) => {
+  return (
+    <GuiProvider>
+      <QRouter>
+        <main style={{ padding: '2rem' }}>
+          <h1>{title}</h1>
+          {children ?? <p>Ready to render declarative GUI components.</p>}
+        </main>
+      </QRouter>
+    </GuiProvider>
+  );
+};
+
+// ✅ Register as a Web Component for HTML usage
+if (typeof window !== 'undefined' && !customElements.get('gui-app')) {
+  customElements.define(
+    'gui-app',
+    class extends HTMLElement {
+      connectedCallback() {
+        const mount = document.createElement('div');
+        this.appendChild(mount);
+        ReactDOM.createRoot(mount).render(<GUI />);
+        console.log('[GUI] <gui-app> mounted');
+      }
+    }
+  );
+}
+
+// ✅ Auto-bootstrap if loaded directly (e.g., via <script src="this.gui.umd.js">)
+if (typeof window !== 'undefined') {
+  window.addEventListener('DOMContentLoaded', () => {
+    const rootTag = document.querySelector('gui-app');
+    if (rootTag) return; // already handled by custom element
+    const auto = document.getElementById('root');
+    if (auto) {
+      ReactDOM.createRoot(auto).render(<GUI />);
+      console.log('[GUI] Auto-booted inside #root');
+    }
+  });
+}

package/src/QRouter/QRegistry.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+export type QuantumNode = {
+  path: string;
+  derivedAt: number;
+  active?: boolean;
+};
+
+type QuantumRegistryContextType = {
+  nodes: QuantumNode[];
+  registerNode: (path: string) => void;
+  unregisterNode: (path: string) => void;
+  setActiveNode: (path: string) => void;
+};
+
+const QuantumRegistryContext = createContext<QuantumRegistryContextType | undefined>(undefined);
+export const QRegistryProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [nodes, setNodes] = useState<QuantumNode[]>([]);
+  const registerNode = (path: string) => {
+    setNodes((prev) => {
+      if (prev.find((n) => n.path === path)) return prev;
+      return [...prev, { path, derivedAt: Date.now(), active: false }];
+    });
+  };
+
+  const unregisterNode = (path: string) => {
+    setNodes((prev) => prev.filter((n) => n.path !== path));
+  };
+
+  const setActiveNode = (path: string) => {
+    setNodes((prev) =>
+      prev.map((n) => ({
+        ...n,
+        active: n.path === path,
+      }))
+    );
+  };
+
+  return (
+    <QuantumRegistryContext.Provider value={{ nodes, registerNode, unregisterNode, setActiveNode }}>
+      {children}
+    </QuantumRegistryContext.Provider>
+  );
+};
+
+export const useQuantumRegistry = () => {
+  const context = useContext(QuantumRegistryContext);
+  if (!context) {
+    throw new Error("useQuantumRegistry must be used within a QRegistryProvider");
+  }
+  return context;
+};
+
+export default QRegistryProvider;

package/src/QRouter/QRouter.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { QRouter } from "./QRouter";
+import { Link, Routes, Route } from "react-router-dom";
+
+const meta: Meta<typeof QRouter> = {
+  title: "Routing/QRouter",
+  component: QRouter,
+};
+
+export default meta;
+type Story = StoryObj<typeof QRouter>;
+
+export const Default: Story = {
+  render: () => (
+    <QRouter>
+      <div style={{ padding: "2rem" }}>
+        <h2>🌀 QRouter Demo</h2>
+        <p>This story demonstrates dynamic quantum routing.</p>
+        <p>
+          Try navigating to <Link to="/hello">/hello</Link> or{" "}
+          <Link to="/world">/world</Link>.
+        </p>
+        <Routes>
+          <Route path="/hello" element={<div>Hello Quantum 🌐</div>} />
+          <Route path="/world" element={<div>World Quantum ⚛️</div>} />
+        </Routes>
+      </div>
+    </QRouter>
+  ),
+};

package/src/QRouter/QRouter.tsx

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useMemo, useState, ReactNode } from "react";
+import { BrowserRouter, useInRouterContext } from "react-router-dom";
+type QuantumNode = { id: string; path: string; element: ReactNode; derived?: boolean };
+type LinkObject = { href: string; rel?: string; label?: string };
+type QRouterContextValue = {
+  nodes: QuantumNode[];
+  addNode: (node: QuantumNode) => void;
+  deriveRoute: (path: string) => void;
+  registerLinks: (links: LinkObject[]) => void;
+};
+const QRouterContext = createContext<QRouterContextValue | null>(null);
+export const useQRouter = () => {
+  const ctx = useContext(QRouterContext);
+  if (!ctx) throw new Error("useQRouter must be used within QRouter");
+  return ctx;
+};
+
+export const QRouter: React.FC<{ children?: ReactNode }> = ({ children }) => {
+  const [nodes, setNodes] = useState<QuantumNode[]>(() => [
+    { id: "__default_root__", path: "/", element: <div style={{ padding: 16 }}>🏠 Home</div> },
+  ]);
+  const [links, setLinks] = useState<LinkObject[]>([]);
+  const inRouter = useInRouterContext(); // detecta si ya existe un router activo
+
+  const addNode = (node: QuantumNode) =>
+    setNodes((prev) => {
+      const idx = prev.findIndex((n) => n.path === node.path);
+      if (idx === -1) return [...prev, node];
+      const next = prev.slice();
+      // Override by path (the app should be able to replace the default root route)
+      next[idx] = { ...prev[idx], ...node };
+      return next;
+    });
+
+  const deriveRoute = (path: string) => {
+    if (path === "/") return; // never overwrite root
+    const id = path.replace(/\//g, "_") || "root";
+    addNode({ id, path, element: <div style={{ padding: 16 }}>✨ Quantum derived: {path}</div>, derived: true });
+  };
+
+  const registerLinks = (newLinks: LinkObject[]) => {
+    setLinks((prev) => {
+      const existing = new Set(prev.map((l) => l.href));
+      const filtered = newLinks.filter((l) => !existing.has(l.href));
+      return [...prev, ...filtered];
+    });
+  };
+
+  const value = useMemo(() => ({ nodes, addNode, deriveRoute, registerLinks }), [nodes]);
+
+  const Inner = <QRouterContext.Provider value={value}>{children}</QRouterContext.Provider>;
+
+  // 🧩 Si ya hay router, úsalo. Si no, crea uno.
+  return inRouter ? Inner : <BrowserRouter>{Inner}</BrowserRouter>;
+};
+
+export default QRouter;

package/src/gui/Theme/GuiProvider.tsx

@@ -0,0 +1,111 @@
+// src/themes/GuiProvider.tsx
+import React, { useEffect, useMemo, useState } from 'react';
+import { generatePaletteCssVars } from './utils/themeUtils';
+import { ThemeContext } from '@/gui/contexts/ThemeContext';
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import { themeTokens } from '@/gui/Theme/styles/theme.tokens';
+import { usePersistentThemeId, usePersistentThemeMode } from './utils/persistence';
+import { makeMuiTheme } from '@/gui/Theme/fromTokens';
+import { GuiThemes, getGuiTheme } from './utils/catalog';
+import { InsetsProvider, useInsetsContext } from '@/gui/contexts/InsetsContext';
+// -------------------------------- Types --------------------------------
+import type {
+  GuiContextValue,
+} from '@/types/theme';
+export type GuiProviderProps = {
+  initialThemeId?: string;
+  initialMode?: 'light' | 'dark'; // <-- añadido
+  children?: React.ReactNode;
+};
+
+export function GuiProvider({
+  initialThemeId = 'neurons.me',
+  initialMode = 'light', // default
+  children,
+}: GuiProviderProps) {
+  // Persist last chosen `themeId`
+  const [themeId, setThemeId] = usePersistentThemeId(initialThemeId);
+  // Persist last chosen `mode`
+  const [mode, setModeState] = usePersistentThemeMode(initialMode);
+  // Resolve manifest for current themeId (the GuiTheme which contains both modes)
+  const manifest = useMemo(() => {
+    return getGuiTheme(themeId) ?? GuiThemes[0];
+  }, [themeId]);
+  // Expose an `active` object for convenience (manifest + current selected mode)
+  const active = useMemo(() => {
+    return {
+      ...(manifest ?? {}),
+      mode,
+    } as (typeof manifest & { mode: 'light' | 'dark' });
+  }, [manifest, mode]);
+  // Build MUI themes for both dark and light using the manifest's mode tokens.
+  // IMPORTANT: makeMuiTheme signature assumed: makeMuiTheme(baseTokens, modeTokens, mode)
+  const { mode: manifestModes } = manifest || ({} as any);
+  const lightMuiTheme = useMemo<Theme>(() => {
+    const lightTokens = manifestModes?.light ?? {};
+    return makeMuiTheme(themeTokens, lightTokens, 'light');
+  }, [manifestModes]);
+  const darkMuiTheme = useMemo<Theme>(() => {
+    const darkTokens = manifestModes?.dark ?? {};
+    return makeMuiTheme(themeTokens, darkTokens, 'dark');
+  }, [manifestModes]);
+  const theme = mode === 'dark' ? darkMuiTheme : lightMuiTheme;
+  useEffect(() => {
+    generatePaletteCssVars(theme);
+  }, [theme]);
+  // Ensure saved key is valid with the current catalog
+  useEffect(() => {
+    if (GuiThemes.length === 0) return;
+    const ok = GuiThemes.some((e) => e.themeId === themeId);
+    if (!ok) setThemeId(GuiThemes[0].themeId ?? '');
+  }, [themeId, setThemeId]);
+  // API for changing mode without touching themeId
+  const setMode = (nextMode: 'light' | 'dark') => {
+    setModeState(nextMode);
+  };
+
+  const toggleMode = () => setModeState((m) => (m === 'dark' ? 'light' : 'dark'));
+  const ctxValue: GuiContextValue = useMemo(
+    () => ({
+      themeId: manifest?.themeId ?? '',
+      setThemeId,
+      themeName: manifest?.themeName ?? '',
+      mode,
+      setMode,
+      toggleMode,
+    }),
+    [manifest?.themeId, manifest?.themeName, mode, setThemeId]
+  );
+
+  return (
+    <InsetsProvider>
+      <GuiThemeBridge theme={theme} ctxValue={ctxValue}>
+        {children}
+      </GuiThemeBridge>
+    </InsetsProvider>
+  );
+}
+
+const GuiThemeBridge: React.FC<{ theme: Theme; ctxValue: GuiContextValue; children?: React.ReactNode }> = ({ theme, ctxValue, children }) => {
+  const { insets, updateInsets } = useInsetsContext();
+  const themeWithInsets = useMemo(() => {
+    return {
+      ...theme,
+      layout: {
+        ...(theme as any).layout,
+        insets,
+      },
+      updateInsets,
+    } as Theme & { layout: any; updateInsets: typeof updateInsets };
+  }, [insets, theme, updateInsets]);
+
+  return (
+    <ThemeProvider theme={themeWithInsets}>
+      <CssBaseline />
+      <ThemeContext.Provider value={ctxValue}>{children}</ThemeContext.Provider>
+    </ThemeProvider>
+  );
+};
+
+export default GuiProvider;

package/src/gui/Theme/Icon/Icon.resolver.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { RegistryEntry, ResolveCtx } from '@/gui/registry/types';
+import Icon from '@/gui/Theme/Icon/Icon';
+
+export type IconSpec = {
+  type: 'Icon';
+  props: {
+    name: string;
+    fill?: number;
+    weight?: number;
+    grade?: number;
+    opticalSize?: number;
+    fontSize?: number | string;
+    iconColor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: any; // permite pasar props adicionales
+  };
+};
+
+const IconResolver: RegistryEntry = {
+  type: 'Icon',
+  resolve(spec: IconSpec, _ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+    return <Icon {...p} />;
+  },
+};
+
+export default IconResolver;

package/src/gui/Theme/Icon/Icon.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import 'material-symbols';
+
+export type IconProps = {
+  name: string; // e.g., 'material:home'
+  iconColor?: string; // CSS color value
+  fontSize?: number | string; // optional font size
+  weight?: number; // font variation setting
+  fill?: number; // font variation setting (0 = outlined, 1 = filled)
+  grade?: number;
+  opticalSize?: number;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export default function Icon({
+  name,
+  iconColor,
+  fontSize,
+  weight = 400,
+  fill = 0,
+  grade = 0,
+  opticalSize = 24,
+  className,
+  style,
+}: IconProps) {
+  const iconName = name;
+  const variationSettings = `"FILL" ${fill}, "wght" ${weight}, "GRAD" ${grade}, "opsz" ${opticalSize}`;
+  return (
+    <span
+      className={clsx('material-symbols-rounded', className)}
+      style={{
+        fontVariationSettings: variationSettings,
+        color: iconColor,
+        fontSize,
+        ...style,
+      }}
+    >
+      {iconName}
+    </span>
+  );
+}

package/src/gui/Theme/Layout/Content/Content.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Layout from '@/gui/Theme/Layout/Layout/Layout';
+import Box from '@/gui/atoms/Box/Box';
+import Typography from '@/gui/atoms/Typography/Typography';
+
+const meta: Meta<typeof Layout> = {
+  title: 'Layout/Content/Content',
+  component: Layout,
+  parameters: { layout: 'fullscreen' },
+};
+export default meta;
+
+interface DemoContentProps {
+  text: string;
+}
+
+const DemoContent: React.FC<DemoContentProps> = ({ text }) => (
+  <Box
+    sx={{
+      minHeight: '100vh',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      bgcolor: 'background.default',
+      color: 'text.primary',
+    }}
+  >
+    <Typography variant="h4">{text}</Typography>
+  </Box>
+);
+
+const Template = (args: React.ComponentProps<typeof Layout>): React.JSX.Element => (
+  <Layout {...args}>
+    <DemoContent text="This is the Content area" />
+  </Layout>
+);
+
+type Story = StoryObj<typeof Layout>;
+
+export const OnlyContent: Story = {
+  render: Template,
+  args: {
+    topBarConfig: false,
+    leftSidebarConfig: false,
+    rightSidebarConfig: false,
+    footerConfig: false,
+  },
+};
+
+export const WithTopBar: Story = {
+  render: Template,
+  args: {
+    topBarConfig: { title: 'Top Bar Example' },
+  },
+};
+
+export const WithSidebars: Story = {
+  render: Template,
+  args: {
+    leftSidebarConfig: { initialView: 'expanded' },
+    rightSidebarConfig: { initialView: 'expanded' },
+  },
+};
+
+export const WithTopBarAndSidebars: Story = {
+  render: Template,
+  args: {
+    topBarConfig: { title: 'Top Bar Example' },
+    leftSidebarConfig: { initialView: 'rail' },
+    rightSidebarConfig: { initialView: 'expanded' },
+  },
+};
+
+export const FullLayout: Story = {
+  render: Template,
+  args: {
+    topBarConfig: { title: 'Full Layout' },
+    leftSidebarConfig: { initialView: 'rail' },
+    rightSidebarConfig: { initialView: 'rail' },
+    footerConfig: {
+      brandLabel: 'neurons.me',
+      position: 'static',
+      leftElements: [{ type: 'link', props: { label: 'Docs', href: '/docs' } }],
+      rightElements: [{ type: 'link', props: { label: 'GitHub', href: 'https://github.com/neurons-me' } }],
+    },
+  },
+};