@lnco-ai/ui 1.0.0

package/dist/items/FileItem.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, Box, Skeleton } from '@mui/material';
+import { memo, useEffect, useState } from 'react';
+import { ItemType, MimeTypes, formatFileSize, getFileExtra, getS3FileExtra, } from '@lnco-ai/sdk';
+import { Errors } from '../enums/errors.js';
+import withCollapse from '../Collapse/withCollapse.js';
+import { SCREEN_MAX_HEIGHT, UNEXPECTED_ERROR_MESSAGE } from '../constants.js';
+import DownloadButtonFileItem from './DownloadButtonFileItem.js';
+import FileAudio from './FileAudio.js';
+import FileImage from './FileImage.js';
+import FilePdf from './FilePdf.js';
+import FileVideo from './FileVideo.js';
+import { SizingWrapper } from './SizingWrapper.js';
+import { CaptionWrapper } from './withCaption.js';
+const FileItem = ({ content, fileUrl, defaultItem, errorMessage = UNEXPECTED_ERROR_MESSAGE, id, item, maxHeight = '100%', showCollapse, pdfViewerLink, onClick, onCollapse, }) => {
+    const [url, setUrl] = useState();
+    useEffect(() => {
+        (async () => {
+            if (fileUrl) {
+                setUrl(fileUrl);
+            }
+            else if (content) {
+                // Build a URL from the file
+                const urlFromContent = URL.createObjectURL(content);
+                if (urlFromContent) {
+                    setUrl(urlFromContent);
+                }
+                else {
+                    setUrl(Errors.BlobURL);
+                }
+            }
+            return () => {
+                if (content && url) {
+                    URL.revokeObjectURL(url);
+                }
+            };
+        })();
+        // does not include url to avoid infinite loop
+    }, [content, fileUrl]);
+    if (!url) {
+        return (_jsx(Skeleton, { variant: 'rectangular', width: '100%', height: maxHeight || SCREEN_MAX_HEIGHT }));
+    }
+    if (url === Errors.BlobURL) {
+        return _jsx(Alert, { severity: 'error', children: errorMessage });
+    }
+    const getComponent = () => {
+        const fileExtra = item.type === ItemType.LOCAL_FILE ? getFileExtra(item.extra) : undefined;
+        const s3FileExtra = item.type === ItemType.S3_FILE ? getS3FileExtra(item.extra) : undefined;
+        const { mimetype, altText, size } = { ...fileExtra, ...s3FileExtra };
+        if (mimetype) {
+            if (MimeTypes.isImage(mimetype)) {
+                return (
+                /* The box prevent the image to take full available space due to the stack */
+                _jsx(Box, { children: _jsx(FileImage, { id: id, url: url, alt: altText || item.name }) }));
+            }
+            else if (MimeTypes.isAudio(mimetype)) {
+                return _jsx(FileAudio, { id: id, url: url, type: mimetype });
+            }
+            else if (MimeTypes.isVideo(mimetype)) {
+                // does not specify mimetype in video source, this way, it works with more container formats in more browsers (especially Chrome with video/quicktime)
+                return _jsx(FileVideo, { id: id, url: url });
+            }
+            else if (MimeTypes.isPdf(mimetype)) {
+                return (_jsx(FilePdf, { id: id, url: url, height: maxHeight, showCollapse: showCollapse, pdfViewerLink: pdfViewerLink }));
+            }
+        }
+        if (defaultItem) {
+            return defaultItem;
+        }
+        return (_jsx(DownloadButtonFileItem, { id: id, name: item.name, caption: size ? formatFileSize(size) : undefined, url: url, onClick: onClick }));
+    };
+    let fileItem = getComponent();
+    fileItem = (_jsx(SizingWrapper, { size: item.settings.maxWidth, children: fileItem }));
+    // display element with caption
+    fileItem = _jsx(CaptionWrapper, { item: item, children: fileItem });
+    if (showCollapse) {
+        fileItem = withCollapse({ item, onCollapse })(fileItem);
+    }
+    return fileItem;
+};
+export default memo(FileItem);

