@fluid-app/rep-widgets 0.1.0

package/dist/chunk-F63VY23B.js

@@ -0,0 +1,174 @@
+import { Video, Image } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/MediaRenderer.tsx
+function MediaRenderer({
+  src,
+  alt = "Media",
+  objectFit = "cover",
+  focusPoint,
+  mediaType = "image",
+  poster,
+  autoplay = false,
+  loop = false,
+  muted = false,
+  controls = true
+}) {
+  const hasValidSrc = src && src.trim() !== "";
+  const objectPosition = focusPoint?.replace("-", " ");
+  if (!hasValidSrc) {
+    const Icon = mediaType === "video" ? Video : Image;
+    const label = mediaType === "video" ? "No video selected" : "No image selected";
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-[200px] w-full items-center justify-center bg-muted", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Icon, { className: "h-12 w-12" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: label })
+    ] }) });
+  }
+  const isContainMode = objectFit === "contain";
+  const blurSrc = isContainMode ? `${src}?tr=bl-50` : void 0;
+  if (mediaType === "video") {
+    const blurredBgSrc = isContainMode ? poster ? `${poster}?tr=bl-50` : blurSrc : void 0;
+    if (isContainMode && blurredBgSrc) {
+      return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: blurredBgSrc,
+            alt: "",
+            className: "absolute inset-0 h-full w-full object-cover",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          "video",
+          {
+            src,
+            poster,
+            controls,
+            autoPlay: autoplay,
+            loop,
+            muted,
+            className: `relative z-10 h-full w-full object-contain ${!controls ? "pointer-events-none" : ""}`,
+            children: "Your browser does not support the video tag."
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        src,
+        poster,
+        controls,
+        autoPlay: autoplay,
+        loop,
+        muted,
+        className: `h-full w-full object-${objectFit} ${!controls ? "pointer-events-none" : ""}`,
+        style: objectPosition ? { objectPosition } : void 0,
+        children: "Your browser does not support the video tag."
+      }
+    );
+  }
+  if (isContainMode) {
+    return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: blurSrc,
+          alt: "",
+          className: "absolute inset-0 h-full w-full object-cover",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt,
+          className: "relative z-10 h-full w-full object-contain"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className: `h-full w-full object-${objectFit}`,
+      style: objectPosition ? { objectPosition } : void 0
+    }
+  );
+}
+function getMediaPropsFromShareable(item) {
+  const isVideo = item.kind === "video" || !!item.videoUrl;
+  if (isVideo && item.videoUrl) {
+    const result2 = {
+      mediaType: "video",
+      src: item.videoUrl,
+      alt: item.title ?? "Video"
+    };
+    if (item.imageUrl != null) result2.poster = item.imageUrl;
+    return result2;
+  }
+  const result = {
+    mediaType: "image",
+    alt: item.title || "Image",
+    objectFit: "cover"
+  };
+  if (item.imageUrl != null) result.src = item.imageUrl;
+  return result;
+}
+function getMediaPropsFromWidgetSchema(schema) {
+  const props = schema.props;
+  const resource = props.resource;
+  const useCustomUrl = props.useCustomUrl;
+  const focusPoint = props.focusPoint;
+  const displayFit = props.displayFit;
+  if (schema.type === "VideoWidget") {
+    const result2 = {
+      mediaType: "video",
+      autoplay: props.autoplay ?? false,
+      loop: props.loop ?? false,
+      muted: props.muted ?? false,
+      controls: props.controls ?? true,
+      objectFit: displayFit ?? "cover",
+      focusPoint
+    };
+    if (useCustomUrl) {
+      if (typeof props.src === "string") result2.src = props.src;
+      if (typeof props.poster === "string") result2.poster = props.poster;
+    } else if (resource) {
+      if (resource.videoUrl) result2.src = resource.videoUrl;
+      else if (typeof props.src === "string") result2.src = props.src;
+      if (resource.imageUrl) result2.poster = resource.imageUrl;
+      else if (typeof props.poster === "string") result2.poster = props.poster;
+    } else {
+      if (typeof props.src === "string") result2.src = props.src;
+      if (typeof props.poster === "string") result2.poster = props.poster;
+    }
+    return result2;
+  }
+  const result = {
+    mediaType: "image",
+    alt: props.alt ?? "Image",
+    objectFit: displayFit ?? "cover",
+    focusPoint
+  };
+  if (useCustomUrl) {
+    if (typeof props.src === "string") result.src = props.src;
+  } else if (resource) {
+    if (resource.imageUrl) result.src = resource.imageUrl;
+    else if (typeof props.src === "string") result.src = props.src;
+    if (resource.title) result.alt = resource.title;
+  } else {
+    if (typeof props.src === "string") result.src = props.src;
+  }
+  return result;
+}
+
+export { MediaRenderer, getMediaPropsFromShareable, getMediaPropsFromWidgetSchema };
+//# sourceMappingURL=chunk-F63VY23B.js.map
+//# sourceMappingURL=chunk-F63VY23B.js.map

