this.gui 1.3.41 → 1.3.42

package/src/gui/components/generics/EmojiCursor/EmojiCursor.stories.tsx

@@ -0,0 +1,153 @@
+import React, { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import EmojiCursor from './EmojiCursor';
+
+/**
+ * EmojiCursor
+ *
+ * This story showcases the EmojiCursor component in an isolated playground.
+ * - Select any emoji to use as the cursor.
+ * - Try the preset buttons.
+ * - Toggle the cursor on/off.
+ */
+const meta: Meta<typeof EmojiCursor> = {
+  title: 'generics/EmojiCursor',
+  component: EmojiCursor,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EmojiCursor>;
+
+function CursorSandbox() {
+  const [selectedEmoji, setSelectedEmoji] = useState('😀');
+  const [enabled, setEnabled] = useState(true);
+
+  const cursor = useMemo(() => {
+    if (!enabled) return 'auto';
+    const emoji = (selectedEmoji ?? '').trim();
+    if (!emoji) return 'auto';
+
+    // Build a tiny inline SVG cursor. We render <text> for maximum emoji compatibility.
+    // `encodeURIComponent` ensures safe data URI embedding.
+    const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'>` +
+      `<text x='0' y='24' font-size='24'>${emoji}</text>` +
+      `</svg>`;
+
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}"), auto`;
+  }, [enabled, selectedEmoji]);
+
+  return (
+    <div
+      style={{
+        height: '100vh',
+        padding: 16,
+        boxSizing: 'border-box',
+        cursor,
+        fontFamily:
+          'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          flexWrap: 'wrap',
+          marginBottom: 12,
+        }}
+      >
+        <strong style={{ marginRight: 4 }}>Emoji Cursor</strong>
+
+        <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ opacity: 0.75 }}>Emoji</span>
+          <input
+            value={selectedEmoji}
+            onChange={(e) => setSelectedEmoji(e.target.value)}
+            placeholder="😀"
+            aria-label="Emoji"
+            style={{
+              width: 88,
+              padding: '6px 8px',
+              borderRadius: 8,
+              border: '1px solid rgba(0,0,0,0.25)',
+              outline: 'none',
+            }}
+          />
+        </label>
+
+        <button
+          type="button"
+          onClick={() => setEnabled((v) => !v)}
+          style={{
+            padding: '6px 10px',
+            borderRadius: 8,
+            border: '1px solid rgba(0,0,0,0.25)',
+            background: enabled ? 'rgba(0,0,0,0.06)' : 'transparent',
+            cursor: 'pointer',
+          }}
+        >
+          {enabled ? 'Disable' : 'Enable'}
+        </button>
+
+        <span style={{ opacity: 0.75, marginLeft: 8 }}>
+          Current: <span style={{ fontFamily: 'monospace' }}>{enabled ? selectedEmoji : 'auto'}</span>
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
+        {['😀', '🔥', '✨', '🧠', '🔗', '🧬', '🚀', '⚡️', '✅', '❌'].map((e) => (
+          <button
+            key={e}
+            type="button"
+            onClick={() => {
+              setSelectedEmoji(e);
+              setEnabled(true);
+            }}
+            style={{
+              padding: '8px 10px',
+              borderRadius: 10,
+              border: '1px solid rgba(0,0,0,0.25)',
+              background: 'transparent',
+              cursor: 'pointer',
+              fontSize: 18,
+              lineHeight: 1,
+            }}
+            aria-label={`Set cursor to ${e}`}
+            title={`Set cursor to ${e}`}
+          >
+            {e}
+          </button>
+        ))}
+      </div>
+
+      <div
+        style={{
+          border: '1px dashed rgba(0,0,0,0.25)',
+          borderRadius: 12,
+          padding: 16,
+          minHeight: 240,
+        }}
+      >
+        <p style={{ marginTop: 0, marginBottom: 8, opacity: 0.85 }}>
+          Move your mouse around this area to test the cursor.
+        </p>
+        <p style={{ margin: 0, opacity: 0.65 }}>
+          Tip: some emoji render differently across OS/fonts.
+        </p>
+      </div>
+
+      {/* Render the actual component too (so we ensure it builds/loads). */}
+      <div style={{ position: 'absolute', left: -99999, top: -99999 }}>
+        <EmojiCursor />
+      </div>
+    </div>
+  );
+}
+
+export const Playground: Story = {
+  render: () => <CursorSandbox />,
+};