package/dist/items/FilePdf.d.ts

@@ -0,0 +1,14 @@
+import { SxProps } from '@mui/material';
+type FilePdfProps = {
+    id?: string;
+    url: string;
+    height?: number | string;
+    sx?: SxProps;
+    showCollapse?: boolean;
+    /**
+     * use a custom pdf reader from the link if defined
+     * */
+    pdfViewerLink?: string;
+};
+declare const FilePdf: ({ url, id, sx, height: defaultHeight, showCollapse, pdfViewerLink, }: FilePdfProps) => JSX.Element;
+export default FilePdf;

package/dist/items/FilePdf.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material';
+import { useRef, useState } from 'react';
+import { ITEM_MAX_HEIGHT } from './constants.js';
+const StyledEmbed = styled('embed')({
+    maxHeight: ITEM_MAX_HEIGHT,
+});
+const FilePdf = ({ url, id, sx, height: defaultHeight, showCollapse, pdfViewerLink, }) => {
+    const embedRef = useRef(null);
+    const [height, setHeight] = useState(defaultHeight ?? '100%');
+    const onLoad = (e) => {
+        // only set pdf height if not using collapse
+        if (!showCollapse) {
+            // set pdf height -> probably very high
+            const newHeight = e.target?.offsetParent
+                ?.scrollHeight;
+            if (newHeight) {
+                setHeight(newHeight);
+            }
+        }
+    };
+    // use custom pdf viewer if defined
+    let urlWithPdfViewer = url;
+    if (pdfViewerLink) {
+        urlWithPdfViewer = `${pdfViewerLink}${encodeURIComponent(url)}`;
+    }
+    return (_jsx(StyledEmbed, { ref: embedRef, id: id, src: urlWithPdfViewer, width: '100%', height: height || '100%', onLoad: onLoad, sx: sx }));
+};
+export default FilePdf;

package/dist/items/FileVideo.d.ts

@@ -0,0 +1,8 @@
+import { SxProps } from '@mui/material';
+type FileVideoProps = {
+    id?: string;
+    url?: string;
+    sx?: SxProps;
+};
+declare const FileVideo: ({ id, url, sx }: FileVideoProps) => JSX.Element;
+export default FileVideo;

package/dist/items/FileVideo.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material';
+const StyledVideo = styled('video')({
+    maxWidth: '100%',
+});
+const FileVideo = ({ id, url, sx }) => {
+    return (_jsx(StyledVideo, { sx: sx, id: id, controls: true, children: _jsx("source", { src: url }) }));
+};
+export default FileVideo;

package/dist/items/H5PItem.d.ts

@@ -0,0 +1,20 @@
+/**
+ * React props types for {@link H5PItem}
+ */
+type H5PItemProps = {
+    itemName: string;
+    itemId: string;
+    contentId: string;
+    integrationUrl: string;
+    iframeId?: string;
+    showCollapse?: boolean;
+    onCollapse?: (c: boolean) => void;
+};
+/**
+ * The H5PItem component displays an iframe with the content of an H5P
+ *
+ * This component bridges the gap between the procedural "h5p-standalone"
+ * package and the Graasp React ecosystem
+ */
+declare const H5PItem: ({ itemName, itemId, contentId, integrationUrl: integrationBase, iframeId, showCollapse, onCollapse, }: H5PItemProps) => JSX.Element;
+export default H5PItem;

