this.gui 1.0.18 → 1.1.0

package/src/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>
+  );
+}

package/src/components/generics/Organization/TableOfContents.jsx

@@ -0,0 +1,51 @@
+import { List, ListItemButton, ListItemText, Typography } from "@mui/material";
+
+/**
+ * PageTableOfContents Component
+ * Generates a table of contents (TOC) from an array of headings.
+ *
+ * Props:
+ * - headings: Array of objects with { id, text, level }:
+ *   - id: The anchor or unique identifier (used for scrolling).
+ *   - text: The heading text to display.
+ *   - level: Heading level (1, 2, or 3). Used to indent items.
+ * - onNavigate: Optional callback when a TOC item is clicked (receives id).
+ */
+export default function TableOfContents({ headings = [], onNavigate }) {
+  if (!headings || headings.length === 0) return null;
+
+  const handleClick = (id) => {
+    if (onNavigate) {
+      onNavigate(id);
+    } else {
+      const el = document.getElementById(id);
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+
+  return (
+    <div style={{ padding: "1rem" }}>
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Table of Contents
+      </Typography>
+      <List dense>
+        {headings.map((heading, index) => (
+          <ListItemButton
+            key={index}
+            sx={{
+              pl: heading.level === 1 ? 1 : heading.level === 2 ? 3 : 5,
+            }}
+            onClick={() => handleClick(heading.id)}
+          >
+            <ListItemText
+              primaryTypographyProps={{
+                variant: heading.level === 1 ? "body1" : "body2",
+              }}
+              primary={heading.text}
+            />
+          </ListItemButton>
+        ))}
+      </List>
+    </div>
+  );
+}

package/src/components/generics/Organization/Tabs.jsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Tabs as MuiTabs, Tab, Box, Typography } from "@mui/material";
+
+/**
+ * Tabs Component
+ * A simple tab system to switch between different content sections.
+ *
+ * Props:
+ * - tabs: Array of objects { label, content } (required).
+ * - initialIndex: Index of the tab to show first (default: 0).
+ * - variant: Tabs variant ("standard" | "scrollable" | "fullWidth"). Default: "standard".
+ */
+export default function Tabs({ tabs = [], initialIndex = 0, variant = "standard" }) {
+  const [value, setValue] = useState(initialIndex);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  if (!tabs || tabs.length === 0) {
+    return <Typography variant="body2">No tabs available.</Typography>;
+  }
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <MuiTabs
+        value={value}
+        onChange={handleChange}
+        variant={variant}
+        sx={{ mb: 2 }}
+      >
+        {tabs.map((tab, index) => (
+          <Tab key={index} label={tab.label} />
+        ))}
+      </MuiTabs>
+      <Box sx={{ p: 2 }}>
+        {tabs[value]?.content || (
+          <Typography variant="body2" color="text.secondary">
+            No content for this tab.
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/components/generics/Text/TextList.jsx

@@ -0,0 +1,41 @@
+import { List, ListItem, ListItemText } from "@mui/material";
+
+/**
+ * TextList Component
+ * Standardized list component for ordered or unordered lists.
+ *
+ * Props:
+ * - items: Array of strings or objects with { primary, secondary } (required).
+ * - type: "unordered" | "ordered" (default: "unordered").
+ * - dense: Reduces vertical spacing (default: false).
+ */
+export default function PageList({ items = [], type = "unordered", dense = false }) {
+  const isOrdered = type === "ordered";
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <List
+      dense={dense}
+      sx={{
+        listStyleType: isOrdered ? "decimal" : "disc",
+        pl: 3,
+        "& .MuiListItem-root": {
+          display: "list-item",
+          py: dense ? 0.25 : 0.5,
+        },
+      }}
+    >
+      {items.map((item, index) => {
+        const primary = typeof item === "string" ? item : item.primary;
+        const secondary = typeof item === "string" ? null : item.secondary;
+
+        return (
+          <ListItem key={index}>
+            <ListItemText primary={primary} secondary={secondary} />
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}

package/src/components/generics/Text/TextParagraph.jsx

@@ -0,0 +1,28 @@
+import { Typography } from "@mui/material";
+
+/**
+ * TextParagraph Component
+ * Standardized paragraph text for pages with consistent spacing and alignment.
+ *
+ * Props:
+ * - children: Text or elements to display as paragraph content.
+ * - align: "left" | "center" | "right" | "justify" (default: "left").
+ * - variant: MUI Typography variant, e.g., "body1" | "body2" | "caption" (default: "body1").
+ * - gutterBottom: Adds bottom spacing (default: true).
+ */
+export default function PageParagraph({
+  children,
+  align = "left",
+  variant = "body1",
+  gutterBottom = true,
+}) {
+  return (
+    <Typography
+      variant={variant}
+      align={align}
+      sx={{ mb: gutterBottom ? 2 : 0 }}
+    >
+      {children}
+    </Typography>
+  );
+}

package/src/components/generics/Text/TextQuote.jsx

@@ -0,0 +1,23 @@
+import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+export default function TextQuote({ children }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  return (
+    <Box
+      component="blockquote"
+      sx={{
+        borderLeft: `4px solid ${theme.palette.primary.main}`,
+        padding: "1rem 1.5rem",
+        margin: "1.5rem 0",
+        fontStyle: "italic",
+        color: theme.palette.text.secondary,
+        "& p": { margin: 0 },
+      }}
+    >
+      <Typography variant="body1">{children}</Typography>
+    </Box>
+  );
+}

package/src/components/generics/Text/TextTitle.jsx

@@ -0,0 +1,44 @@
+import { Box, Typography, Divider } from "@mui/material";
+
+/**
+ * TextTitle Component
+ * Displays a title (h1-h3) and an optional subtitle/description at the top of the page.
+ * Meant to be used inside PageContainer for consistency across layouts.
+ */
+export default function TextTitle({ title, subtitle, h = 1, variant, showDivider = true }) {
+  const variants = {
+    1: "h1",
+    2: "h2",
+    3: "h3",
+    4: "h4",
+    5: "h5",
+    6: "h6",
+  };
+
+  const level = Math.min(Math.max(h, 1), 6);
+  const typographyVariant = variant || variants[level];
+  return (
+    <Box sx={{ width: "100%", mb: 3 }}>
+      <Typography
+        variant={typographyVariant}
+        component={`h${level}`}
+        sx={{
+          fontWeight: 600,
+          mb: subtitle ? 0.5 : 2,
+        }}
+      >
+        {title}
+      </Typography>
+      {subtitle && (
+        <Typography
+          variant="subtitle1"
+          color="text.secondary"
+          sx={{ mb: 1.5 }}
+        >
+          {subtitle}
+        </Typography>
+      )}
+      {showDivider && <Divider />}
+    </Box>
+  );
+}

package/src/components/this.me/MeActive.jsx

@@ -0,0 +1,24 @@
+import { Typography, Link } from "@mui/material";
+
+export function MeActive({ status, endpoint }) {
+  return (
+    <>
+      <Typography variant="subtitle1">
+        <strong>Identidades Disponibles:</strong>
+      </Typography>
+      {status.data.listUs && status.data.listUs.length > 0 ? (
+        status.data.listUs.map((u) => <Typography key={u.alias}>⊙ {u.alias}</Typography>)
+      ) : (
+        <Typography>No hay identidades registradas.</Typography>
+      )}
+      <Link href={`${endpoint}/graphql`} target="_blank" sx={{ mr: 1 }}>
+        GraphQL
+      </Link>
+      <Link href={`${endpoint}/playground`} target="_blank">
+        Playground
+      </Link>
+    </>
+  );
+}
+
+export default MeActive;

package/src/components/this.me/MeFloating.jsx

@@ -0,0 +1,183 @@
+import { useState, useEffect, useRef } from "react";
+import { Box } from "@mui/material";
+import { GlobalStyles } from "@mui/system";
+import maybeDefaultMe from "this.me";
+const me = maybeDefaultMe.default || maybeDefaultMe;
+export default function MeFloating() {
+  const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState(me.state.status);
+
+  useEffect(() => {
+    const updateStatus = (s) => setStatus({ ...s });
+    me.on("status", updateStatus);
+    return () => me.off("status", updateStatus);
+  }, []);
+
+  // Drag state
+  const dockPos = useRef({ x: window.innerWidth - 80, y: window.innerHeight - 80 });
+  const [pos, setPos] = useState(dockPos.current);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const clickTimeout = useRef(null);
+  const dragMoved = useRef(false);
+  /** ✅ Drag */
+  const handleMouseDown = (e) => {
+    setDragging(true);
+    setOffset({ x: e.clientX - pos.x, y: e.clientY - pos.y });
+    dragMoved.current = false;
+    clickTimeout.current = Date.now();
+  };
+
+  const handleMouseMove = (e) => {
+    if (!dragging) return;
+    if (Math.abs(e.clientX - pos.x) > 3 || Math.abs(e.clientY - pos.y) > 3) {
+      dragMoved.current = true;
+    }
+    setPos({ x: e.clientX - offset.x, y: e.clientY - offset.y });
+  };
+
+  const handleMouseUp = () => {
+    setDragging(false);
+    dragMoved.current = false;
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (!dragging) {
+        dockPos.current = { x: window.innerWidth - 80, y: window.innerHeight - 80 };
+        setPos(dockPos.current);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [dragging]);
+
+  return (
+    <>
+      <GlobalStyles
+        styles={{
+          "@keyframes float": {
+            "0%,100%": { transform: "translateY(0) scale(1)", borderRadius: "50%" },
+            "25%": {
+              transform: "translateY(-6px) scale(1.05)",
+              borderRadius: "55% 45% 60% 40% / 60% 55% 45% 40%",
+            },
+            "50%": {
+              transform: "translateY(-8px) scale(1.1)",
+              borderRadius: "50% 60% 40% 55% / 55% 40% 60% 45%",
+            },
+            "75%": {
+              transform: "translateY(-6px) scale(1.05)",
+              borderRadius: "45% 55% 40% 60% / 40% 60% 55% 50%",
+            },
+          },
+          "@keyframes glow": {
+            "0%,100%": {
+              opacity: 0.3,
+              boxShadow: "0 0 4px rgba(255,255,255,0.2), 0 0 8px rgba(173,216,230,0.1)",
+            },
+            "50%": {
+              opacity: 0.5,
+              boxShadow: "0 0 6px rgba(255,255,255,0.3), 0 0 10px rgba(173,216,230,0.15)",
+            },
+          },
+          "@keyframes blobMove": {
+            "0%,100%": {
+              top: "15%",
+              left: "20%",
+              width: "65%",
+              height: "65%",
+              borderRadius: "60% 40% 55% 45% / 50% 60% 40% 50%",
+              filter: "blur(14px)",
+            },
+            "33%": {
+              top: "10%",
+              left: "25%",
+              width: "70%",
+              height: "70%",
+              borderRadius: "55% 60% 40% 45% / 45% 50% 60% 55%",
+              filter: "blur(18px)",
+            },
+            "66%": {
+              top: "18%",
+              left: "15%",
+              width: "60%",
+              height: "60%",
+              borderRadius: "50% 55% 45% 60% / 60% 50% 55% 40%",
+              filter: "blur(12px)",
+            },
+          },
+        }}
+      />
+
+      <Box
+        onClick={() => {
+          const elapsed = Date.now() - clickTimeout.current;
+          if (!dragging && !dragMoved.current && elapsed < 300) {
+            setOpen(true);
+          }
+        }}
+        onMouseDown={handleMouseDown}
+        sx={(theme) => ({
+          position: "fixed",
+          left: pos.x,
+          top: pos.y,
+          width: 60,
+          height: 60,
+          borderRadius: "50%",
+          background:
+            theme.palette.mode === "light"
+              ? "rgba(255,255,255,0.35)"
+              : "rgba(255,255,255,0.1)",
+          boxShadow:
+            !status.active || status.error
+              ? "0 0 0 3px #ff4d4d, 0 0 20px 6px rgba(255,0,0,0.6)"
+              : "0 0 0 3px #29bfff, 0 0 22px 6px rgba(0,200,255,0.6)",
+          border: !status.active || status.error ? "2.5px solid #ff1a1a" : "2.5px solid #9ff6ff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 26,
+          color: theme.palette.mode === "light" ? "#006699" : "#baf3ff",
+          cursor: "pointer",
+          userSelect: "none",
+          animation: "float 6s ease-in-out infinite, glow 4.5s ease-in-out infinite",
+          backdropFilter: "blur(10px) saturate(160%)",
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            top: "15%",
+            left: "20%",
+            width: "65%",
+            height: "65%",
+            background:
+              theme.palette.mode === "light"
+                ? "radial-gradient(circle at 50% 50%, rgba(0,102,153,0.4) 0%, rgba(0,68,102,0) 70%)"
+                : "radial-gradient(circle at 50% 50%, rgba(120,240,255,0.3) 0%, rgba(173,216,230,0) 70%)",
+            filter: "blur(7px)",
+            borderRadius: "60% 40% 55% 45% / 50% 60% 40% 50%",
+            animation: "blobMove 8s ease-in-out infinite",
+            pointerEvents: "none",
+            mixBlendMode: "screen",
+          },
+          "&:hover": {
+            transform: "scale(1.08)",
+          },
+        })}
+      >
+        ⊙
+      </Box>
+
+      {/* Removed MeState modal for now */}
+    </>
+  );
+}

package/src/components/this.me/MeInactive.jsx

@@ -0,0 +1,21 @@
+import { Typography, Button } from "@mui/material";
+
+export default function MeInactive({ onRetry }) {
+  return (
+    <>
+      <Typography color="error" sx={{ mb: 1 }}>
+        ❌ No se detectó .me activo. Por favor verifica la conexión o instala .me.
+      </Typography>
+      <Button
+        variant="outlined"
+        sx={{ mt: 1 }}
+        onClick={() => window.open("https://neurons.me/install-me", "_blank", "noopener,noreferrer")}
+      >
+        🔽 Instalar .me
+      </Button>
+      <Button variant="contained" sx={{ mt: 1 }} onClick={onRetry}>
+        🔁 Reintentar conexión
+      </Button>
+    </>
+  );
+}

package/src/components/this.me/MeListUs.jsx

@@ -0,0 +1,40 @@
+import { Typography, Button, Paper } from "@mui/material";
+
+export default function MeListUs({ list = [], onBack }) {
+  return (
+    <Paper
+      elevation={3}
+      sx={{
+        position: "fixed",
+        bottom: 90,
+        right: 20,
+        width: 320,
+        maxWidth: "90vw",
+        background: "#222",
+        color: "#eee",
+        borderRadius: 2,
+        boxShadow: 4,
+        p: 2,
+        zIndex: 2147483646,
+      }}
+    >
+      <Typography variant="h6">⊙ Mis identidades</Typography>
+
+      {list.length > 0 ? (
+        list.map((item) => (
+          <Typography key={item.alias}>⊙ {item.alias}</Typography>
+        ))
+      ) : (
+        <Typography>No hay identidades registradas.</Typography>
+      )}
+
+      <Button
+        variant="text"
+        sx={{ mt: 2, color: "#aaa" }}
+        onClick={onBack}
+      >
+        ← Volver
+      </Button>
+    </Paper>
+  );
+}

package/src/components/this.me/MeState.jsx

@@ -0,0 +1,25 @@
+import MeActive from "./MeActive";
+import MeInactive from "./MeInactive";
+import MeListUs from "./MeListUs";
+import useMe from "./hooks/useMe";
+
+export default function MeState() {
+  const { status, view, changeView, checkStatus } = useMe();
+
+  return (
+    <>
+      {view === "inactive" && <MeInactive onRetry={checkStatus} />}
+
+      {view === "status" && (
+        <MeActive status={status} onGoListUs={() => changeView("list-us")} />
+      )}
+
+      {view === "list-us" && (
+        <MeListUs
+          list={Array.isArray(status.data?.listUs) ? status.data.listUs : []}
+          onBack={() => changeView("status")}
+        />
+      )}
+    </>
+  );
+}

package/src/components/this.me/hooks/useMe.js

@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+import { me } from "this.me";
+
+/**
+ * ✅ useMe - React bridge for `this.me`
+ * Keeps React in sync with the live `me` instance.
+ */
+export default function useMe() {
+  const [status, setStatus] = useState(me.state.status);
+  const [listUs, setListUs] = useState(me.state.listUs || []);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // ✅ Sync React state with me instance
+    const handleStatusChange = () => setStatus({ ...me.state.status });
+    const handleListUsChange = () => setListUs([...me.state.listUs]);
+
+    me.on("statusChange", handleStatusChange);
+    me.on("listUsChange", handleListUsChange);
+
+    // Initial load
+    (async () => {
+      setLoading(true);
+      await me.status(); // triggers internal update
+      await me.listUs(); // updates list
+      setLoading(false);
+    })();
+
+    return () => {
+      me.off("statusChange", handleStatusChange);
+      me.off("listUsChange", handleListUsChange);
+    };
+  }, []);
+
+  return {
+    status,
+    listUs,
+    loading,
+    checkStatus: () => me.status(),
+    fetchListUs: () => me.listUs(),
+    loadMe: (alias, hash) => me.loadMe(alias, hash),
+  };
+}