@se-studio/core-ui 0.1.0

package/README.md

@@ -0,0 +1,121 @@
+# @se-studio/core-ui
+
+Shared React UI component library with Tailwind CSS v4 for SE Studio applications.
+
+## Features
+
+- **React 19** - Built with the latest React
+- **TypeScript** - Full type safety
+- **Tailwind CSS v4** - Modern utility-first CSS framework
+- **Tree-shakeable** - Import only what you need
+- **Dual exports** - ESM and CJS support
+- **Fully tested** - Comprehensive test coverage with Vitest
+
+## Installation
+
+```bash
+pnpm add @se-studio/core-ui
+```
+
+## Usage
+
+### Importing Components
+
+```tsx
+import { ResponsiveVisual } from '@se-studio/core-ui';
+import type { IResponsiveVisual } from '@se-studio/core-data-types';
+
+const visual: IResponsiveVisual = {
+  // ... your visual data
+};
+
+export default function MyPage() {
+  return <ResponsiveVisual visual={visual} />;
+}
+```
+
+### Using Tailwind Configuration
+
+Import the Tailwind configuration in your `tailwind.config.ts`:
+
+```typescript
+import baseConfig from '@se-studio/core-ui/tailwind-config';
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  ...baseConfig,
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@se-studio/core-ui/dist/**/*.{js,jsx}',
+  ],
+  // Add your customizations here
+};
+
+export default config;
+```
+
+### Importing Styles
+
+In your Next.js app layout or root component:
+
+```tsx
+import '@se-studio/core-ui/styles';
+```
+
+## Components
+
+### ResponsiveVisual
+
+Renders responsive visual content (images, videos, animations) from Contentful.
+
+**Props:**
+
+- `visual` - `IResponsiveVisual` - The visual data from Contentful
+- `className?` - `string` - Additional CSS classes
+- `priority?` - `boolean` - Enable priority loading for above-the-fold images
+
+**Example:**
+
+```tsx
+import { ResponsiveVisual } from '@se-studio/core-ui';
+
+<ResponsiveVisual
+  visual={responsiveVisualData}
+  className="w-full h-auto"
+  priority
+/>
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run tests
+pnpm test
+
+# Run tests in watch mode
+pnpm test:watch
+
+# Build the library
+pnpm build
+
+# Type check
+pnpm type-check
+
+# Lint
+pnpm lint
+```
+
+## Custom Breakpoints
+
+The library includes custom breakpoints optimized for modern responsive design:
+
+- `tablet`: 768px
+- `laptop`: 1024px
+- `desktop`: 1440px
+
+## License
+
+MIT

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+export { ClientMonitor } from './components/ClientMonitor.js';
+export { Preview } from './components/Preview.js';

package/dist/client.js

@@ -0,0 +1,8 @@
+"use client";
+import { ClientMonitor } from "./components/ClientMonitor.js";
+import { Preview } from "./components/Preview.js";
+export {
+  ClientMonitor,
+  Preview
+};
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/client.ts"],"sourcesContent":["'use client';\n\n// Client-only components that require browser APIs\nexport { ClientMonitor } from './components/ClientMonitor.js';\nexport { Preview } from './components/Preview.js';\n"],"mappings":";AAGA,SAAS,qBAAqB;AAC9B,SAAS,eAAe;","names":[]}

package/dist/components/ClientMonitor.d.ts

@@ -0,0 +1,3 @@
+declare const ClientMonitor: React.FC;
+
+export { ClientMonitor };

package/dist/components/ClientMonitor.js