package/dist/items/H5PItem.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { validate, version } from 'uuid';
+import { useEffect, useRef } from 'react';
+import withCollapse from '../Collapse/withCollapse.js';
+/**
+ * The H5PItem component displays an iframe with the content of an H5P
+ *
+ * This component bridges the gap between the procedural "h5p-standalone"
+ * package and the Graasp React ecosystem
+ */
+const H5PItem = ({ itemName, itemId, contentId, integrationUrl: integrationBase, iframeId = `h5p-container-${itemId}`, showCollapse = false, onCollapse, }) => {
+    /*
+      h5p-standalone (and H5P itself) expect the integration to be done on the
+      window global object, which does not allow multiple H5Ps to be loaded
+      simultaneously (as they will be competing for the same global object)
+      As a workaround, we wrap the H5P integration into an iframe, such that it
+      gets its own window object. We can also enable the sandbox attribute for
+      additional security
+     */
+    const integrationUrl = new URL(integrationBase);
+    integrationUrl.searchParams.set('content', encodeURIComponent(contentId));
+    const iframeRef = useRef(null);
+    // Listen for content height changes
+    useEffect(() => {
+        const onResize = (event) => {
+            // iframe must be mounted
+            if (iframeRef.current === null) {
+                return;
+            }
+            // message origin must be same window
+            if (event.origin !== integrationUrl.origin) {
+                return;
+            }
+            // message source must be iframe of this H5P integration
+            if (event.source !== iframeRef.current.contentWindow) {
+                return;
+            }
+            // message data should be object
+            if (!event.data || typeof event.data !== 'object') {
+                return;
+            }
+            // message should have fields contentId and height
+            if (!event.data.contentId || !event.data.height) {
+                return;
+            }
+            // contentId should be UUID string
+            if (typeof event.data.contentId !== 'string' ||
+                version(event.data.contentId) !== 4 ||
+                !validate(event.data.contentId)) {
+                return;
+            }
+            // contentId should match current item
+            if (event.data.contentId !== contentId) {
+                return;
+            }
+            // height should be number
+            if (typeof event.data.height !== 'number') {
+                return;
+            }
+            // height should be int
+            const newHeight = parseInt(event.data.height);
+            iframeRef.current.height = newHeight.toString();
+        };
+        window.addEventListener('message', onResize);
+        // cleanup on unmount
+        return () => {
+            window.removeEventListener('message', onResize);
+        };
+    }, []);
+    let iframeH5Pitem = (_jsx("iframe", { ref: iframeRef, id: iframeId, src: integrationUrl.href, allowFullScreen: true, scrolling: 'no', style: {
+            width: '100%',
+            border: 'none',
+            display: 'block',
+        } }));
+    if (showCollapse) {
+        iframeH5Pitem = withCollapse({ item: { name: itemName }, onCollapse })(iframeH5Pitem);
+    }
+    return iframeH5Pitem;
+};
+export default H5PItem;

package/dist/items/ItemSkeleton/ItemSkeleton.d.ts

@@ -0,0 +1,12 @@
+import { DiscriminatedItem } from '@lnco-ai/sdk';
+export type ItemSkeletonProps = {
+    /**
+     * prevent displaying skeleton if item is a folder
+     */
+    isChildren: boolean;
+    isCollapsible?: boolean;
+    itemType: DiscriminatedItem['type'];
+    screenMaxHeight?: number;
+};
+declare const ItemSkeleton: ({ isChildren, isCollapsible, itemType, screenMaxHeight, }: ItemSkeletonProps) => JSX.Element | null;
+export default ItemSkeleton;

package/dist/items/ItemSkeleton/ItemSkeleton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '@mui/material';
+import { ItemType } from '@lnco-ai/sdk';
+import { SCREEN_MAX_HEIGHT } from '../../constants.js';
+const SKELETON_COLLAPSE_HEIGHT = '3.5em';
+const SKELETON_FOLDER_BUTTON_HEIGHT = '8.125em';
+const ItemSkeleton = ({ isChildren, isCollapsible, itemType, screenMaxHeight, }) => {
+    switch (true) {
+        case isCollapsible: {
+            return (_jsx(Skeleton, { variant: 'rectangular', width: '100%', height: SKELETON_COLLAPSE_HEIGHT }));
+        }
+        case itemType === ItemType.FOLDER && isChildren: {
+            return null;
+        }
+        case itemType === ItemType.FOLDER: {
+            return (_jsx(Skeleton, { variant: 'rectangular', width: '100%', height: SKELETON_FOLDER_BUTTON_HEIGHT }));
+        }
+        case [
+            ItemType.LOCAL_FILE,
+            ItemType.S3_FILE,
+            ItemType.LINK,
+            ItemType.APP,
+        ].includes(itemType):
+            {
+                return (_jsx(Skeleton, { variant: 'rectangular', width: '100%', height: screenMaxHeight || SCREEN_MAX_HEIGHT }));
+            }
+        case itemType === ItemType.DOCUMENT: {
+            return (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: 'text' }), _jsx(Skeleton, { variant: 'text' }), _jsx(Skeleton, { variant: 'text' })] }));
+        }
+        default: {
+            return _jsx(Skeleton, { variant: 'rectangular', width: '100%' });
+        }
+    }
+};
+export default ItemSkeleton;