package/dist/chunk-F63VY23B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MediaRenderer.tsx"],"names":["VideoIcon","ImageIcon","result"],"mappings":"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","file":"chunk-F63VY23B.js","sourcesContent":["import { Image as ImageIcon } from \"lucide-react\";\nimport { Video as VideoIcon } from \"lucide-react\";\nimport type { ShareableItem, WidgetSchema } from \"@fluid-app/rep-core/types\";\n\nexport type MediaRendererProps = {\n  src?: string | undefined;\n  alt?: string | undefined;\n  objectFit?: \"contain\" | \"cover\" | \"fill\" | \"none\" | undefined;\n  focusPoint?: string | undefined;\n  mediaType?: \"image\" | \"video\" | undefined;\n  poster?: string | undefined;\n  autoplay?: boolean | undefined;\n  loop?: boolean | undefined;\n  muted?: boolean | undefined;\n  controls?: boolean | undefined;\n};\n\nexport function MediaRenderer({\n  src,\n  alt = \"Media\",\n  objectFit = \"cover\",\n  focusPoint,\n  mediaType = \"image\",\n  poster,\n  autoplay = false,\n  loop = false,\n  muted = false,\n  controls = true,\n}: MediaRendererProps) {\n  const hasValidSrc = src && src.trim() !== \"\";\n  const objectPosition = focusPoint?.replace(\"-\", \" \");\n\n  if (!hasValidSrc) {\n    const Icon = mediaType === \"video\" ? VideoIcon : ImageIcon;\n    const label =\n      mediaType === \"video\" ? \"No video selected\" : \"No image selected\";\n    return (\n      <div className=\"flex h-full min-h-[200px] w-full items-center justify-center bg-muted\">\n        <div className=\"flex flex-col items-center gap-2 text-muted-foreground\">\n          <Icon className=\"h-12 w-12\" />\n          <p className=\"text-sm\">{label}</p>\n        </div>\n      </div>\n    );\n  }\n\n  const isContainMode = objectFit === \"contain\";\n  const blurSrc = isContainMode ? `${src}?tr=bl-50` : undefined;\n\n  if (mediaType === \"video\") {\n    const blurredBgSrc = isContainMode\n      ? poster\n        ? `${poster}?tr=bl-50`\n        : blurSrc\n      : undefined;\n\n    if (isContainMode && blurredBgSrc) {\n      return (\n        <div className=\"relative h-full w-full overflow-hidden\">\n          <img\n            src={blurredBgSrc}\n            alt=\"\"\n            className=\"absolute inset-0 h-full w-full object-cover\"\n            aria-hidden=\"true\"\n          />\n          <div className=\"absolute inset-0 bg-black/30\" aria-hidden=\"true\" />\n          <video\n            src={src}\n            poster={poster}\n            controls={controls}\n            autoPlay={autoplay}\n            loop={loop}\n            muted={muted}\n            className={`relative z-10 h-full w-full object-contain ${!controls ? \"pointer-events-none\" : \"\"}`}\n          >\n            Your browser does not support the video tag.\n          </video>\n        </div>\n      );\n    }\n\n    return (\n      <video\n        src={src}\n        poster={poster}\n        controls={controls}\n        autoPlay={autoplay}\n        loop={loop}\n        muted={muted}\n        className={`h-full w-full object-${objectFit} ${!controls ? \"pointer-events-none\" : \"\"}`}\n        style={objectPosition ? { objectPosition } : undefined}\n      >\n        Your browser does not support the video tag.\n      </video>\n    );\n  }\n\n  if (isContainMode) {\n    return (\n      <div className=\"relative h-full w-full overflow-hidden\">\n        <img\n          src={blurSrc}\n          alt=\"\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          aria-hidden=\"true\"\n        />\n        <div className=\"absolute inset-0 bg-black/30\" aria-hidden=\"true\" />\n        <img\n          src={src}\n          alt={alt}\n          className=\"relative z-10 h-full w-full object-contain\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={`h-full w-full object-${objectFit}`}\n      style={objectPosition ? { objectPosition } : undefined}\n    />\n  );\n}\n\n/**\n * Converts a ShareableItem to MediaRenderer props.\n * Replaces the createWidgetFromShareable → ScreenRenderer pattern.\n */\nexport function getMediaPropsFromShareable(\n  item: ShareableItem,\n): MediaRendererProps {\n  const isVideo = item.kind === \"video\" || !!item.videoUrl;\n\n  if (isVideo && item.videoUrl) {\n    const result: MediaRendererProps = {\n      mediaType: \"video\",\n      src: item.videoUrl,\n      alt: item.title ?? \"Video\",\n    };\n    if (item.imageUrl != null) result.poster = item.imageUrl;\n    return result;\n  }\n\n  const result: MediaRendererProps = {\n    mediaType: \"image\",\n    alt: item.title || \"Image\",\n    objectFit: \"cover\",\n  };\n  if (item.imageUrl != null) result.src = item.imageUrl;\n  return result;\n}\n\n/**\n * Extracts media props from an ImageWidget/VideoWidget schema.\n * Used by CarouselWidget for slide.content rendering.\n */\nexport function getMediaPropsFromWidgetSchema(\n  schema: WidgetSchema,\n): MediaRendererProps {\n  const props = schema.props;\n\n  const resource = props.resource as ShareableItem | undefined;\n  const useCustomUrl = props.useCustomUrl as boolean | undefined;\n  const focusPoint = props.focusPoint as string | undefined;\n  const displayFit = props.displayFit as\n    | MediaRendererProps[\"objectFit\"]\n    | undefined;\n\n  if (schema.type === \"VideoWidget\") {\n    const result: MediaRendererProps = {\n      mediaType: \"video\",\n      autoplay: (props.autoplay as boolean | undefined) ?? false,\n      loop: (props.loop as boolean | undefined) ?? false,\n      muted: (props.muted as boolean | undefined) ?? false,\n      controls: (props.controls as boolean | undefined) ?? true,\n      objectFit: displayFit ?? \"cover\",\n      focusPoint,\n    };\n    if (useCustomUrl) {\n      if (typeof props.src === \"string\") result.src = props.src;\n      if (typeof props.poster === \"string\") result.poster = props.poster;\n    } else if (resource) {\n      if (resource.videoUrl) result.src = resource.videoUrl;\n      else if (typeof props.src === \"string\") result.src = props.src;\n      if (resource.imageUrl) result.poster = resource.imageUrl;\n      else if (typeof props.poster === \"string\") result.poster = props.poster;\n    } else {\n      if (typeof props.src === \"string\") result.src = props.src;\n      if (typeof props.poster === \"string\") result.poster = props.poster;\n    }\n    return result;\n  }\n\n  const result: MediaRendererProps = {\n    mediaType: \"image\",\n    alt: (props.alt as string | undefined) ?? \"Image\",\n    objectFit: displayFit ?? \"cover\",\n    focusPoint,\n  };\n  if (useCustomUrl) {\n    if (typeof props.src === \"string\") result.src = props.src;\n  } else if (resource) {\n    if (resource.imageUrl) result.src = resource.imageUrl;\n    else if (typeof props.src === \"string\") result.src = props.src;\n    if (resource.title) result.alt = resource.title;\n  } else {\n    if (typeof props.src === \"string\") result.src = props.src;\n  }\n  return result;\n}\n"]}

