@fluid-app/rep-widgets 0.1.16 → 0.1.18

package/dist/EmbedWidget-BQyYm50g.cjs

@@ -0,0 +1,173 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _fortawesome_react_fontawesome = require("@fortawesome/react-fontawesome");
+let _fortawesome_pro_regular_svg_icons = require("@fortawesome/pro-regular-svg-icons");
+//#region src/widgets/EmbedWidget.tsx
+var EmbedWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	EmbedWidget: () => EmbedWidget,
+	embedWidgetPropertySchema: () => embedWidgetPropertySchema
+});
+function EmbedWidget({ url = "", title = "Embedded Content", height = "400px", fullScreen = false, allowFullscreen = true, loading = "lazy", borderRadius = "md", editMode = false, isSelected = false, className, ...props }) {
+	const isFullScreen = fullScreen;
+	if (!url) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? "h-full" : ""} ${className}`,
+		style: isFullScreen ? void 0 : { height },
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-2 p-6 text-center",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fortawesome_react_fontawesome.FontAwesomeIcon, {
+					icon: _fortawesome_pro_regular_svg_icons.faGlobe,
+					className: "h-12 w-12 opacity-50"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm font-medium",
+					children: "Enter a URL to embed external content"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-xs opacity-75",
+					children: "Configure the URL in the properties panel"
+				})
+			]
+		})
+	});
+	const normalizedUrl = url.startsWith("http://") || url.startsWith("https://") ? url : `https://${url}`;
+	let isValidUrl = false;
+	try {
+		const parsed = new URL(normalizedUrl);
+		isValidUrl = (parsed.protocol === "http:" || parsed.protocol === "https:") && (parsed.hostname.includes(".") || parsed.hostname === "localhost");
+	} catch {}
+	if (!isValidUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? "h-full" : ""} ${className}`,
+		style: isFullScreen ? void 0 : { height },
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-2 p-6 text-center",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fortawesome_react_fontawesome.FontAwesomeIcon, {
+					icon: _fortawesome_pro_regular_svg_icons.faGlobe,
+					className: "h-12 w-12 opacity-50"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm font-medium",
+					children: "Enter a URL to embed external content"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-xs opacity-75",
+					children: "Configure the URL in the properties panel"
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `relative w-full ${isFullScreen ? "h-full" : ""} ${className}`,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+			src: normalizedUrl,
+			title,
+			width: "100%",
+			style: isFullScreen ? { height: "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"
+		}), editMode && !isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 z-10" })]
+	});
+}
+const embedWidgetPropertySchema = {
+	widgetType: "EmbedWidget",
+	displayName: "Embed",
+	fields: [
+		{
+			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"
+		},
+		(0, _fluid_app_rep_core_registries.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"
+		},
+		(0, _fluid_app_rep_core_registries.getHeightField)({
+			key: "height",
+			label: "Height",
+			description: "Height of the embedded iframe",
+			min: 50,
+			max: 1200,
+			step: 10,
+			defaultValue: "400px",
+			group: "Design",
+			requiresKeyValue: {
+				key: "fullScreen",
+				value: false
+			}
+		}),
+		{
+			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"
+		}
+	]
+};
+//#endregion
+Object.defineProperty(exports, "EmbedWidget", {
+	enumerable: true,
+	get: function() {
+		return EmbedWidget;
+	}
+});
+Object.defineProperty(exports, "EmbedWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return EmbedWidget_exports;
+	}
+});
+Object.defineProperty(exports, "embedWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return embedWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=EmbedWidget-BQyYm50g.cjs.map

package/dist/EmbedWidget-BQyYm50g.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbedWidget-BQyYm50g.cjs","names":["FontAwesomeIcon","faGlobe"],"sources":["../src/widgets/EmbedWidget.tsx"],"sourcesContent":["import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faGlobe } from \"@fortawesome/pro-regular-svg-icons\";\nimport type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\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?: string;\n  fullScreen?: boolean;\n  allowFullscreen?: boolean;\n  loading?: \"eager\" | \"lazy\";\n  borderRadius?: BorderRadiusOptions;\n  editMode?: boolean;\n  isSelected?: boolean;\n};\n\nexport function EmbedWidget({\n  url = \"\",\n  title = \"Embedded Content\",\n  height = \"400px\",\n  fullScreen = false,\n  allowFullscreen = true,\n  loading = \"lazy\",\n  borderRadius = \"md\",\n  editMode = false,\n  isSelected = false,\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-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} 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  const normalizedUrl =\n    url.startsWith(\"http://\") || url.startsWith(\"https://\")\n      ? url\n      : `https://${url}`;\n\n  let isValidUrl = false;\n  try {\n    const parsed = new URL(normalizedUrl);\n    isValidUrl =\n      (parsed.protocol === \"http:\" || parsed.protocol === \"https:\") &&\n      (parsed.hostname.includes(\".\") || parsed.hostname === \"localhost\");\n  } catch {\n    // invalid URL\n  }\n\n  if (!isValidUrl) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} 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={`relative w-full ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n      {...props}\n    >\n      <iframe\n        src={normalizedUrl}\n        title={title}\n        width=\"100%\"\n        style={isFullScreen ? { height: \"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      {editMode && !isSelected && <div className=\"absolute inset-0 z-10\" />}\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    getHeightField({\n      key: \"height\",\n      label: \"Height\",\n      description: \"Height of the embedded iframe\",\n      min: 50,\n      max: 1200,\n      step: 10,\n      defaultValue: \"400px\",\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"],"mappings":"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"}