package/dist/items/LinkItem.d.ts

@@ -0,0 +1,43 @@
+import { LinkItemType } from '@lnco-ai/sdk';
+type LinkItemProps = {
+    /**
+     * Id of the component used for testing
+     */
+    id?: string;
+    /**
+     * Id of the current member used for saving the resizing preferences
+     */
+    memberId?: string;
+    errorMessage?: string;
+    height?: number | string;
+    /**
+     * whether the link can be resized
+     */
+    isResizable?: boolean;
+    item: LinkItemType;
+    /**
+     * Thumbnail url of the item
+     */
+    thumbnail?: string;
+    loadingMessage?: string;
+    /**
+     * whether the caption should be displayed
+     */
+    showCaption?: boolean;
+    /**
+     * whether the iframe should be displayed
+     */
+    showIframe?: boolean;
+    /**
+     * whether the button should be displayed
+     */
+    showButton?: boolean;
+    /**
+     * whether the component should be collapse
+     */
+    showCollapse?: boolean;
+    onClick?: () => void;
+    onCollapse?: (c: boolean) => void;
+};
+declare const _default: import("react").MemoExoticComponent<({ id, item, thumbnail, memberId, showCaption, showIframe, showButton, loadingMessage, height: defaultHeight, errorMessage, isResizable, showCollapse, onClick, onCollapse, }: LinkItemProps) => JSX.Element>;
+export default _default;

