this.gui 1.3.22 → 1.3.26

package/src/gui/components/molecules/HeroSection/HeroSection.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { Box, useTheme } from '@mui/material';
+import type { HeroSectionProps } from './HeroSection.types';
+
+function resolveBlurRadius(theme: any, blur?: 'none'|'light'|'medium'|'heavy'|'all'): string {
+  if (!blur || blur === 'none') return '0px';
+  const fromTheme = theme?.custom?.blurRadius?.[blur];
+  return fromTheme ?? '0px';
+}
+
+function resolveOverlayColor(
+  theme: any,
+  blur?: 'none' | 'light' | 'medium' | 'heavy' | 'all',
+  customColor?: string,
+  overlayColor?: string
+): string {
+  const paletteBlur = blur ? theme?.palette?.blur?.[blur] : undefined;
+
+  const resolved =
+    customColor
+      ? customColor
+      : paletteBlur?.$value
+      ? paletteBlur.$value
+      : typeof paletteBlur === 'string'
+      ? paletteBlur
+      : overlayColor || 'transparent';
+
+  console.log('resolveOverlayColor inputs:', { blur, customColor, overlayColor, paletteBlur });
+  console.log('resolveOverlayColor resolved:', resolved);
+
+  return resolved;
+}
+
+function resolveMediaFilter(blurRadius: string, blur?: 'none'|'light'|'medium'|'heavy'|'all'): string | undefined {
+  if (!blur || blur === 'none') return 'none';
+  return blur === 'all' ? 'saturate(1.05) brightness(0.96)' : 'none';
+}
+
+export const HeroSection: React.FC<HeroSectionProps> = ({
+  backgroundSrc,
+  backgroundType = 'image',
+  overlayColor,
+  children,
+  height = '100vh',
+  padding = 4,
+  blur,
+  customColor,
+}) => {
+  const theme = useTheme();
+
+  //console.log('theme.palette.blur:', theme.palette.blur);
+  //console.log('theme.custom.blurRadius:', theme.custom.blurRadius);
+  //console.log(theme.palette.blur);
+  const blurRadius = resolveBlurRadius(theme, blur);
+  const overlayBg  = resolveOverlayColor(theme, blur, customColor, overlayColor);
+  const mediaFilter = resolveMediaFilter(blurRadius, blur);
+
+  return (
+    <Box
+      component="section"
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height,
+        margin: 0,
+        padding: 0,
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+        zIndex: 0,
+        backgroundColor: 'transparent',
+      }}
+    >
+      {backgroundSrc && (
+        <>
+          {backgroundType === 'video' ? (
+            <Box
+              component="video"
+              src={backgroundSrc}
+              autoPlay
+              muted
+              loop
+              playsInline
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                zIndex: 0,
+                filter: mediaFilter,
+                willChange: 'transform, filter',
+                transform: 'translateZ(0)',
+              }}
+            />
+          ) : (
+            <Box
+              component="img"
+              src={backgroundSrc}
+              alt=""
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                zIndex: 0,
+                filter: mediaFilter,
+                willChange: 'transform, filter',
+                transform: 'translateZ(0)',
+              }}
+            />
+          )}
+
+          {/* Overlay Layer */}
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              backgroundColor: overlayBg,
+              // backdropFilter: blur ? `blur(${blurRadius})` : undefined,
+              // WebkitBackdropFilter: blur ? `blur(${blurRadius})` : undefined,
+              zIndex: 2,
+              transition: 'opacity 0.4s ease',
+            }}
+          />
+        </>
+      )}
+
+      <Box
+        sx={{
+          position: 'relative',
+          zIndex: 3,
+          textAlign: 'center',
+          color: 'text.primary',
+          px: padding,
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+};

package/src/gui/components/molecules/HeroSection/HeroSection.types.tsx

@@ -0,0 +1,18 @@
+export interface HeroSectionProps {
+  /** Imagen, video o GIF de fondo */
+  backgroundSrc?: string;
+  /** Tipo de medio: 'image' | 'video' | 'gif' */
+  backgroundType?: 'image' | 'video' | 'gif';
+  /** Color del overlay (default: theme.palette.background.default) */
+  overlayColor?: string;
+  /** Contenido principal (texto, botones, etc.) */
+  children?: React.ReactNode;
+  /** Altura opcional (por defecto: 100vh) */
+  height?: string | number;
+  /** Padding interno (por defecto: responsive según theme.spacing) */
+  padding?: number | string;
+  /** Nivel de desenfoque: 'none' | 'light' | 'medium' | 'heavy' | 'all' */
+  blur?: 'none' | 'light' | 'medium' | 'heavy' | 'all';
+  /** Color personalizado del overlay (anula overlayColor si se define) */
+  customColor?: string;
+}

package/src/gui/components/molecules/ModalBox/ModalBox.resolver.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { RegistryEntry } from '@/registry/types';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+import ModalBox from './ModalBox';
+import type { ModalBoxProps } from './ModalBox.types.ts';
+
+/**
+ * ModalBoxResolver
+ * - Declaratively maps a JSON-friendly spec to <ModalBox /> props.
+ * - Supports declarative 3D position via xyz prop.
+ * - Keeps it registry-compatible for GUI schema systems.
+ */
+const ModalBoxResolver: RegistryEntry = {
+  type: 'ModalBox',
+  resolve(spec: any) {
+    const p: ModalBoxProps = spec.props ?? {};
+    const rootProps: any = {
+      open: p.open ?? false,
+      title: p.title ?? '',
+      onClose: p.onClose ?? (() => {}),
+      width: p.width ?? 'auto',
+      height: p.height ?? 'auto',
+      blurBackground: p.blurBackground ?? true,
+      xyz: p.xyz,
+      id: ensureNodeId('modalbox', p.id),
+      className: p.className,
+      'data-testid': p['data-testid'],
+    };
+
+    return (
+      <ModalBox {...rootProps}>
+        {p.children}
+      </ModalBox>
+    );
+  },
+};
+
+export default ModalBoxResolver;

package/src/gui/components/molecules/ModalBox/ModalBox.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import ModalBox from "./ModalBox";
+import { Button } from "@mui/material";
+
+const meta: Meta<typeof ModalBox> = {
+  title: "Molecules/Display/ModalBox",
+  component: ModalBox,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ height: "100vh", overflow: "hidden" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**ModalBox** is a flexible, theme-aware modal container with optional background blur and 3D placement support via \`xyz\` props.
+
+---
+## Features
+- Supports background blur overlay for visual depth.
+- Centered responsive layout with dynamic width and height.
+- Declarative 3D placement via \`xyz: [x, y, z]\`.
+- Works with any child components (forms, dialogs, previews, etc.).
+- Compatible with GUI registry and schema resolvers.
+
+---
+## Props
+- \`open\`: Boolean that controls visibility.
+- \`title\`: Optional modal header title.
+- \`onClose\`: Function triggered when closing.
+- \`width\`, \`height\`: Custom modal dimensions.
+- \`blurBackground\`: Enables or disables background blur.
+- \`xyz\`: 3D position array for spatial positioning.
+- \`children\`: Modal content.
+        `,
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof ModalBox>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true); // force open for debugging
+    console.log("ModalBox render", { open, args });
+
+    return (
+      <div
+        style={{
+          position: "relative",
+          height: "100vh",
+          background: "rgba(0,0,0,0.2)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <ModalBox
+          {...args}
+          open={open}
+          onClose={() => setOpen(false)}
+          title={args.title || "Modal Title"}
+        >
+          <p style={{ color: "#fff" }}>This is an example modal content.</p>
+          <p style={{ color: "#ccc" }}>If you see this text, the modal is visible.</p>
+        </ModalBox>
+      </div>
+    );
+  },
+  args: {
+    title: "Example Modal",
+    blurBackground: true,
+    width: 400,
+    height: "auto",
+  },
+};

package/src/gui/components/molecules/ModalBox/ModalBox.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Box, Typography, IconButton } from "@mui/material";
+// Try importing CloseIcon from MUI; fallback to a local SVG if missing
+let CloseIcon: any;
+try {
+  // @ts-ignore
+  CloseIcon = require("@mui/icons-material/Close").default;
+} catch {
+  CloseIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path d="M6 6L18 18M6 18L18 6" stroke="#000" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+interface ModalBoxProps {
+  open: boolean;
+  title?: string;
+  onClose: () => void;
+  children?: React.ReactNode;
+  width?: number | string;
+  height?: number | string;
+  blurBackground?: boolean;
+  xyz?: { x?: number; y?: number; z?: number };
+  insets?: { top?: number; right?: number; bottom?: number; left?: number };
+}
+
+const ModalBox: React.FC<ModalBoxProps> = ({
+  open,
+  title,
+  onClose,
+  children,
+  width = 400,
+  height = "auto",
+  blurBackground = true,
+  xyz,
+  insets,
+}) => {
+  if (!open) return null;
+
+  return (
+    <Box
+      sx={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        background: blurBackground
+          ? "rgba(0,0,0,0.4)"
+          : "rgba(0,0,0,0.7)",
+        backdropFilter: blurBackground ? "blur(6px)" : "none",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 9999,
+      }}
+      onClick={onClose}
+    >
+      <Box
+        sx={{
+          width,
+          height,
+          background: "rgba(255,255,255,0.9)",
+          borderRadius: 4,
+          boxShadow: "0 0 30px rgba(0,0,0,0.3)",
+          position: "absolute",
+          padding: 3,
+          color: "#222",
+          backdropFilter: "blur(8px)",
+          animation: "fadeIn 0.25s ease",
+          top: insets?.top ?? "50%",
+          left: insets?.left ?? "50%",
+          right: insets?.right,
+          bottom: insets?.bottom,
+          transform: `translate(-50%, -50%) ${
+            xyz ? `translate3d(${xyz.x || 0}px, ${xyz.y || 0}px, ${xyz.z || 0}px)` : ""
+          }`,
+          transformStyle: "preserve-3d",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {title && (
+          <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+            {title}
+          </Typography>
+        )}
+        <IconButton
+          onClick={onClose}
+          sx={{
+            position: "absolute",
+            top: 8,
+            right: 8,
+            color: "#333",
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+
+        <Box>{children}</Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ModalBox;

package/src/gui/components/molecules/ModalBox/ModalBox.types.ts

@@ -0,0 +1,29 @@
+/**
+ * ModalBoxProps
+ * Declarative prop types for the ModalBox component.
+ * Supports basic modal behavior and 3D positioning.
+ */
+export interface ModalBoxProps {
+  /** Controls whether the modal is open or closed */
+  open: boolean;
+  /** Optional title to display in the modal header */
+  title?: string;
+  /** Handler to call when the modal should close */
+  onClose?: () => void;
+  /** Modal width (e.g., '400px', '60%', etc.) */
+  width?: string | number;
+  /** Modal height (e.g., 'auto', '80vh', etc.) */
+  height?: string | number;
+  /** Applies a background blur effect when true */
+  blurBackground?: boolean;
+  /** Optional 3D position vector for experimental modal placement */
+  xyz?: [number, number, number];
+  /** Additional className for styling */
+  className?: string;
+  /** Optional ID for targeting and registry mapping */
+  id?: string;
+  /** Optional test ID for automated testing */
+  ['data-testid']?: string;
+  /** Modal content */
+  children?: React.ReactNode;
+}

package/src/gui/components/molecules/Page/Page.stories.tsx

@@ -0,0 +1,135 @@
+import Layout from '@/gui/Layouts/ResponsiveUI/Layout/Layout';
+import { HeroSection } from '@/gui/components/molecules/HeroSection/HeroSection';
+import { InsetsProvider } from '@/gui/contexts/InsetsContext';
+import type { Meta, StoryObj } from '@storybook/react';
+import Page from './Page';
+
+const meta: Meta<typeof Page> = {
+  title: 'Molecules/Content/Page',
+  component: Page,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**Page** is a layout container used to render content inside a layout or route.
+
+---
+## Features
+- Acts as a flexible container for layout content.
+- Supports padding, background color, and custom \`sx\` overrides.
+- Centers and spaces content using responsive defaults.
+- Works seamlessly inside \`Layout\` components.
+
+---
+## Props
+- \`children\`: React nodes to render within the page.
+- \`padding\`: Number or string for inner spacing.
+- \`background\`: Background color or gradient.
+- \`sx\`: MUI style overrides.
+- \`insets\`: Optional positioning insets (top, right, bottom, left) for dynamic positioning.
+        `,
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Page>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div style={{ textAlign: 'center', fontSize: '1.5rem', marginTop: '40vh' }}>
+        This is a default Page.
+      </div>
+    ),
+  },
+};
+
+export const WithPadding: Story = {
+  args: {
+    padding: 6,
+    children: (
+      <div style={{ textAlign: 'center', fontSize: '1.5rem' }}>
+        Page with custom padding (6)
+      </div>
+    ),
+  },
+};
+
+export const WithBackground: Story = {
+  args: {
+    background: 'linear-gradient(135deg, #00bcd4, #006064)',
+    children: (
+      <div style={{ color: 'white', fontSize: '1.5rem', textAlign: 'center', marginTop: '40vh' }}>
+        Page with gradient background
+      </div>
+    ),
+  },
+};
+
+export const CustomSx: Story = {
+  args: {
+    sx: {
+      border: '2px dashed #29b6f6',
+      borderRadius: '16px',
+      backgroundColor: '#e3f2fd',
+    },
+    children: (
+      <div style={{ textAlign: 'center', fontSize: '1.5rem', marginTop: '40vh' }}>
+        Page with custom sx styles
+      </div>
+    ),
+  },
+};
+
+export const InsetsAwarePage: Story = {
+  render: (args) => (
+    <InsetsProvider>
+      <Page {...args}>
+        <div style={{ textAlign: 'center', fontSize: '1.5rem', marginTop: '40vh' }}>
+          Page with padding that adapts to layout insets.
+        </div>
+      </Page>
+    </InsetsProvider>
+  ),
+  args: {
+    background: "rgba(0, 188, 212, 0.15)",
+    padding: 24,
+    insetsAware: true,
+  },
+};
+
+export const LayoutWithPageAndHero: Story = {
+  render: () => (
+    <InsetsProvider>
+      <Layout
+        topBarConfig={{ title: 'Neuroverse Layout' }}
+        leftSidebarConfig={{ initialView: 'menu' }}
+        rightSidebarConfig={{ initialView: 'chat' }}
+      >
+        <Page background="linear-gradient(135deg, #0a192f, #172a45)" padding={4}>
+          <HeroSection
+            backgroundSrc="https://images.unsplash.com/photo-1522202195463-8f34a5fa1d15"
+            backgroundType="image"
+            overlayColor="rgba(10, 25, 47, 0.6)"
+            blur="light"
+          >
+            <div
+              style={{
+                color: 'white',
+                fontSize: '2rem',
+                fontWeight: 600,
+                textAlign: 'center',
+                marginTop: '40vh',
+              }}
+            >
+              Layout with TopBar, LeftSidebar and a HeroSection inside Page
+            </div>
+          </HeroSection>
+        </Page>
+      </Layout>
+    </InsetsProvider>
+  ),
+};

package/src/gui/components/molecules/Page/Page.tsx

@@ -0,0 +1,94 @@
+// Page.tsx
+import React, { useMemo } from 'react';
+import { Box } from '@/gui/components/atoms';
+import { useInsetsContext } from '@/gui/contexts/InsetsContext';
+import { useGuiTheme } from '@/gui/hooks';
+export interface PageProps {
+  children?: React.ReactNode;
+  padding?: number | string;
+  background?: string;
+  sx?: any;
+  insetsAware?: boolean;
+}
+/**
+ * Page
+ * ----------
+ * A flexible container for rendering page-level content within layouts.
+ * Typically used inside Layout components or Routes.
+ *
+ * Features:
+ * - Applies consistent padding and layout structure.
+ * - Supports background color/image and custom sx overrides.
+ * - Fully responsive by default.
+ */
+export default function Page({
+  children,
+  padding = 3,
+  background = 'transparent',
+  sx = {},
+  insetsAware = true,
+}: PageProps) {
+  useInsetsContext();
+  const theme = useGuiTheme();
+
+  const resolvedPadding = useMemo(() => {
+    if (typeof padding === 'number') {
+      if (padding <= 10 && typeof theme.spacing === 'function') {
+        return theme.spacing(padding);
+      }
+      return `${padding}px`;
+    }
+    return padding ?? '0px';
+  }, [padding, theme]);
+
+  const isUniformPadding =
+    typeof resolvedPadding === 'string' && resolvedPadding.trim().split(/\s+/).length === 1;
+
+  const basePadding = isUniformPadding ? resolvedPadding : undefined;
+  const topCalc =
+    insetsAware && basePadding
+      ? `calc(${basePadding} + var(--gui-inset-top, 0px))`
+      : undefined; 
+  const bottomCalc =
+    insetsAware && basePadding
+      ? `calc(${basePadding} + var(--gui-inset-bottom, 0px))`
+      : undefined;
+  const leftCalc =
+    insetsAware && basePadding
+      ? `calc(${basePadding} + var(--gui-inset-left, 0px))`
+      : undefined;
+  const rightCalc =
+    insetsAware && basePadding
+      ? `calc(${basePadding} + var(--gui-inset-right, 0px))`
+      : undefined;
+
+  return (
+    <Box
+      id="page-container"
+      sx={{
+        flex: 1,
+        flexGrow: 1,
+        width: '100%',
+        minHeight: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        padding: resolvedPadding,
+        background,
+        boxSizing: 'border-box',
+        ...(insetsAware &&
+          basePadding && {
+            padding: 0,
+            paddingTop: topCalc,
+            paddingBottom: bottomCalc,
+            paddingLeft: leftCalc,
+            paddingRight: rightCalc,
+          }),
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}