this.gui 1.3.41 → 1.3.42

package/src/gui/components/molecules/Theme/ThemesCatalog/ThemesCatalog.resolver.tsx

@@ -0,0 +1,15 @@
+import ThemesCatalog from './ThemesCatalog';
+import type { ThemesCatalogResolverSpec } from './ThemesCatalog.types';
+
+const resolver = {
+  type: 'ThemesCatalog',
+  resolve: (props?: ThemesCatalogResolverSpec) => {
+    const { variant, sx } = props || {};
+    return {
+      component: () => <ThemesCatalog variant={variant} sx={sx} />,
+      props,
+    };
+  },
+};
+
+export default resolver;

package/src/gui/components/molecules/Theme/ThemesCatalog/ThemesCatalog.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ThemesCatalog from './ThemesCatalog';
+
+// ======================= Meta =======================
+const meta: Meta<typeof ThemesCatalog> = {
+  title: 'Theme/ThemesCatalog',
+  component: ThemesCatalog,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 16, minHeight: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The **ThemesCatalog** component renders a visual interface to explore and select available GUI themes for your application.
+
+It fetches all theme configurations from the \`getGuiThemes()\` utility and displays them using a visually rich card interface. You can toggle between **grid** and **list** layouts and switch between light/dark previews per theme. When a theme is selected, it is applied globally via the context provided by \`useThemeContext()\`.
+
+---
+## Features
+- Visual layout for theme browsing.
+- Switch between **grid** and **list** variants.
+- Light/dark mode preview toggle.
+- Swatches preview for key palette values: \`primary\`, \`secondary\`, and \`background\`.
+- Selectable themes that apply across your GUI via context.
+- JSON-compatible configuration for declarative UI building.
+- Fully themed with **This.GUI** primitives.
+
+---
+## Props
+- \`variant?: 'grid' | 'list'\` — controls layout format. Defaults to \`grid\`.
+- \`sx?: SxProps\` — accepts style overrides via MUI’s \`sx\` prop.
+
+---
+## Basic Usage
+~~~jsx
+<ThemesCatalog variant="grid" />
+<ThemesCatalog variant="list" />
+~~~
+
+## Declarative JSON Configuration
+~~~json
+{
+  "type": "ThemesCatalog",
+  "props": {
+    "variant": "list"
+  }
+}
+~~~
+
+This component is ideal for apps that allow users to select their visual theme from a set of predefined theme options. It pairs well with This.GUI’s theme management context and is useful in both developer-facing configuration tools and end-user customization interfaces.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['grid', 'list'],
+      description: 'Choose layout variant',
+    },
+  },
+  args: {
+    variant: 'grid',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ThemesCatalog>;
+
+// ======================= Stories =======================
+export const Playground: Story = {
+  args: {
+    variant: 'grid',
+  },
+};
+
+export const ListVariant: Story = {
+  name: 'List layout',
+  args: {
+    variant: 'list',
+  },
+};

package/src/gui/components/molecules/Theme/ThemesCatalog/ThemesCatalog.tsx

@@ -0,0 +1,167 @@
+// ThemesCatalog.tsx
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ThemesCatalogProps } from './ThemesCatalog.types';
+import { getGuiThemes } from '@/gui/Theme/utils/catalog';
+import type { ThemeManifest } from '@/types/theme';
+import Grid from '@/gui/atoms/Grid/Grid';
+import Card from '@/gui/atoms/Card/Card';
+import CardHeader from '@/gui/atoms/CardHeader/CardHeader';
+import CardContent from '@/gui/atoms/CardContent/CardContent';
+import CardActions from '@/gui/atoms/CardActions/CardActions';
+import Typography from '@/gui/atoms/Typography/Typography';
+import Box from '@/gui/atoms/Box/Box';
+import Avatar from '@/gui/atoms/Avatar/Avatar';
+import Checkbox from '@mui/material/Checkbox';
+import Tooltip from '@mui/material/Tooltip';
+import MuiSwitch from '@mui/material/Switch';
+import Icon from '@/gui/Theme/Icon/Icon';
+import { useThemeContext } from '@/gui/contexts/ThemeContext';
+function getPreviewSwatches(item: ThemeManifest) {
+  const swatches = [];
+  const lightMode = item.mode?.light;
+  if (typeof lightMode === 'object' && lightMode?.palette) {
+    if (lightMode.palette.primary?.main) {
+      swatches.push({ label: 'Primary', value: lightMode.palette.primary.main });
+    }
+    if (lightMode.palette.secondary?.main) {
+      swatches.push({ label: 'Secondary', value: lightMode.palette.secondary.main });
+    }
+    if (lightMode.palette.background?.default) {
+      swatches.push({ label: 'Background', value: lightMode.palette.background.default });
+    }
+  }
+  return swatches;
+}
+export default function ThemesCatalog({ sx, variant = 'grid' }: ThemesCatalogProps = {}) {
+  const themes = getGuiThemes();
+  const { setMode, mode: activeMode, themeId, setThemeId } = useThemeContext();
+  if (!themes || themes.length === 0) {
+    return <Typography>No themes available.</Typography>;
+  }
+
+  // Shared card rendering logic as a helper
+  const ThemeCard = ({ theme }: { theme: ThemeManifest }) => {
+    const light = Boolean(theme.mode?.light);
+    const dark = Boolean(theme.mode?.dark);
+    const isDarkSelected = activeMode === 'dark';
+    return (
+      <Box sx={{ position: 'relative' }}>
+        <Card
+          sx={{
+            p: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            backgroundColor: 'background.default',
+            border: (theme.mode.light as any).palette?.primary?.main
+              ? `1px solid ${(theme.mode.light as any).palette.primary.main}`
+              : '1px solid rgba(0,0,0,0.04)',
+            borderRadius: 1.5,
+            boxShadow: 'none',
+            height: '100%',
+            gap: 0.25,
+          }}
+        >
+          <CardHeader
+            sx={{ mb: 0, '& .MuiCardHeader-content': { overflow: 'hidden' } }}
+            avatar={
+              theme.badgeUrl ? (
+                <Avatar src={theme.badgeUrl} alt={theme.themeName} />
+              ) : (
+                <Avatar>{theme.themeName?.[0] ?? 'T'}</Avatar>
+              )
+            }
+            title={theme.themeName}
+            subheader={theme.author}
+          />
+          <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap', mt: 1 }}>
+            {getPreviewSwatches(theme).map((sw, i) => (
+              <Tooltip key={`${theme.themeId}-swatch-${i}`} title={sw.label}>
+                <Box
+                  sx={{
+                    width: 14,
+                    height: 14,
+                    borderRadius: 1,
+                    ...(String(sw.value).includes('gradient')
+                      ? { background: sw.value }
+                      : { bgcolor: sw.value }),
+                    border: '1px solid rgba(0,0,0,0.2)',
+                  }}
+                />
+              </Tooltip>
+            ))}
+          </Box>
+          <Box sx={{ position: 'absolute', top: 8, right: 8 }}>
+            <Checkbox
+              size="small"
+              color="primary"
+              checked={theme.themeId === themeId}
+              onChange={() => {
+                if (typeof setThemeId === 'function') {
+                  setThemeId(theme.themeId ?? '');
+                }
+                if (typeof setMode === 'function') {
+                  const fallbackMode: 'light' | 'dark' = theme.defaultMode === 'dark' ? 'dark' : 'light';
+                  setMode(fallbackMode);
+                }
+              }}
+              sx={{
+                p: 0.5,
+                backgroundColor: 'background.paper',
+                borderRadius: 1,
+              }}
+            />
+          </Box>
+          <CardContent sx={{ p: 0.75, pt: 0.25 }}>
+            <Typography variant="body2" color="text.secondary">
+              {theme.description}
+            </Typography>
+            {theme.themeId === themeId && (
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', mt: 0.5, mb: 0.25 }}>
+                <Icon name="light_mode" style={{ opacity: light ? 1 : 0.4 }} />
+                <MuiSwitch
+                  size="small"
+                  checked={isDarkSelected}
+                  disabled={!light || !dark}
+                  onChange={(e) => {
+                    const checked = e.target.checked;
+                    const nextMode = checked ? 'dark' : 'light';
+                    if (typeof setMode === 'function') {
+                      try { setMode(nextMode); } catch {}
+                    }
+                  }}
+                  inputProps={{ 'aria-label': 'Toggle light/dark mode' }}
+                />
+                <Icon name="dark_mode" style={{ opacity: dark ? 1 : 0.4 }} />
+              </Box>
+            )}
+          </CardContent>
+          <CardActions>
+          </CardActions>
+        </Card>
+      </Box>
+    );
+  };
+
+  if (variant === 'list') {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, ...sx }}>
+        {themes.map((theme: ThemeManifest) => (
+          <Box key={theme.themeId}>
+            <ThemeCard theme={theme} />
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <Grid container spacing={2} sx={sx}>
+      {themes.map((theme: ThemeManifest) => (
+        <Grid item key={theme.themeId} xs={12} sm={6} md={4} lg={3}>
+          <ThemeCard theme={theme} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+}

package/src/gui/components/molecules/Theme/ThemesCatalog/ThemesCatalog.types.ts

@@ -0,0 +1,34 @@
+import type { SxProps, Theme } from '@mui/system';
+export type ThemesCatalogVariant = 'grid' | 'list';
+
+/**
+ * Props passed directly to the ThemesCatalog React component.
+ */
+export interface ThemesCatalogProps {
+  /**
+   * Whether to display the themes as a grid or list.
+   */
+  variant?: ThemesCatalogVariant;
+  /**
+   * Custom styles for the component container.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * JSON/declarative spec for ThemesCatalog used in resolvers.
+ * This is the shape accepted by the resolver when rendering via config.
+ */
+export interface ThemesCatalogResolverSpec {
+  type?: 'ThemesCatalog';
+
+  /**
+   * Whether to render the themes in a grid or list layout.
+   */
+  variant?: ThemesCatalogVariant;
+
+  /**
+   * Styles applied to the root element.
+   */
+  sx?: SxProps<Theme>;
+}

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

@@ -0,0 +1,49 @@
+/*
+ * This.GUI — Molecules registry
+ * Mid-level components composed from atoms and basic primitives.
+ * Centralise exports here so higher layers (organisms/layouts/apps)
+ * can import from a single namespace instead of deep paths.
+ */
+
+import DialogContent, { DialogProps } from './Dialog/Dialog';
+import { Hero } from './Hero/Hero';
+import type { HeroProps } from './Hero/Hero.types';
+import Modal from './Modal/Modal';
+import Page, { PageProps } from './Page/Page';
+import ThemeModeToggle from './Theme/ThemeModeToggle/ThemeModeToggle';
+import type { ThemeModeToggleProps } from './Theme/ThemeModeToggle/ThemeModeToggle.types';
+import ThemesCatalog from './Theme/ThemesCatalog/ThemesCatalog';
+import type { ThemesCatalogProps } from './Theme/ThemesCatalog/ThemesCatalog.types';
+
+const Theme = {
+  ThemeModeToggle,
+  ThemesCatalog,
+};
+
+const Molecules = {
+  Dialog: DialogContent,
+  Hero,
+  Modal,
+  Page,
+  Theme,
+};
+
+export {
+  DialogContent as Dialog,
+  Hero,
+  Modal,
+  Page,
+  ThemeModeToggle,
+  ThemesCatalog,
+  Theme,
+};
+
+export type {
+  DialogProps,
+  PageProps,
+  HeroProps,
+  ThemeModeToggleProps,
+  ThemesCatalogProps,
+};
+
+export default Molecules as unknown as Record<string, any>;

package/src/gui/components/organisms/Blockchain/Blocks/BlocksTable.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { 
+    Box, 
+    Table,
+    TableHead,
+    TableRow, 
+    TableCell, 
+    TableBody,
+    Typography } from '@/gui/components/atoms';
+
+export interface BlocksTableEntry {
+  id: number;
+  blockId: string;
+  timestamp: number;
+  namespace: string;
+  identityHash: string;
+  expression: string;
+  json: string;
+}
+
+export function BlocksTable({ endpoint }: { endpoint: string }) {
+  const [data, setData] = React.useState<BlocksTableEntry[]>([]);
+
+  React.useEffect(() => {
+    async function loadBlocks() {
+      const base = String(endpoint || '').replace(/\/+$/, '');
+      if (!base) {
+        setData([]);
+        return;
+      }
+
+      const tryFetchJson = async (url: string) => {
+        const res = await fetch(url, { method: 'GET' });
+        const text = await res.text();
+        const ct = res.headers.get('content-type') || '';
+        const looksJson =
+          ct.includes('application/json') ||
+          text.trim().startsWith('{') ||
+          text.trim().startsWith('[');
+
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        if (!looksJson) throw new Error('Not JSON');
+
+        return JSON.parse(text);
+      };
+
+      try {
+        let json: any;
+        try {
+          json = await tryFetchJson(`${base}/blocks`);
+        } catch {
+          // Fallback: some nodes expose blocks at the root URL
+          json = await tryFetchJson(`${base}/`);
+        }
+
+        if (Array.isArray(json)) setData(json as any);
+        else if (Array.isArray(json?.blocks)) setData(json.blocks);
+        else if (Array.isArray(json?.data)) setData(json.data);
+        else setData([]);
+      } catch (e) {
+        console.error('[BlocksTable] Failed to load blocks:', e);
+        setData([]);
+      }
+    }
+    loadBlocks();
+  }, [endpoint]);
+
+  return (
+    <Box
+      sx={{
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: 'divider',
+        background: 'background.nav',
+        overflow: 'hidden',
+      }}
+    >
+      <Table size="small">
+        <TableHead>
+          <TableRow sx={{ background: 'background.paper' }}>
+            <TableCell><Typography fontWeight={700}>ID</Typography></TableCell>
+            <TableCell><Typography fontWeight={700}>Block ID</Typography></TableCell>
+            <TableCell><Typography fontWeight={700}>Timestamp</Typography></TableCell>
+            <TableCell><Typography fontWeight={700}>Namespace</Typography></TableCell>
+            <TableCell><Typography fontWeight={700}>Identity</Typography></TableCell>
+            <TableCell><Typography fontWeight={700}>Expression</Typography></TableCell>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {data.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={6}>
+                <Typography sx={{ opacity: 0.6, py: 3 }}>No blocks yet.</Typography>
+              </TableCell>
+            </TableRow>
+          )}
+
+          {data.map((r) => (
+            <TableRow key={r.blockId}>
+              <TableCell>{r.id}</TableCell>
+              <TableCell sx={{ maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                {r.blockId}
+              </TableCell>
+              <TableCell>{new Date(r.timestamp).toLocaleString()}</TableCell>
+              <TableCell>{r.namespace}</TableCell>
+              <TableCell sx={{ fontFamily: 'monospace' }}>
+                {r.identityHash}
+              </TableCell>
+              <TableCell>{r.expression}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
+
+export default BlocksTable;

package/src/gui/components/organisms/Blockchain/Usernames/Identities.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Identities from "./identities";
+
+const meta: Meta<typeof Identities> = {
+  title: "Identity Noise/Identities",
+  component: Identities,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Identities>;
+
+export const Default: Story = {
+  render: () => <Identities />,
+};