package/dist/items/LinkItem.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Link as MUILink, styled } from '@mui/material';
+import { Fragment, memo, useEffect, useState } from 'react';
+import { getLinkExtra } from '@lnco-ai/sdk';
+import LinkCard from '../Card/LinkCard.js';
+import withCollapse from '../Collapse/withCollapse.js';
+import { DEFAULT_LINK_SHOW_BUTTON } from '../constants.js';
+import { ITEM_MAX_HEIGHT } from './constants.js';
+import { iframeCommonStyles } from './iframeStyles.js';
+import withCaption from './withCaption.js';
+import withResizing from './withResizing.js';
+const StyledIFrame = styled('iframe')(({ isResizable, height }) => ({
+    ...iframeCommonStyles,
+    maxHeight: !isResizable ? ITEM_MAX_HEIGHT : undefined,
+    height: !isResizable ? height : '100%',
+}));
+function isURLExternal(url) {
+    try {
+        return new URL(url).origin !== window.location.origin;
+    }
+    catch {
+        return false;
+    }
+}
+const IFrameContainer = styled('div')(({ theme }) => ({
+    width: '100%',
+    backgroundColor: '#eee',
+    borderRadius: theme.spacing(2),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexGrow: 1,
+    height: '100%',
+    maxHeight: ITEM_MAX_HEIGHT,
+    overflow: 'auto',
+}));
+const LinkIframe = ({ id, url, title, height, isResizable, isLoading, onDoneLoading, itemId, memberId, loadingMessage, }) => {
+    const iframe = (_jsx(StyledIFrame, { sx: { display: isLoading ? 'unset' : 'block' }, height: height, width: '100%', id: id, isResizable: isResizable, onLoad: onDoneLoading, src: url, title: title }));
+    const ResizableLink = withResizing({
+        height,
+        component: iframe,
+        memberId,
+        itemId,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(IFrameContainer, { sx: { display: isLoading ? 'flex' : 'none' }, children: loadingMessage }), isResizable ? _jsx(ResizableLink, {}) : iframe] }));
+};
+const LinkItem = ({ id, item, thumbnail, memberId, showCaption = true, showIframe = false, showButton = DEFAULT_LINK_SHOW_BUTTON, loadingMessage = 'Link is Loading...', height: defaultHeight = 400, errorMessage = 'The link is malformed.', isResizable = false, showCollapse = false, onClick, onCollapse, }) => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [height] = useState(defaultHeight);
+    const { id: itemId, name } = item;
+    const extra = getLinkExtra(item.extra);
+    const html = extra?.html;
+    // default case is an iframe with given link
+    const url = extra?.url;
+    useEffect(() => {
+        if (!isLoading) {
+            setIsLoading(true);
+        }
+    }, [url]);
+    const CaptionWrapper = withCaption({
+        item,
+    });
+    const getComponent = () => {
+        if (!url) {
+            return _jsx(Alert, { severity: 'error', children: errorMessage });
+        }
+        const isExternal = isURLExternal(url);
+        const linkCard = (_jsx(LinkCard, { id: id, thumbnail: thumbnail ?? item.extra.embeddedLink.icons?.[0], title: item.name, url: url, description: item.extra.embeddedLink.description ?? '', onClick: onClick, isExternal: isExternal }));
+        if (showIframe) {
+            // for rich media we use the provided html
+            // this is highly unsafe, and could allow XSS vulnerability if the backend does not protect this property
+            if (html) {
+                return (_jsx(Box
+                // this is allows for the box to not really exist and instead display the children box
+                // we can not get rid of this div as we need a way to attach the onClick handler for registering actions
+                , { 
+                    // this is allows for the box to not really exist and instead display the children box
+                    // we can not get rid of this div as we need a way to attach the onClick handler for registering actions
+                    display: 'contents', id: id, onClick: onClick, dangerouslySetInnerHTML: { __html: html } }));
+            }
+            return (_jsxs(Fragment, { children: [_jsx(LinkIframe, { id: id, url: url, isResizable: isResizable, height: height, title: name, isLoading: isLoading, onDoneLoading: () => setIsLoading(false), itemId: itemId, memberId: memberId, loadingMessage: loadingMessage }), showButton && linkCard] }));
+        }
+        if (showButton) {
+            return linkCard;
+        }
+        return (_jsx(MUILink, { href: url, onClick: onClick, children: url }));
+    };
+    let linkItem = getComponent();
+    if (showCaption) {
+        linkItem = CaptionWrapper(linkItem);
+    }
+    if (showCollapse) {
+        linkItem = withCollapse({ item: { name }, onCollapse })(linkItem);
+    }
+    return linkItem;
+};
+export default memo(LinkItem);

package/dist/items/SizingWrapper.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { MaxWidth } from '@lnco-ai/sdk';
+export declare const SizingWrapper: ({ size, children, }: {
+    size?: MaxWidth;
+    children: ReactNode;
+}) => JSX.Element;

package/dist/items/SizingWrapper.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { MaxWidth } from '@lnco-ai/sdk';
+const getWidthFromSizing = (size) => {
+    switch (size) {
+        case MaxWidth.ExtraSmall:
+            return '100px';
+        case MaxWidth.Small:
+            return '200px';
+        case MaxWidth.Medium:
+            return '400px';
+        case MaxWidth.Large:
+            return '800px';
+        // default is for the element to take all available horizontal space
+        case MaxWidth.ExtraLarge:
+        default:
+            return '100%';
+    }
+};
+export const SizingWrapper = ({ size = MaxWidth.ExtraLarge, children, }) => {
+    const width = getWidthFromSizing(size);
+    return (_jsx(Box, { maxWidth: '100%', width: width, children: children }));
+};