package/dist/chunk-FSLUSFJ2.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+var chunkJYWKXNUO_cjs = require('./chunk-JYWKXNUO.cjs');
+var react = require('react');
+var types = require('@fluid-app/rep-core/types');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ScreenRendererContent({
+  screen,
+  containerWidgetTypes,
+  className
+}) {
+  const registry = chunkJYWKXNUO_cjs.useRegistry();
+  const isContainerWidget = react.useCallback(
+    (widgetType) => containerWidgetTypes.includes(widgetType),
+    [containerWidgetTypes]
+  );
+  const renderWidget = react.useCallback(
+    (widget, index, currentPath) => {
+      const Component = registry[widget.type];
+      if (!Component) {
+        console.warn(
+          `Widget type "${String(widget.type)}" not found in registry`
+        );
+        return null;
+      }
+      const widgetPath = [...currentPath, index];
+      const additionalProps = isContainerWidget(widget.type) ? {
+        widgetId: widget.id,
+        widgetPath
+      } : {};
+      const props = {
+        ...widget.props,
+        ...additionalProps
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-full w-full overflow-x-hidden",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props })
+        },
+        widget.id || index
+      );
+    },
+    [registry, isContainerWidget]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: className || "h-full w-full", children: screen?.map((item, index) => {
+    if (!item) return null;
+    return renderWidget(item, index, []);
+  }) });
+}
+function ScreenRenderer(props) {
+  const {
+    screen,
+    registry,
+    containerWidgetTypes = [
+      types.WIDGET_TYPE_NAMES.Layout,
+      types.WIDGET_TYPE_NAMES.Container
+    ],
+    className
+  } = props;
+  const registryProviderProps = registry !== void 0 ? { registry } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkJYWKXNUO_cjs.RegistryProvider, { ...registryProviderProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ScreenRendererContent,
+    {
+      screen,
+      containerWidgetTypes,
+      className
+    }
+  ) });
+}
+
+exports.ScreenRenderer = ScreenRenderer;
+//# sourceMappingURL=chunk-FSLUSFJ2.cjs.map
+//# sourceMappingURL=chunk-FSLUSFJ2.cjs.map