@@ -0,0 +1,135 @@
+"use client";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+import { useDocumentVisible } from "../hooks/useDocumentVisible";
+let _observer;
+function handleVideo(video, isIntersecting) {
+  if (!isIntersecting) {
+    if (!video.paused) {
+      video.pause();
+    }
+  } else if (video.paused) {
+    video.play().then(() => {
+      video.controls = false;
+    }).catch(() => {
+    });
+  }
+}
+function handleAnimation(animation, isIntersecting) {
+  const currentState = animation.currentState;
+  if (!isIntersecting) {
+    if (currentState === "playing") {
+      animation.pause();
+    }
+  } else {
+    if (currentState === "paused") {
+      animation.play();
+    }
+    if (!currentState || currentState === "loading") {
+      if (animation.play) {
+        animation.play();
+      }
+      animation.autoplay = true;
+    }
+  }
+}
+function handleAnimatedSection(section, isIntersecting) {
+  section.dataset.visible = isIntersecting ? "true" : "false";
+  if (isIntersecting) {
+    if (!section.dataset.seen) {
+      section.dataset.seen = "true";
+    }
+  }
+}
+function intersectionHandler(entries) {
+  for (const entry of entries) {
+    const target = entry.target;
+    switch (target.localName) {
+      case "video":
+        handleVideo(target, entry.isIntersecting);
+        break;
+      case "lottie-player":
+        handleAnimation(target, entry.isIntersecting);
+        break;
+      default:
+        {
+          const element = target;
+          handleAnimatedSection(element, entry.isIntersecting);
+        }
+        break;
+    }
+  }
+}
+function getObserver() {
+  if (!_observer) {
+    const observer = new IntersectionObserver(intersectionHandler, {
+      threshold: 0.2
+    });
+    _observer = observer;
+  }
+  return _observer;
+}
+function findAllVideos() {
+  const videos = document.getElementsByTagName("video");
+  const observer = getObserver();
+  for (const video of videos) {
+    video.controls = false;
+    video.muted = true;
+    observer.observe(video);
+  }
+  return () => {
+    for (const video of videos) {
+      observer.unobserve(video);
+    }
+  };
+}
+function findAllAnimations() {
+  const animations = document.getElementsByTagName("lottie-player");
+  const observer = getObserver();
+  for (const animation of animations) {
+    observer.observe(animation);
+  }
+  return () => {
+    for (const animation of animations) {
+      observer.unobserve(animation);
+    }
+  };
+}
+function findAllAnimatedSections() {
+  const sections = document.querySelectorAll("[data-component]");
+  const observer = getObserver();
+  for (const section of sections) {
+    observer.observe(section);
+  }
+  return () => {
+    for (const section of sections) {
+      observer.unobserve(section);
+    }
+  };
+}
+function findAll() {
+  const videoCleanup = findAllVideos();
+  const animationCleanup = findAllAnimations();
+  const animatedSectionCleanup = findAllAnimatedSections();
+  return () => {
+    videoCleanup();
+    animationCleanup();
+    animatedSectionCleanup();
+  };
+}
+const ClientMonitor = () => {
+  const isDocumentVisible = useDocumentVisible();
+  const pathname = usePathname();
+  useEffect(() => {
+    pathname;
+    if (isDocumentVisible) {
+      return findAll();
+    }
+    return void 0;
+  }, [pathname, isDocumentVisible]);
+  return null;
+};
+export {
+  ClientMonitor
+};
+//# sourceMappingURL=ClientMonitor.js.map

