piral-page-layouts 0.14.10-beta.3621

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 - 2022 smapiot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+[![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
+
+# [Piral Page Layouts](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-page-layouts.svg?style=flat)](https://www.npmjs.com/package/piral-page-layouts) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
+
+This is a plugin that only has a peer dependency to `piral-core`. What `piral-page-layouts` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core` for using different layouts on different pages.
+
+By default, these API extensions are not integrated in `piral`, so you'd need to add them to your Piral instance.
+
+## Why and When
+
+tbd
+
+## Documentation
+
+The following functions are brought to the Pilet API.
+
+### `registerPageLayout()`
+
+Adds the definition of a page layout to the app shell.
+
+### `unregisterPageLayout()`
+
+Removes a page layout from the app shell. Pages using this layout will fall back to the default layout.
+
+## Usage
+
+::: summary: For pilet authors
+
+You can use the `registerPageLayout` function from the Pilet API to add a new page layout in the app shell.
+
+Example use:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { FullscreenLayout } from './FullscreenLayout';
+
+export function setup(piral: PiletApi) {
+  piral.registerPageLayout('fullscreen', FullscreenLayout);
+}
+```
+
+You can use the `unregisterPageLayout` function from the Pilet API to remove a previously added page layout from the app shell.
+
+Example use:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { FullscreenLayout } from './FullscreenLayout';
+
+export function setup(piral: PiletApi) {
+  // first register a page layout
+  piral.registerPageLayout('fullscreen', FullscreenLayout);
+  // and unregister; maybe some time later?
+  piral.unregisterPageLayout('fullscreen');
+}
+```
+
+**Note**: A page layout is accessible across all pilets, however, only the pilet that has registerd a page layout can also unregister it. Once a page layout has been taken no other pilet can override it - it first needs to be unregistered.
+
+:::
+
+::: summary: For Piral instance developers
+
+The provided library only brings API extensions for pilets to a Piral instance.
+
+For the setup of the library itself you'll need to import `createPageLayoutsApi` from the `piral-page-layouts` package.
+
+```ts
+import { createPageLayoutsApi } from 'piral-page-layouts';
+```
+
+The integration looks like:
+
+```ts
+const instance = createInstance({
+  // important part
+  plugins: [createPageLayoutsApi()],
+  // ...
+});
+```
+
+Via the options the initially available `layouts` can be defined.
+
+Consider for example:
+
+```ts
+const instance = createInstance({
+  // important part
+  plugins: [createPageLayoutsApi({
+    layouts: {
+      default: DefaultLayout,
+      empty: EmptyLayout,
+    }
+  })],
+  // ...
+});
+```
+
+Furthermore, the name of the default layout can be chosen with the `fallback` option, too. By default, the name is set to be `default`. If you want to change it to, e.g., `standard` you can do the following:
+
+```ts
+const instance = createInstance({
+  // important part
+  plugins: [createPageLayoutsApi({
+    fallback: 'standard',
+  })],
+  // ...
+});
+```
+
+:::
+
+## License
+
+Piral is released using the MIT license. For more information see the [license file](./LICENSE).

package/esm/actions.d.ts

@@ -0,0 +1,4 @@
+import { GlobalStateContext } from 'piral-core';
+import type { PageLayoutRegistration } from './types';
+export declare function registerPageLayout(ctx: GlobalStateContext, name: string, value: PageLayoutRegistration): void;
+export declare function unregisterPageLayout(ctx: GlobalStateContext, name: string): void;

package/esm/actions.js

@@ -0,0 +1,8 @@
+import { withKey, withoutKey } from 'piral-core';
+export function registerPageLayout(ctx, name, value) {
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { pageLayouts: withKey(state.registry.pageLayouts, name, value) }) })));
+}
+export function unregisterPageLayout(ctx, name) {
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { pageLayouts: withoutKey(state.registry.pageLayouts, name) }) })));
+}
+//# sourceMappingURL=actions.js.map

package/esm/actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAsB,MAAM,YAAY,CAAC;AAGrE,MAAM,UAAU,kBAAkB,CAAC,GAAuB,EAAE,IAAY,EAAE,KAA6B;IACrG,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,OAE/D,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,GAAuB,EAAE,IAAY;IACxE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,OAE3D,CAAC,CAAC;AACN,CAAC"}

package/esm/create.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType } from 'react';
+import { PiralPlugin, PageComponentProps } from 'piral-core';
+import type { PiletPageLayoutsApi } from './types';
+/**
+ * Available configuration options for the page layout plugin.
+ */
+export interface PageLayoutsConfig {
+    /**
+     * Defines the name of the layout that should be used by default,
+     * i.e., in case no layout was specified or found.
+     */
+    fallback?: string;
+    /**
+     * Defines the initially available layouts that can be used.
+     */
+    layouts?: Record<string, ComponentType<PageComponentProps>>;
+}
+/**
+ * Creates new Pilet API extensions for dealing with page layouts.
+ */
+export declare function createPageLayoutsApi(config?: PageLayoutsConfig): PiralPlugin<PiletPageLayoutsApi>;

package/esm/create.js

@@ -0,0 +1,62 @@
+import * as actions from './actions';
+import { createElement } from 'react';
+import { withApi, defaultRender, useGlobalState } from 'piral-core';
+function getPageLayouts(items) {
+    const layouts = {};
+    if (items && typeof items === 'object') {
+        Object.keys(items).forEach((name) => {
+            layouts[name] = {
+                pilet: undefined,
+                component: items[name],
+            };
+        });
+    }
+    return layouts;
+}
+const DefaultWrapper = (props) => defaultRender(props.children);
+function createPageWrapper(Wrapper = DefaultWrapper, fallback = 'default') {
+    return (props) => {
+        var _a;
+        const layout = ((_a = props.meta) === null || _a === void 0 ? void 0 : _a.layout) || fallback;
+        const registration = useGlobalState((s) => s.registry.pageLayouts[layout] || s.registry.pageLayouts[fallback]);
+        const Layout = (registration === null || registration === void 0 ? void 0 : registration.component) || DefaultWrapper;
+        return createElement(Wrapper, props, createElement(Layout, props));
+    };
+}
+function withPageLayouts(pageLayouts, fallback) {
+    return (state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { wrappers: Object.assign(Object.assign({}, state.registry.wrappers), { page: createPageWrapper(state.registry.wrappers.page, fallback) }), pageLayouts }) }));
+}
+/**
+ * Creates new Pilet API extensions for dealing with page layouts.
+ */
+export function createPageLayoutsApi(config = {}) {
+    const { layouts = {}, fallback } = config;
+    return (context) => {
+        const findPageLayout = (name) => context.readState((s) => s.registry.pageLayouts[name]);
+        context.defineActions(actions);
+        context.dispatch(withPageLayouts(getPageLayouts(layouts), fallback));
+        return (api) => {
+            const pilet = api.meta.name;
+            return {
+                registerPageLayout(name, pageLayout) {
+                    const current = findPageLayout(name);
+                    if (!current || current.pilet === pilet) {
+                        const component = withApi(context, pageLayout, api, 'pageLayout');
+                        context.registerPageLayout(name, {
+                            component,
+                            pilet,
+                        });
+                    }
+                    return () => api.unregisterPageLayout(name);
+                },
+                unregisterPageLayout(name) {
+                    const current = findPageLayout(name);
+                    if ((current === null || current === void 0 ? void 0 : current.pilet) === pilet) {
+                        context.unregisterPageLayout(name);
+                    }
+                },
+            };
+        };
+    };
+}
+//# sourceMappingURL=create.js.map

package/esm/create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"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"}

package/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create';
+export * from './types';

package/esm/index.js

@@ -0,0 +1,3 @@
+export * from './create';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/esm/types.d.ts

@@ -0,0 +1,67 @@
+import type { RouteComponentProps } from 'react-router';
+import type { AnyComponent, BaseRegistration, Dict, PageComponentProps, PiralPageMeta, RegistrationDisposer, WrappedComponent } from 'piral-core';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletPageLayoutsApi {
+    }
+    interface PiralCustomActions {
+        /**
+         * Registers a new page layout.
+         * @param name The name of the layout.
+         * @param value The page layout registration.
+         */
+        registerPageLayout(name: string, value: PageLayoutRegistration): void;
+        /**
+         * Unregisters an existing page layout.
+         * @param name The name of the page layout to be removed.
+         */
+        unregisterPageLayout(name: string): void;
+    }
+    interface PiralCustomPageMeta {
+        /**
+         * The layout to use for the page.
+         */
+        layout?: string;
+    }
+    interface PiralCustomRegistryState {
+        /**
+         * The registered page layouts.
+         */
+        pageLayouts: Dict<PageLayoutRegistration>;
+    }
+    interface PiralCustomErrors {
+        pageLayout: PageLayoutErrorInfoProps;
+    }
+}
+export interface PageLayoutRegistration extends BaseRegistration {
+    component: WrappedComponent<PageComponentProps>;
+}
+/**
+ * The error used when a page layout crashed.
+ */
+export interface PageLayoutErrorInfoProps extends RouteComponentProps {
+    /**
+     * The type of the error.
+     */
+    type: 'pageLayout';
+    /**
+     * The provided error details.
+     */
+    error: any;
+    /**
+     * The available page meta data.
+     */
+    meta: PiralPageMeta;
+}
+export interface PiletPageLayoutsApi {
+    /**
+     * Registers a page layout.
+     * @param name The name of the layout.
+     * @param layout The component responsible for the layout.
+     */
+    registerPageLayout(name: string, layout: AnyComponent<PageComponentProps>): RegistrationDisposer;
+    /**
+     * Unregisters a page layout.
+     * @param name The name of the layout.
+     */
+    unregisterPageLayout(name: string): void;
+}

package/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/lib/actions.d.ts

@@ -0,0 +1,4 @@
+import { GlobalStateContext } from 'piral-core';
+import type { PageLayoutRegistration } from './types';
+export declare function registerPageLayout(ctx: GlobalStateContext, name: string, value: PageLayoutRegistration): void;
+export declare function unregisterPageLayout(ctx: GlobalStateContext, name: string): void;

package/lib/actions.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unregisterPageLayout = exports.registerPageLayout = void 0;
+const piral_core_1 = require("piral-core");
+function registerPageLayout(ctx, name, value) {
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { pageLayouts: (0, piral_core_1.withKey)(state.registry.pageLayouts, name, value) }) })));
+}
+exports.registerPageLayout = registerPageLayout;
+function unregisterPageLayout(ctx, name) {
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { pageLayouts: (0, piral_core_1.withoutKey)(state.registry.pageLayouts, name) }) })));
+}
+exports.unregisterPageLayout = unregisterPageLayout;
+//# sourceMappingURL=actions.js.map

package/lib/actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":";;;AAAA,2CAAqE;AAGrE,SAAgB,kBAAkB,CAAC,GAAuB,EAAE,IAAY,EAAE,KAA6B;IACrG,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,WAAW,EAAE,IAAA,oBAAO,EAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,OAE/D,CAAC,CAAC;AACN,CAAC;AARD,gDAQC;AAED,SAAgB,oBAAoB,CAAC,GAAuB,EAAE,IAAY;IACxE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,WAAW,EAAE,IAAA,uBAAU,EAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,OAE3D,CAAC,CAAC;AACN,CAAC;AARD,oDAQC"}

package/lib/create.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType } from 'react';
+import { PiralPlugin, PageComponentProps } from 'piral-core';
+import type { PiletPageLayoutsApi } from './types';
+/**
+ * Available configuration options for the page layout plugin.
+ */
+export interface PageLayoutsConfig {
+    /**
+     * Defines the name of the layout that should be used by default,
+     * i.e., in case no layout was specified or found.
+     */
+    fallback?: string;
+    /**
+     * Defines the initially available layouts that can be used.
+     */
+    layouts?: Record<string, ComponentType<PageComponentProps>>;
+}
+/**
+ * Creates new Pilet API extensions for dealing with page layouts.
+ */
+export declare function createPageLayoutsApi(config?: PageLayoutsConfig): PiralPlugin<PiletPageLayoutsApi>;

package/lib/create.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPageLayoutsApi = void 0;
+const actions = require("./actions");
+const react_1 = require("react");
+const piral_core_1 = require("piral-core");
+function getPageLayouts(items) {
+    const layouts = {};
+    if (items && typeof items === 'object') {
+        Object.keys(items).forEach((name) => {
+            layouts[name] = {
+                pilet: undefined,
+                component: items[name],
+            };
+        });
+    }
+    return layouts;
+}
+const DefaultWrapper = (props) => (0, piral_core_1.defaultRender)(props.children);
+function createPageWrapper(Wrapper = DefaultWrapper, fallback = 'default') {
+    return (props) => {
+        var _a;
+        const layout = ((_a = props.meta) === null || _a === void 0 ? void 0 : _a.layout) || fallback;
+        const registration = (0, piral_core_1.useGlobalState)((s) => s.registry.pageLayouts[layout] || s.registry.pageLayouts[fallback]);
+        const Layout = (registration === null || registration === void 0 ? void 0 : registration.component) || DefaultWrapper;
+        return (0, react_1.createElement)(Wrapper, props, (0, react_1.createElement)(Layout, props));
+    };
+}
+function withPageLayouts(pageLayouts, fallback) {
+    return (state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { wrappers: Object.assign(Object.assign({}, state.registry.wrappers), { page: createPageWrapper(state.registry.wrappers.page, fallback) }), pageLayouts }) }));
+}
+/**
+ * Creates new Pilet API extensions for dealing with page layouts.
+ */
+function createPageLayoutsApi(config = {}) {
+    const { layouts = {}, fallback } = config;
+    return (context) => {
+        const findPageLayout = (name) => context.readState((s) => s.registry.pageLayouts[name]);
+        context.defineActions(actions);
+        context.dispatch(withPageLayouts(getPageLayouts(layouts), fallback));
+        return (api) => {
+            const pilet = api.meta.name;
+            return {
+                registerPageLayout(name, pageLayout) {
+                    const current = findPageLayout(name);
+                    if (!current || current.pilet === pilet) {
+                        const component = (0, piral_core_1.withApi)(context, pageLayout, api, 'pageLayout');
+                        context.registerPageLayout(name, {
+                            component,
+                            pilet,
+                        });
+                    }
+                    return () => api.unregisterPageLayout(name);
+                },
+                unregisterPageLayout(name) {
+                    const current = findPageLayout(name);
+                    if ((current === null || current === void 0 ? void 0 : current.pilet) === pilet) {
+                        context.unregisterPageLayout(name);
+                    }
+                },
+            };
+        };
+    };
+}
+exports.createPageLayoutsApi = createPageLayoutsApi;
+//# sourceMappingURL=create.js.map

package/lib/create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create';
+export * from './types';

package/lib/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./create"), exports);
+(0, tslib_1.__exportStar)(require("./types"), exports);
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,wDAAyB;AACzB,uDAAwB"}

package/lib/types.d.ts

@@ -0,0 +1,67 @@
+import type { RouteComponentProps } from 'react-router';
+import type { AnyComponent, BaseRegistration, Dict, PageComponentProps, PiralPageMeta, RegistrationDisposer, WrappedComponent } from 'piral-core';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletPageLayoutsApi {
+    }
+    interface PiralCustomActions {
+        /**
+         * Registers a new page layout.
+         * @param name The name of the layout.
+         * @param value The page layout registration.
+         */
+        registerPageLayout(name: string, value: PageLayoutRegistration): void;
+        /**
+         * Unregisters an existing page layout.
+         * @param name The name of the page layout to be removed.
+         */
+        unregisterPageLayout(name: string): void;
+    }
+    interface PiralCustomPageMeta {
+        /**
+         * The layout to use for the page.
+         */
+        layout?: string;
+    }
+    interface PiralCustomRegistryState {
+        /**
+         * The registered page layouts.
+         */
+        pageLayouts: Dict<PageLayoutRegistration>;
+    }
+    interface PiralCustomErrors {
+        pageLayout: PageLayoutErrorInfoProps;
+    }
+}
+export interface PageLayoutRegistration extends BaseRegistration {
+    component: WrappedComponent<PageComponentProps>;
+}
+/**
+ * The error used when a page layout crashed.
+ */
+export interface PageLayoutErrorInfoProps extends RouteComponentProps {
+    /**
+     * The type of the error.
+     */
+    type: 'pageLayout';
+    /**
+     * The provided error details.
+     */
+    error: any;
+    /**
+     * The available page meta data.
+     */
+    meta: PiralPageMeta;
+}
+export interface PiletPageLayoutsApi {
+    /**
+     * Registers a page layout.
+     * @param name The name of the layout.
+     * @param layout The component responsible for the layout.
+     */
+    registerPageLayout(name: string, layout: AnyComponent<PageComponentProps>): RegistrationDisposer;
+    /**
+     * Unregisters a page layout.
+     * @param name The name of the layout.
+     */
+    unregisterPageLayout(name: string): void;
+}

package/lib/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "piral-page-layouts",
+  "version": "0.14.10-beta.3621",
+  "description": "Plugin for providing different page layouts in Piral.",
+  "keywords": [
+    "piral",
+    "pilet-api",
+    "smapiot",
+    "portal",
+    "modules",
+    "api",
+    "plugin",
+    "plugin-component",
+    "page",
+    "layouts"
+  ],
+  "author": "smapiot",
+  "homepage": "https://piral.io",
+  "license": "MIT",
+  "module": "esm/index.js",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "esm",
+    "lib",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smapiot/piral.git"
+  },
+  "bugs": {
+    "url": "https://github.com/smapiot/piral/issues"
+  },
+  "scripts": {
+    "build": "yarn build:commonjs && yarn build:esnext",
+    "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
+    "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
+    "typedoc": "typedoc --json ../../../docs/types/piral-page-layouts.json src --exclude \"src/**/*.test.*\"",
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "devDependencies": {
+    "piral-core": "0.14.10-beta.3621"
+  },
+  "peerDependencies": {
+    "piral-core": "0.14.x",
+    "react": ">=16.8.0",
+    "react-router": "5.x"
+  },
+  "gitHead": "161b6a945b0044bf356475aea053f436c0cfb89c"
+}

package/src/actions.ts

@@ -0,0 +1,22 @@
+import { withKey, withoutKey, GlobalStateContext } from 'piral-core';
+import type { PageLayoutRegistration } from './types';
+
+export function registerPageLayout(ctx: GlobalStateContext, name: string, value: PageLayoutRegistration) {
+  ctx.dispatch((state) => ({
+    ...state,
+    registry: {
+      ...state.registry,
+      pageLayouts: withKey(state.registry.pageLayouts, name, value),
+    },
+  }));
+}
+
+export function unregisterPageLayout(ctx: GlobalStateContext, name: string) {
+  ctx.dispatch((state) => ({
+    ...state,
+    registry: {
+      ...state.registry,
+      pageLayouts: withoutKey(state.registry.pageLayouts, name),
+    },
+  }));
+}

package/src/create.ts

@@ -0,0 +1,100 @@
+import * as actions from './actions';
+import { ComponentType, createElement } from 'react';
+import { PiralPlugin, PageComponentProps, Dict, GlobalState, withApi, defaultRender, useGlobalState } from 'piral-core';
+import type { PiletPageLayoutsApi, PageLayoutRegistration } from './types';
+
+/**
+ * Available configuration options for the page layout plugin.
+ */
+export interface PageLayoutsConfig {
+  /**
+   * Defines the name of the layout that should be used by default,
+   * i.e., in case no layout was specified or found.
+   */
+  fallback?: string;
+  /**
+   * Defines the initially available layouts that can be used.
+   */
+  layouts?: Record<string, ComponentType<PageComponentProps>>;
+}
+
+function getPageLayouts(items: Record<string, ComponentType<PageComponentProps>>) {
+  const layouts: Dict<PageLayoutRegistration> = {};
+
+  if (items && typeof items === 'object') {
+    Object.keys(items).forEach((name) => {
+      layouts[name] = {
+        pilet: undefined,
+        component: items[name],
+      };
+    });
+  }
+
+  return layouts;
+}
+
+const DefaultWrapper: ComponentType<PageComponentProps> = (props) => defaultRender(props.children);
+
+function createPageWrapper(Wrapper = DefaultWrapper, fallback = 'default'): ComponentType<PageComponentProps> {
+  return (props) => {
+    const layout = props.meta?.layout || fallback;
+    const registration = useGlobalState((s) => s.registry.pageLayouts[layout] || s.registry.pageLayouts[fallback]);
+    const Layout = registration?.component || DefaultWrapper;
+    return createElement(Wrapper, props, createElement(Layout, props));
+  };
+}
+
+function withPageLayouts(pageLayouts: Dict<PageLayoutRegistration>, fallback: string) {
+  return (state: GlobalState): GlobalState => ({
+    ...state,
+    registry: {
+      ...state.registry,
+      wrappers: {
+        ...state.registry.wrappers,
+        page: createPageWrapper(state.registry.wrappers.page, fallback),
+      },
+      pageLayouts,
+    },
+  });
+}
+
+/**
+ * Creates new Pilet API extensions for dealing with page layouts.
+ */
+export function createPageLayoutsApi(config: PageLayoutsConfig = {}): PiralPlugin<PiletPageLayoutsApi> {
+  const { layouts = {}, fallback } = config;
+
+  return (context) => {
+    const findPageLayout = (name: string) => context.readState((s) => s.registry.pageLayouts[name]);
+
+    context.defineActions(actions);
+
+    context.dispatch(withPageLayouts(getPageLayouts(layouts), fallback));
+
+    return (api) => {
+      const pilet = api.meta.name;
+      return {
+        registerPageLayout(name, pageLayout) {
+          const current = findPageLayout(name);
+
+          if (!current || current.pilet === pilet) {
+            const component = withApi(context, pageLayout, api, 'pageLayout');
+            context.registerPageLayout(name, {
+              component,
+              pilet,
+            });
+          }
+
+          return () => api.unregisterPageLayout(name);
+        },
+        unregisterPageLayout(name) {
+          const current = findPageLayout(name);
+
+          if (current?.pilet === pilet) {
+            context.unregisterPageLayout(name);
+          }
+        },
+      };
+    };
+  };
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './create';
+export * from './types';

package/src/types.ts

@@ -0,0 +1,82 @@
+import type { RouteComponentProps } from 'react-router';
+import type {
+  AnyComponent,
+  BaseRegistration,
+  Dict,
+  PageComponentProps,
+  PiralPageMeta,
+  RegistrationDisposer,
+  WrappedComponent,
+} from 'piral-core';
+
+declare module 'piral-core/lib/types/custom' {
+  interface PiletCustomApi extends PiletPageLayoutsApi {}
+
+  interface PiralCustomActions {
+    /**
+     * Registers a new page layout.
+     * @param name The name of the layout.
+     * @param value The page layout registration.
+     */
+    registerPageLayout(name: string, value: PageLayoutRegistration): void;
+    /**
+     * Unregisters an existing page layout.
+     * @param name The name of the page layout to be removed.
+     */
+    unregisterPageLayout(name: string): void;
+  }
+
+  interface PiralCustomPageMeta {
+    /**
+     * The layout to use for the page.
+     */
+    layout?: string;
+  }
+
+  interface PiralCustomRegistryState {
+    /**
+     * The registered page layouts.
+     */
+    pageLayouts: Dict<PageLayoutRegistration>;
+  }
+
+  interface PiralCustomErrors {
+    pageLayout: PageLayoutErrorInfoProps;
+  }
+}
+
+export interface PageLayoutRegistration extends BaseRegistration {
+  component: WrappedComponent<PageComponentProps>;
+}
+
+/**
+ * The error used when a page layout crashed.
+ */
+export interface PageLayoutErrorInfoProps extends RouteComponentProps {
+  /**
+   * The type of the error.
+   */
+  type: 'pageLayout';
+  /**
+   * The provided error details.
+   */
+  error: any;
+  /**
+   * The available page meta data.
+   */
+  meta: PiralPageMeta;
+}
+
+export interface PiletPageLayoutsApi {
+  /**
+   * Registers a page layout.
+   * @param name The name of the layout.
+   * @param layout The component responsible for the layout.
+   */
+  registerPageLayout(name: string, layout: AnyComponent<PageComponentProps>): RegistrationDisposer;
+  /**
+   * Unregisters a page layout.
+   * @param name The name of the layout.
+   */
+  unregisterPageLayout(name: string): void;
+}