package/src/gui/components/generics/EmojiCursor/EmojiCursor.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Box, Button } from '@mui/material';
+
+const EmojiCursor = () => {
+  const [selectedEmoji, setSelectedEmoji] = useState('😀');
+
+  return (
+    <Box
+      sx={{
+        height: '100vh', // Full viewport height for testing
+        cursor: selectedEmoji
+          ? `url("data:image/svg+xml,${encodeURIComponent(
+              `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='0' y='24' font-size='24'>${selectedEmoji}</text></svg>`
+            )}"), auto`
+          : 'auto',
+      }}
+    >
+      <Button onClick={() => setSelectedEmoji('🔥')}>Set Cursor to 🔥</Button>
+    </Box>
+  );
+};
+
+export default EmojiCursor;

package/src/gui/components/generics/Feedback/Callout.jsx

@@ -0,0 +1,92 @@
+import { useTheme } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+const variantStyles = {
+  warning: {
+    light: {
+      background: '#fff8e1',
+      border: '#f4b400',
+      color: '#f4b400',
+    },
+    dark: {
+      background: '#2c1a00',
+      border: '#f4b400',
+      color: '#f4b400',
+    },
+  },
+  info: {
+    light: {
+      background: '#e3f2fd',
+      border: '#2196f3',
+      color: '#0d47a1',
+    },
+    dark: {
+      background: '#0d2b45',
+      border: '#64b5f6',
+      color: '#90caf9',
+    },
+  },
+  success: {
+    light: {
+      background: '#e8f5e9',
+      border: '#4caf50',
+      color: '#2e7d32',
+    },
+    dark: {
+      background: '#1b3c28',
+      border: '#66bb6a',
+      color: '#a5d6a7',
+    },
+  },
+  alert: {
+    light: {
+      background: '#ffebee',
+      border: '#f44336',
+      color: '#b71c1c',
+    },
+    dark: {
+      background: '#3d0000',
+      border: '#ef5350',
+      color: '#ef9a9a',
+    },
+  },
+  neutral: {
+    light: {
+      background: '#f5f5f5',
+      border: '#9e9e9e',
+      color: '#424242',
+    },
+    dark: {
+      background: '#2c2c2c',
+      border: '#bdbdbd',
+      color: '#e0e0e0',
+    },
+  },
+};
+
+export default function Callout({
+  children = "This repository is in continuous development and may be unstable.",
+  variant = "warning", // default variant
+}) {
+  const theme = useTheme();
+  const mode = theme.palette.mode;
+  const styles = variantStyles[variant]?.[mode] || variantStyles.warning.light;
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: styles.background,
+        border: `1px solid ${styles.border}`,
+        color: styles.color,
+        padding: '10px 16px',
+        borderRadius: '4px',
+        fontWeight: 'bold',
+        marginBottom: '1.5rem',
+        textAlign: 'center',
+        fontSize: '0.9rem',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/gui/components/generics/Layout/GridX.jsx

@@ -0,0 +1,29 @@
+import { Grid, Box, Typography } from '@mui/material';
+
+/**
+ * PageGrid
+ * Standardized grid container for organizing content in pages.
+ *
+ * Props:
+ * - items: Array of { title, content, xs, md }
+ * - spacing: Grid spacing (default 3)
+ * - sx: Additional styling for the Box wrapper
+ */
+export default function GridX({ items = [], spacing = 3, sx = {} }) {
+  return (
+    <Box sx={{ width: '100%', mt: 2, ...sx }}>
+      <Grid container spacing={spacing}>
+        {items.map((item, index) => (
+          <Grid item xs={item.xs || 12} md={item.md || 6} key={index}>
+            {item.title && (
+              <Typography variant="h6" sx={{ fontWeight: 500, mb: 1 }}>
+                {item.title}
+              </Typography>
+            )}
+            {item.content}
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}

package/src/gui/components/generics/Layout/Hero2.jsx

@@ -0,0 +1,132 @@
+// neurons.me — this.GUI
+// Generic Hero2 component with video background, overlay and titles
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Typography } from '@mui/material';
+
+/**
+ * Hero2
+ * A compact hero/cover with background video or image, an opacity layer, and title/subtitle.
+ *
+ * Props:
+ * - videoSrc: string URL for the background video.
+ * - poster: string URL for the poster/fallback image.
+ * - height: CSS size for hero height (e.g., '220px', '30vh'). Default: '220px'.
+ * - title: string | ReactNode, main title text.
+ * - subTitle: string | ReactNode, secondary text.
+ * - overlayOpacity: number [0..1], darkness of overlay. Default: 0.5.
+ * - overlayColor: CSS color of overlay. Default: '#000'.
+ * - overlayBlur: CSS blur amount for overlay backdrop. Default: '8px'.
+ * - overlayGradient: CSS gradient string for overlay background.
+ * - borderRadius: number | string for rounding container. Default: 12.
+ * - textColor: CSS color for text. Default: '#fff'.
+ * - align: 'center' | 'left' | 'right'. Default: 'center'.
+ * - autoPlay, loop, muted, playsInline: booleans for <video>. Defaults true/true/true/true.
+ * - objectFit: how the media covers the box. Default: 'cover'.
+ * - TitleComponent: optional component to render the title (defaults to GUI.TextTitle or 'h1').
+ * - children: extra nodes rendered under the subtitle (e.g., buttons).
+ */
+export default function Hero2({
+  videoSrc = '/apps/neurons1.mp4',
+  poster,
+  height = '220px',
+  title = 'Apps',
+  subTitle,
+  overlayOpacity = 0.5,
+  overlayColor = '#000',
+  overlayBlur = '8px',
+  overlayGradient,
+  borderRadius = 8,
+  textColor = '#fff',
+  align = 'center',
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  playsInline = true,
+  objectFit = 'cover',
+  TitleComponent,
+  children,
+}) {
+  const Title = TitleComponent || 'h1';
+  const alignMap = {
+    center: { justifyContent: 'center', alignItems: 'center', textAlign: 'center' },
+    left: { justifyContent: 'center', alignItems: 'flex-start', textAlign: 'left', paddingLeft: '1rem' },
+    right: { justifyContent: 'center', alignItems: 'flex-end', textAlign: 'right', paddingRight: '1rem' },
+  };
+
+  return (
+    <Box sx={{ position: 'relative', width: '100%', height, overflow: 'hidden', borderRadius, mb: '2rem' }}>
+      {/* Background Video */}
+      {videoSrc ? (
+        <Box component="video"
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          playsInline={playsInline}
+          poster={poster}
+          sx={{ width: '100%', height: '100%', objectFit }}>
+          <source src={videoSrc} type="video/mp4" />
+          {/* Fallback text */}
+          Tu navegador no soporta video.
+        </Box>
+      ) : (
+        // If no videoSrc, show poster as background
+        <Box sx={{ width: '100%', height: '100%', backgroundImage: poster ? `url(${poster})` : 'none', backgroundSize: 'cover', backgroundPosition: 'center' }} />
+      )}
+
+      {/* Opacity Layer */}
+      <Box
+        sx={{
+          position: 'absolute', inset: 0, pointerEvents: 'none',
+          background: overlayGradient || overlayColor,
+          opacity: overlayOpacity,
+          backdropFilter: `blur(${overlayBlur})`,
+          WebkitBackdropFilter: `blur(${overlayBlur})`,
+        }}
+      />
+
+      {/* Foreground Content */}
+      <Box sx={{ position: 'absolute', inset: 0, display: 'flex', ...alignMap[align] }}>
+        <Box sx={{ color: textColor, textShadow: '0 2px 10px rgba(0,0,0,.6)' }}>
+          {title && (
+            <Title style={{ margin: 0, fontWeight: 800, fontSize: '2rem' }}>
+              {title}
+            </Title>
+          )}
+          {subTitle && (
+            <Typography variant="subtitle1" sx={{ mt: 0.5, opacity: 0.9 }}>
+              {subTitle}
+            </Typography>
+          )}
+          {children && (
+            <Box sx={{ mt: 1.25 }}>
+              {children}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+Hero2.propTypes = {
+  videoSrc: PropTypes.string,
+  poster: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  overlayOpacity: PropTypes.number,
+  overlayColor: PropTypes.string,
+  overlayBlur: PropTypes.string,
+  overlayGradient: PropTypes.string,
+  borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  textColor: PropTypes.string,
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  muted: PropTypes.bool,
+  playsInline: PropTypes.bool,
+  objectFit: PropTypes.string,
+  TitleComponent: PropTypes.elementType,
+  children: PropTypes.node,
+};

package/src/gui/components/generics/Layout/PageContainer.jsx

@@ -0,0 +1,29 @@
+//components/Pages/PageContainer.jsx
+import { Box, useTheme, useMediaQuery } from "@mui/material";
+/**
+ * PageContainer
+ * Generic content wrapper for page layouts.
+ * Provides consistent padding and background only.
+ */
+export default function PageContainer({ children }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  return (
+    <Box
+      sx={{
+        px: isMobile ? 2 : 3,
+        pt: 3,
+        maxWidth: "987px",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+        backgroundColor: theme.palette.background.default,
+        margin: "0 auto"
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/gui/components/generics/Layout/PageDivider.jsx

@@ -0,0 +1,20 @@
+import { Divider } from "@mui/material";
+
+/**
+ * PageDivider Component
+ * A standardized divider to visually separate sections or content blocks.
+ *
+ * Props:
+ * - spacing: Adds vertical spacing above and below the divider (default: 2).
+ * - variant: MUI Divider variant, e.g., "fullWidth", "middle" (default: "fullWidth").
+ */
+export default function PageDivider({ spacing = 2, variant = "fullWidth" }) {
+  return (
+    <Divider
+      variant={variant}
+      sx={{
+        my: spacing,
+      }}
+    />
+  );
+}

package/src/gui/components/generics/Layout/Section.jsx

@@ -0,0 +1,43 @@
+import { Box } from "@mui/material";
+
+/**
+ * Section
+ * Minimal container that respects parent width.
+ * Controls: width, padding, margins, background color.
+ */
+export default function Section({
+  children,
+  width = "100%",           // toma el ancho del padre por defecto
+  padding = 1.6,               // padding base (MUI spacing units)
+  paddingX,                  // opcional: override horizontal
+  paddingY,                  // opcional: override vertical
+  marginY = 3,               // separación vertical por defecto
+  marginTop,                 // override superior
+  marginBottom,              // override inferior
+  bgcolor = "background.paper",
+  sx = {},
+  ...props
+}) {
+  const px = paddingX ?? padding;
+  const py = paddingY ?? padding;
+  const mt = marginTop ?? marginY;
+  const mb = marginBottom ?? marginY;
+
+  return (
+    <Box
+      component="section"
+      sx={{
+        width,
+        px,
+        py,
+        mt,
+        mb,
+        bgcolor,
+        ...sx,
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/gui/components/generics/Layout/SectionHeader.jsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+/**
+ * SectionHeader
+ * Heading block to use inside Section (optional).
+ */
+export default function SectionHeader({ title, subtitle, sx = {} }) {
+  return (
+    <>
+      {title && (
+        <Typography variant="h4" sx={{ fontWeight: 600, mb: subtitle ? 0.5 : 1, ...sx }}>
+          {title}
+        </Typography>
+      )}
+      {subtitle && (
+        <Typography variant="body2" sx={{ color: "text.secondary", mb: 1 }}>
+          {subtitle}
+        </Typography>
+      )}
+    </>
+  );
+}

package/src/gui/components/generics/Media/Img.jsx

@@ -0,0 +1,58 @@
+import { Box, Typography } from "@mui/material";
+/**
+ * PageImage Component
+ * Displays an image with optional alignment and caption.
+ *
+ * Props:
+ * - src: URL of the image (required).
+ * - alt: Alternative text for accessibility (default: "").
+ * - align: "left" | "center" | "right" (default: "center").
+ * - caption: Optional text displayed below the image.
+ * - maxWidth: Maximum width of the image (default: "100%").
+ */
+export default function Img({
+  src,
+  alt = "",
+  align = "center",
+  caption,
+  maxWidth = "100%",
+}) {
+  const justifyContent =
+    align === "left"
+      ? "flex-start"
+      : align === "right"
+      ? "flex-end"
+      : "center";
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: align }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent,
+          width: "100%",
+          mb: caption ? 1 : 0,
+        }}
+      >
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            maxWidth,
+            height: "auto",
+            borderRadius: "4px",
+          }}
+        />
+      </Box>
+      {caption && (
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{ textAlign: align }}
+        >
+          {caption}
+        </Typography>
+      )}
+    </Box>
+  );
+}

package/src/gui/components/generics/Media/VideoEmbed.jsx

@@ -0,0 +1,51 @@
+import { Box } from "@mui/material";
+
+/**
+ * PageEmbed Component
+ * Embeds external content such as videos, maps, or other iframes with a responsive aspect ratio.
+ *
+ * Props:
+ * - src: The URL of the content to embed (required).
+ * - title: Accessible title for the iframe (required for accessibility).
+ * - ratio: Aspect ratio of the embed. Accepts "16:9", "4:3", or custom (default: "16:9").
+ * - allowFullScreen: Allows fullscreen mode (default: true).
+ */
+export default function VideoEmbed({
+  src,
+  title,
+  ratio = "16:9",
+  allowFullScreen = true,
+}) {
+  if (!src) return null;
+
+  const [w, h] = ratio.split(":").map(Number);
+  const paddingTop = (h / w) * 100;
+
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        width: "100%",
+        paddingTop: `${paddingTop}%`,
+        borderRadius: "6px",
+        overflow: "hidden",
+        boxShadow: 1,
+        my: 2,
+      }}
+    >
+      <iframe
+        src={src}
+        title={title}
+        allowFullScreen={allowFullScreen}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          border: 0,
+        }}
+      />
+    </Box>
+  );
+}