package/dist/components/ClientMonitor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ClientMonitor.tsx"],"sourcesContent":["'use client';\nimport { usePathname } from 'next/navigation';\nimport { useEffect } from 'react';\nimport { useDocumentVisible } from '../hooks/useDocumentVisible';\n\nlet _observer: IntersectionObserver | undefined;\n\nfunction handleVideo(video: HTMLVideoElement, isIntersecting: boolean) {\n  if (!isIntersecting) {\n    if (!video.paused) {\n      // console.log(\"pause video\", video.src);\n      video.pause();\n    }\n  } else if (video.paused) {\n    // console.log(\"play video\", video.src);\n    video\n      .play()\n      .then(() => {\n        video.controls = false;\n      })\n      .catch(() => {\n        // console.log(\"failed to play\", error);\n        // video.controls = true;\n      });\n  }\n}\n\ninterface ILottiePlayer extends HTMLElement {\n  pause: () => void;\n  play: () => void;\n  autoplay: boolean;\n  currentState: 'playing' | 'paused' | 'loading' | undefined;\n}\n\nfunction handleAnimation(animation: ILottiePlayer, isIntersecting: boolean) {\n  const currentState = animation.currentState;\n  // console.log('current state', currentState)\n  if (!isIntersecting) {\n    if (currentState === 'playing') {\n      animation.pause();\n    }\n  } else {\n    if (currentState === 'paused') {\n      // console.log('play animation')\n      animation.play();\n    }\n    if (!currentState || currentState === 'loading') {\n      // console.log('set to autoplay')\n      if (animation.play) {\n        animation.play();\n      }\n      animation.autoplay = true;\n    }\n  }\n}\n\nfunction handleAnimatedSection(section: HTMLElement, isIntersecting: boolean) {\n  section.dataset.visible = isIntersecting ? 'true' : 'false';\n  if (isIntersecting) {\n    if (!section.dataset.seen) {\n      section.dataset.seen = 'true';\n    }\n  }\n}\n\nfunction intersectionHandler(entries: IntersectionObserverEntry[]) {\n  for (const entry of entries) {\n    // console.log(\"target\", entry.target.localName, entry.target);\n    const target = entry.target;\n    switch (target.localName) {\n      case 'video':\n        handleVideo(target as HTMLVideoElement, entry.isIntersecting);\n        break;\n      case 'lottie-player':\n        handleAnimation(target as ILottiePlayer, entry.isIntersecting);\n        break;\n      default:\n        {\n          const element = target as HTMLElement;\n          handleAnimatedSection(element, entry.isIntersecting);\n        }\n        break;\n    }\n  }\n}\n\nfunction getObserver() {\n  if (!_observer) {\n    const observer = new IntersectionObserver(intersectionHandler, {\n      threshold: 0.2,\n    });\n    _observer = observer;\n  }\n  return _observer;\n}\n\nfunction findAllVideos() {\n  const videos = document.getElementsByTagName('video');\n  // console.log(\"got\", videos.length, \"videos\");\n  const observer = getObserver();\n  for (const video of videos) {\n    video.controls = false;\n    video.muted = true;\n    // console.log(\n    //   `Video ${video.src} ready state ${video.readyState} ${video.paused}`,\n    // );\n    observer.observe(video);\n  }\n  return () => {\n    // console.log(\"clear down video observer\");\n    for (const video of videos) {\n      observer.unobserve(video);\n    }\n  };\n}\n\nfunction findAllAnimations() {\n  const animations = document.getElementsByTagName('lottie-player');\n  // console.log(\"got\", animations.length, \"animations\");\n  const observer = getObserver();\n  for (const animation of animations) {\n    observer.observe(animation);\n  }\n  return () => {\n    // console.log(\"clear down animation observer\");\n    for (const animation of animations) {\n      observer.unobserve(animation);\n    }\n  };\n}\n\nfunction findAllAnimatedSections() {\n  const sections = document.querySelectorAll('[data-component]');\n  const observer = getObserver();\n  for (const section of sections) {\n    observer.observe(section);\n  }\n  return () => {\n    // console.log(\"clear down animation observer\");\n    for (const section of sections) {\n      observer.unobserve(section);\n    }\n  };\n}\n\nfunction findAll() {\n  const videoCleanup = findAllVideos();\n  const animationCleanup = findAllAnimations();\n  const animatedSectionCleanup = findAllAnimatedSections();\n  return () => {\n    videoCleanup();\n    animationCleanup();\n    animatedSectionCleanup();\n  };\n}\n\nexport const ClientMonitor: React.FC = () => {\n  const isDocumentVisible = useDocumentVisible();\n  const pathname = usePathname();\n  useEffect(() => {\n    pathname;\n    if (isDocumentVisible) {\n      return findAll();\n    }\n    return undefined;\n  }, [pathname, isDocumentVisible]);\n\n  return null;\n};\n"],"mappings":"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","names":[]}

package/dist/components/Preview.d.ts

@@ -0,0 +1,3 @@
+declare const Preview: React.FC;
+
+export { Preview };

package/dist/components/Preview.js

@@ -0,0 +1,33 @@
+"use client";
+import { ContentfulLivePreview } from "@contentful/live-preview";
+import { useRouter } from "next/navigation";
+import { useEffect, useLayoutEffect } from "react";
+const Preview = () => {
+  const router = useRouter();
+  useLayoutEffect(() => {
+    ContentfulLivePreview.init({
+      locale: "en-US",
+      debugMode: true,
+      enableLiveUpdates: true,
+      enableInspectorMode: true
+    });
+  }, []);
+  useEffect(() => {
+    const checkLivePreview = (event) => {
+      if (typeof event.data !== "object" || !event.data || !("from" in event.data) || !("action" in event.data))
+        return;
+      if (event.data.from !== "live-preview") return;
+      if (event.data.action !== "ENTRY_SAVED") return;
+      router.refresh();
+    };
+    window.addEventListener("message", checkLivePreview);
+    return () => {
+      window.removeEventListener("message", checkLivePreview);
+    };
+  }, [router]);
+  return null;
+};
+export {
+  Preview
+};
+//# sourceMappingURL=Preview.js.map

package/dist/components/Preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Preview.tsx"],"sourcesContent":["'use client';\n\nimport { ContentfulLivePreview } from '@contentful/live-preview';\nimport { useRouter } from 'next/navigation';\nimport { useEffect, useLayoutEffect } from 'react';\n\nexport const Preview: React.FC = () => {\n  const router = useRouter();\n  useLayoutEffect(() => {\n    ContentfulLivePreview.init({\n      locale: 'en-US',\n      debugMode: true,\n      enableLiveUpdates: true,\n      enableInspectorMode: true,\n    });\n  }, []);\n\n  useEffect(() => {\n    const checkLivePreview = (event: MessageEvent<unknown>) => {\n      if (\n        typeof event.data !== 'object' ||\n        !event.data ||\n        !('from' in event.data) ||\n        !('action' in event.data)\n      )\n        return;\n      if (event.data.from !== 'live-preview') return;\n      if (event.data.action !== 'ENTRY_SAVED') return;\n      router.refresh();\n    };\n    window.addEventListener('message', checkLivePreview);\n\n    return () => {\n      window.removeEventListener('message', checkLivePreview);\n    };\n  }, [router]);\n\n  return null;\n};\n"],"mappings":";AAEA,SAAS,6BAA6B;AACtC,SAAS,iBAAiB;AAC1B,SAAS,WAAW,uBAAuB;AAEpC,MAAM,UAAoB,MAAM;AACrC,QAAM,SAAS,UAAU;AACzB,kBAAgB,MAAM;AACpB,0BAAsB,KAAK;AAAA,MACzB,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB,qBAAqB;AAAA,IACvB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,mBAAmB,CAAC,UAAiC;AACzD,UACE,OAAO,MAAM,SAAS,YACtB,CAAC,MAAM,QACP,EAAE,UAAU,MAAM,SAClB,EAAE,YAAY,MAAM;AAEpB;AACF,UAAI,MAAM,KAAK,SAAS,eAAgB;AACxC,UAAI,MAAM,KAAK,WAAW,cAAe;AACzC,aAAO,QAAQ;AAAA,IACjB;AACA,WAAO,iBAAiB,WAAW,gBAAgB;AAEnD,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,gBAAgB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;","names":[]}

package/dist/hooks/useDocumentVisible.d.ts

@@ -0,0 +1,3 @@
+declare function useDocumentVisible(initialState?: boolean): boolean;
+
+export { useDocumentVisible };

package/dist/hooks/useDocumentVisible.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect, useState } from "react";
+function useDocumentVisible(initialState = true) {
+  const [isVisible, setIsVisible] = useState(initialState);
+  useEffect(() => {
+    const handler = () => {
+      setIsVisible(document.visibilityState === "visible");
+    };
+    document.addEventListener("visibilitychange", handler, true);
+    handler();
+    return () => {
+      document.removeEventListener("visibilitychange", handler, true);
+    };
+  }, []);
+  return isVisible;
+}
+export {
+  useDocumentVisible
+};
+//# sourceMappingURL=useDocumentVisible.js.map

package/dist/hooks/useDocumentVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useDocumentVisible.ts"],"sourcesContent":["'use client';\nimport { useEffect, useState } from 'react';\n\nexport function useDocumentVisible(initialState = true) {\n  const [isVisible, setIsVisible] = useState(initialState);\n  useEffect(() => {\n    const handler = () => {\n      setIsVisible(document.visibilityState === 'visible');\n    };\n    document.addEventListener('visibilitychange', handler, true);\n    handler();\n    return () => {\n      document.removeEventListener('visibilitychange', handler, true);\n    };\n  }, []);\n  return isVisible;\n}\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;AAE7B,SAAS,mBAAmB,eAAe,MAAM;AACtD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,YAAY;AACvD,YAAU,MAAM;AACd,UAAM,UAAU,MAAM;AACpB,mBAAa,SAAS,oBAAoB,SAAS;AAAA,IACrD;AACA,aAAS,iBAAiB,oBAAoB,SAAS,IAAI;AAC3D,YAAQ;AACR,WAAO,MAAM;AACX,eAAS,oBAAoB,oBAAoB,SAAS,IAAI;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,CAAC;AACL,SAAO;AACT;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,172 @@
+import { BaseCmsConfig, IContentContext, IVisual, PageContent, IPageContext, IVisualSizes, IAnalyticsContext, IVisualCommon } from '@se-studio/core-data-types';
+import { React as React$2 } from 'next/dist/server/route-modules/app-page/vendored/rsc/entrypoints';
+import React$1, { PropsWithChildren, CSSProperties, HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Document } from '@contentful/rich-text-types';
+
+type CollectionMap<TConfig extends BaseCmsConfig> = Record<TConfig['CollectionType'], React$1.FC<{
+    information: TConfig['Collection'];
+    contentContext: IContentContext<TConfig>;
+    rendererConfig: CmsRendererConfig<TConfig>;
+}>>;
+declare function CmsCollection<TConfig extends BaseCmsConfig>({ information, contentContext, rendererConfig, }: {
+    information: TConfig['Collection'];
+    contentContext: IContentContext<TConfig>;
+    rendererConfig: CmsRendererConfig<TConfig>;
+}): react_jsx_runtime.JSX.Element;
+
+type ComponentMap<TConfig extends BaseCmsConfig> = Record<TConfig['ComponentType'], React$1.FC<{
+    information: TConfig['Component'];
+    contentContext: IContentContext<TConfig>;
+    rendererConfig: CmsRendererConfig<TConfig>;
+}>>;
+declare function CmsComponent<TConfig extends BaseCmsConfig>({ information, contentContext, rendererConfig, }: {
+    information: TConfig['Component'];
+    contentContext: IContentContext<TConfig>;
+    rendererConfig: CmsRendererConfig<TConfig>;
+}): react_jsx_runtime.JSX.Element;
+
+type ExternalComponentRenderer<TConfig extends BaseCmsConfig> = React$1.FC<{
+    information: TConfig['ExternalComponent'];
+    contentContext: IContentContext<TConfig>;
+}>;
+type ExternalComponentMap<TConfig extends BaseCmsConfig> = Partial<Record<TConfig['ExternalComponentType'], ExternalComponentRenderer<TConfig>>>;
+type VisualComponentRenderer<TConfig extends BaseCmsConfig> = React$1.FC<{
+    information: IVisual;
+    contentContext: IContentContext<TConfig>;
+}>;
+type InternalLinkRenderer<TConfig extends BaseCmsConfig> = React$1.FC<{
+    information: Extract<PageContent<TConfig>, {
+        type: 'Internal link';
+    }>;
+    contentContext: IContentContext<TConfig>;
+}>;
+declare function CmsContent<TConfig extends BaseCmsConfig>({ pageContext, contents, rendererConfig, }: {
+    pageContext: IPageContext<TConfig>;
+    contents?: ReadonlyArray<PageContent<TConfig>>;
+    rendererConfig: CmsRendererConfig<TConfig>;
+}): react_jsx_runtime.JSX.Element | null;
+
+interface CmsRendererConfig<TConfig extends BaseCmsConfig> {
+    componentMap: ComponentMap<TConfig>;
+    collectionMap: CollectionMap<TConfig>;
+    externalComponentMap: ExternalComponentMap<TConfig>;
+    visualComponentRenderer: VisualComponentRenderer<TConfig>;
+    internalLinkRenderer: InternalLinkRenderer<TConfig>;
+    showUnknownTypeErrors: boolean;
+    showRenderErrors: boolean;
+    defaultComponentRenderer: React$2.FC<{
+        information: TConfig['Component'];
+        contentContext: IContentContext<TConfig>;
+        rendererConfig: CmsRendererConfig<TConfig>;
+    }>;
+    defaultCollectionRenderer: React$2.FC<{
+        information: TConfig['Collection'];
+        contentContext: IContentContext<TConfig>;
+        rendererConfig: CmsRendererConfig<TConfig>;
+    }>;
+    basicLinkRenderer: React$2.FC<PropsWithChildren<{
+        href?: string;
+    }>>;
+    embeddedContentRenderer: React$2.FC<{
+        information: TConfig['PageContent'];
+        contentContext: IContentContext<TConfig>;
+        rendererConfig: CmsRendererConfig<TConfig>;
+    }>;
+}
+declare function createCmsRendererConfig<TConfig extends BaseCmsConfig>(config: CmsRendererConfig<TConfig>): CmsRendererConfig<TConfig>;
+type PartialCmsRendererConfig<TConfig extends BaseCmsConfig> = {
+    [K in keyof CmsRendererConfig<TConfig>]?: CmsRendererConfig<TConfig>[K];
+};
+declare function mergeCmsRendererConfig<TConfig extends BaseCmsConfig>(base: CmsRendererConfig<TConfig>, overrides: PartialCmsRendererConfig<TConfig>): CmsRendererConfig<TConfig>;
+
+type IVisualProps = {
+    className?: string;
+    style?: Omit<CSSProperties, 'objectFit' | 'objectPosition'>;
+    autoPlay?: boolean;
+    loop?: boolean;
+    loopDelay?: number;
+    muted?: boolean;
+    controls?: boolean;
+    loading?: 'eager' | 'lazy' | undefined;
+    priority?: boolean;
+    fetchPriority?: 'high' | 'low' | undefined;
+    visualSizes?: IVisualSizes;
+    fullPlayer?: boolean;
+    analyticsContext?: IAnalyticsContext;
+    componentLabel?: string | null;
+};
+declare function calculateCropDetails(details: Omit<IVisualCommon, 'id' | 'type' | 'name' | 'nameAsCaption'>): Pick<CSSProperties, 'objectFit' | 'objectPosition'>;
+declare function calculateImagePriority(index: number): {
+    priority: boolean;
+    fetchPriority: 'high' | 'low' | undefined;
+} | undefined;
+declare function calculateImageWidthStyleVariable(visual?: IVisual, baseWidth?: number | null): CSSProperties | undefined;
+
+declare const Visual: React$1.FC<{
+    visual: IVisual;
+} & IVisualProps>;
+
+type ArrayToUnion<T extends ReadonlyArray<unknown>> = T[number];
+interface ComponentConfig<TConfig extends BaseCmsConfig = BaseCmsConfig, TAdditional = Record<string, unknown>> {
+    componentProps: ReadonlyArray<keyof TConfig['Component']>;
+    contextProps: ReadonlyArray<keyof IPageContext<TConfig>>;
+    additionalProps?: TAdditional;
+}
+interface CollectionConfig<TConfig extends BaseCmsConfig = BaseCmsConfig, TAdditional = Record<string, unknown>> {
+    collectionProps: ReadonlyArray<keyof TConfig['Collection']>;
+    contextProps: ReadonlyArray<keyof IPageContext<TConfig>>;
+    additionalProps?: TAdditional;
+}
+type ComponentPropsFromConfig<TConfig extends BaseCmsConfig, T extends ComponentConfig<TConfig>> = T['componentProps'] extends ReadonlyArray<keyof TConfig['Component']> ? Pick<TConfig['Component'], ArrayToUnion<T['componentProps']>> : never;
+type CollectionPropsFromConfig<TConfig extends BaseCmsConfig, T extends CollectionConfig<TConfig>> = T['collectionProps'] extends ReadonlyArray<keyof TConfig['Collection']> ? Pick<TConfig['Collection'], ArrayToUnion<T['collectionProps']>> : never;
+type ContextPropsFromConfig<TConfig extends BaseCmsConfig, T extends ComponentConfig<TConfig> | CollectionConfig<TConfig>> = Pick<IPageContext<TConfig>, ArrayToUnion<T['contextProps']>>;
+type GeneratePropsFromComponentConfig<TConfig extends BaseCmsConfig, T extends ComponentConfig<TConfig>> = ComponentPropsFromConfig<TConfig, T> & ContextPropsFromConfig<TConfig, T> & (T['additionalProps'] extends Record<string, unknown> ? T['additionalProps'] : Record<string, never>);
+type GeneratePropsFromCollectionConfig<TConfig extends BaseCmsConfig, T extends CollectionConfig<TConfig>> = CollectionPropsFromConfig<TConfig, T> & ContextPropsFromConfig<TConfig, T> & (T['additionalProps'] extends Record<string, unknown> ? T['additionalProps'] : Record<string, never>);
+declare function extractPropsFromComponentConfig<TConfig extends BaseCmsConfig, T extends ComponentConfig<TConfig>>(config: T, component: TConfig['Component'], context?: IPageContext<TConfig>): GeneratePropsFromComponentConfig<TConfig, T>;
+declare function extractPropsFromCollectionConfig<TConfig extends BaseCmsConfig, T extends CollectionConfig<TConfig>>(config: T, collection: TConfig['Collection'], context?: IPageContext<TConfig>): GeneratePropsFromCollectionConfig<TConfig, T>;
+
+interface IEmbeddableComponentContext<TConfig extends BaseCmsConfig = BaseCmsConfig, T extends TConfig['Component'] = TConfig['Component']> {
+    information: T;
+    parentIndex: number;
+    parentId: string;
+    pageContext: IPageContext<TConfig>;
+}
+interface IEmbeddableCollectionContext<TConfig extends BaseCmsConfig = BaseCmsConfig, T extends TConfig['Collection'] = TConfig['Collection']> {
+    information: T;
+    parentIndex: number;
+    parentId: string;
+    pageContext: IPageContext<TConfig>;
+}
+
+declare function BuildEmbedFromComponentConfig<TConfig extends BaseCmsConfig, TProps extends Record<string, unknown>, TComponentConfig extends ComponentConfig<TConfig>>(Component: React$1.FC<TProps>, componentConfig: TComponentConfig): React$1.FC<IEmbeddableComponentContext<TConfig>>;
+declare function BuildEmbedFromCollectionConfig<TConfig extends BaseCmsConfig, TProps extends Record<string, unknown>, TCollectionConfig extends CollectionConfig<TConfig>>(Collection: React$1.FC<TProps>, collectionConfig: TCollectionConfig): React$1.FC<IEmbeddableCollectionContext<TConfig>>;
+
+type EmbeddableComponentMap<TConfig extends BaseCmsConfig> = Partial<Record<TConfig['ComponentType'], React$1.FC<IEmbeddableComponentContext<TConfig>>>>;
+type EmbeddableCollectionMap<TConfig extends BaseCmsConfig> = Partial<Record<TConfig['CollectionType'], React$1.FC<IEmbeddableCollectionContext<TConfig>>>>;
+declare function isComponentEmbeddable<TConfig extends BaseCmsConfig>(componentType: TConfig['ComponentType'], embeddableMap: EmbeddableComponentMap<TConfig>): boolean;
+declare function isCollectionEmbeddable<TConfig extends BaseCmsConfig>(collectionType: TConfig['CollectionType'], embeddableMap: EmbeddableCollectionMap<TConfig>): boolean;
+
+type RTFProps<TConfig extends BaseCmsConfig> = {
+    content: Document;
+    rendererConfig: CmsRendererConfig<TConfig>;
+    contentContext: IContentContext<TConfig>;
+} & Omit<HTMLAttributes<HTMLElement>, 'content'>;
+declare function RTF<TConfig extends BaseCmsConfig>({ content, className, style, rendererConfig, contentContext, ...other }: RTFProps<TConfig>): react_jsx_runtime.JSX.Element;
+
+declare const DEFAULT_ALLOWED_UNUSED: Set<string>;
+type UnusedType = Record<string, unknown>;
+declare const UnusedChecker: React.FC<PropsWithChildren<{
+    componentName: string;
+    unused: UnusedType;
+    allowedToBeUnused?: Set<string>;
+    showWarnings?: boolean;
+}>>;
+
+declare const UnsupportedWarning: React.FC<PropsWithChildren<{
+    className?: string;
+    style?: CSSProperties;
+    showWarnings?: boolean;
+}>>;
+
+export { type ArrayToUnion, BuildEmbedFromCollectionConfig, BuildEmbedFromComponentConfig, CmsCollection, CmsComponent, CmsContent, type CmsRendererConfig, type CollectionConfig, type CollectionMap, type CollectionPropsFromConfig, type ComponentConfig, type ComponentMap, type ComponentPropsFromConfig, type ContextPropsFromConfig, DEFAULT_ALLOWED_UNUSED, type EmbeddableCollectionMap, type EmbeddableComponentMap, type ExternalComponentMap, type ExternalComponentRenderer, type GeneratePropsFromCollectionConfig, type GeneratePropsFromComponentConfig, type IEmbeddableCollectionContext, type IEmbeddableComponentContext, type IVisualProps, type InternalLinkRenderer, type PartialCmsRendererConfig, RTF, UnsupportedWarning, UnusedChecker, Visual, type VisualComponentRenderer, calculateCropDetails, calculateImagePriority, calculateImageWidthStyleVariable, createCmsRendererConfig, extractPropsFromCollectionConfig, extractPropsFromComponentConfig, isCollectionEmbeddable, isComponentEmbeddable, mergeCmsRendererConfig };