@genesislcap/foundation-layout 14.354.0 → 14.354.2-FUI-2341-3.1

package/dist/dts/utils/factory-registry.d.ts

@@ -0,0 +1,63 @@
+import type { ComponentFactory } from './types';
+/**
+ * Registers a factory function with a unique key.
+ * This allows framework components to be used in the declarative layout API
+ * without needing to pass function references through HTML attributes.
+ *
+ * @param key - Unique identifier for the factory. Should be descriptive and unique across the application.
+ * @param factory - The factory function that creates the component.
+ *
+ * @example
+ * ```typescript
+ * // React example
+ * import { registerFactory } from '@genesislcap/foundation-layout';
+ * import { reactFactory } from './utils/react-layout-factory';
+ * import { MyComponent } from './components/MyComponent';
+ *
+ * registerFactory('my-component', reactFactory(MyComponent, { someProp: 'value' }));
+ * ```
+ *
+ * Then in your JSX:
+ * ```tsx
+ * <rapid-layout-item
+ *   registration="my-item"
+ *   title="My Component"
+ *   factory-key="my-component"
+ * />
+ * ```
+ *
+ * @public
+ */
+export declare function registerFactory(key: string, factory: ComponentFactory): void;
+/**
+ * Retrieves a factory function by its key.
+ *
+ * @param key - The unique identifier for the factory.
+ * @returns The factory function, or undefined if not found.
+ *
+ * @public
+ */
+export declare function getFactory(key: string): ComponentFactory | undefined;
+/**
+ * Removes a factory from the registry.
+ * This is useful for cleanup when a component is unmounted or no longer needed.
+ *
+ * @param key - The unique identifier for the factory to remove.
+ * @returns True if the factory was found and removed, false otherwise.
+ *
+ * @example
+ * ```typescript
+ * unregisterFactory('my-component');
+ * ```
+ *
+ * @public
+ */
+export declare function unregisterFactory(key: string): boolean;
+/**
+ * Clears all registered factories from the registry.
+ * This is primarily useful for testing purposes.
+ *
+ * @internal
+ */
+export declare function clearFactoryRegistry(): void;
+//# sourceMappingURL=factory-registry.d.ts.map

package/dist/dts/utils/factory-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"factory-registry.d.ts","sourceRoot":"","sources":["../../../src/utils/factory-registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAShD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAM5E;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS,CAEpE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAQtD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAG3C"}

package/dist/dts/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './constants';
 export * from './error';
 export * from './events';
+export * from './factory-registry';
 export * from './misc';
 export * from './templates';
 export * from './types';

package/dist/dts/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/dts/utils/types.d.ts

