@genesislcap/blank-app-seed 5.10.4-prerelease.1 → 5.11.0-prerelease.2

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "5.10.4-prerelease.1",
+  "version": "5.11.0-prerelease.2",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/.genx/templates/react/component/component.hbs

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 {{#ifEquals tile.type 'entity-manager'}}
 import { EntityManagement } from '@genesislcap/foundation-entity-management/react';
 {{/ifEquals}}
@@ -55,8 +54,9 @@ import { actions } from '../../../store/store';
 import { useSelector } from 'react-redux';
 import { selectors } from '../../../store/store';
 {{/if}}
-import { layoutComponentsMap, LayoutComponentNames } from '../../../store/store';
-import { getElementByTagFromComponent } from '../../../utils/goldenLayout.helper';
+{{#ifAny tile.config.snapshot tile.config.reqrep tile.config.eventing.listener}}
+import { DatasourceConfiguration } from '@genesislcap/foundation-entity-management';
+{{/ifAny}}
 import './{{pascalCase tile.title}}Component.css';
 
 {{#ifAny tile.metadata.comment tile.metadata.todo}}
@@ -76,7 +76,11 @@ export const {{pascalCase tile.componentName}}: React.FC = () => {
   {{/if}}
   {{#if tile.config.eventing.publishEventName}}
   const handleRowSelection = (e: any) => {
+    {{#ifEquals tile.type 'entity-manager'}}
+    const selectedRows = e.detail.api.getSelectedRows();
+    {{else}}
     const selectedRows = e.api.getSelectedRows();
+    {{/ifEquals}}
     if (!selectedRows || !selectedRows.length) {
       actions.eventing.publish{{pascalCase tile.config.eventing.publishEventName}}(null);
       return;
@@ -100,8 +104,9 @@ export const {{pascalCase tile.componentName}}: React.FC = () => {
   {{#if tile.config.columns}}
   const columnDefs: typeof columnDefsTile = [...columnDefsTile];
   {{/if}}
+  {{#ifEquals tile.type 'grid-pro'}}
   {{#ifAny tile.config.gridOptions tile.config.eventing.publishEventName}}
-  const gridOptions: { {{#if tile.config.gridOptions}}onRowClicked: GridOptionsConfig['onRowClicked'], {{/if}}{{#if tile.config.eventing.publishEventName}}onSelectionChanged: any, rowSelection: 'multiple' | 'single'{{/if}} } = {
+  const gridOptions: GridOptionsConfig = {
     {{#if tile.config.gridOptions}}
     onRowClicked: gridOptionsTile?.onRowClicked,
     {{/if}}
@@ -111,56 +116,28 @@ export const {{pascalCase tile.componentName}}: React.FC = () => {
     {{/if}}
   }
   {{/ifAny}}
-  const datasourceConfig: { isSnapshot?: boolean, pollingInterval?: string, requestAutoSetup?: string, criteria?: string } = {
+  {{/ifEquals}}
+  {{#ifAny tile.config.snapshot tile.config.reqrep tile.config.eventing.listener}}
+  const datasourceConfig: DatasourceConfiguration = {
     {{#if tile.config.snapshot}}
     isSnapshot: {{ tile.config.snapshot }},
     {{/if}}
     {{#if tile.config.reqrep}}
-    pollingInterval: '5000',
-    requestAutoSetup: 'false',
+    pollingInterval: 5000,
+    requestAutoSetup: false,
     {{/if}}
     {{#if tile.config.eventing.listener}}
     criteria: useSelector(selectors.eventing.getCriteriaFor{{pascalCase tile.title}}),
     {{/if}}
   }
-  {{#if tile.componentType}}
-  {{#ifEquals tile.componentType 'grid'}}
-  useEffect(() => {
-    const componentElement = layoutComponentsMap.get(LayoutComponentNames.{{constantCase tile.componentName}});
-    const componentDatasource = componentElement ? getElementByTagFromComponent(componentElement, 'grid-pro-genesis-datasource') : undefined;
-
-    if (componentDatasource) {
-      {{#if tile.config.eventing.listener}}
-      componentDatasource.criteria = datasourceConfig.criteria;
-      {{/if}}
-      {{#if tile.config.reqrep}}
-      componentDatasource.requestAutoSetup = datasourceConfig.requestAutoSetup;
-      componentDatasource.pollingInterval = datasourceConfig.pollingInterval;
-      {{/if}}
-    }
-  }, [datasourceConfig]);
-  {{/ifEquals}}
-  {{/if}}
-  {{#if tile.componentType}}
-  {{#ifEquals tile.componentType 'manager'}}
-  useEffect(() => {
-    const componentElement = layoutComponentsMap.get(LayoutComponentNames.{{constantCase tile.componentName}});
-    const componentDatasource = componentElement ? getElementByTagFromComponent(componentElement, 'entity-management') : undefined;
-
-    if (componentDatasource) {
-      componentDatasource.datasourceConfig = datasourceConfig;
-    }
-  }, [datasourceConfig]);
-  {{/ifEquals}}
-  {{/if}}
-
+  {{/ifAny}}
   {{#if tile.config.type}}
   const chartConfig: ChartConfig = {
     {{#ifEquals tile.config.type 'pie'}}
     radius: 0.75,
     angleField: 'value',
     colorField: 'groupBy',
-    {{else~}}
+    {{else}}
     xField: 'groupBy',
     yField: 'value',
     {{/ifEquals}}

package/.genx/templates/react/entityManager.hbs

@@ -6,6 +6,9 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     prefix="rapid"
     enableRowFlashing
     enableCellFlashing
+    {{#ifAny config.snapshot config.reqrep config.eventing.listener}}
+    datasourceConfig={datasourceConfig}
+    {{/ifAny}}
     {{#if config.title~}}
     title="{{ config.title }}"
     {{/if}}
@@ -13,7 +16,7 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     {{#if config.createEvent~}}
     {{#if config.permissions.updateRight}}
     createEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined}
-    {{else~}}
+    {{else}}
     createEvent="{{ config.createEvent }}"
     {{/if}}
     {{#if config.createFormUiSchema}}
@@ -23,7 +26,7 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     {{#if config.updateEvent~}}
     {{#if config.permissions.updateRight}}
     updateEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined}
-    {{else~}}
+    {{else}}
     updateEvent="{{ config.updateEvent }}"
     {{/if}}
     {{#if config.updateFormUiSchema}}
@@ -33,13 +36,16 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     {{#if config.deleteEvent~}}
     {{#if config.permissions.updateRight}}
     deleteEvent={hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined}
-    {{else~}}
+    {{else}}
     deleteEvent="{{ config.deleteEvent }}"
     {{/if}}
     {{/if}}
-    {{#ifAny config.gridOptions config.eventing.publishEventName}}
+    {{#if config.gridOptions}}
     gridOptions={gridOptions}
-    {{/ifAny}}
+    {{/if}}
+    {{#if config.eventing.publishEventName}}
+    onSelectionChanged={handleRowSelection}
+    {{/if}}
     {{#if config.columns}}
     columns={columnDefs}
     {{/if}}

package/.genx/templates/react/grid.hbs

@@ -17,6 +17,13 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     {{#ifAny config.gridOptions config.eventing.publishEventName}}
     deferredGridOptions={gridOptions}
     {{/ifAny}}
+    {{#if config.eventing.listener}}
+    criteria={datasourceConfig.criteria}
+    {{/if}}
+    {{#if config.reqrep}}
+    requestAutoSetup={datasourceConfig.requestAutoSetup}
+    pollingInterval={datasourceConfig.pollingInterval}
+    {{/if}}
   />
   {{#if config.gridOptions}}
   {gridOptionsTile?.columnDefs?.map((columnDef, index) => (

package/.genx/templates/react/gridLayout.hbs

@@ -1,30 +1,36 @@
-<rapid-layout-region type="horizontal">
-  <rapid-layout-region type="vertical">
-  {{#each route.tiles}}
-    {{#ifEquals @index 0}}
-    <rapid-layout-item title="{{this.title}}" registration={LayoutComponentNames["{{constantCase this.componentName}}"]}>
-      <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
-    </rapid-layout-item>
-    {{/ifEquals}}
-    {{#ifEquals @index 1}}
-    <rapid-layout-item title="{{this.title}}" registration={LayoutComponentNames["{{constantCase this.componentName}}"]}>
-      <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
-    </rapid-layout-item>
-    {{/ifEquals}}
-  {{/each}}
-  </rapid-layout-region>
-  <rapid-layout-region type="vertical">
-  {{#each route.tiles}}
-    {{#ifEquals @index 2}}
-    <rapid-layout-item title="{{this.title}}" registration={LayoutComponentNames["{{constantCase this.componentName}}"]}>
-      <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
-    </rapid-layout-item>
-    {{/ifEquals}}
-    {{#ifEquals @index 3}}
-    <rapid-layout-item title="{{this.title}}" registration={LayoutComponentNames["{{constantCase this.componentName}}"]}>
-      <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
-    </rapid-layout-item>
-    {{/ifEquals}}
-  {{/each}}
-  </rapid-layout-region>
-</rapid-layout-region>
+const defaultLayout = {
+  global: { tabEnableClose: false },
+  layout: {
+    type: 'row',
+    children: [
+      {
+        type: 'row',
+        weight: 50,
+        children: [
+          {{#each route.tiles}}
+          {{#ifEquals @index 0}}
+          { type: 'tabset', weight: 50, children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+          {{/ifEquals}}
+          {{#ifEquals @index 2}}
+          { type: 'tabset', weight: 50, children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+          {{/ifEquals}}
+          {{/each}}
+        ],
+      },
+      {
+        type: 'row',
+        weight: 50,
+        children: [
+          {{#each route.tiles}}
+          {{#ifEquals @index 1}}
+          { type: 'tabset', weight: 50, children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+          {{/ifEquals}}
+          {{#ifEquals @index 3}}
+          { type: 'tabset', weight: 50, children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+          {{/ifEquals}}
+          {{/each}}
+        ],
+      },
+    ],
+  },
+};

package/.genx/templates/react/horizontalLayout.hbs

@@ -1,7 +1,11 @@
-<rapid-layout-region>
-  {{#each route.tiles}}
-  <rapid-layout-item title="{{this.title}}" registration={LayoutComponentNames["{{constantCase this.componentName}}"]}>
-    <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
-  </rapid-layout-item>
-  {{/each}}
-</rapid-layout-region>
+const defaultLayout = {
+  global: { tabEnableClose: false },
+  layout: {
+    type: 'row',
+    children: [
+      {{#each route.tiles}}
+      { type: 'tabset', children: [{ type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' }] },
+      {{/each}}
+    ],
+  },
+};

package/.genx/templates/react/route.hbs

@@ -1,27 +1,49 @@
-import './{{pascalCase route.name}}.css';
-import { persistLayout } from '../../utils';
-import { setComponentItemsMap } from '../../utils/goldenLayout.helper';
-import { LayoutComponentNames, layoutComponentsMap } from '../../store/store';
-import { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
+import { Layout, Model, TabNode } from 'flexlayout-react';
+import { getFlexLayoutStorageKey } from '../../utils/layout';
 {{#each route.tiles}}
 import { {{pascalCase this.componentName}} } from './{{pascalCase this.title}}{{pascalCase this.componentType}}';
 {{/each}}
+import './{{pascalCase route.name}}.css';
+
+const STORAGE_KEY = getFlexLayoutStorageKey('{{route.layoutKey}}');
+
+{{> (lookup ./route 'layoutType') }}
+
+const componentMap: Record<string, React.FC> = {
+  {{#each route.tiles}}
+  '{{camelCase this.componentName}}': {{pascalCase this.componentName}},
+  {{/each}}
+};
+
+function loadModel(): Model {
+  if (STORAGE_KEY) {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try { return Model.fromJson(JSON.parse(saved)); } catch {}
+    }
+  }
+  return Model.fromJson(defaultLayout);
+}
 
 const {{pascalCase route.name}} = () => {
-  const layoutRef = useRef<any>(null);
+  const modelRef = useRef<Model>(loadModel());
+
+  const factory = (node: TabNode) => {
+    const Component = componentMap[node.getComponent() ?? ''];
+    return Component ? <Component /> : null;
+  };
 
-  useEffect(() => {
-    if (layoutRef.current) {
-      setComponentItemsMap(layoutRef.current, layoutComponentsMap);
+  const onModelChange = (model: Model) => {
+    if (STORAGE_KEY) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(model.toJson()));
     }
-  }, []);
+  };
 
   return (
     <section className="{{kebabCase route.name}}-page">
       {{#if route.tiles}}
-      <rapid-layout ref={layoutRef} auto-save-key={persistLayout('{{route.layoutKey}}')}>
-        {{> (lookup ./route 'layoutType') }}
-      </rapid-layout>
+      <Layout model={modelRef.current} factory={factory} onModelChange={onModelChange} />
       {{else}}
       Welcome to {{sentenceCase route.name}}
       {{/if}}

package/.genx/templates/react/route.styles.hbs

@@ -1,3 +1,4 @@
-:host {
-  height: 100%;
+.{{kebabCase route.name}}-page {
+  height: calc(100vh - 48px);
+  position: relative;
 }

package/.genx/templates/react/store.hbs

@@ -1,14 +1,6 @@
 import { createStore } from '@genesislcap/foundation-redux';
 import { eventingSlice } from './slices/eventing.slice';
 
-export const layoutComponentsMap: Map<string, any> = new Map();
-
-export const LayoutComponentNames = {
-  {{#each layoutComponents}}
-  {{constantCase componentName}}: '{{componentName}}',
-  {{/each}}
-} as const;
-
 export const { reduxStore, store, actions, selectors } = createStore([eventingSlice], {
   eventing: {
     {{#each events}}

package/.genx/templates/react/tabsLayout.hbs

@@ -1,7 +1,17 @@
-<rapid-layout-region type="tabs">
-  {{#each route.tiles}}
-  <rapid-layout-item title="{{this.title}}" registration={LayoutComponentNames["{{constantCase this.componentName}}"]}>
-    <{{pascalCase this.componentName}}></{{pascalCase this.componentName}}>
-  </rapid-layout-item>
-  {{/each}}
-</rapid-layout-region>
+const defaultLayout = {
+  global: { tabEnableClose: false },
+  layout: {
+    type: 'row',
+    children: [
+      {
+        type: 'tabset',
+        weight: 100,
+        children: [
+          {{#each route.tiles}}
+          { type: 'tab', name: '{{this.title}}', component: '{{camelCase this.componentName}}' },
+          {{/each}}
+        ],
+      },
+    ],
+  },
+};

package/.genx/utils/generateStore.js

@@ -44,24 +44,18 @@ const aggregateFromRoutes = (routes = []) => {
           mappings: t.config.eventing.listener.mappings || [],
         }));
 
-      const routeLayoutComponents = (route.tiles || [])
-        .map((t) => ({
-          componentName: `${route.name}-${t.title.replace(/[^0-9a-z]/gi, '')}-${t.componentType}`,
-        }));
-
       acc.events = Array.from(new Set(acc.events.concat(routeEvents)));
       acc.listeners = acc.listeners.concat(routeListeners);
-      acc.layoutComponents = acc.layoutComponents.concat(routeLayoutComponents);
       return acc;
     },
-    { events: [], listeners: [], layoutComponents: [] },
+    { events: [], listeners: [] },
   );
 
   return aggregation;
 };
 
 const generateStore = (routesOrAggregation, { writeFileWithData }, framework) => {
-  const { events = [], listeners = [], layoutComponents = [] } = Array.isArray(routesOrAggregation)
+  const { events = [], listeners = [] } = Array.isArray(routesOrAggregation)
     ? aggregateFromRoutes(routesOrAggregation)
     : (routesOrAggregation || {});
   const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
@@ -79,7 +73,7 @@ const generateStore = (routesOrAggregation, { writeFileWithData }, framework) =>
   // Write store.ts
   writeFileWithData(
     storeTarget,
-    { events, listeners, layoutComponents },
+    { events, listeners },
     resolve(__dirname, storeTemplate),
   );
 

package/.genx/versions.json

@@ -1,5 +1,5 @@
 {
-  "UI": "14.421.1",
+  "UI": "14.425.0",
   "GSF": "8.15.0",
   "Auth": "8.15.0"
 }

package/.github/workflows/slack.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Slack Notification
-        uses: bryannice/gitactions-slack-notification@2.0.0
+        uses: youscan/gitactions-slack-notification@3.0.0
         env:
           SLACK_CHANNEL: 'platform-seeds'
           SLACK_INCOMING_WEBHOOK: ${{secrets.SLACK_WEBHOOK}}

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [5.11.0-prerelease.2](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.11.0-prerelease.1...v5.11.0-prerelease.2) (2026-04-28)
+
+
+### Features
+
+* update FUI version [FUI-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 13373e5
+* update FUI version [FUI-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) (#562) 9aa31ba
+
+
+### Bug Fixes
+
+* update slack notifications [FUI-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 19dd19a
+* update slack notifications [FUI-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) (#563) 8f51a0b
+
+## [5.11.0-prerelease.1](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.10.4-prerelease.1...v5.11.0-prerelease.1) (2026-04-27)
+
+
+### Features
+
+* replace foundation-layout with flex-layout in React [FUI-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) (#561) 13a521f
+* replace foundation-layout with flex-layout in React templates [FUI-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 9c13246
+* update FUI version [FUI-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 11096f0
+
+
+### Bug Fixes
+
+* hide close button in layout items [FUI-0](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/0) 58dd5ec
+
 ## [5.10.4-prerelease.1](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.10.3...v5.10.4-prerelease.1) (2026-04-22)
 
 

package/client-tmp/react/package.json

@@ -33,6 +33,7 @@
     "test:e2e:debug": "genx test --e2e --debug",
     "test:e2e:ui": "genx test --e2e --interactive"
   },
+  "prettier": "@genesislcap/prettier-config",
   "dependencies": {
     "@microsoft/fast-react-wrapper": ">=0.3.25",
     "@ag-grid-community/client-side-row-model": "29.2.0",
@@ -67,6 +68,7 @@
     "@genesislcap/grid-tabulator": "{{versions.UI}}",
     "@genesislcap/web-core": "{{versions.UI}}",
     "@genesislcap/g2plot-chart": "{{versions.UI}}",
+    "flexlayout-react": "^0.8.19",
     "change-case": "^4.1.2",
     "tabulator-tables": "6.3.1",
     "history": "^5.3.0",

package/client-tmp/react/src/components/routes/ProtectedRoute.tsx

@@ -6,9 +6,11 @@ interface ProtectedRouteProps {
 }
 
 function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const location = useLocation();
+
   if (!getUser().isAuthenticated) {
-    const location = useLocation();
-    return <Navigate to="/login" state={{ from: location }} replace />;
+    const loginState = { from: location };
+    return <Navigate to="/login" state={loginState} replace />;
   }
 
   return <>{children}</>;

package/client-tmp/react/src/config.ts

@@ -1,5 +1,4 @@
 import { RouteLayouts } from './types/RouteLayouts';
-import { environment } from './environments/environment';
 
 export const routeLayouts: RouteLayouts = {
   '/login': 'blank',
@@ -10,7 +9,6 @@ export const AUTH_PATH = 'login';
 export const NOT_PERMITTED_PATH = 'not-permitted';
 
 export const API_DATA = {
-  URL: environment.API_HOST,
   AUTH: {
     username: '', // provide login to a user in given environment
     password: '', // provide password to a user in given environment

package/client-tmp/react/src/custom-elements.d.ts

@@ -8,9 +8,6 @@ declare module "react/jsx-runtime" {
       'rapid-design-system-provider': CustomElement;
       'client-app-login': CustomElement;
       'rapid-modal': CustomElement;
-      'rapid-layout': CustomElement;
-      'rapid-layout-region': CustomElement;
-      'rapid-layout-item': CustomElement;
       'foundation-header': CustomElement;
     }
   }

package/client-tmp/react/src/layouts/default/DefaultLayout.tsx

@@ -1,18 +1,16 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useSyncExternalStore } from 'react';
 import { RouteObject, useNavigate, Outlet } from 'react-router-dom';
 import { configureDesignSystem, getNavItems } from '@genesislcap/foundation-ui';
-import {
-  baseLayerLuminance,
-  StandardLuminance,
-} from '@microsoft/fast-components';
+import { baseLayerLuminance, StandardLuminance } from '@microsoft/fast-components';
 import styles from './DefaultLayout.module.css';
 import PBCElementsRenderer from '../../pbc/elementsRenderer';
 import { registerStylesTarget } from '../../pbc/utils';
 import * as designTokens from '../../styles/design-tokens.json';
 import { useRoutesContext } from '../../store/RoutesContext';
 import { useDocumentTitle } from '../../utils/useDocumentTitle';
-import { AUTH_PATH } from '../../config';
 import { LOGOUT_URL } from '@genesislcap/foundation-utils';
+import { DI } from '@genesislcap/web-core';
+import { Connect } from '@genesislcap/foundation-comms';
 import type { AppTargetId } from '@genesislcap/foundation-shell/app';
 
 // Stable target arrays so PBCElementsRenderer effect doesn't re-run on every parent re-render
@@ -29,16 +27,27 @@ type ExtendedRouteObject = RouteObject & {
     navItems?: any;
   };
   path: string;
-}
+};
+
+const connect = DI.getOrCreateDOMContainer().get(Connect);
+
+const subscribe = (onChange: () => void) => {
+  const sub = connect.isConnected$?.subscribe(() => onChange());
+  return () => sub?.unsubscribe();
+};
+
+const getSnapshot = () => connect.isConnected;
 
 const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
   const navigate = useNavigate();
   const designSystemProviderRef = useRef<HTMLElement>(null);
   const routes = useRoutesContext() as ExtendedRouteObject[];
-  const navItems = getNavItems(routes.flatMap((route) => ({
-    path: route.path || '',
-    navItems: route.data?.navItems,
-  })));
+  const navItems = getNavItems(
+    routes.flatMap((route) => ({
+      path: route.path || '',
+      navItems: route.data?.navItems,
+    })),
+  );
 
   useDocumentTitle();
 
@@ -54,6 +63,8 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
     }
   };
 
+  const connected = useSyncExternalStore(subscribe, getSnapshot);
+
   useEffect(() => {
     if (designSystemProviderRef.current) {
       configureDesignSystem(designSystemProviderRef.current, designTokens);
@@ -61,38 +72,39 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
       registerStylesTarget(document.body, 'header');
       registerStylesTarget(document.body, 'content');
     }
-
-    return () => {
-    };
   }, []);
 
   const className = `${styles['default-layout']}`;
 
   return (
     <rapid-design-system-provider ref={designSystemProviderRef} class={className}>
-      <PBCElementsRenderer target={TARGET_LAYOUT_START} />
-      <foundation-header
+      {connected && (
+        <>
+          <PBCElementsRenderer target={TARGET_LAYOUT_START} />
+          <foundation-header
 {{#if headerLogoSrc}}
-        logo-src="{{headerLogoSrc}}"
+            logo-src="{{headerLogoSrc}}"
 {{/if}}
-        onluminance-icon-clicked={onLuminanceToggle}
-        logout={async () => {
-          await fetch(LOGOUT_URL);
-          window.location.reload()
-        }}
-        show-luminance-toggle-button
-        show-misc-toggle-button
-        routeNavItems={navItems}
-        navigateTo={(path: string) => navigate(path)}
-      >
-        <PBCElementsRenderer target={TARGET_HEADER_NAV} />
-      </foundation-header>
+            onluminance-icon-clicked={onLuminanceToggle}
+            logout={async () => {
+              await fetch(LOGOUT_URL);
+              window.location.reload();
+            }}
+            show-luminance-toggle-button
+            show-misc-toggle-button
+            routeNavItems={navItems}
+            navigateTo={(path: string) => navigate(path)}
+          >
+            <PBCElementsRenderer target={TARGET_HEADER_NAV} />
+          </foundation-header>
+        </>
+      )}
       <section className={styles['content']}>
-        <PBCElementsRenderer target={TARGET_CONTENT_START} />
+        {connected && <PBCElementsRenderer target={TARGET_CONTENT_START} />}
         <Outlet />
-        <PBCElementsRenderer target={TARGET_CONTENT} />
+        {connected && <PBCElementsRenderer target={TARGET_CONTENT} />}
       </section>
-      <PBCElementsRenderer target={TARGET_LAYOUT_END} />
+      {connected && <PBCElementsRenderer target={TARGET_LAYOUT_END} />}
     </rapid-design-system-provider>
   );
 };

package/client-tmp/react/src/main.tsx

@@ -6,6 +6,8 @@ import { registerPBCs } from './pbc/utils';
 import { createLogger } from '@genesislcap/foundation-logger';
 
 import './styles/styles.css'
+import 'flexlayout-react/style/dark.css'
+import './styles/flexlayout-theme.css'
 
 const logger = createLogger('main');
 

package/client-tmp/react/src/share/foundation-login.ts

@@ -13,12 +13,17 @@ interface LocationState {
 /**
  * Configure the micro frontend
  */
-export const configureFoundationLogin = ({navigate, location}: { navigate: NavigateFunction, location: RouterLocation<LocationState>}) => {
+export const configureFoundationLogin = ({
+  navigate,
+  location,
+}: {
+  navigate: NavigateFunction;
+  location: RouterLocation<LocationState>;
+}) => {
   const baseElement = document.querySelector('base');
   const basePath = baseElement?.getAttribute('href') || '';
   const connect = DI.getOrCreateDOMContainer().get(Connect);
 
-
   configure({
     name: 'client-app-login',
     omitRoutes: ['request-account', 'forgot-password'],
@@ -34,6 +39,5 @@ export const configureFoundationLogin = ({navigate, location}: { navigate: Navig
       const from = location.state?.from?.pathname || '/';
       navigate(from, { replace: true });
     },
-  })
-}
-
+  });
+};

package/client-tmp/react/src/share/genesis-components.ts

@@ -1,4 +1,3 @@
-import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { getApp } from '@genesislcap/foundation-shell/app';
 import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
 import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
@@ -41,7 +40,6 @@ export async function registerComponents() {
       }),
       rapidGridComponents,
       g2plotChartsComponents,
-      foundationLayoutComponents,
     );
 
   configureHeader({

package/client-tmp/react/src/styles/flexlayout-theme.css

@@ -0,0 +1,102 @@
+/* Genesis design token overrides for flexlayout dark theme */
+.flexlayout__layout {
+  --color-text: var(--neutral-foreground-rest, #eeeeee);
+  --color-background: var(--neutral-layer-1, #141414);
+
+  /* Layered grays mapped to Genesis neutral layers */
+  --color-1: var(--neutral-layer-4, #1e1e1e);
+  --color-2: #252525;
+  --color-3: #2d2d2d;
+  --color-4: var(--neutral-stroke-rest, #3a3a3a);
+  --color-5: #484848;
+  --color-6: #555555;
+
+  /* Drag indicators use accent colour */
+  --color-drag1: var(--accent-fill-rest, #00bcd4);
+  --color-drag2: var(--accent-fill-rest, #00bcd4);
+  --color-drag1-background: rgba(0, 188, 212, 0.12);
+  --color-drag2-background: rgba(0, 188, 212, 0.08);
+
+  --font-size: 13px;
+
+  /* Tab bar / tabset */
+  --color-tabset-background: var(--neutral-layer-1, #141414);
+  --color-tabset-background-selected: var(--neutral-layer-1, #141414);
+  --color-tabset-background-maximized: var(--neutral-layer-4, #1e1e1e);
+  --color-tabset-divider-line: var(--neutral-stroke-rest, #3a3a3a);
+  --color-tabset-header-background: var(--neutral-layer-4, #1e1e1e);
+  --color-tabset-header: var(--neutral-foreground-rest, #eeeeee);
+
+  /* Active / inactive tabs */
+  --color-tab-content: var(--neutral-layer-1, #141414);
+  --color-tab-selected: var(--neutral-foreground-rest, #ffffff);
+  --color-tab-selected-background: var(--neutral-layer-1, #141414);
+  --color-tab-unselected: var(--neutral-foreground-rest, #a0a0a0);
+  --color-tab-unselected-background: transparent;
+
+  /* Splitters */
+  --color-splitter: var(--neutral-stroke-rest, #3a3a3a);
+  --color-splitter-hover: var(--accent-fill-rest, #00bcd4);
+  --color-splitter-drag: var(--accent-fill-rest, #00bcd4);
+
+  /* Drag-drop rectangle */
+  --color-drag-rect-border: var(--accent-fill-rest, rgba(0, 188, 212, 0.6));
+  --color-drag-rect-background: rgba(0, 0, 0, 0.45);
+  --color-drag-rect: var(--neutral-foreground-rest, #eeeeee);
+
+  /* Overflow / icon */
+  --color-overflow: var(--neutral-foreground-rest, #a0a0a0);
+  --color-icon: var(--neutral-foreground-rest, #a0a0a0);
+
+  /* Popup menu */
+  --color-popup-border: var(--neutral-stroke-rest, #3a3a3a);
+  --color-popup-unselected: var(--neutral-foreground-rest, #eeeeee);
+  --color-popup-unselected-background: var(--neutral-layer-4, #1e1e1e);
+  --color-popup-selected: var(--neutral-foreground-rest, #ffffff);
+  --color-popup-selected-background: var(--neutral-stroke-rest, #3a3a3a);
+
+  --color-toolbar-button-hover: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.08));
+
+  --color-edge-marker: var(--accent-fill-rest, #00bcd4);
+  --color-edge-icon: var(--neutral-foreground-rest, #eeeeee);
+}
+
+/* Remove dark theme gradients — use flat Genesis layer colours */
+.flexlayout__tabset-selected {
+  background-image: none !important;
+}
+
+.flexlayout__tabset-maximized {
+  background-image: none !important;
+}
+
+/* Active tab: accent underline matching Genesis style */
+.flexlayout__tab_button--selected {
+  position: relative;
+  color: var(--neutral-foreground-rest, #ffffff) !important;
+  background-color: var(--neutral-layer-1, #141414) !important;
+}
+
+.flexlayout__tab_button--selected::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent-fill-rest, #00bcd4);
+  z-index: 10;
+}
+
+/* Inactive tab hover */
+.flexlayout__tab_button--unselected:hover {
+  color: var(--neutral-foreground-rest, #e0e0e0) !important;
+  background-color: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.06)) !important;
+}
+
+/* Remove border-radius from dark theme tab overrides */
+.flexlayout__tab_top,
+.flexlayout__tab_bottom {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}

package/client-tmp/react/src/utils/layout.ts

@@ -1,11 +1,10 @@
 import { isDev } from '@genesislcap/foundation-utils';
 import pkg from '../../package.json';
 
-// returning null disables caching
-// returning an id (as long as it's not null) enables caching
-export const persistLayout = (id: string) => {
+// Returns null to disable persistence in dev unless PERSIST_LAYOUT_IN_DEV=true
+export const getFlexLayoutStorageKey = (id: string): string | null => {
   if (isDev() && (pkg as any)?.config.PERSIST_LAYOUT_IN_DEV !== true) {
     return null;
   }
-  return id;
+  return `flexlayout_${id}`;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed",
   "description": "Genesis Blank App Seed",
-  "version": "5.10.4-prerelease.1",
+  "version": "5.11.0-prerelease.2",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"

package/.genx/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "bracketSpacing": true
-}

package/client-tmp/react/src/environments/environment.prod.ts

@@ -1,8 +0,0 @@
-export const environment = {
-  production: true,
-  PORT: 4200,
-  ENABLE_SSO: {{enableSSO}},
-  HOST: 'localhost',
-  PROTOCOL: 'http',
-  BUILDER: 'webpack',
-};

package/client-tmp/react/src/environments/environment.ts

@@ -1,9 +0,0 @@
-export const environment = {
-  production: false,
-  API_HOST: '{{apiHost}}',
-  PORT: 4200,
-  ENABLE_SSO: {{enableSSO}},
-  HOST: 'localhost',
-  PROTOCOL: 'http',
-  BUILDER: 'webpack'
-};

package/client-tmp/react/src/utils/goldenLayout.helper.ts

@@ -1,59 +0,0 @@
-const ERROR_PREFIX = 'Golden layout helper - ';
-
-export const setComponentItemsMap = (
-  layoutNativeElement: any,
-  componentMapInstance: Map<string, any>,
-): (() => void) => {
-  if (!layoutNativeElement || !layoutNativeElement.layout) {
-    throw new Error(`${ERROR_PREFIX} - layout is not defined`);
-  }
-
-  const componentSetter = ({ _target: componentItem }: any) => {
-    componentMapInstance.set(componentItem.componentName, componentItem);
-  };
-
-  layoutNativeElement.layout.on('componentCreated', componentSetter);
-
-  return () => layoutNativeElement.layout.off('componentCreated', componentSetter);
-};
-
-const getElementRoot = (componentInstance: any): any => {
-  if (componentInstance) {
-    const { _element } = componentInstance;
-    return _element;
-  }
-
-  throw new Error(`${ERROR_PREFIX} - component instance is not defined`);
-};
-
-export const getElementsBySelectorFromComponent = (
-  componentInstance: any,
-  selectorValue: string,
-): any => {
-  const element = getElementRoot(componentInstance);
-  return element.querySelectorAll(`[data-selector=${selectorValue}]`);
-};
-
-export const getElementBySelectorFromComponent = (
-  componentInstance: any,
-  selector: string,
-): any => {
-  return getElementsBySelectorFromComponent(componentInstance, selector)[0];
-};
-
-export const getElementsByTagFromComponent = (
-  componentInstance: any,
-  tag: string,
-): any => {
-  const element = getElementRoot(componentInstance);
-  return element.getElementsByTagName(tag);
-};
-
-export const getElementByTagFromComponent = (
-  componentInstance: any,
-  tag: string,
-): any => {
-  return getElementsByTagFromComponent(componentInstance, tag)[0];
-};
-
-