package/dist/items/appItemHooks.d.ts

@@ -0,0 +1,27 @@
+import { DiscriminatedItem, LocalContext, UUID } from '@lnco-ai/sdk';
+export type Token = string;
+declare const CALIBRATION_FONT_SIZES: readonly ["small", "normal", "large", "extra-large"];
+type CalibrationFontSize = (typeof CALIBRATION_FONT_SIZES)[number];
+type ScreenCalibration = {
+    scale?: number;
+    fontSize?: CalibrationFontSize;
+    participantId?: string;
+    participantCode?: string;
+};
+export type ContextPayload = Pick<LocalContext, 'apiHost' | 'itemId' | 'settings' | 'permission' | 'lang' | 'context' | 'accountId'> & {
+    screenCalibration?: ScreenCalibration;
+};
+declare const useAppCommunication: ({ item, contextPayload, appUrl, iFrameRef, requestApiAccessToken, }: {
+    item: DiscriminatedItem;
+    appUrl: string;
+    contextPayload: ContextPayload;
+    iFrameRef: React.RefObject<HTMLIFrameElement>;
+    requestApiAccessToken: (payload: {
+        id: UUID;
+        key: string;
+        origin: string;
+    }) => Promise<{
+        token: Token;
+    }>;
+}) => void;
+export { useAppCommunication };

package/dist/items/appItemHooks.js