package/dist/chunk-FSLUSFJ2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/ScreenRenderer.tsx"],"names":["useRegistry","useCallback","jsx","WIDGET_TYPE_NAMES","RegistryProvider"],"mappings":";;;;;;;AAkCA,SAAS,qBAAA,CAAsB;AAAA,EAC7B,MAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,MAAM,WAAWA,6BAAA,EAAY;AAG7B,EAAA,MAAM,iBAAA,GAAoBC,iBAAA;AAAA,IACxB,CAAC,UAAA,KAAuB,oBAAA,CAAqB,QAAA,CAAS,UAAU,CAAA;AAAA,IAChE,CAAC,oBAAoB;AAAA,GACvB;AAGA,EAAA,MAAM,YAAA,GAAeA,iBAAA;AAAA,IACnB,CAAC,MAAA,EAAsB,KAAA,EAAe,WAAA,KAA4B;AAChE,MAAA,MAAM,SAAA,GAAY,QAAA,CAAS,MAAA,CAAO,IAAI,CAAA;AACtC,MAAA,IAAI,CAAC,SAAA,EAAW;AACd,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN,CAAA,aAAA,EAAgB,MAAA,CAAO,MAAA,CAAO,IAAI,CAAC,CAAA,uBAAA;AAAA,SACrC;AACA,QAAA,OAAO,IAAA;AAAA,MACT;AAEA,MAAA,MAAM,UAAA,GAAa,CAAC,GAAG,WAAA,EAAa,KAAK,CAAA;AAGzC,MAAA,MAAM,eAAA,GAAkB,iBAAA,CAAkB,MAAA,CAAO,IAAI,CAAA,GACjD;AAAA,QACE,UAAU,MAAA,CAAO,EAAA;AAAA,QACjB;AAAA,UAEF,EAAC;AAEL,MAAA,MAAM,KAAA,GAAQ;AAAA,QACZ,GAAG,MAAA,CAAO,KAAA;AAAA,QACV,GAAG;AAAA,OACL;AAEA,MAAA,uBACEC,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,iCAAA;AAAA,UAEV,QAAA,kBAAAA,cAAA,CAAC,SAAA,EAAA,EAAW,GAAG,KAAA,EAAO;AAAA,SAAA;AAAA,QAHjB,OAAO,EAAA,IAAM;AAAA,OAIpB;AAAA,IAEJ,CAAA;AAAA,IACA,CAAC,UAAU,iBAAiB;AAAA,GAC9B;AAEA,EAAA,uBACEA,cAAA,CAAC,SAAI,SAAA,EAAW,SAAA,IAAa,iBAC1B,QAAA,EAAA,MAAA,EAAQ,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAE5B,IAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAClB,IAAA,OAAO,YAAA,CAAa,IAAA,EAAM,KAAA,EAAO,EAAE,CAAA;AAAA,EACrC,CAAC,CAAA,EACH,CAAA;AAEJ;AAwBO,SAAS,eAGd,KAAA,EAA+B;AAC/B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,QAAA;AAAA,IACA,oBAAA,GAAuB;AAAA,MACrBC,uBAAA,CAAkB,MAAA;AAAA,MAClBA,uBAAA,CAAkB;AAAA,KACpB;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAIJ,EAAA,MAAM,wBAAwB,QAAA,KAAa,MAAA,GAAY,EAAE,QAAA,KAAa,EAAC;AAEvE,EAAA,uBACED,cAAA,CAACE,kCAAA,EAAA,EAAkB,GAAG,qBAAA,EAKpB,QAAA,kBAAAF,cAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA;AAAA,GACF,EACF,CAAA;AAEJ","file":"chunk-FSLUSFJ2.cjs","sourcesContent":["import type { ComponentType } from \"react\";\nimport { useCallback } from \"react\";\nimport type {\n  WidgetSchema,\n  TypedWidgetSchema,\n  WidgetPath,\n} from \"@fluid-app/rep-core/types\";\nimport { WIDGET_TYPE_NAMES } from \"@fluid-app/rep-core/types\";\nimport { RegistryProvider, useRegistry } from \"../contexts/RegistryContext\";\n\nexport interface ScreenRendererProps<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n> {\n  /** Array of widget schemas to render */\n  screen: TypedWidgetSchema<T>[] | WidgetSchema[];\n  /** Widget registry mapping type names to components */\n  registry?: T;\n  /** Container widgets (like LayoutWidget) receive these additional props */\n  containerWidgetTypes?: string[];\n  /** Additional CSS classes for the wrapper div */\n  className?: string;\n}\n\ninterface ScreenRendererContentProps {\n  screen: WidgetSchema[];\n  containerWidgetTypes: string[];\n  className?: string | undefined;\n}\n\n/**\n * Internal component that uses the registry from context.\n * This allows us to avoid prop drilling the registry.\n */\nfunction ScreenRendererContent({\n  screen,\n  containerWidgetTypes,\n  className,\n}: ScreenRendererContentProps) {\n  const registry = useRegistry();\n\n  // Check if a widget type is a container\n  const isContainerWidget = useCallback(\n    (widgetType: string) => containerWidgetTypes.includes(widgetType),\n    [containerWidgetTypes],\n  );\n\n  // Render widgets recursively with path tracking\n  const renderWidget = useCallback(\n    (widget: WidgetSchema, index: number, currentPath: WidgetPath) => {\n      const Component = registry[widget.type];\n      if (!Component) {\n        console.warn(\n          `Widget type \"${String(widget.type)}\" not found in registry`,\n        );\n        return null;\n      }\n\n      const widgetPath = [...currentPath, index];\n\n      // Build additional props for container widgets\n      const additionalProps = isContainerWidget(widget.type)\n        ? {\n            widgetId: widget.id,\n            widgetPath,\n          }\n        : {};\n\n      const props = {\n        ...widget.props,\n        ...additionalProps,\n      };\n\n      return (\n        <div\n          key={widget.id || index}\n          className=\"h-full w-full overflow-x-hidden\"\n        >\n          <Component {...props} />\n        </div>\n      );\n    },\n    [registry, isContainerWidget],\n  );\n\n  return (\n    <div className={className || \"h-full w-full\"}>\n      {screen?.map((item, index) => {\n        // Skip null items (empty grid cells)\n        if (!item) return null;\n        return renderWidget(item, index, []);\n      })}\n    </div>\n  );\n}\n\n/**\n * ScreenRenderer - View-only component for rendering widget screens.\n *\n * This is a simplified version designed for the SDK that only handles\n * rendering widgets without edit mode or drag-and-drop functionality.\n *\n * Features:\n * - Static rendering of widgets\n * - Registry context: No prop drilling for widget registry\n * - Container widget support with path tracking\n *\n * Usage:\n * ```tsx\n * import { ScreenRenderer } from '@fluid-app/rep-widgets/core';\n * import { WIDGET_REGISTRY } from '@fluid-app/rep-widgets/widgets';\n *\n * <ScreenRenderer\n *   screen={widgets}\n *   registry={WIDGET_REGISTRY}\n * />\n * ```\n */\nexport function ScreenRenderer<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n>(props: ScreenRendererProps<T>) {\n  const {\n    screen,\n    registry,\n    containerWidgetTypes = [\n      WIDGET_TYPE_NAMES.Layout,\n      WIDGET_TYPE_NAMES.Container,\n    ],\n    className,\n  } = props;\n\n  // Conditionally pass registry prop to satisfy exactOptionalPropertyTypes\n  // When registry is undefined, we omit it entirely and let RegistryProvider inherit from parent\n  const registryProviderProps = registry !== undefined ? { registry } : {};\n\n  return (\n    <RegistryProvider {...registryProviderProps}>\n      {/* Type assertion required: TypedWidgetSchema<T>[] is a subtype of WidgetSchema[]\n          when T's components accept props compatible with WidgetSchema props.\n          This enables type-safe widget rendering with custom registries while allowing\n          the internal renderer to work with the base WidgetSchema type. */}\n      <ScreenRendererContent\n        screen={screen as WidgetSchema[]}\n        containerWidgetTypes={containerWidgetTypes}\n        className={className}\n      />\n    </RegistryProvider>\n  );\n}\n"]}

