this.gui 1.3.41 → 1.3.42

package/src/gui/Theme/Layout/TopBar/TopBar.stories.tsx

@@ -0,0 +1,350 @@
+import TopBar from './TopBar';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Layout/TopBar',
+  component: TopBar,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+        <Story />
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+`The **TopBar** component provides a responsive, application top bar for navigation, branding and other actions.
+---
+## Features
+- **Branding:** Display a logo and title.
+- **Navigation Links:** With optional icons and dropdown menus (nested children).
+- **Custom actions:** Theme toggle, etc.
+- **Responsive:** Adapts to mobile layouts.
+- **Inset-aware:** Reads global left/right/nav insets from the theme to align with permanent drawers.
+- **Icon support:** Via the This.GUI icon registry (declarative strings).
+
+---
+
+### Position Modes
+- \`position="static"\`: The TopBar scrolls with the content, part of the normal document flow.
+- \`position="fixed"\`: The TopBar stays pinned to the top of the viewport, remaining visible during scrolling.
+- Ergonomically, \`static\` feels fluid and natural for reading layouts, while \`fixed\` provides stability and quick access to main navigation.
+
+---
+
+### Props
+Each element can specify:
+  - \`type\` (string): Element type, e.g. 'link' or 'menu'.
+  - \`props\` (object): Properties for the element.
+    - For \`link\`: \`label\` (string), \`href\` (string), \`icon\` (string), \`iconColor\` (string).
+    - For \`menu\`: \`label\` (string), \`icon\` (string), \`iconColor\` (string), \`children\` (array of elements).
+---
+
+**Example:**
+~~~jsx
+<TopBar
+  logo="https://neurons.me/neurons.me.png"
+  elementsCenter={[
+    { type: 'link', props: { label: 'Home', href: '/', icon: 'home', iconColor: 'primary' } },
+    { type: 'link', props: { label: 'Docs', href: '/docs', icon: 'insights', iconColor: 'secondary' } },
+    {
+      type: 'menu',
+      props: {
+        label: 'More',
+        icon: 'info',
+        iconColor: '#00aa96',
+        items: [
+          { label: 'About', href: '/about', icon: 'message', iconColor: 'info' },
+          { label: 'Contact', href: '/contact', icon: 'mail', iconColor: '#4caf50' },
+        ],
+      },
+    },
+  ]}
+  showThemeToggle
+  position="fixed"
+/>
+~~~
+
+---
+
+#### Dropdown Menus
+- To create a dropdown, provide a \`children\` array with elements of type \`link\` inside a \`menu\` element.
+
+~~~jsx
+<TopBar
+  elementsCenter={[
+    {
+      type: 'menu',
+      props: {
+        label: 'More',
+        icon: 'info',
+        items: [
+          { label: 'About', href: '/about' },
+          { label: 'Contact', href: '/contact' },
+        ],
+      },
+    },
+  ]}
+/>
+~~~
+
+---
+
+#### Icon Usage
+- **Material Symbols:** Use icon names directly (e.g. \`bar_chart\`, \`mail\`, \`insights\`). See [Material Symbols Catalog](https://fonts.google.com/icons?icon.set=Material+Symbols).
+- Icon rendering is handled by the \`<Icon />\` component, which supports font variation settings like \`weight\`, \`fill\`, \`grade\`, \`opticalSize\`, and standard props like \`iconColor\` and \`fontSize\`.
+
+---
+### React Component Mode (Advanced)
+You may also use TopBar as a React component and pass elements as arrays of objects with \`type\` and \`props\`:
+
+~~~jsx
+import TopBar from './TopBar';
+
+<TopBar
+  elementsCenter={[
+    { type: 'link', props: { label: 'Home', href: '/', icon: 'bar_chart', iconColor: 'primary' } },
+    { type: 'link', props: { label: 'Docs', href: '/docs', icon: 'insights', iconColor: '#f50057' } },
+    {
+      type: 'menu',
+      props: {
+        label: 'More',
+        icon: 'info',
+       items: [
+          { label: 'About', href: '/about', icon: 'mail', iconColor: '#4caf50' },
+        ],
+      },
+    },
+  ]}
+  position="static"
+/>
+~~~
+- **Note:** The \`props.icon\` property accepts icon names as strings. Color and style are controlled via \`iconColor\` and other props handled by the \`<Icon />\` component.
+
+---
+
+## Notes
+- TopBar uses \`react-router-dom\` internally. Stories wrap it in a \`MemoryRouter\` for demo purposes.
+- Dropdown menus are created by providing a \`children\` array for any menu element.
+- Icon colors can be set with theme color keys (\`primary\`, \`secondary\`, \`info\`, etc.) or any valid CSS color string.
+- \`elementsCenter\` and \`elementsRight\` accept objects with \`type\` and \`props\`, supporting nested menus.
+- Toggles like showThemeToggle and homeTo/position.
+Inset handling:
+  - Measure Toolbar with toolbarRef, call theme.updateInsets({ nav: h }), and clean up in return → this updates theme.layout.insets.nav in GuiProvider and also the CSS vars (--gui-nav-height).
+Theme integration:
+  - Use useTheme()/useMediaQuery(). In GuiProvider, inject updateInsets and layout.insets into the memoized MUI theme, so TopBar sees them correctly.
+  
+        `,
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      description: 'Title text displayed next to the logo.',
+      control: 'text',
+    },
+    logo: {
+      description: 'Logo image URL shown in the top-left.',
+      control: 'text',
+    },
+    elementsCenter: {
+      description: 'Array of navigation elements for center alignment, e.g. [{ type: "link", props: { label: string, href?: string, icon?: string, iconColor?: string } }, { type: "menu", props: { label: string, icon?: string, iconColor?: string, children: elements[] } }]. Supports nested dropdown menus.',
+      control: 'object',
+    },
+    elementsRight: {
+      description: 'Array of navigation elements for right alignment, similar structure as elementsCenter.',
+      control: 'object',
+    },
+    homeTo: {
+      description: 'Router path for clicking on logo/title.',
+      control: 'text',
+    },
+  },
+} satisfies Meta<typeof TopBar>;
+export default meta;
+export type Story = StoryObj<typeof TopBar>;
+
+export const Default: Story = {
+  args: {
+    title: 'neurons.me',
+    logo: 'https://neurons.me/neurons.me.png',
+    elementsCenter: [
+      { type: 'link', props: { label: 'Home', href: '/', icon: 'home' } },
+      { type: 'link', props: { label: 'Docs', href: '/docs', icon: 'insights' } },
+      {
+        type: 'menu',
+        props: {
+          label: 'More',
+          icon: 'info',
+          items: [
+            { label: 'About', href: '/about', icon: 'message' },
+            { label: 'Contact', href: '/contact', icon: 'mail' },
+          ],
+        },
+      },
+    ],
+    homeTo: '/',
+  },
+};
+
+
+export const FixedTopBar = () => (
+  <>
+    <TopBar
+      title="neurons.me"
+      logo="https://neurons.me/neurons.me.png"
+      elementsCenter={[
+        { type: 'link', props: { label: 'Home', href: '/', icon: 'home' } },
+        { type: 'link', props: { label: 'Docs', href: '/docs', icon: 'insights' } },
+        {
+          type: 'menu',
+          props: {
+            label: 'More',
+            icon: 'info',
+            items: [
+              { label: 'About', href: '/about', icon: 'message' },
+              { label: 'Contact', href: '/contact', icon: 'mail' },
+            ],
+          },
+        },
+      ]}
+      homeTo="/"
+      position="fixed"
+    />
+    <div style={{ marginTop: 80, padding: 20, height: '200vh'}}>
+      {Array(100).fill('Lorem ipsum dolor sit amet, consectetur adipiscing elit. ').join('')}
+    </div>
+  </>
+);
+
+FixedTopBar.storyName = 'Fixed TopBar';
+FixedTopBar.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates the TopBar with `position="fixed"`. Scroll down to see the TopBar stay fixed at the top.',
+    },
+  },
+};
+
+export const StaticTopBar = () => (
+  <>
+    <TopBar
+      title="neurons.me"
+      logo="https://neurons.me/neurons.me.png"
+      elementsCenter={[
+        { type: 'link', props: { label: 'Home', href: '/', icon: 'home' } },
+        { type: 'link', props: { label: 'Docs', href: '/docs', icon: 'insights' } },
+        {
+          type: 'menu',
+          props: {
+            label: 'More',
+            icon: 'info',
+            items: [
+              { label: 'About', href: '/about', icon: 'message' },
+              { label: 'Contact', href: '/contact', icon: 'mail' },
+            ],
+          },
+        },
+      ]}
+      homeTo="/"
+      position="static"
+    />
+    <div style={{ padding: 20, height: '200vh'}}>
+      {Array(100).fill('Lorem ipsum dolor sit amet, consectetur adipiscing elit. ').join('')}
+    </div>
+  </>
+);
+
+StaticTopBar.storyName = 'Static TopBar';
+StaticTopBar.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates the TopBar with `position="static"`. Scroll down to see the TopBar scroll with the page.',
+    },
+  },
+};
+
+export const CenterElements: Story = {
+  args: {
+    title: 'neurons.me',
+    logo: 'https://neurons.me/neurons.me.png',
+    elementsCenter: [
+      { type: 'link', props: { label: 'Home', href: '/', icon: 'home', iconColor: 'primary' } },
+      { type: 'link', props: { label: 'Blog', href: '/blog', icon: 'article', iconColor: 'secondary' } },
+      {
+        type: 'menu',
+        props: {
+          label: 'Services',
+          icon: 'build',
+          iconColor: '#00796b',
+          items: [
+            { label: 'Consulting', href: '/consulting', icon: 'support_agent', iconColor: 'info' },
+            { label: 'Development', href: '/development', icon: 'code', iconColor: '#4caf50' },
+          ],
+        },
+      },
+    ],
+    homeTo: '/',
+  },
+};
+
+export const RightElements: Story = {
+  args: {
+    title: 'neurons.me',
+    logo: 'https://neurons.me/neurons.me.png',
+    elementsRight: [
+      { type: 'link', props: { label: 'Login', href: '/login', icon: 'login', iconColor: 'primary' } },
+      { type: 'link', props: { label: 'Register', href: '/register', icon: 'person_add', iconColor: 'secondary' } },
+      {
+        type: 'menu',
+        props: {
+          label: 'Profile',
+          icon: 'account_circle',
+          iconColor: '#3f51b5',
+          items: [
+            { label: 'Settings', href: '/settings', icon: 'settings', iconColor: 'info' },
+            { label: 'Logout', href: '/logout', icon: 'logout', iconColor: '#f44336' },
+          ],
+        },
+      },
+    ],
+    homeTo: '/',
+  },
+};
+
+export const CenterAndRightElements: Story = {
+  args: {
+    title: 'neurons.me',
+    logo: 'https://neurons.me/neurons.me.png',
+    elementsCenter: [
+      { type: 'link', props: { label: 'Dashboard', href: '/dashboard', icon: 'dashboard', iconColor: 'primary' } },
+      { type: 'link', props: { label: 'Reports', href: '/reports', icon: 'bar_chart', iconColor: 'secondary' } },
+    ],
+    elementsRight: [
+      {
+        type: 'menu',
+        props: {
+          label: 'User',
+          icon: 'account_circle',
+          iconColor: '#3f51b5',
+          items: [
+            { label: 'Profile', href: '/profile', icon: 'person', iconColor: 'info' },
+            { label: 'Logout', href: '/logout', icon: 'logout', iconColor: '#f44336' },
+          ],
+        },
+      },
+    ],
+    homeTo: '/',
+  },
+};
+
+export const NoElements: Story = {
+  args: {
+    title: 'neurons.me',
+    logo: 'https://neurons.me/neurons.me.png',
+    elementsCenter: [],
+    elementsRight: [],
+    homeTo: '/',
+  },
+};