package/dist/EmbedWidget-DQ2rCA4j.mjs

@@ -0,0 +1,156 @@
+import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
+import { getBorderRadiusField, getHeightField } from "@fluid-app/rep-core/registries";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGlobe } from "@fortawesome/pro-regular-svg-icons";
+//#region src/widgets/EmbedWidget.tsx
+var EmbedWidget_exports = /* @__PURE__ */ __exportAll({
+	EmbedWidget: () => EmbedWidget,
+	embedWidgetPropertySchema: () => embedWidgetPropertySchema
+});
+function EmbedWidget({ url = "", title = "Embedded Content", height = "400px", fullScreen = false, allowFullscreen = true, loading = "lazy", borderRadius = "md", editMode = false, isSelected = false, className, ...props }) {
+	const isFullScreen = fullScreen;
+	if (!url) return /* @__PURE__ */ jsx("div", {
+		className: `flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? "h-full" : ""} ${className}`,
+		style: isFullScreen ? void 0 : { height },
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-2 p-6 text-center",
+			children: [
+				/* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faGlobe,
+					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"
+				})
+			]
+		})
+	});
+	const normalizedUrl = url.startsWith("http://") || url.startsWith("https://") ? url : `https://${url}`;
+	let isValidUrl = false;
+	try {
+		const parsed = new URL(normalizedUrl);
+		isValidUrl = (parsed.protocol === "http:" || parsed.protocol === "https:") && (parsed.hostname.includes(".") || parsed.hostname === "localhost");
+	} catch {}
+	if (!isValidUrl) return /* @__PURE__ */ jsx("div", {
+		className: `flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? "h-full" : ""} ${className}`,
+		style: isFullScreen ? void 0 : { height },
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-2 p-6 text-center",
+			children: [
+				/* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faGlobe,
+					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__ */ jsxs("div", {
+		className: `relative w-full ${isFullScreen ? "h-full" : ""} ${className}`,
+		...props,
+		children: [/* @__PURE__ */ jsx("iframe", {
+			src: normalizedUrl,
+			title,
+			width: "100%",
+			style: isFullScreen ? { height: "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"
+		}), editMode && !isSelected && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10" })]
+	});
+}
+const embedWidgetPropertySchema = {
+	widgetType: "EmbedWidget",
+	displayName: "Embed",
+	fields: [
+		{
+			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"
+		},
+		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"
+		},
+		getHeightField({
+			key: "height",
+			label: "Height",
+			description: "Height of the embedded iframe",
+			min: 50,
+			max: 1200,
+			step: 10,
+			defaultValue: "400px",
+			group: "Design",
+			requiresKeyValue: {
+				key: "fullScreen",
+				value: false
+			}
+		}),
+		{
+			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"
+		}
+	]
+};
+//#endregion
+export { EmbedWidget_exports as n, embedWidgetPropertySchema as r, EmbedWidget as t };
+
+//# sourceMappingURL=EmbedWidget-DQ2rCA4j.mjs.map

package/dist/EmbedWidget-DQ2rCA4j.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbedWidget-DQ2rCA4j.mjs","names":[],"sources":["../src/widgets/EmbedWidget.tsx"],"sourcesContent":["import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faGlobe } from \"@fortawesome/pro-regular-svg-icons\";\nimport type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\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?: string;\n  fullScreen?: boolean;\n  allowFullscreen?: boolean;\n  loading?: \"eager\" | \"lazy\";\n  borderRadius?: BorderRadiusOptions;\n  editMode?: boolean;\n  isSelected?: boolean;\n};\n\nexport function EmbedWidget({\n  url = \"\",\n  title = \"Embedded Content\",\n  height = \"400px\",\n  fullScreen = false,\n  allowFullscreen = true,\n  loading = \"lazy\",\n  borderRadius = \"md\",\n  editMode = false,\n  isSelected = false,\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-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} 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  const normalizedUrl =\n    url.startsWith(\"http://\") || url.startsWith(\"https://\")\n      ? url\n      : `https://${url}`;\n\n  let isValidUrl = false;\n  try {\n    const parsed = new URL(normalizedUrl);\n    isValidUrl =\n      (parsed.protocol === \"http:\" || parsed.protocol === \"https:\") &&\n      (parsed.hostname.includes(\".\") || parsed.hostname === \"localhost\");\n  } catch {\n    // invalid URL\n  }\n\n  if (!isValidUrl) {\n    return (\n      <div\n        className={`flex items-center justify-center rounded-${borderRadius} border-border bg-muted text-muted-foreground border-2 border-dashed ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n        style={isFullScreen ? undefined : { height }}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-6 text-center\">\n          <FontAwesomeIcon icon={faGlobe} 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={`relative w-full ${isFullScreen ? \"h-full\" : \"\"} ${className}`}\n      {...props}\n    >\n      <iframe\n        src={normalizedUrl}\n        title={title}\n        width=\"100%\"\n        style={isFullScreen ? { height: \"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      {editMode && !isSelected && <div className=\"absolute inset-0 z-10\" />}\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    getHeightField({\n      key: \"height\",\n      label: \"Height\",\n      description: \"Height of the embedded iframe\",\n      min: 50,\n      max: 1200,\n      step: 10,\n      defaultValue: \"400px\",\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"],"mappings":";;;;;;;;;;AAsBA,SAAgB,YAAY,EAC1B,MAAM,IACN,QAAQ,oBACR,SAAS,SACT,aAAa,OACb,kBAAkB,MAClB,UAAU,QACV,eAAe,MACf,WAAW,OACX,aAAa,OACb,WACA,GAAG,SACgB;CACnB,MAAM,eAAe;AAGrB,KAAI,CAAC,IACH,QACE,oBAAC,OAAD;EACE,WAAW,4CAA4C,aAAa,uEAAuE,eAAe,WAAW,GAAG,GAAG;EAC3K,OAAO,eAAe,KAAA,IAAY,EAAE,QAAQ;EAC5C,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,iBAAD;KAAiB,MAAM;KAAS,WAAU;KAAyB,CAAA;IACnE,oBAAC,KAAD;KAAG,WAAU;eAAsB;KAE/B,CAAA;IACJ,oBAAC,KAAD;KAAG,WAAU;eAAqB;KAE9B,CAAA;IACA;;EACF,CAAA;CAIV,MAAM,gBACJ,IAAI,WAAW,UAAU,IAAI,IAAI,WAAW,WAAW,GACnD,MACA,WAAW;CAEjB,IAAI,aAAa;AACjB,KAAI;EACF,MAAM,SAAS,IAAI,IAAI,cAAc;AACrC,gBACG,OAAO,aAAa,WAAW,OAAO,aAAa,cACnD,OAAO,SAAS,SAAS,IAAI,IAAI,OAAO,aAAa;SAClD;AAIR,KAAI,CAAC,WACH,QACE,oBAAC,OAAD;EACE,WAAW,4CAA4C,aAAa,uEAAuE,eAAe,WAAW,GAAG,GAAG;EAC3K,OAAO,eAAe,KAAA,IAAY,EAAE,QAAQ;EAC5C,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,iBAAD;KAAiB,MAAM;KAAS,WAAU;KAAyB,CAAA;IACnE,oBAAC,KAAD;KAAG,WAAU;eAAsB;KAE/B,CAAA;IACJ,oBAAC,KAAD;KAAG,WAAU;eAAqB;KAE9B,CAAA;IACA;;EACF,CAAA;AAIV,QACE,qBAAC,OAAD;EACE,WAAW,mBAAmB,eAAe,WAAW,GAAG,GAAG;EAC9D,GAAI;YAFN,CAIE,oBAAC,UAAD;GACE,KAAK;GACE;GACP,OAAM;GACN,OAAO,eAAe,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ;GAC5C;GACT,iBAAiB;GACjB,WAAW,WAAW,aAAa;GACnC,SAAQ;GACR,CAAA,EACD,YAAY,CAAC,cAAc,oBAAC,OAAD,EAAK,WAAU,yBAA0B,CAAA,CACjE;;;AAIV,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EAGD,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,OAAO;GACP,kBAAkB;IAChB,KAAK;IACL,OAAO;IACR;GACF,CAAC;EAGF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAoB,OAAO;IAAQ,EAC5C;IAAE,OAAO;IAAuB,OAAO;IAAS,CACjD;GACD,cAAc;GACd,OAAO;GACR;EACF;CACF"}

package/dist/ImageWidget-DBBul7ca.mjs

@@ -0,0 +1,150 @@
+import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
+import { t as MediaRenderer } from "./MediaRenderer-Uq90PZcY.mjs";
+import { getBorderRadiusField, getHeightField } from "@fluid-app/rep-core/registries";
+import { jsx } from "react/jsx-runtime";
+//#region src/widgets/ImageWidget.tsx
+var ImageWidget_exports = /* @__PURE__ */ __exportAll({
+	ImageWidget: () => ImageWidget,
+	imageWidgetPropertySchema: () => imageWidgetPropertySchema
+});
+function ImageWidget({ src = "", alt = "", borderRadius = "md", verticalSizing = "auto", fixedHeight = "200px", displayFit = "cover", focusPoint, linkUrl, resource, useCustomUrl }) {
+	const effectiveSrc = useCustomUrl ? src : resource?.imageUrl ?? src;
+	const effectiveAlt = resource?.title ?? alt;
+	const isFixed = verticalSizing === "fixed";
+	const content = /* @__PURE__ */ jsx("div", {
+		className: `w-full rounded-${borderRadius} overflow-hidden`,
+		style: isFixed ? { height: fixedHeight } : void 0,
+		children: /* @__PURE__ */ jsx(MediaRenderer, {
+			mediaType: "image",
+			src: effectiveSrc,
+			alt: effectiveAlt,
+			objectFit: isFixed ? displayFit : "contain",
+			focusPoint: isFixed ? focusPoint : void 0
+		})
+	});
+	if (linkUrl) return /* @__PURE__ */ jsx("a", {
+		href: linkUrl,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: content
+	});
+	return content;
+}
+const imageWidgetPropertySchema = {
+	widgetType: "ImageWidget",
+	displayName: "Image",
+	fields: [
+		{
+			key: "resource",
+			label: "Select Image",
+			type: "resource",
+			description: "Browse and select an image",
+			allowedTypes: ["Medium"],
+			group: "Content"
+		},
+		{
+			key: "useCustomUrl",
+			label: "Use Custom URL",
+			type: "boolean",
+			description: "Enter a custom image URL instead of selecting media",
+			defaultValue: false,
+			group: "Content"
+		},
+		{
+			key: "src",
+			label: "Image URL",
+			type: "text",
+			description: "The source URL of the image",
+			defaultValue: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop",
+			group: "Content",
+			requiresKeyToBeTrue: "useCustomUrl"
+		},
+		{
+			key: "alt",
+			label: "Alt Text",
+			type: "text",
+			description: "Alternative text for the image (for accessibility)",
+			defaultValue: "Placeholder image",
+			group: "Content"
+		},
+		getBorderRadiusField({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the container",
+			defaultValue: "md",
+			group: "Design"
+		}),
+		{
+			key: "verticalSizing",
+			label: "Vertical Sizing",
+			type: "buttonGroup",
+			description: "How the image height is determined",
+			options: [{
+				label: "Auto",
+				value: "auto"
+			}, {
+				label: "Fixed",
+				value: "fixed"
+			}],
+			defaultValue: "auto",
+			group: "Design"
+		},
+		getHeightField({
+			key: "fixedHeight",
+			label: "Height",
+			description: "Fixed height of the image container",
+			min: 10,
+			max: 1200,
+			step: 10,
+			defaultValue: "200px",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		}),
+		{
+			key: "displayFit",
+			label: "Display Fit",
+			type: "buttonGroup",
+			description: "How the image fills its container",
+			options: [{
+				label: "Cover",
+				value: "cover"
+			}, {
+				label: "Contain",
+				value: "contain"
+			}],
+			defaultValue: "cover",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		},
+		{
+			key: "focusPoint",
+			label: "Focus Point",
+			type: "contentPosition",
+			description: "The focal point of the image within its container",
+			defaultValue: "center",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		},
+		{
+			key: "linkUrl",
+			label: "Link URL",
+			type: "text",
+			description: "Optional URL to wrap the image in a link",
+			defaultValue: "",
+			group: "Link"
+		}
+	]
+};
+//#endregion
+export { ImageWidget_exports as n, imageWidgetPropertySchema as r, ImageWidget as t };
+
+//# sourceMappingURL=ImageWidget-DBBul7ca.mjs.map

package/dist/ImageWidget-DBBul7ca.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWidget-DBBul7ca.mjs","names":[],"sources":["../src/widgets/ImageWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type {\n  BorderRadiusOptions,\n  ShareableItem,\n} from \"@fluid-app/rep-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype ImageWidgetProps = ComponentProps<\"div\"> & {\n  src?: string;\n  alt?: string;\n  borderRadius?: BorderRadiusOptions;\n  verticalSizing?: \"auto\" | \"fixed\";\n  fixedHeight?: string;\n  displayFit?: \"cover\" | \"contain\";\n  focusPoint?: string;\n  linkUrl?: string;\n  resource?: ShareableItem;\n  useCustomUrl?: boolean;\n};\n\nexport function ImageWidget({\n  src = \"\",\n  alt = \"\",\n  borderRadius = \"md\",\n  verticalSizing = \"auto\",\n  fixedHeight = \"200px\",\n  displayFit = \"cover\",\n  focusPoint,\n  linkUrl,\n  resource,\n  useCustomUrl,\n}: ImageWidgetProps) {\n  const effectiveSrc = useCustomUrl ? src : (resource?.imageUrl ?? src);\n  const effectiveAlt = resource?.title ?? alt;\n\n  const isFixed = verticalSizing === \"fixed\";\n\n  const content = (\n    <div\n      className={`w-full rounded-${borderRadius} overflow-hidden`}\n      style={isFixed ? { height: fixedHeight } : undefined}\n    >\n      <MediaRenderer\n        mediaType=\"image\"\n        src={effectiveSrc}\n        alt={effectiveAlt}\n        objectFit={isFixed ? displayFit : \"contain\"}\n        focusPoint={isFixed ? focusPoint : undefined}\n      />\n    </div>\n  );\n\n  if (linkUrl) {\n    return (\n      <a href={linkUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n        {content}\n      </a>\n    );\n  }\n\n  return content;\n}\n\nexport const imageWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ImageWidget\",\n  displayName: \"Image\",\n  fields: [\n    // Content\n    {\n      key: \"resource\",\n      label: \"Select Image\",\n      type: \"resource\",\n      description: \"Browse and select an image\",\n      allowedTypes: [\"Medium\"],\n      group: \"Content\",\n    },\n    {\n      key: \"useCustomUrl\",\n      label: \"Use Custom URL\",\n      type: \"boolean\",\n      description: \"Enter a custom image URL instead of selecting media\",\n      defaultValue: false,\n      group: \"Content\",\n    },\n    {\n      key: \"src\",\n      label: \"Image URL\",\n      type: \"text\",\n      description: \"The source URL of the image\",\n      defaultValue:\n        \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop\",\n      group: \"Content\",\n      requiresKeyToBeTrue: \"useCustomUrl\",\n    },\n    {\n      key: \"alt\",\n      label: \"Alt Text\",\n      type: \"text\",\n      description: \"Alternative text for the image (for accessibility)\",\n      defaultValue: \"Placeholder image\",\n      group: \"Content\",\n    },\n\n    // Design\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the container\",\n      defaultValue: \"md\",\n      group: \"Design\",\n    }),\n    {\n      key: \"verticalSizing\",\n      label: \"Vertical Sizing\",\n      type: \"buttonGroup\",\n      description: \"How the image height is determined\",\n      options: [\n        { label: \"Auto\", value: \"auto\" },\n        { label: \"Fixed\", value: \"fixed\" },\n      ],\n      defaultValue: \"auto\",\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"fixedHeight\",\n      label: \"Height\",\n      description: \"Fixed height of the image container\",\n      min: 10,\n      max: 1200,\n      step: 10,\n      defaultValue: \"200px\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    }),\n    {\n      key: \"displayFit\",\n      label: \"Display Fit\",\n      type: \"buttonGroup\",\n      description: \"How the image fills its container\",\n      options: [\n        { label: \"Cover\", value: \"cover\" },\n        { label: \"Contain\", value: \"contain\" },\n      ],\n      defaultValue: \"cover\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n    {\n      key: \"focusPoint\",\n      label: \"Focus Point\",\n      type: \"contentPosition\",\n      description: \"The focal point of the image within its container\",\n      defaultValue: \"center\",\n      group: \"Design\",\n      requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n    },\n\n    // Link\n    {\n      key: \"linkUrl\",\n      label: \"Link URL\",\n      type: \"text\",\n      description: \"Optional URL to wrap the image in a link\",\n      defaultValue: \"\",\n      group: \"Link\",\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,YAAY,EAC1B,MAAM,IACN,MAAM,IACN,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,SACA,UACA,gBACmB;CACnB,MAAM,eAAe,eAAe,MAAO,UAAU,YAAY;CACjE,MAAM,eAAe,UAAU,SAAS;CAExC,MAAM,UAAU,mBAAmB;CAEnC,MAAM,UACJ,oBAAC,OAAD;EACE,WAAW,kBAAkB,aAAa;EAC1C,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,oBAAC,eAAD;GACE,WAAU;GACV,KAAK;GACL,KAAK;GACL,WAAW,UAAU,aAAa;GAClC,YAAY,UAAU,aAAa,KAAA;GACnC,CAAA;EACE,CAAA;AAGR,KAAI,QACF,QACE,oBAAC,KAAD;EAAG,MAAM;EAAS,QAAO;EAAS,KAAI;YACnC;EACC,CAAA;AAIR,QAAO;;AAGT,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc,CAAC,SAAS;GACxB,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cACE;GACF,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EAGD,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAQ,OAAO;IAAQ,EAChC;IAAE,OAAO;IAAS,OAAO;IAAS,CACnC;GACD,cAAc;GACd,OAAO;GACR;EACD,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAW,OAAO;IAAW,CACvC;GACD,cAAc;GACd,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EAGD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,OAAO;GACR;EACF;CACF"}