package/dist/chunk-GA52TZC4.js

@@ -0,0 +1,133 @@
+import { Globe } from 'lucide-react';
+import { getBorderRadiusField } from '@fluid-app/rep-core/registries';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/widgets/EmbedWidget.tsx
+function EmbedWidget({
+  url = "",
+  title = "Embedded Content",
+  height,
+  fullScreen = false,
+  allowFullscreen = true,
+  loading = "lazy",
+  borderRadius = "md",
+  className,
+  ...props
+}) {
+  const isFullScreen = fullScreen;
+  if (!url) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex items-center justify-center rounded-${borderRadius} border-2 border-dashed border-border bg-muted text-muted-foreground ${isFullScreen ? "h-full" : ""} ${className}`,
+        style: isFullScreen ? void 0 : { height: `${height}px` },
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 p-6 text-center", children: [
+          /* @__PURE__ */ jsx(Globe, { className: "h-12 w-12 opacity-50" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Enter a URL to embed external content" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs opacity-75", children: "Configure the URL in the properties panel" })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `w-full ${isFullScreen ? "h-full" : ""} ${className}`,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: url,
+          title,
+          width: "100%",
+          height: isFullScreen ? "100%" : height,
+          loading,
+          allowFullScreen: allowFullscreen,
+          className: `rounded-${borderRadius} border border-border`,
+          sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+        }
+      )
+    }
+  );
+}
+var embedWidgetPropertySchema = {
+  widgetType: "EmbedWidget",
+  displayName: "Embed",
+  fields: [
+    // Content
+    {
+      key: "url",
+      label: "URL",
+      type: "text",
+      description: "The URL of the external site to embed",
+      placeholder: "https://example.com",
+      defaultValue: "",
+      group: "Content"
+    },
+    {
+      key: "title",
+      label: "Title",
+      type: "text",
+      description: "Accessibility title for the embedded content",
+      defaultValue: "Embedded Content",
+      group: "Content"
+    },
+    // Design
+    getBorderRadiusField({
+      key: "borderRadius",
+      label: "Border Radius",
+      description: "Border radius for the embed container",
+      defaultValue: "md",
+      group: "Design"
+    }),
+    {
+      key: "fullScreen",
+      label: "Full Screen",
+      type: "boolean",
+      description: "When enabled, the embed fills the available space",
+      defaultValue: false,
+      group: "Design"
+    },
+    {
+      key: "height",
+      label: "Height (px)",
+      type: "number",
+      description: "Height of the embedded iframe in pixels",
+      min: 100,
+      max: 1200,
+      step: 50,
+      defaultValue: 400,
+      group: "Design",
+      requiresKeyValue: {
+        key: "fullScreen",
+        value: false
+      }
+    },
+    // Settings
+    {
+      key: "allowFullscreen",
+      label: "Allow Fullscreen",
+      type: "boolean",
+      description: "Allow the embedded content to use fullscreen mode",
+      defaultValue: true,
+      group: "Settings"
+    },
+    {
+      key: "loading",
+      label: "Loading",
+      type: "select",
+      description: "When to load the embedded content",
+      options: [
+        { label: "Lazy (on scroll)", value: "lazy" },
+        { label: "Eager (immediately)", value: "eager" }
+      ],
+      defaultValue: "lazy",
+      group: "Settings"
+    }
+  ]
+};
+
+export { EmbedWidget, embedWidgetPropertySchema };
+//# sourceMappingURL=chunk-GA52TZC4.js.map
+//# sourceMappingURL=chunk-GA52TZC4.js.map

package/dist/chunk-GA52TZC4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widgets/EmbedWidget.tsx"],"names":[],"mappings":"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","file":"chunk-GA52TZC4.js","sourcesContent":["import { Globe } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type { BorderRadiusOptions } from \"@fluid-app/rep-core/types\";\n\ntype EmbedWidgetProps = ComponentProps<\"div\"> & {\n  url?: string;\n  title?: string;\n  height?: number;\n  fullScreen?: boolean;\n  allowFullscreen?: boolean;\n  loading?: \"eager\" | \"lazy\";\n  borderRadius?: BorderRadiusOptions;\n};\n\nexport function EmbedWidget({\n  url = \"\",\n  title = \"Embedded Content\",\n  height,\n  fullScreen = false,\n  allowFullscreen = true,\n  loading = \"lazy\",\n  borderRadius = \"md\",\n  className,\n  ...props\n}: EmbedWidgetProps) {\n  const isFullScreen = fullScreen;\n\n  // Show placeholder if no URL is provided\n  if (!url) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-2 border-dashed border-border bg-muted text-muted-foreground ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height: `${height}px` }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <Globe className=\"h-12 w-12 opacity-50\" />\n          <p className=\"text-sm font-medium\">\n            Enter a URL to embed external content\n          </p>\n          <p className=\"text-xs opacity-75\">\n            Configure the URL in the properties panel\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`w-full ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n      {...props}\n    >\n      <iframe\n        src={url}\n        title={title}\n        width=\"100%\"\n        height={isFullScreen ? \"100%\" : height}\n        loading={loading}\n        allowFullScreen={allowFullscreen}\n        className={`rounded-${borderRadius} border border-border`}\n        sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox\"\n      />\n    </div>\n  );\n}\n\nexport const embedWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"EmbedWidget\",\n  displayName: \"Embed\",\n  fields: [\n    // Content\n    {\n      key: \"url\",\n      label: \"URL\",\n      type: \"text\",\n      description: \"The URL of the external site to embed\",\n      placeholder: \"https://example.com\",\n      defaultValue: \"\",\n      group: \"Content\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Accessibility title for the embedded content\",\n      defaultValue: \"Embedded Content\",\n      group: \"Content\",\n    },\n\n    // Design\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the embed container\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    {\n      key: \"fullScreen\",\n      label: \"Full Screen\",\n      type: \"boolean\",\n      description: \"When enabled, the embed fills the available space\",\n      defaultValue: false,\n      group: \"Design\",\n    },\n    {\n      key: \"height\",\n      label: \"Height (px)\",\n      type: \"number\",\n      description: \"Height of the embedded iframe in pixels\",\n      min: 100,\n      max: 1200,\n      step: 50,\n      defaultValue: 400,\n      group: \"Design\",\n      requiresKeyValue: {\n        key: \"fullScreen\",\n        value: false,\n      },\n    },\n\n    // Settings\n    {\n      key: \"allowFullscreen\",\n      label: \"Allow Fullscreen\",\n      type: \"boolean\",\n      description: \"Allow the embedded content to use fullscreen mode\",\n      defaultValue: true,\n      group: \"Settings\",\n    },\n    {\n      key: \"loading\",\n      label: \"Loading\",\n      type: \"select\",\n      description: \"When to load the embedded content\",\n      options: [\n        { label: \"Lazy (on scroll)\", value: \"lazy\" },\n        { label: \"Eager (immediately)\", value: \"eager\" },\n      ],\n      defaultValue: \"lazy\",\n      group: \"Settings\",\n    },\n  ],\n};\n"]}

package/dist/chunk-GRFCSQ2M.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/error-state.tsx
+function ErrorState() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[120px] flex-col items-center justify-center p-6 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: "Something Went Wrong" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Please contact a company admin for help" })
+  ] });
+}
+
+export { ErrorState };
+//# sourceMappingURL=chunk-GRFCSQ2M.js.map
+//# sourceMappingURL=chunk-GRFCSQ2M.js.map

package/dist/chunk-GRFCSQ2M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/error-state.tsx"],"names":[],"mappings":";;;AAAO,SAAS,UAAA,GAAa;AAC3B,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yEAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,sBAAA,EAAoB,CAAA;AAAA,oBACzD,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+BAAA,EAAgC,QAAA,EAAA,yCAAA,EAE7C;AAAA,GAAA,EACF,CAAA;AAEJ","file":"chunk-GRFCSQ2M.js","sourcesContent":["export function ErrorState() {\n  return (\n    <div className=\"flex min-h-[120px] flex-col items-center justify-center p-6 text-center\">\n      <p className=\"text-lg font-semibold\">Something Went Wrong</p>\n      <p className=\"text-sm text-muted-foreground\">\n        Please contact a company admin for help\n      </p>\n    </div>\n  );\n}\n"]}