package/src/gui/Theme/Layout/TopBar/TopBar.tsx

@@ -0,0 +1,292 @@
+import { useEffect, useRef } from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { TopBarProps, TopBarElement } from './TopBar.types';
+import type { TopBarMenuItemProps } from './components/TopBarMenu/TopBarMenu.types';
+import TopBarLink from './components/TopBarLink/TopBarLink';
+import TopBarMenu from './components/TopBarMenu/TopBarMenu';
+import TopBarAction from './components/TopBarAction/TopBarAction';
+import { AppBar, Toolbar, Typography, Box, Avatar } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { useGuiTheme, useGuiMediaQuery, useInsets, useUpdateInsets } from '@/gui/hooks';
+const sxN = (...parts: Array<SxProps<Theme> | undefined>): SxProps<Theme> => (parts.filter(Boolean) as unknown) as SxProps<Theme>;
+const buildCollapsedItems = (elements: TopBarElement[]): TopBarMenuItemProps[] => {
+  const items: TopBarMenuItemProps[] = [];
+  elements.forEach((el) => {
+    if (el.type === 'link') {
+      const { label, href, icon, iconColor, external } = el.props as any;
+      if (label && href) {
+        items.push({ label, href, icon, iconColor, external });
+      }
+    } else if (el.type === 'menu') {
+      const { items: sub } = el.props as any;
+      if (Array.isArray(sub)) {
+        // Flatten one level: include submenu items directly
+        sub.forEach((si: TopBarMenuItemProps) => items.push(si));
+      }
+    }
+    // 'action' elements are not included in collapsed menu by default
+  });
+  return items;
+};
+/**
+ * ## TopBar Layout Overview
+ *
+ * The TopBar is divided into three main sections:
+ * - **Brand (Left)** → Displays the logo and title, linking to `homeTo`.
+ * - **Center Elements** → Typically used for navigation links or menus, centered horizontally.
+ * - **Right Elements** → Used for actions, user menus, or secondary navigation.
+ *
+ * ---
+ *
+ * ## Responsiveness Behavior
+ *
+ * The TopBar adapts dynamically to screen width using MUI breakpoints:
+ *
+ * | Viewport        | Breakpoint Range     | Behavior                                 |
+ * |-----------------|----------------------|-------------------------------------------|
+ * | **Desktop**     | ≥ 900px (`md` and up) | Shows icons **and** labels (full view).   |
+ * | **Tablet**      | 600–899px (`sm`–`md`) | Shows **icons only** (labels hidden).     |
+ * | **Mobile**      | < 600px (`sm` down)   | Collapses into two grouped menus.         |
+ *
+ * - The **center section** and **right section** each collapse into a single `TopBarMenu` trigger in mobile view.
+ * - The **collapsed menus** show their corresponding grouped elements as dropdown items.
+ *
+ * ---
+ *
+ * ## Collapsed Icons
+ *
+ * The props `collapsedIconCenter` and `collapsedIconRight` define the icons used when the TopBar collapses into mobile view:
+ *
+ * ```tsx
+ * <TopBar
+ *   collapsedIconCenter="settings"   // default
+ *   collapsedIconRight="more_horiz"  // default
+ * />
+ * ```
+ *
+ * These determine which icons appear for the two grouped mobile dropdown triggers.
+ * The values should correspond to names supported by the `Icon` component (e.g., Material Symbols).
+ *
+ * ---
+ *
+ * ## Notes
+ *
+ * - The TopBar ensures real visual centering of `elementsCenter` using absolute positioning.
+ * - Padding and insets automatically adjust based on AppBar position (`fixed`, `static`, or `sticky`).
+ * - `TopBarLink` and `TopBarMenu` each accept `showLabel` for tablet responsiveness (icons-only view).
+ */
+export default function TopBar(props: TopBarProps) {
+  const {
+    title = '',
+    logo = '',
+    elementsCenter = [],
+    elementsRight = [],
+    homeTo,
+    position = 'fixed',
+    sx,
+    appBarSx,
+    toolbarSx,
+    brandSx,
+    logoSx,
+    titleSx,
+    linksSx,
+    id,
+    className,
+    collapsedIconCenter = 'settings',
+    collapsedIconRight = 'more_horiz',
+  } = props;
+  const theme = useGuiTheme();
+  // Adjusted breakpoints for later collapse:
+  const isMobile = useGuiMediaQuery(theme.breakpoints.down('sm')); // <600px
+  const isDesktop = useGuiMediaQuery(theme.breakpoints.up('md')); // ≥900px
+  const toolbarRef = useRef<HTMLDivElement | null>(null);
+  const appBarRef = useRef<HTMLDivElement | null>(null);
+  const insets = useInsets();
+  const updateInsets = useUpdateInsets();
+  const insetLeft = Math.max(0, Number(insets?.left ?? 0));
+  const insetRight = Math.max(0, Number(insets?.right ?? 0));
+  const horizontalInset = insetLeft + insetRight;
+  const showBrandLabel = !isMobile;
+  const brandInitial = String(title ?? '').trim().charAt(0)?.toUpperCase() || '';
+  const hasBrandLink = homeTo !== null;
+  const resolvedHomeTo = hasBrandLink ? (homeTo ?? '/') : undefined;
+  const brandVisual = logo ? (
+    <Box component="img" src={logo} alt={title ? `${title} logo` : 'Brand logo'} sx={sxN({ height: 28 }, logoSx)} />
+  ) : (
+    <Avatar sx={sxN({ width: 28, height: 28, fontSize: '0.875rem' }, logoSx)}>{brandInitial || '?'}</Avatar>
+  );
+  // Sync nav inset with real rendered height (idempotent via provider)
+  useEffect(() => {
+    if (typeof updateInsets !== 'function') return;
+    const measure = () => {
+      const target = appBarRef.current ?? toolbarRef.current;
+      const h = target?.offsetHeight ?? 48;
+      updateInsets({ nav: h });
+    };
+
+    // initial measure
+    measure();
+    // observe toolbar size changes (density, breakpoints, etc.)
+    let ro: ResizeObserver | undefined;
+    if (typeof ResizeObserver !== 'undefined') {
+      const target = appBarRef.current ?? toolbarRef.current;
+      if (target) {
+        ro = new ResizeObserver(() => measure());
+        ro.observe(target);
+      }
+    }
+
+    return () => {
+      if (ro) ro.disconnect();
+      updateInsets({ top: 0, nav: 0 });
+    };
+  }, [isMobile, updateInsets]);
+  // Sync insets.left with global CSS variable for layout
+  useEffect(() => {
+    if (insets && typeof insets.left === 'number') {
+      document.documentElement.style.setProperty('--gui-inset-left', `${insets.left}px`);
+    }
+  }, [insets.left]);
+  // Determine if the TopBar is fixed or sticky for styling
+  const isFixed = position === 'fixed' || position === 'sticky';
+  // Indentation handled by Toolbar padding-left via --gui-inset-left CSS variable
+  const baseAppBarSx = {
+    minHeight: 48,
+    backgroundColor: theme.palette.background.nav,
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    // Keep AppBar *below* the Drawer so the Drawer edge sits flush over it.
+    zIndex: (theme as any)?.zIndex?.appBar ?? 1100,
+    ...(isFixed && {
+      top: 0,
+      left: `${insetLeft}px`,
+      right: `${insetRight}px`,
+      width: `calc(100% - ${horizontalInset}px)`,
+      transition: 'left 0.3s ease, right 0.3s ease, width 0.3s ease',
+    }),
+    boxSizing: 'border-box',
+  } as const;
+  const flowAppBarSx = !isFixed
+    ? ({
+        ml: `${insetLeft}px`,
+        mr: `${insetRight}px`,
+        width: `calc(100% - ${horizontalInset}px)`,
+        transition: 'margin-left 0.3s ease, margin-right 0.3s ease, width 0.3s ease',
+      } as SxProps<Theme>)
+    : undefined;
+  return (
+    <AppBar
+      id={id}
+      className={className}
+      position={position}
+      elevation={0}
+      ref={appBarRef}
+      sx={sxN(
+        baseAppBarSx as SxProps<Theme>,
+        { '--has-topbar': 1 } as any,
+        flowAppBarSx,
+        sx,
+        appBarSx
+      )}
+    >
+      <Toolbar
+        ref={toolbarRef}
+        variant="dense"
+        disableGutters
+        sx={sxN(
+          isFixed
+            ? {
+                minHeight: 48,
+                pl: 1.5,
+                pr: 1.5,
+                py: 0,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1.25,
+                position: 'relative',
+              }
+            : {
+                minHeight: 48,
+                pl: 1.5,
+                pr: 1.5,
+                py: 0.5,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1.25,
+                position: 'relative',
+              },
+          toolbarSx
+        )}
+      >
+        <Box
+          sx={sxN(
+            {
+              display: 'flex',
+              alignItems: 'center',
+              flexShrink: 0,
+              textDecoration: 'none',
+              ml: 0,
+              pl: 1.5,
+              gap: showBrandLabel ? 1.25 : 0.75,
+              '&:hover': { textDecoration: 'none' },
+              cursor: hasBrandLink ? 'pointer' : 'default',
+            },
+            brandSx
+          )}
+          component={
+            hasBrandLink
+              ? typeof resolvedHomeTo === 'string' && /^(https?:)?\/\//.test(resolvedHomeTo)
+                ? 'a'
+                : (RouterLink as any)
+              : 'div'
+          }
+          {...(hasBrandLink && resolvedHomeTo
+            ? typeof resolvedHomeTo === 'string' && /^(https?:)?\/\//.test(resolvedHomeTo)
+              ? { href: resolvedHomeTo }
+              : { to: resolvedHomeTo }
+            : {})}
+        >
+          {brandVisual}
+          {showBrandLabel && title && (
+            <Typography variant="h6" noWrap component="div" sx={sxN({ color: theme.palette.text.secondary, fontWeight: 500 }, titleSx)}>
+              {title}
+            </Typography>
+          )}
+        </Box>
+        {/* Center Elements */}
+        {!isMobile && (
+          <Box sx={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', pointerEvents: 'none', color: theme.palette.text.secondary }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, pointerEvents: 'auto' }}>
+              {elementsCenter.map((item, idx) => {
+                if (item.type === 'link') return <TopBarLink showLabel={isDesktop} key={item.props.label ?? idx} {...item.props} />;
+                if (item.type === 'menu') return <TopBarMenu showLabel={isDesktop} key={item.props.label ?? idx} {...item.props} />;
+                if (item.type === 'action') return <TopBarAction key={idx} {...item.props} />;
+                return null;
+              })}
+            </Box>
+          </Box>
+        )}
+        {/* Right Elements */}
+        <Box sx={sxN({ display: 'flex', alignItems: 'center', flexShrink: 0, marginLeft: 'auto', gap: 1.25, pr: 1.5, color: theme.palette.text.secondary, transition: 'color 0.2s ease', '&:hover': { color: theme.palette.text.primary } }, linksSx)}>
+          {isMobile ? (
+            <>
+              {elementsCenter.length > 0 && (
+                <TopBarMenu label="" icon={collapsedIconCenter} items={buildCollapsedItems(elementsCenter)} showLabel={false} />
+              )}
+              {elementsRight.length > 0 && (
+                <TopBarMenu label="" icon={collapsedIconRight} items={buildCollapsedItems(elementsRight)} showLabel={false} />
+              )}
+            </>
+          ) : (
+            elementsRight?.map((item, idx) => {
+              if (item.type === 'link') return <TopBarLink showLabel={isDesktop} key={item.props.label ?? idx} {...item.props} />;
+              if (item.type === 'menu') return <TopBarMenu showLabel={isDesktop} key={item.props.label ?? idx} {...item.props} />;
+              if (item.type === 'action') return <TopBarAction key={idx} {...item.props} />;
+              return null;
+            })
+          )}
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+}

package/src/gui/Theme/Layout/TopBar/TopBar.types.ts

@@ -0,0 +1,39 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { AppBarProps } from '@mui/material/AppBar';
+import type { TopBarLinkProps } from './components/TopBarLink/TopBarLink.types';
+import type { TopBarMenuProps } from './components/TopBarMenu/TopBarMenu.types';
+import type { TopBarActionProps } from './components/TopBarAction/TopBarAction.types';
+
+export interface TopBarProps extends AppBarProps {
+  title?: string;
+  logo?: string;
+  elementsCenter?: TopBarElement[];
+  elementsRight?: TopBarElement[];
+  /** Icon name used when center elements are collapsed (mobile). Default: "settings". */
+  collapsedIconCenter?: string;
+  /** Icon name used when right elements are collapsed (mobile). Default: "more_horiz". */
+  collapsedIconRight?: string;
+  homeTo?: string | null;
+  sx?: SxProps<Theme>;
+  appBarSx?: SxProps<Theme>;
+  toolbarSx?: SxProps<Theme>;
+  brandSx?: SxProps<Theme>;
+  logoSx?: SxProps<Theme>;
+  titleSx?: SxProps<Theme>;
+  linksSx?: SxProps<Theme>;
+  linkSx?: SxProps<Theme>;
+  menuSx?: SxProps<Theme>;
+  menuItemSx?: SxProps<Theme>;
+  id?: string;
+  className?: string;
+}
+
+export type TopBarElement =
+  | { type: 'link'; props: TopBarLinkProps }
+  | { type: 'menu'; props: TopBarMenuProps }
+  | { type: 'action'; props: TopBarActionProps };
+  
+export type TopBarResolverSpec = {
+  type: 'TopBar';
+  props?: TopBarProps;
+};