@@ -0,0 +1,124 @@
+import { useEffect } from 'react';
+const CALIBRATION_FONT_SIZES = [
+    'small',
+    'normal',
+    'large',
+    'extra-large',
+];
+const isCalibrationFontSize = (value) => typeof value === 'string' &&
+    CALIBRATION_FONT_SIZES.includes(value);
+const buildPostMessageKeys = (itemId) => ({
+    GET_CONTEXT_SUCCESS: `GET_CONTEXT_SUCCESS_${itemId}`,
+    GET_CONTEXT_FAILURE: `GET_CONTEXT_FAILURE_${itemId}`,
+    GET_CONTEXT: `GET_CONTEXT_${itemId}`,
+    GET_AUTH_TOKEN: `GET_AUTH_TOKEN_${itemId}`,
+    GET_AUTH_TOKEN_SUCCESS: `GET_AUTH_TOKEN_SUCCESS_${itemId}`,
+    GET_AUTH_TOKEN_FAILURE: `GET_AUTH_TOKEN_FAILURE_${itemId}`,
+    POST_AUTO_RESIZE: `POST_AUTO_RESIZE_${itemId}`,
+    POST_CALIBRATION_SCALE: `POST_CALIBRATION_SCALE_${itemId}`,
+});
+const useAppCommunication = ({ item, contextPayload, appUrl, iFrameRef, requestApiAccessToken, }) => {
+    useEffect(() => {
+        // receive message from app through MessageChannel
+        const setupOnMessage = (port) => async (e) => {
+            const { data, origin: requestOrigin } = e;
+            const POST_MESSAGE_KEYS = buildPostMessageKeys(item.id);
+            // responds only to corresponding app
+            if (!appUrl?.includes(requestOrigin)) {
+                return;
+            }
+            const { type, payload } = JSON.parse(data);
+            switch (type) {
+                case POST_MESSAGE_KEYS.GET_AUTH_TOKEN: {
+                    port.postMessage(JSON.stringify({
+                        type: POST_MESSAGE_KEYS.GET_AUTH_TOKEN_SUCCESS,
+                        payload: await requestApiAccessToken({
+                            id: item.id,
+                            ...payload,
+                        }),
+                    }));
+                    break;
+                }
+                case POST_MESSAGE_KEYS.POST_AUTO_RESIZE: {
+                    // item should not be manually resizable
+                    if (item.settings.isResizable) {
+                        return;
+                    }
+                    // iframe must be mounted
+                    if (iFrameRef.current === null) {
+                        return;
+                    }
+                    // payload should be number
+                    if (typeof payload !== 'number') {
+                        return;
+                    }
+                    iFrameRef.current.height = payload.toString();
+                    break;
+                }
+                case POST_MESSAGE_KEYS.POST_CALIBRATION_SCALE: {
+                    const { scale, fontSize, participantId, participantCode } = payload?.screenCalibration ?? {};
+                    if (scale === undefined && fontSize === undefined)
+                        return;
+                    if (scale !== undefined &&
+                        (typeof scale !== 'number' ||
+                            Number.isNaN(scale) ||
+                            scale <= 0.5 ||
+                            scale >= 3))
+                        return;
+                    if (fontSize !== undefined && !isCalibrationFontSize(fontSize))
+                        return;
+                    try {
+                        localStorage.setItem('lnco_screen_calibration', JSON.stringify({
+                            screenCalibration: {
+                                ...(scale !== undefined && { scale }),
+                                ...(fontSize !== undefined && { fontSize }),
+                                ...(participantId !== undefined && { participantId }),
+                                ...(participantCode !== undefined && { participantCode }),
+                            },
+                            timestamp: Date.now(),
+                            calibrationAppId: item.id,
+                        }));
+                    }
+                    catch {
+                        return;
+                    }
+                    break;
+                }
+            }
+        };
+        const windowOnMessage = (e) => {
+            const { data, origin: requestOrigin } = e;
+            const POST_MESSAGE_KEYS = buildPostMessageKeys(item.id);
+            // responds only to corresponding app
+            if (!appUrl?.includes(requestOrigin)) {
+                return;
+            }
+            // return context data and message channel port to app
+            const { type } = JSON.parse(data);
+            if (type === POST_MESSAGE_KEYS.GET_CONTEXT) {
+                // create/reset channel and
+                // Listen for messages on port1
+                const channel = new MessageChannel();
+                const { port1 } = channel;
+                port1.onmessage = setupOnMessage(port1);
+                // ensure to only send the message to the domain where the app is hosted for security reasons
+                const targetOrigin = new URL(appUrl).origin;
+                // Transfer port2 to the iframe
+                // provide port2 to app and item's data
+                iFrameRef?.current?.contentWindow?.postMessage(JSON.stringify({
+                    type: POST_MESSAGE_KEYS.GET_CONTEXT_SUCCESS,
+                    payload: {
+                        /**
+                         * Legacy for old apps or apps that does not use apps-query-client
+                         */
+                        memberId: contextPayload.accountId,
+                        ...contextPayload,
+                    },
+                }), targetOrigin, [channel.port2]);
+            }
+        };
+        window.addEventListener('message', windowOnMessage);
+        return () => window.removeEventListener('message', windowOnMessage);
+    }, [item, iFrameRef]);
+};
+export { useAppCommunication };

package/dist/items/constants.d.ts

@@ -0,0 +1 @@
+export declare const ITEM_MAX_HEIGHT = "70vh";

package/dist/items/constants.js

@@ -0,0 +1 @@
+export const ITEM_MAX_HEIGHT = '70vh';

package/dist/items/iframeStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const iframeCommonStyles: {
+    border: string;
+    width: string;
+};

package/dist/items/iframeStyles.js

@@ -0,0 +1,5 @@
+export const iframeCommonStyles = {
+    // remove ugly borders
+    border: 'none',
+    width: '100%',
+};

package/dist/items/index.d.ts

@@ -0,0 +1,5 @@
+export { default as AppItem } from './AppItem.js';
+export { default as EtherpadItem } from './EtherpadItem.js';
+export { default as FileItem } from './FileItem.js';
+export { default as H5PItem } from './H5PItem.js';
+export { default as LinkItem } from './LinkItem.js';

package/dist/items/index.js

@@ -0,0 +1,5 @@
+export { default as AppItem } from './AppItem.js';
+export { default as EtherpadItem } from './EtherpadItem.js';
+export { default as FileItem } from './FileItem.js';
+export { default as H5PItem } from './H5PItem.js';
+export { default as LinkItem } from './LinkItem.js';