this.gui 1.3.22 → 1.3.26

package/src/gui/contexts/RightSidebarContext.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, useState } from 'react';
+
+export type RightSidebarView = 'rail' | 'expanded' | 'mobile';
+
+export type RightSidebarContextType = {
+  view: RightSidebarView;
+  setView: (view: RightSidebarView) => void;
+};
+
+export const RightSidebarContext = createContext<RightSidebarContextType | undefined>(undefined);
+
+export const RightSidebarProvider: React.FC<{ children: React.ReactNode; initialView?: RightSidebarView }> = ({
+  children,
+  initialView = 'rail',
+}) => {
+  const [view, setView] = useState<RightSidebarView>(initialView);
+
+  return (
+    <RightSidebarContext.Provider value={{ view, setView }}>
+      {children}
+    </RightSidebarContext.Provider>
+  );
+};
+
+export default RightSidebarProvider;

package/src/gui/contexts/ThemeContext.ts

@@ -0,0 +1,34 @@
+//src/themes/utils/themeContext.ts
+import React, { createContext, useContext } from 'react';
+import type { GuiContextValue } from '@/types/theme';
+/**
+ * ThemeContext
+ * ------------
+ * Provides access to the GUI theme context (`GuiContextValue`) throughout the application.
+ * 
+ * This context is intended to be consumed by components that need to access or manipulate:
+ *  - the current theme key (e.g., 'neurons-light')
+ *  - the selected family and mode
+ *  - available themes
+ *  - helper actions like `toggleMode`, `setMode`, etc.
+ * 
+ * The context value is expected to be provided by `GuiProvider`, which wraps the app.
+ */
+export const ThemeContext = createContext<GuiContextValue | undefined>(undefined);
+/**
+ * useThemeContext
+ * ---------------
+ * Custom hook to access the GUI theme context.
+ * 
+ * This hook ensures that it is only used within the `GuiProvider` tree.
+ * If accessed outside the provider, it throws an error to help with debugging.
+ * 
+ * @returns {GuiContextValue} - The full GUI theme context state and helpers.
+ */
+export const useThemeContext = (): GuiContextValue => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useThemeContext must be used within a GuiProvider');
+  }
+  return context;
+};

package/src/gui/contexts/index.ts

@@ -0,0 +1,4 @@
+export * from './InsetsContext';
+export * from './LeftSidebarContext';
+export * from './RightSidebarContext';
+export * from './ThemeContext';

package/src/gui/hooks/index.ts

@@ -0,0 +1,11 @@
+// src/gui/hooks_index.ts
+export * from './useGuiMediaQuery';
+export * from './useGuiTheme';
+export * from './resolveColorToken';
+export * from './useInsets';
+export * from './useIsMobile';
+export * from './useIsTouchDevice';
+export * from './useViewportKey';
+export * from './useViewportProp';
+export * from './useLeftSidebar';
+export * from './useRightSidebar';

package/src/gui/hooks/resolveColorToken.ts