@@ -134,9 +134,48 @@ export type InstanceContainer = {
 export type LayoutComponentItem<T> = Element & Partial<LayoutComponentWithState<T>> & {
     [instanceContainer]?: InstanceContainer;
 };
+/**
+ * @public
+ * Factory function for creating component instances in the layout.
+ * @remarks
+ * This is the recommended approach for framework-rendered components (React, Angular, Vue, etc.)
+ * because it allows each layout instance to create a fresh component rather than cloning existing
+ * DOM elements (which loses event listeners and framework bindings).
+ *
+ * The factory function receives a container element and should render the component into it.
+ * Optionally, it can return a cleanup function that will be called when the component is removed
+ * from the layout.
+ *
+ * @param container - The HTMLElement container where the component should be rendered
+ * @returns Optional cleanup function to be called when the component is removed
+ *
+ * @example
+ * React example:
+ * ```typescript
+ * layout.registerItem('my-component', (container) => {
+ *   const root = createRoot(container);
+ *   root.render(<MyComponent />);
+ *   return () => root.unmount();
+ * });
+ * ```
+ *
+ * @example
+ * Angular example:
+ * ```typescript
+ * layout.registerItem('my-component', (container) => {
+ *   const componentRef = createComponent(MyComponent, {
+ *     environmentInjector: this.injector,
+ *     hostElement: container
+ *   });
+ *   return () => componentRef.destroy();
+ * });
+ * ```
+ */
+export type ComponentFactory = (container: HTMLElement) => void | (() => void);
 /** @internal */
 export interface RegistrationConfig {
-    elements: Element[];
+    elements?: Element[];
+    factory?: ComponentFactory;
     id?: string;
 }
 /** @internal */

package/dist/dts/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDK;AACL,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC;;OAEG;IACH,eAAe,IAAI,CAAC,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,gBAAgB,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,OAAO,GAC1C,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrC,CAAC,iBAAiB,CAAC,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC;AAEJ,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAC7E;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC;IAChC,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IAC7D,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,gBAAgB;AAChB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDK;AACL,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC;;OAEG;IACH,eAAe,IAAI,CAAC,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,gBAAgB,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,OAAO,GAC1C,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrC,CAAC,iBAAiB,CAAC,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAE/E,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAC7E;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC;IAChC,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IAC7D,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,gBAAgB;AAChB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC"}

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export * from './main';
 export { LAYOUT_ICONS } from './styles';
 export { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, LayoutRegistrationError, LayoutUsageError, LAYOUT_POPOUT_CONTAINER_CLASS, } from './utils';
+export { registerFactory, getFactory, unregisterFactory } from './utils/factory-registry';

package/dist/esm/main/layout-item.js

@@ -3,6 +3,8 @@ import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { componentType, getParentLayoutComponent, wrapperTemplate, } from '../utils';
+import { LayoutUsageError } from '../utils/error';
+import { getFactory } from '../utils/factory-registry';
 /**
  * @public
  * `FoundationLayoutItem` is a custom element that represents an item in the layout.
@@ -10,6 +12,9 @@ import { componentType, getParentLayoutComponent, wrapperTemplate, } from '../ut
  * This element is used to wrap html elements and configure their layout settings as part of the layout system.
  *
  * This is a simple component which is only used to define the layout splits; any JavaScript API interactions or custom styling is used via {@link FoundationLayout}.
+ *
+ * The item can either use slotted content or a factory function registered via {@link registerFactory}.
+ * When a factory is registered with the same name as the registration attribute, it takes precedence over slotted content.
  * @tagname %%prefix%%-layout-item
  */
 export class FoundationLayoutItem extends FoundationElement {
@@ -28,11 +33,28 @@ export class FoundationLayoutItem extends FoundationElement {
     connectedCallback() {
         var _b;
         super.connectedCallback();
+        let registeredID;
+        // Look up factory from registry using registration name
+        const factory = getFactory(this.registration);
+        // Get slotted elements to check for conflicts
         this.slottedElements = this.shadowRoot.querySelector('slot.target').assignedElements();
-        const registeredID = this.cacheElementsAndRegister({
-            elements: this.slottedElements,
-            id: this.registration,
-        });
+        // Validate: cannot have both factory and slotted content
+        if (factory && this.slottedElements.length > 0) {
+            throw new LayoutUsageError(`Cannot use both factory registration and slotted content for registration "${this.registration}". ` +
+                `Either register a factory via registerFactory() OR provide slotted content, but not both.`);
+        }
+        if (factory) {
+            registeredID = this.cacheElementsAndRegister({
+                factory: factory,
+                id: this.registration,
+            });
+        }
+        else {
+            registeredID = this.cacheElementsAndRegister({
+                elements: this.slottedElements,
+                id: this.registration,
+            });
+        }
         const itemConfig = {
             type: 'component',
             componentType: registeredID,

package/dist/esm/main/layout-main.js

@@ -8,6 +8,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 import { globalDraggingStyles, glVisualConfig, LAYOUT_ICONS, layoutStyles } from '../styles';
 import { AUTOSAVE_KEY, componentType, DEFAULT_RELOAD_BUFFER, getMissingArrayItems, instanceContainer, LAYOUT_POPOUT_CONTAINER_CLASS, LAYOUT_POPOUT_CONTROL_KEY, LayoutEmitEvents, LayoutReceiveEvents, regionConveter, } from '../utils/';
 import { LayoutRegistrationError, LayoutUsageError } from '../utils/error';
+import { getFactory } from '../utils/factory-registry';
 import { logger } from '../utils/logger';
 export { layoutStyles } from '../styles';
 /*
@@ -248,6 +249,11 @@ export class FoundationLayout extends FoundationElement {
                 return;
             const orderedStates = [...items].map((item) => { var _b; return (_b = item.getCurrentState) === null || _b === void 0 ? void 0 : _b.call(item); });
             const componentInstanceContainer = items[0][instanceContainer];
+            // Add safety check for factory-based components
+            if (!componentInstanceContainer) {
+                logger.warn('Component instance container not found for items:', items);
+                return;
+            }
             // known use of deprecated API, but there is no other way of implementing it and we control
             // the underlying library anyway
             componentInstanceContainer.container.setState({
@@ -528,28 +534,70 @@ export class FoundationLayout extends FoundationElement {
     }
     /**
      * @public
-     * Register a collection of `Element` and associate them with an `ID` with the layout system for later use.
+     * Register a collection of `Element` or a factory function and associate them with an `ID` with the layout system for later use.
      * @remarks
-     * You would use this to register elements that you later want to load when using {@link FoundationLayout.loadLayout}.
+     * You can register either an array of elements or a factory function.
+     *
+     * **Element registration**: Use this to register elements that you later want to load when using {@link FoundationLayout.loadLayout}.
      * Use {@link FoundationLayout.layoutRequiredRegistrations} to see what components need to be registered for a certain config
      * and then register them using this function before calling {@link FoundationLayout.loadLayout}.
+     * When registering an element it is moved by reference into the internals of the layout, so if you pass elements already in the DOM then they will disappear.
+     * If you want to avoid this you can pass copies using `element.cloneNode(true)`.
      *
-     * When registering an element it is moved by reference into the internals of the layout, so if you pass elements already in the DOM then they will disappear. If you want to avoid this you can pass copies using `element.cloneNode(true)`.
+     * **Factory registration**: This is the recommended approach for framework-rendered components (React, Angular, Vue, etc.)
+     * because it allows each layout instance to create a fresh component rather than cloning existing
+     * DOM elements (which loses event listeners and framework bindings).
+     * The factory function will be called each time a new instance of the component is needed. It receives
+     * a container element and should render the component into it. Optionally, it can return a cleanup
+     * function that will be called when the component is removed from the layout.
      *
      * @param registration - string of the registration ID
-     * @param elements - Elements[] containing the reference to the elements to register for later usage
+     * @param elementsOrFactory - Either Elements[] containing the reference to the elements to register, or a ComponentFactory function
      * @throws {@link LayoutUsageError} if you attempt to add an item before the layout has been initialised.
      * @throws {@link LayoutRegistrationError} if you attempt to use a `registration` name which is already in use (declarative html API and JavaScript API registrations use the same "pool" of registration names).
      * @returns - string defining the name of the registered item with the layout system (config.id if set).
+     *
+     * @example
+     * Element registration:
+     * ```typescript
+     * const div = document.createElement('div');
+     * div.innerHTML = '<h1>Hello</h1>';
+     * layout.registerItem('my-element', [div]);
+     * ```
+     *
+     * @example
+     * Factory registration (React):
+     * ```typescript
+     * layout.registerItem('text-field', (container) => {
+     *   const root = createRoot(container);
+     *   root.render(<TextFieldComponent />);
+     *   return () => root.unmount();
+     * });
+     * ```
      */
-    registerItem(registration, elements) {
+    registerItem(registration, elementsOrFactory) {
         if (!this.layout.isInitialised) {
             throw new LayoutUsageError('Cannot add item via JS API until initialised');
         }
-        return this.cacheElementsAndRegister({
-            elements: elements,
-            id: registration,
-        });
+        // Check if a factory is already registered with this name
+        const existingFactory = getFactory(registration);
+        if (existingFactory) {
+            throw new LayoutRegistrationError(`Registration "${registration}" already has a factory registered via registerFactory(). ` +
+                `Cannot register the same name via the JavaScript API. ` +
+                `Use a different registration name or unregister the factory first.`);
+        }
+        if (typeof elementsOrFactory === 'function') {
+            return this.cacheElementsAndRegister({
+                factory: elementsOrFactory,
+                id: registration,
+            });
+        }
+        else {
+            return this.cacheElementsAndRegister({
+                elements: elementsOrFactory,
+                id: registration,
+            });
+        }
     }
     /**
      * Internal APIs
@@ -610,12 +658,13 @@ export class FoundationLayout extends FoundationElement {
     /**
      * Registers a function with golden layout to create a pane
      * @param elements - Elements[] to add to new new pane
+     * @param factory - ComponentFactory function to create component instances
      * @param id - optional string which is used to register the new function with golden layout. Defaults to sequentially setting the IDs for default items
      * @returns - string which is the registered ID
      * @throws - {@link LayoutRegistrationError} if the id is already in use
      * @internal
      */
-    cacheElementsAndRegister({ elements, id }) {
+    cacheElementsAndRegister({ elements, factory, id }) {
         const reg = id || `${(this.registeredComponents += 1)}`;
         if (this.layout.getRegisteredComponentTypeNames().includes(reg)) {
             throw new LayoutRegistrationError(`Cannot register item with already registered name: '${reg}'`);
@@ -632,45 +681,91 @@ export class FoundationLayout extends FoundationElement {
          *
          * As part of creating each instance we attach a reference to the instance container which is used
          * to be able to optionally save state, and any state which has been saved we apply to the component.
+         *
+         * For factory functions:
+         * The factory is called for each new instance instead of cloning. This preserves event listeners
+         * and framework bindings that would be lost during cloning.
          */
         const registrationFunction = (() => {
-            // Use appendChild to consume the elements and save them in the master copy
-            const masterCopy = document.createDocumentFragment();
-            masterCopy[layoutCacheDocument] = true;
-            elements.forEach((e) => masterCopy.appendChild(e));
-            const instances = new Map();
-            return (container, state) => {
-                var _b;
-                // If this is a new instance then assign it uuid instance
-                if (!(state === null || state === void 0 ? void 0 : state['instance'])) {
-                    state['instance'] = this.uuid.createId();
-                }
-                container.state['instance'] = state['instance'];
-                container.state['originalTitle'] = (_b = state['originalTitle']) !== null && _b !== void 0 ? _b : container.title;
-                // If this is a new instance then copy the master copy into the instances map
-                // this is then the instance that is recalled for this version each time
-                // the key point is "cloneNode" which makes a copy at this point
-                if (!instances.has(state === null || state === void 0 ? void 0 : state['instance'])) {
-                    const instanceCopy = document.createDocumentFragment();
-                    Array.from(masterCopy.children).forEach((e) => {
-                        instanceCopy.appendChild(e.cloneNode(true));
+            if (factory) {
+                // Factory-based registration for framework components
+                const instances = new Map();
+                const cleanupFunctions = new Map();
+                return (container, state) => {
+                    var _b;
+                    // If this is a new instance then assign it uuid instance
+                    if (!(state === null || state === void 0 ? void 0 : state['instance'])) {
+                        state['instance'] = this.uuid.createId();
+                    }
+                    container.state['instance'] = state['instance'];
+                    container.state['originalTitle'] = (_b = state['originalTitle']) !== null && _b !== void 0 ? _b : container.title;
+                    // Store instance container reference for state management FIRST
+                    const componentInstanceContainer = {
+                        container,
+                        instance: state['instance'],
+                        registration: reg,
+                    };
+                    // If this is a new instance, call the factory to create it
+                    if (!instances.has(state === null || state === void 0 ? void 0 : state['instance'])) {
+                        const componentContainer = document.createElement('div');
+                        componentContainer[instanceContainer] = componentInstanceContainer;
+                        const cleanup = factory(componentContainer);
+                        instances.set(state['instance'], componentContainer);
+                        if (cleanup) {
+                            cleanupFunctions.set(state['instance'], cleanup);
+                        }
+                    }
+                    // Append the instance container to the layout container
+                    const componentContainer = instances.get(state['instance']);
+                    if (!componentContainer) {
+                        logger.error(`Failed to get component container for instance ${state['instance']}`);
+                        return;
+                    }
+                    // Ensure the property is set (in case it was lost)
+                    componentContainer[instanceContainer] = componentInstanceContainer;
+                    container.element.appendChild(componentContainer);
+                    this.setupLayoutReceiveEvents(container, state);
+                };
+            }
+            else {
+                // Element-based registration (existing behavior)
+                const masterCopy = document.createDocumentFragment();
+                masterCopy[layoutCacheDocument] = true;
+                elements.forEach((e) => masterCopy.appendChild(e));
+                const instances = new Map();
+                return (container, state) => {
+                    var _b;
+                    // If this is a new instance then assign it uuid instance
+                    if (!(state === null || state === void 0 ? void 0 : state['instance'])) {
+                        state['instance'] = this.uuid.createId();
+                    }
+                    container.state['instance'] = state['instance'];
+                    container.state['originalTitle'] = (_b = state['originalTitle']) !== null && _b !== void 0 ? _b : container.title;
+                    // If this is a new instance then copy the master copy into the instances map
+                    // this is then the instance that is recalled for this version each time
+                    // the key point is "cloneNode" which makes a copy at this point
+                    if (!instances.has(state === null || state === void 0 ? void 0 : state['instance'])) {
+                        const instanceCopy = document.createDocumentFragment();
+                        Array.from(masterCopy.children).forEach((e) => {
+                            instanceCopy.appendChild(e.cloneNode(true));
+                        });
+                        instances.set(state['instance'], [...instanceCopy.children]);
+                    }
+                    // provide each component with a reference to the instance container
+                    // so they can optionally save and load their own state
+                    const componentInstanceContainer = {
+                        container,
+                        instance: state['instance'],
+                        registration: reg,
+                    };
+                    // get the instance from the map and append it to the container
+                    instances.get(state['instance']).forEach((component) => {
+                        container.element.appendChild(component);
+                        component[instanceContainer] = componentInstanceContainer;
                     });
-                    instances.set(state['instance'], [...instanceCopy.children]);
-                }
-                // provide each component with a reference to the instance container
-                // so they can optionally save and load their own state
-                const componentInstanceContainer = {
-                    container,
-                    instance: state['instance'],
-                    registration: reg,
+                    this.setupLayoutReceiveEvents(container, state);
                 };
-                // get the instance from the map and append it to the container
-                instances.get(state['instance']).forEach((component) => {
-                    container.element.appendChild(component);
-                    component[instanceContainer] = componentInstanceContainer;
-                });
-                this.setupLayoutReceiveEvents(container, state);
-            };
+            }
         })();
         this.layout.registerComponentFactoryFunction(reg, registrationFunction);
         return reg;

package/dist/esm/utils/factory-registry.js

@@ -0,0 +1,88 @@
+import { logger } from './logger';
+/**
+ * Global registry for component factories.
+ * Maps factory keys (strings) to factory functions.
+ * @internal
+ */
+const factoryRegistry = new Map();
+/**
+ * Registers a factory function with a unique key.
+ * This allows framework components to be used in the declarative layout API
+ * without needing to pass function references through HTML attributes.
+ *
+ * @param key - Unique identifier for the factory. Should be descriptive and unique across the application.
+ * @param factory - The factory function that creates the component.
+ *
+ * @example
+ * ```typescript
+ * // React example
+ * import { registerFactory } from '@genesislcap/foundation-layout';
+ * import { reactFactory } from './utils/react-layout-factory';
+ * import { MyComponent } from './components/MyComponent';
+ *
+ * registerFactory('my-component', reactFactory(MyComponent, { someProp: 'value' }));
+ * ```
+ *
+ * Then in your JSX:
+ * ```tsx
+ * <rapid-layout-item
+ *   registration="my-item"
+ *   title="My Component"
+ *   factory-key="my-component"
+ * />
+ * ```
+ *
+ * @public
+ */
+export function registerFactory(key, factory) {
+    if (factoryRegistry.has(key)) {
+        logger.warn(`Factory with key "${key}" is already registered. It will be overwritten.`);
+    }
+    factoryRegistry.set(key, factory);
+    logger.debug(`Factory registered with key: ${key}`);
+}
+/**
+ * Retrieves a factory function by its key.
+ *
+ * @param key - The unique identifier for the factory.
+ * @returns The factory function, or undefined if not found.
+ *
+ * @public
+ */
+export function getFactory(key) {
+    return factoryRegistry.get(key);
+}
+/**
+ * Removes a factory from the registry.
+ * This is useful for cleanup when a component is unmounted or no longer needed.
+ *
+ * @param key - The unique identifier for the factory to remove.
+ * @returns True if the factory was found and removed, false otherwise.
+ *
+ * @example
+ * ```typescript
+ * unregisterFactory('my-component');
+ * ```
+ *
+ * @public
+ */
+export function unregisterFactory(key) {
+    const deleted = factoryRegistry.delete(key);
+    if (deleted) {
+        logger.debug(`Factory unregistered with key: ${key}`);
+    }
+    else {
+        logger.warn(`Attempted to unregister factory with key "${key}", but it was not found.`);
+    }
+    return deleted;
+}
+/**
+ * Clears all registered factories from the registry.
+ * This is primarily useful for testing purposes.
+ *
+ * @internal
+ */
+export function clearFactoryRegistry() {
+    factoryRegistry.clear();
+    logger.debug('Factory registry cleared');
+}

package/dist/esm/utils/index.js

@@ -1,6 +1,7 @@
 export * from './constants';
 export * from './error';
 export * from './events';
+export * from './factory-registry';
 export * from './misc';
 export * from './templates';
 export * from './types';