@@ -0,0 +1,39 @@
+//@/gui/hooks/resolveColorToken.ts
+/**
+ * Resolves a color token to a valid CSS color string.
+ *
+ * Supports raw CSS colors (e.g., '#fff', 'rgb(...)', 'hsl(...)'),
+ * and theme palette tokens such as 'primary.main', 'text.secondary', etc.
+ * Falls back to the raw token or undefined if it cannot be resolved.
+ *
+ * @param token - The color token or raw color string to resolve.
+ * @param theme - Optional MUI Theme object to resolve from. Defaults to useTheme() if not provided.
+ * @returns A resolved color string or undefined.
+ */
+import { useTheme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
+
+export function resolveColorToken(token?: string, theme?: Theme): string | undefined {
+  if (!token) return undefined;
+  const resolvedTheme = theme ?? useTheme();
+  const pal: any = resolvedTheme?.palette ?? {};
+
+  // If raw CSS color (e.g. #fff, rgb(...), etc), return as is
+  if (/^#|^rgb\(|^hsl\(/i.test(token)) return token;
+
+  // If dot notation, try to resolve from palette (e.g., text.secondary)
+  if (token.includes('.')) {
+    const v = token.split('.').reduce<any>((acc, k) => (acc ? acc[k] : undefined), pal);
+    if (typeof v === 'string') return v;
+    if (v && typeof v === 'object') return v.main ?? v.default;
+    return undefined;
+  }
+
+  // Otherwise, try direct access (e.g., 'primary', 'secondary')
+  const v = pal[token];
+  if (typeof v === 'string') return v;
+  if (v && typeof v === 'object') return v.main ?? v.default;
+  return undefined;
+}
+
+export default resolveColorToken;

package/src/gui/hooks/useCodeGen.ts

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+export function useCodeGen() {
+  const generate = useCallback(async (type: string, payload: any) => {
+    console.log(`[CodeGen] Request: ${type}`, payload);
+    // For now, fake output:
+    return `Generated mock output for: ${payload.prompt}`;
+  }, []);
+
+  return { generate };
+}
+
+export default useCodeGen;

package/src/gui/hooks/useGuiMediaQuery.ts

@@ -0,0 +1,18 @@
+// src/gui/hooks/useGuiMediaQuery.ts
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+/**
+ * Wrapper around MUI's useMediaQuery that accepts either a string or a function
+ * returning a string based on the theme. This allows using theme breakpoints
+ * easily within the media query.
+ *
+ * @param query - The media query string or a function that takes the theme and returns a string.
+ * @returns A boolean indicating whether the document matches the media query.  
+ */
+export function useGuiMediaQuery(query: string | ((theme: ReturnType<typeof useTheme>) => string)) {
+  const theme = useTheme();
+  const finalQuery = typeof query === 'function' ? query(theme) : query;
+  return useMediaQuery(finalQuery);
+}
+
+export default useGuiMediaQuery;

package/src/gui/hooks/useGuiTheme.ts

@@ -0,0 +1,18 @@
+//@/gui/hooks/useTheme.ts
+/**
+ * React hook wrapper for MUI's `useTheme`.
+ *
+ * This wrapper ensures consistent typing across your app by casting the returned theme
+ * as the expected MUI `Theme`. It allows your components to remain decoupled from direct MUI imports,
+ * making future migration or customization easier.
+ */
+import { useTheme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
+/**
+ * Returns the current theme typed as MUI's `Theme`.
+ */
+export function useGuiTheme(): Theme {
+  return useTheme() as Theme;
+}
+
+export default useGuiTheme;

package/src/gui/hooks/useInsets.ts

@@ -0,0 +1,26 @@
+//@/gui/hooks/useInsets.ts
+import { useContext } from 'react';
+import { useGuiTheme } from '@/gui/hooks';
+import { InsetsContext } from '@/gui/contexts';
+/**
+ * Returns the current insets from the InsetsContext when available.
+ * Falls back to the theme's static layout insets if the provider is missing.
+ */
+export function useInsets() {
+  const theme = useGuiTheme();
+  const context = useContext(InsetsContext);
+  if (context) return context.insets;
+  const fallback = theme.layout?.insets ?? { top: 0, right: 0, bottom: 0, left: 0 };
+  return { nav: 0, ...fallback };
+}
+/**
+ * Returns the updater function for insets, defaulting to a no-op if unavailable.
+ */
+export function useUpdateInsets() {
+  const theme = useGuiTheme() as any;
+  const context = useContext(InsetsContext);
+  if (context) return context.updateInsets;
+  return typeof theme.updateInsets === 'function' ? theme.updateInsets : () => {};
+}
+
+export default useInsets;

package/src/gui/hooks/useIsMobile.ts

@@ -0,0 +1,13 @@
+//@/gui/hooks/useIsMobile.ts
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+/**
+ * Returns `true` if the viewport width is at or below the "sm" breakpoint (mobile).
+ * Abstracts the mobile detection logic away from MUI internals.
+ */
+export function useIsMobile(): boolean {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down('sm'));
+}
+
+export default useIsMobile;

package/src/gui/hooks/useIsTouchDevice.ts

@@ -0,0 +1,25 @@
+// src/gui/hooks/useIsTouchDevice.ts
+
+/**
+ * useIsTouchDevice
+ * ---------------
+ * Hook that determines whether the current device supports touch events.
+ * Useful for adapting UI behavior depending on touch capabilities.
+ */
+
+import { useEffect, useState } from 'react';
+
+export function useIsTouchDevice(): boolean {
+  const [isTouch, setIsTouch] = useState(false);
+
+  useEffect(() => {
+    const hasTouchSupport =
+      typeof window !== 'undefined' &&
+      ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    setIsTouch(hasTouchSupport);
+  }, []);
+
+  return isTouch;
+}
+
+export default useIsTouchDevice;

package/src/gui/hooks/useLeftSidebar.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+
+import { LeftSidebarContext } from "@/gui/contexts";
+export const useLeftSidebar = () => {
+  const context = useContext(LeftSidebarContext);
+  if (!context) {
+    throw new Error('useLeftSidebar must be used within a SidebarProvider');
+  }
+  return context;
+};

package/src/gui/hooks/useRightSidebar.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { RightSidebarContext } from '@/gui/contexts';
+
+export const useRightSidebar = () => {
+  const context = useContext(RightSidebarContext);
+  if (!context) {
+    throw new Error('useRightSidebar must be used within a RightSidebarProvider');
+  }
+  return context;
+};
+
+export default useRightSidebar;

package/src/gui/hooks/useViewportKey.ts

@@ -0,0 +1,19 @@
+//@/gui/hooks/useViewportKey.ts
+/**
+ * Hook that returns the current viewport key ('xs', 'sm', 'md', 'lg', or 'xl')
+ * based on the browser's window.innerWidth and the theme's breakpoints.
+ * Useful for conditional rendering or styling based on screen size.
+ */
+import { useTheme } from '@mui/material/styles';
+export function useViewportKey(): 'xs' | 'sm' | 'md' | 'lg' | 'xl' {
+  const theme = useTheme();
+  const width = typeof window !== 'undefined' ? window.innerWidth : 0;
+  const breakpoints = theme.breakpoints.values;
+  if (width < breakpoints.sm) return 'xs';
+  if (width < breakpoints.md) return 'sm';
+  if (width < breakpoints.lg) return 'md';
+  if (width < breakpoints.xl) return 'lg';
+  return 'xl';
+}
+
+export default useViewportKey;

package/src/gui/hooks/useViewportProp.ts

@@ -0,0 +1,17 @@
+//@/gui/hooks/useViewportProp.ts
+import { useTheme } from '@mui/material/styles';
+import { resolveViewportProp } from '@/types/viewport';
+/**
+ * useViewportProp allows you to pass responsive props as objects (e.g., { sm: 'value', md: 'value' })
+ * and resolves the appropriate value based on the current screen width and theme breakpoints.
+ * This helps in adapting component behavior or styling dynamically based on the viewport.
+ */
+export function useViewportProp<T extends string | number | boolean | object>(
+  prop: T | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', T>> & { default?: T },
+  opts?: { widthOverride?: number }
+): T | undefined {
+  const theme = useTheme();
+  return resolveViewportProp(prop as any, theme, opts);
+}
+
+export default useViewportProp;

package/src/gui/me/Logic.tsx

@@ -0,0 +1,31 @@
+// src/components/me/meCore.ts
+export type MeIdentity = { username: string; publicKey?: string; context?: string };
+
+export const meCore = {
+  state: { identity: null as MeIdentity | null, initialized: false },
+
+  async init() {
+    let identity: MeIdentity | null = null;
+
+    try {
+      const res = await fetch("http://localhost:7070/who");
+      if (res.ok) identity = await res.json();
+    } catch (_) {
+      const stored = localStorage.getItem("this.me");
+      if (stored) identity = JSON.parse(stored);
+    }
+
+    if (!identity) {
+      identity = { username: "guest", context: "browser" };
+      localStorage.setItem("this.me", JSON.stringify(identity));
+    }
+
+    this.state.identity = identity;
+    this.state.initialized = true;
+    return identity;
+  },
+
+  who() {
+    return this.state.identity;
+  },
+};

package/src/gui/me/Me.stories.tsx

@@ -0,0 +1,8 @@
+import Me from "./Me";
+
+export default {
+  title: ".me",
+  component: Me,
+};
+
+export const Default = () => <Me/>;

package/src/gui/me/Me.tsx

@@ -0,0 +1,197 @@
+// Floating .me component — draggable animated orb indicating active status
+import { useState, useEffect, useRef } from "react";
+import { Box } from "@mui/material";
+import { GlobalStyles } from "@mui/system";
+import VerbsBubbles from "./fundamentals/verbs/verbs";
+
+function Me() {
+  const [open, setOpen] = useState(false);
+  const status = { active: true, error: false };
+  // 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<number | null>(null);
+  const dragMoved = useRef(false);
+  /** ✅ Drag */
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setDragging(true);
+    setOffset({ x: e.clientX - pos.x, y: e.clientY - pos.y });
+    dragMoved.current = false;
+    clickTimeout.current = Date.now();
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    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
+        sx={{
+          position: "fixed",
+          left: pos.x,
+          top: pos.y,
+          width: 80,
+          height: 80,
+          pointerEvents: "none",
+        }}
+      >
+        <VerbsBubbles
+          verbs={["be", "have", "do", "relate", "communicate", "react", "at"]}
+          visible={open}
+        />
+        <Box
+          onClick={() => {
+            if (clickTimeout.current !== null) {
+              const elapsed = Date.now() - clickTimeout.current;
+              if (!dragging && !dragMoved.current && elapsed < 300) {
+                setOpen((prev) => !prev);
+              }
+            }
+          }}
+          onMouseDown={handleMouseDown}
+          sx={(theme) => ({
+            position: "absolute",
+            top: 10,
+            left: 10,
+            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%)",
+            pointerEvents: "auto",
+            "&::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>
+      </Box>
+
+      {/* Removed MeState modal for now */}
+    </>
+  );
+}
+
+export default Me;

package/src/gui/me/fundamentals/verbs/verbs.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Box } from '@mui/material';
+
+interface VerbsProps {
+  verbs: string[];
+  visible?: boolean;   // controls show/hide
+  radius?: number;     // distance from center (default 60)
+}
+
+const orbit = `
+  @keyframes orbit {
+    0% {
+      transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
+    }
+  }
+`;
+
+const pulse = `
+  @keyframes pulse {
+    0%, 100% {
+      box-shadow: 0 0 8px 2px rgba(0, 150, 255, 0.7);
+      transform: scale(1);
+    }
+    50% {
+      box-shadow: 0 0 12px 4px rgba(0, 150, 255, 1);
+      transform: scale(1.1);
+    }
+  }
+`;
+
+const styleSheet = `
+  ${orbit}
+  ${pulse}
+`;
+
+const VerbsBubbles: React.FC<VerbsProps> = ({ verbs, visible = false, radius = 60 }) => {
+  console.log("🧠 Verbs active:", verbs);
+  if (!visible) return null;
+
+  const bubbleCount = verbs.length;
+  const angleStep = (2 * Math.PI) / bubbleCount;
+
+  return (
+    <>
+      <style>{styleSheet}</style>
+      {verbs.map((verb, i) => {
+        const angle = i * angleStep;
+        const x = Math.cos(angle) * radius;
+        const y = Math.sin(angle) * radius;
+        const emojiMap: Record<string, string> = {
+          be: "💫",
+          have: "📦",
+          do: "⚙️",
+          relate: "🔗",
+          communicate: "💬",
+          react: "⚡",
+          at: "📍",
+        };
+        const emoji = emojiMap[verb] || "⬤";
+
+        return (
+          <Box
+            key={verb}
+            sx={{
+              position: "absolute",
+              top: `calc(50% + ${y}px)`,
+              left: `calc(50% + ${x}px)`,
+              width: 20,
+              height: 20,
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,150,255,0.15)",
+              border: "1px solid rgba(0,150,255,0.4)",
+              color: "#9ff6ff",
+              fontSize: 12,
+              animation: "orbit 10s linear infinite, pulse 3s ease-in-out infinite",
+              transformOrigin: "center",
+              "--radius": `${radius}px`,
+            }}
+          >
+            {emoji}
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+export default VerbsBubbles;

package/src/gui/me/modificators/Complements.ts

@@ -0,0 +1,27 @@
+// Define types for complements used in verb actions
+// within the Me component.
+// Each complement can be direct or indirect,
+// targeting specific objects or entities.
+export type Complement = {
+  type: "direct" | "indirect";
+  target: string | string[];
+  description?: string;
+};
+
+export interface Complements {
+  direct?: Complement[];
+  indirect?: Complement[];
+}
+
+export function applyComplements(
+  verb: string,
+  complements: Complements
+) {
+  return {
+    verb,
+    action: {
+      direct: complements.direct?.map(c => c.target) ?? [],
+      indirect: complements.indirect?.map(c => c.target) ?? [],
+    },
+  };
+}