@fluid-app/portal-widgets 0.1.17

package/dist/RecentActivityWidget-wODng8dt.cjs

@@ -0,0 +1,408 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+const require_error_state = require("./error-state-DSzVUtEl.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let _fluid_app_portal_core_data_sources_context = require("@fluid-app/portal-core/data-sources/context");
+let _fluid_app_portal_core_data_sources_preview_context = require("@fluid-app/portal-core/data-sources/preview-context");
+let _fortawesome_react_fontawesome = require("@fortawesome/react-fontawesome");
+let _fortawesome_pro_regular_svg_icons = require("@fortawesome/pro-regular-svg-icons");
+let _fluid_app_portal_core_registries = require("@fluid-app/portal-core/registries");
+//#region src/hooks/use-activities.preview.ts
+const now = /* @__PURE__ */ new Date();
+function minutesAgo(minutes) {
+	return (/* @__PURE__ */ new Date(now.getTime() - minutes * 6e4)).toISOString();
+}
+const PREVIEW_DATA = [
+	{
+		id: 1,
+		userName: "Sarah Johnson",
+		avatarUrl: null,
+		activityType: "Order Placed",
+		targetName: "Wellness Starter Kit",
+		timestamp: minutesAgo(12),
+		slug: "order_placed"
+	},
+	{
+		id: 2,
+		userName: "Mike Chen",
+		avatarUrl: null,
+		activityType: "New Lead",
+		targetName: "Signed up from Instagram link",
+		timestamp: minutesAgo(45),
+		slug: "new_lead"
+	},
+	{
+		id: 3,
+		userName: "Visitor from Austin, TX",
+		avatarUrl: null,
+		activityType: "Page Views",
+		targetName: "Viewed product catalog (3 pages)",
+		timestamp: minutesAgo(90),
+		slug: "page_views"
+	},
+	{
+		id: 4,
+		userName: "Lisa Park",
+		avatarUrl: null,
+		activityType: "Video Complete",
+		targetName: "Watched: Getting Started Guide",
+		timestamp: minutesAgo(180),
+		slug: "video_complete"
+	}
+];
+//#endregion
+//#region src/hooks/use-activities.ts
+function useActivities() {
+	const { baseUrl, getApiHeaders } = (0, _fluid_app_portal_core_data_sources_context.useDataSourceConfig)();
+	const { isPreview } = (0, _fluid_app_portal_core_data_sources_preview_context.useWidgetPreviewContext)();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"portal-widget-use",
+			"activities",
+			isPreview ? "preview" : baseUrl
+		],
+		queryFn: async ({ signal }) => {
+			const url = baseUrl ? `${baseUrl}/v1.1/activities.json` : "/v1.1/activities.json";
+			const response = await fetch(url, {
+				headers: {
+					"content-type": "application/json",
+					...getApiHeaders?.()
+				},
+				signal
+			});
+			if (!response.ok) throw new Error(`Failed to fetch activities: ${response.status}`);
+			return transformActivities(await response.json());
+		},
+		enabled: !isPreview,
+		...isPreview && { placeholderData: PREVIEW_DATA }
+	});
+}
+function getUserName(contact, visitor) {
+	if (contact?.full_name) return contact.full_name;
+	if (contact?.first_name && contact?.last_name) return `${contact.first_name} ${contact.last_name}`;
+	if (visitor?.city && visitor?.state) return `Visitor from ${visitor.city}, ${visitor.state}`;
+	return "Unknown Visitor";
+}
+function transformActivities(rawData) {
+	const itemsObj = rawData[1];
+	if (!itemsObj?.items) return [];
+	return itemsObj.items.map((activity) => ({
+		id: activity.id,
+		userName: getUserName(activity.contact, activity.visitor),
+		avatarUrl: activity.contact?.avatar_url ?? null,
+		activityType: formatActivityType(activity.slug),
+		targetName: activity.description || activity.title,
+		timestamp: activity.created_at,
+		slug: activity.slug
+	})).sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+}
+function formatActivityType(slug) {
+	return slug.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+//#endregion
+//#region src/widgets/RecentActivityWidget.tsx
+var RecentActivityWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	RecentActivityWidget: () => RecentActivityWidget,
+	recentActivityWidgetPropertySchema: () => recentActivityWidgetPropertySchema
+});
+const formatTimestamp = (timestamp) => {
+	return new Date(timestamp).toLocaleTimeString("en-US", {
+		hour: "numeric",
+		minute: "2-digit",
+		hour12: true
+	});
+};
+const formatDateHeader = (timestamp) => {
+	return new Date(timestamp).toLocaleDateString("en-US", {
+		month: "long",
+		day: "numeric"
+	});
+};
+const getDateKey = (timestamp) => {
+	return new Date(timestamp).toISOString().split("T")[0] ?? timestamp;
+};
+const groupActivitiesByDate = (activities) => {
+	const grouped = /* @__PURE__ */ new Map();
+	for (const activity of activities) {
+		const dateKey = getDateKey(activity.timestamp);
+		const existing = grouped.get(dateKey);
+		if (existing) existing.push(activity);
+		else grouped.set(dateKey, [activity]);
+	}
+	return grouped;
+};
+const ACTIVITY_ICON_MAP = {
+	order_placed: _fortawesome_pro_regular_svg_icons.faCartShopping,
+	abandoned_cart: _fortawesome_pro_regular_svg_icons.faCartShopping,
+	cart_items_added: _fortawesome_pro_regular_svg_icons.faCartShopping,
+	new_cart_items_added: _fortawesome_pro_regular_svg_icons.faCartShopping,
+	direct_message: _fortawesome_pro_regular_svg_icons.faComment,
+	comment_reply: _fortawesome_pro_regular_svg_icons.faComment,
+	message_received: _fortawesome_pro_regular_svg_icons.faComment,
+	message_sent: _fortawesome_pro_regular_svg_icons.faComment,
+	video: _fortawesome_pro_regular_svg_icons.faPlay,
+	video_complete: _fortawesome_pro_regular_svg_icons.faPlay,
+	video_contact: _fortawesome_pro_regular_svg_icons.faPlay,
+	video_complete_contact: _fortawesome_pro_regular_svg_icons.faPlay,
+	new_lead: _fortawesome_pro_regular_svg_icons.faUserPlus,
+	page_views_contact: _fortawesome_pro_regular_svg_icons.faUserPlus,
+	smart_link_clicked: _fortawesome_pro_regular_svg_icons.faUserPlus,
+	page_views: _fortawesome_pro_regular_svg_icons.faEye,
+	upcoming_event: _fortawesome_pro_regular_svg_icons.faCalendar,
+	review_left: _fortawesome_pro_regular_svg_icons.faStar,
+	tasks: _fortawesome_pro_regular_svg_icons.faSquareCheck,
+	announcements: _fortawesome_pro_regular_svg_icons.faBell,
+	fantasy_point: _fortawesome_pro_regular_svg_icons.faTrophy
+};
+const getActivityIcon = (slug) => ACTIVITY_ICON_MAP[slug] ?? _fortawesome_pro_regular_svg_icons.faUser;
+function ActivityFeedItem({ activity, accentColor, textColor }) {
+	const icon = getActivityIcon(activity.slug);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex w-full items-start gap-1.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "shrink-0",
+			children: activity.avatarUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative size-8 overflow-hidden rounded-full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: activity.avatarUrl,
+					alt: activity.userName,
+					className: "size-full object-cover"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-foreground/[0.08] absolute inset-0 rounded-full border" })]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `bg-muted flex size-8 items-center justify-center rounded-full`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fortawesome_react_fontawesome.FontAwesomeIcon, {
+					icon,
+					className: `size-3.5 text-${textColor} opacity-60`
+				})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex w-full items-center gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `flex-1 text-base font-semibold text-${textColor} truncate`,
+					children: activity.activityType
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `text-xs text-${textColor} shrink-0 opacity-50`,
+					children: formatTimestamp(activity.timestamp)
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: `text-sm text-${textColor} opacity-80`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `font-medium text-${accentColor}`,
+						children: activity.userName
+					}),
+					" ",
+					activity.targetName
+				]
+			})]
+		})]
+	});
+}
+function RecentActivityWidget({ titleEnabled = true, titleText = "Recent Activity", titleFontSize = "lg", titleColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, textColor = "foreground", accentColor = "primary", padding = 4, borderRadius = "md", maxItemsToShow = 5, className, ...props }) {
+	const backgroundColor = background.color || "background";
+	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	const { data: activities = [], isLoading, isError } = useActivities();
+	const groupedActivities = (0, react.useMemo)(() => groupActivitiesByDate(activities), [activities]);
+	const totalCount = Math.min(activities.length, maxItemsToShow);
+	const activitiesToShow = (0, react.useMemo)(() => {
+		const result = [];
+		let count = 0;
+		for (const [dateKey, items] of groupedActivities) {
+			if (count >= maxItemsToShow) break;
+			const remainingSlots = maxItemsToShow - count;
+			const itemsToAdd = items.slice(0, remainingSlots);
+			if (itemsToAdd.length > 0) {
+				result.push({
+					date: formatDateHeader(items[0]?.timestamp ?? dateKey),
+					items: itemsToAdd
+				});
+				count += itemsToAdd.length;
+			}
+		}
+		return result;
+	}, [groupedActivities, maxItemsToShow]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} border-muted border ${className}`,
+		style: { backgroundImage },
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `p-${padding} flex flex-col gap-2`,
+			children: [titleEnabled && titleText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex w-full items-start gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: `flex-1 text-${titleFontSize} font-bold text-${titleColor}`,
+					children: titleText
+				}), !isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `text-4xl font-bold text-${textColor} leading-none`,
+					children: totalCount.toString().padStart(2, "0")
+				})]
+			}), isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex min-h-[200px] items-center justify-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" })
+			}) : isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_error_state.ErrorState, {}) : activities.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-h-[200px] flex-col items-center justify-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fortawesome_react_fontawesome.FontAwesomeIcon, {
+						icon: _fortawesome_pro_regular_svg_icons.faUser,
+						className: `size-12 text-${textColor} opacity-30`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: `text-base font-semibold text-${textColor} opacity-50`,
+						children: "No Activity To Report"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: `text-sm text-${textColor} opacity-40`,
+						children: "You'll Do Great!"
+					})
+				]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-col gap-4",
+				children: activitiesToShow.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: `text-base font-semibold text-${textColor}`,
+						children: group.date
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex flex-col gap-4",
+						children: group.items.map((activity) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActivityFeedItem, {
+							activity,
+							accentColor,
+							textColor
+						}, activity.id))
+					})]
+				}, groupIndex))
+			})]
+		})
+	});
+}
+const recentActivityWidgetPropertySchema = {
+	widgetType: "RecentActivityWidget",
+	displayName: "Recent Activity Widget",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the activity feed",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "titleText",
+			label: "Title",
+			type: "text",
+			description: "Title text displayed above the activity feed",
+			defaultValue: "Recent Activity",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		(0, _fluid_app_portal_core_registries.getFontSizeField)({
+			key: "titleFontSize",
+			label: "Title Font Size",
+			description: "Font size for the widget title",
+			defaultValue: "xl",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "titleColor",
+			label: "Title Color",
+			description: "Color for the widget title",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the widget container",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Design"
+		},
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "textColor",
+			label: "Text Color",
+			description: "Default text color for activity content",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "accentColor",
+			label: "Accent Color",
+			description: "Color used for links and highlights",
+			defaultValue: "primary",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		(0, _fluid_app_portal_core_registries.getPaddingField)({
+			key: "padding",
+			label: "Padding",
+			description: "Padding around the widget container",
+			defaultValue: 4,
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_portal_core_registries.getBorderRadiusField)({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the widget container",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "maxItemsToShow",
+			label: "Max Items",
+			type: "number",
+			description: "Maximum number of activity items to display",
+			defaultValue: 5,
+			tab: "styling",
+			group: "Display"
+		}
+	]
+};
+//#endregion
+Object.defineProperty(exports, "RecentActivityWidget", {
+	enumerable: true,
+	get: function() {
+		return RecentActivityWidget;
+	}
+});
+Object.defineProperty(exports, "RecentActivityWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return RecentActivityWidget_exports;
+	}
+});
+Object.defineProperty(exports, "recentActivityWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return recentActivityWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=RecentActivityWidget-wODng8dt.cjs.map

package/dist/RecentActivityWidget-wODng8dt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecentActivityWidget-wODng8dt.cjs","names":["faCartShopping","faComment","faPlay","faUserPlus","faEye","faCalendar","faStar","faSquareCheck","faBell","faTrophy","faUser","FontAwesomeIcon","ErrorState"],"sources":["../src/hooks/use-activities.preview.ts","../src/hooks/use-activities.ts","../src/widgets/RecentActivityWidget.tsx"],"sourcesContent":["import type { Activity } from \"./use-activities.types\";\n\nconst now = new Date();\n\nfunction minutesAgo(minutes: number): string {\n  return new Date(now.getTime() - minutes * 60_000).toISOString();\n}\n\nexport const PREVIEW_DATA: Activity[] = [\n  {\n    id: 1,\n    userName: \"Sarah Johnson\",\n    avatarUrl: null,\n    activityType: \"Order Placed\",\n    targetName: \"Wellness Starter Kit\",\n    timestamp: minutesAgo(12),\n    slug: \"order_placed\",\n  },\n  {\n    id: 2,\n    userName: \"Mike Chen\",\n    avatarUrl: null,\n    activityType: \"New Lead\",\n    targetName: \"Signed up from Instagram link\",\n    timestamp: minutesAgo(45),\n    slug: \"new_lead\",\n  },\n  {\n    id: 3,\n    userName: \"Visitor from Austin, TX\",\n    avatarUrl: null,\n    activityType: \"Page Views\",\n    targetName: \"Viewed product catalog (3 pages)\",\n    timestamp: minutesAgo(90),\n    slug: \"page_views\",\n  },\n  {\n    id: 4,\n    userName: \"Lisa Park\",\n    avatarUrl: null,\n    activityType: \"Video Complete\",\n    targetName: \"Watched: Getting Started Guide\",\n    timestamp: minutesAgo(180),\n    slug: \"video_complete\",\n  },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/portal-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-activities.preview\";\nimport type {\n  Activity,\n  ActivityContact,\n  ActivityVisitor,\n  ApiActivity,\n} from \"./use-activities.types\";\n\nexport type {\n  ActivityContact,\n  ActivityVisitor,\n  ActivitySlug,\n  ApiActivity,\n  Activity,\n} from \"./use-activities.types\";\n\ntype PaginationInfo = {\n  current: number;\n  previous: number | null;\n  next: number | null;\n  per_page: number;\n  pages: number;\n  count: number;\n};\n\ntype ApiResponse = [{ pagination: PaginationInfo }, { items: ApiActivity[] }];\n\nexport function useActivities(): UseQueryResult<Activity[], Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      \"activities\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<Activity[]> => {\n      const url = baseUrl\n        ? `${baseUrl}/v1.1/activities.json`\n        : \"/v1.1/activities.json\";\n      const response = await fetch(url, {\n        headers: {\n          \"content-type\": \"application/json\",\n          ...getApiHeaders?.(),\n        },\n        signal,\n      });\n\n      if (!response.ok) {\n        throw new Error(`Failed to fetch activities: ${response.status}`);\n      }\n\n      const data: ApiResponse = await response.json();\n      return transformActivities(data);\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n\n// Transform and format helpers\nfunction getUserName(\n  contact: ActivityContact | null,\n  visitor: ActivityVisitor | null,\n): string {\n  if (contact?.full_name) {\n    return contact.full_name;\n  }\n  if (contact?.first_name && contact?.last_name) {\n    return `${contact.first_name} ${contact.last_name}`;\n  }\n  if (visitor?.city && visitor?.state) {\n    return `Visitor from ${visitor.city}, ${visitor.state}`;\n  }\n  return \"Unknown Visitor\";\n}\n\nfunction transformActivities(rawData: ApiResponse): Activity[] {\n  const itemsObj = rawData[1];\n  if (!itemsObj?.items) return [];\n\n  return itemsObj.items\n    .map((activity) => ({\n      id: activity.id,\n      userName: getUserName(activity.contact, activity.visitor),\n      avatarUrl: activity.contact?.avatar_url ?? null,\n      activityType: formatActivityType(activity.slug),\n      targetName: activity.description || activity.title,\n      timestamp: activity.created_at,\n      slug: activity.slug,\n    }))\n    .sort(\n      (a, b) =>\n        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),\n    );\n}\n\nfunction formatActivityType(slug: string): string {\n  return slug\n    .split(\"_\")\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\" \");\n}\n","import { useMemo, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport {\n  useActivities,\n  type Activity,\n  type ActivitySlug,\n} from \"../hooks/use-activities\";\nimport { ErrorState } from \"../components/error-state\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n  faBell,\n  faCalendar,\n  faSquareCheck,\n  faEye,\n  faComment,\n  faPlay,\n  faCartShopping,\n  faStar,\n  faTrophy,\n  faUser,\n  faUserPlus,\n} from \"@fortawesome/pro-regular-svg-icons\";\n\n// Format timestamp to time string\nconst formatTimestamp = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toLocaleTimeString(\"en-US\", {\n    hour: \"numeric\",\n    minute: \"2-digit\",\n    hour12: true,\n  });\n};\n\n// Format date for grouping header\nconst formatDateHeader = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n  });\n};\n\n// Get date string for grouping (without time)\nconst getDateKey = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toISOString().split(\"T\")[0] ?? timestamp;\n};\n\n// Group activities by date\nconst groupActivitiesByDate = (\n  activities: Activity[],\n): Map<string, Activity[]> => {\n  const grouped = new Map<string, Activity[]>();\n\n  for (const activity of activities) {\n    const dateKey = getDateKey(activity.timestamp);\n    const existing = grouped.get(dateKey);\n    if (existing) {\n      existing.push(activity);\n    } else {\n      grouped.set(dateKey, [activity]);\n    }\n  }\n\n  return grouped;\n};\n\n// Activity slug to icon mapping\nconst ACTIVITY_ICON_MAP: Record<ActivitySlug, IconDefinition> = {\n  // Orders/Cart\n  order_placed: faCartShopping,\n  abandoned_cart: faCartShopping,\n  cart_items_added: faCartShopping,\n  new_cart_items_added: faCartShopping,\n  // Messages\n  direct_message: faComment,\n  comment_reply: faComment,\n  message_received: faComment,\n  message_sent: faComment,\n  // Video\n  video: faPlay,\n  video_complete: faPlay,\n  video_contact: faPlay,\n  video_complete_contact: faPlay,\n  // Leads\n  new_lead: faUserPlus,\n  page_views_contact: faUserPlus,\n  smart_link_clicked: faUserPlus,\n  // Page Views\n  page_views: faEye,\n  // Events\n  upcoming_event: faCalendar,\n  // Reviews\n  review_left: faStar,\n  // Tasks\n  tasks: faSquareCheck,\n  // Announcements\n  announcements: faBell,\n  // Fantasy\n  fantasy_point: faTrophy,\n};\n\nconst getActivityIcon = (slug: ActivitySlug) =>\n  ACTIVITY_ICON_MAP[slug] ?? faUser;\n\n// Activity feed item component\ntype ActivityFeedItemProps = {\n  activity: Activity;\n  accentColor: ColorOptions;\n  textColor: ColorOptions;\n};\n\nfunction ActivityFeedItem({\n  activity,\n  accentColor,\n  textColor,\n}: ActivityFeedItemProps) {\n  const icon = getActivityIcon(activity.slug);\n\n  return (\n    <div className=\"flex w-full items-start gap-1.5\">\n      {/* Avatar */}\n      <div className=\"shrink-0\">\n        {activity.avatarUrl ? (\n          <div className=\"relative size-8 overflow-hidden rounded-full\">\n            <img\n              src={activity.avatarUrl}\n              alt={activity.userName}\n              className=\"size-full object-cover\"\n            />\n            <div className=\"border-foreground/[0.08] absolute inset-0 rounded-full border\" />\n          </div>\n        ) : (\n          <div\n            className={`bg-muted flex size-8 items-center justify-center rounded-full`}\n          >\n            <FontAwesomeIcon\n              icon={icon}\n              className={`size-3.5 text-${textColor} opacity-60`}\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex w-full items-center gap-1.5\">\n          <p\n            className={`flex-1 text-base font-semibold text-${textColor} truncate`}\n          >\n            {activity.activityType}\n          </p>\n          <p className={`text-xs text-${textColor} shrink-0 opacity-50`}>\n            {formatTimestamp(activity.timestamp)}\n          </p>\n        </div>\n        <p className={`text-sm text-${textColor} opacity-80`}>\n          <span className={`font-medium text-${accentColor}`}>\n            {activity.userName}\n          </span>{\" \"}\n          {activity.targetName}\n        </p>\n      </div>\n    </div>\n  );\n}\n\ntype RecentActivityWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Activity settings\n  maxItemsToShow?: number;\n};\n\nexport function RecentActivityWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"Recent Activity\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Activity defaults\n  maxItemsToShow = 5,\n\n  className,\n  ...props\n}: RecentActivityWidgetProps): React.JSX.Element {\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n  const { data: activities = [], isLoading, isError } = useActivities();\n\n  const groupedActivities = useMemo(\n    () => groupActivitiesByDate(activities),\n    [activities],\n  );\n\n  const totalCount = Math.min(activities.length, maxItemsToShow);\n\n  // Get activities to display (limited by maxItemsToShow)\n  const activitiesToShow = useMemo(() => {\n    const result: { date: string; items: Activity[] }[] = [];\n    let count = 0;\n\n    for (const [dateKey, items] of groupedActivities) {\n      if (count >= maxItemsToShow) break;\n\n      const remainingSlots = maxItemsToShow - count;\n      const itemsToAdd = items.slice(0, remainingSlots);\n\n      if (itemsToAdd.length > 0) {\n        result.push({\n          date: formatDateHeader(items[0]?.timestamp ?? dateKey),\n          items: itemsToAdd,\n        });\n        count += itemsToAdd.length;\n      }\n    }\n\n    return result;\n  }, [groupedActivities, maxItemsToShow]);\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} border-muted border ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div className={`p-${padding} flex flex-col gap-2`}>\n        {/* Header */}\n        {titleEnabled && titleText && (\n          <div className=\"flex w-full items-start gap-2\">\n            <h2\n              className={`flex-1 text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n            {!isLoading && (\n              <span\n                className={`text-4xl font-bold text-${textColor} leading-none`}\n              >\n                {totalCount.toString().padStart(2, \"0\")}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Loading state */}\n        {isLoading ? (\n          <div className=\"flex min-h-[200px] items-center justify-center\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          </div>\n        ) : isError ? (\n          /* Error state */\n          <ErrorState />\n        ) : activities.length === 0 ? (\n          /* Empty state */\n          <div className=\"flex min-h-[200px] flex-col items-center justify-center gap-2\">\n            <FontAwesomeIcon\n              icon={faUser}\n              className={`size-12 text-${textColor} opacity-30`}\n            />\n            <p\n              className={`text-base font-semibold text-${textColor} opacity-50`}\n            >\n              No Activity To Report\n            </p>\n            <p className={`text-sm text-${textColor} opacity-40`}>\n              You&apos;ll Do Great!\n            </p>\n          </div>\n        ) : (\n          /* Activity list */\n          <div className=\"flex flex-col gap-4\">\n            {activitiesToShow.map((group, groupIndex) => (\n              <div key={groupIndex} className=\"flex flex-col gap-4\">\n                {/* Date header */}\n                <p className={`text-base font-semibold text-${textColor}`}>\n                  {group.date}\n                </p>\n\n                {/* Activity items */}\n                <div className=\"flex flex-col gap-4\">\n                  {group.items.map((activity) => (\n                    <ActivityFeedItem\n                      key={activity.id}\n                      activity={activity}\n                      accentColor={accentColor}\n                      textColor={textColor}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport const recentActivityWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"RecentActivityWidget\",\n  displayName: \"Recent Activity Widget\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [\n    // Styling Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the activity feed\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the activity feed\",\n      defaultValue: \"Recent Activity\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the widget title\",\n      defaultValue: \"xl\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for activity content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for links and highlights\",\n      defaultValue: \"primary\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the widget container\",\n      defaultValue: 4,\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the widget container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Styling Tab - Display Group\n    {\n      key: \"maxItemsToShow\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of activity items to display\",\n      defaultValue: 5,\n      tab: \"styling\",\n      group: \"Display\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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P,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;uDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAGF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;uDACa;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;uDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;yDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;8DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EAGF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACF;CACF"}

package/dist/RegistryContext-CscXrsRa.mjs

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/contexts/RegistryContext.tsx
+/**
+* Context for providing the widget registry to all components in the tree.
+* This eliminates prop drilling and makes the registry accessible anywhere.
+*
+* Default to undefined - registry must be provided by a RegistryProvider.
+*/
+const RegistryContext = createContext(void 0);
+/**
+* Provider component that makes the widget registry available to all descendants.
+* A registry must be provided either via props or by nesting within another RegistryProvider.
+*/
+function RegistryProvider({ registry, children }) {
+	const parentRegistry = useContext(RegistryContext);
+	const contextValue = registry ?? parentRegistry;
+	if (!contextValue) throw new Error("RegistryProvider requires a registry prop or must be nested within another RegistryProvider.");
+	return /* @__PURE__ */ jsx(RegistryContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+/**
+* Hook to access the widget registry from anywhere in the component tree.
+* Must be used within a RegistryProvider that has a registry prop.
+*/
+function useRegistry() {
+	const registry = useContext(RegistryContext);
+	if (!registry) throw new Error("useRegistry must be used within a RegistryProvider with a registry prop.");
+	return registry;
+}
+//#endregion
+export { RegistryProvider as n, useRegistry as r, RegistryContext as t };
+
+//# sourceMappingURL=RegistryContext-CscXrsRa.mjs.map

package/dist/RegistryContext-CscXrsRa.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegistryContext-CscXrsRa.mjs","names":[],"sources":["../src/contexts/RegistryContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\nimport type { WidgetSchema } from \"@fluid-app/portal-core/types\";\n\n/**\n * Base props interface for widget components.\n * All widgets receive at least these props from the ScreenRenderer.\n */\nexport interface WidgetBaseProps {\n  readonly widget: WidgetSchema;\n  readonly path?: readonly number[];\n}\n\n/**\n * Generic widget component type.\n * Widgets receive WidgetBaseProps and may have additional props.\n */\nexport type WidgetComponent<P extends WidgetBaseProps = WidgetBaseProps> =\n  ComponentType<P>;\n\n/**\n * Registry mapping widget type names to their components.\n * The keys are widget type strings (e.g., \"TextWidget\", \"ButtonWidget\").\n * Using WidgetComponent for the value type provides better type safety than `any`.\n */\nexport type WidgetRegistry = Readonly<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Widget props vary by type\n  Record<string, WidgetComponent<any>>\n>;\n\n/**\n * Context for providing the widget registry to all components in the tree.\n * This eliminates prop drilling and makes the registry accessible anywhere.\n *\n * Default to undefined - registry must be provided by a RegistryProvider.\n */\nexport const RegistryContext: React.Context<WidgetRegistry | undefined> =\n  createContext<WidgetRegistry | undefined>(undefined);\n\nexport interface RegistryProviderProps {\n  registry?: WidgetRegistry;\n  children: ReactNode;\n}\n\n/**\n * Provider component that makes the widget registry available to all descendants.\n * A registry must be provided either via props or by nesting within another RegistryProvider.\n */\nexport function RegistryProvider({\n  registry,\n  children,\n}: RegistryProviderProps): React.JSX.Element {\n  // If no registry provided, inherit from parent provider\n  const parentRegistry = useContext(RegistryContext);\n  const contextValue = registry ?? parentRegistry;\n\n  if (!contextValue) {\n    throw new Error(\n      \"RegistryProvider requires a registry prop or must be nested within another RegistryProvider.\",\n    );\n  }\n\n  return (\n    <RegistryContext.Provider value={contextValue}>\n      {children}\n    </RegistryContext.Provider>\n  );\n}\n\n/**\n * Hook to access the widget registry from anywhere in the component tree.\n * Must be used within a RegistryProvider that has a registry prop.\n */\nexport function useRegistry(): WidgetRegistry {\n  const registry = useContext(RegistryContext);\n\n  if (!registry) {\n    throw new Error(\n      \"useRegistry must be used within a RegistryProvider with a registry prop.\",\n    );\n  }\n\n  return registry;\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAa,kBACX,cAA0C,KAAA,EAAU;;;;;AAWtD,SAAgB,iBAAiB,EAC/B,UACA,YAC2C;CAE3C,MAAM,iBAAiB,WAAW,gBAAgB;CAClD,MAAM,eAAe,YAAY;AAEjC,KAAI,CAAC,aACH,OAAM,IAAI,MACR,+FACD;AAGH,QACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC9B;EACwB,CAAA;;;;;;AAQ/B,SAAgB,cAA8B;CAC5C,MAAM,WAAW,WAAW,gBAAgB;AAE5C,KAAI,CAAC,SACH,OAAM,IAAI,MACR,2EACD;AAGH,QAAO"}

package/dist/RegistryContext-xjea4xVV.cjs

@@ -0,0 +1,55 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(react);
+//#region src/contexts/RegistryContext.tsx
+/**
+* Context for providing the widget registry to all components in the tree.
+* This eliminates prop drilling and makes the registry accessible anywhere.
+*
+* Default to undefined - registry must be provided by a RegistryProvider.
+*/
+const RegistryContext = (0, react.createContext)(void 0);
+/**
+* Provider component that makes the widget registry available to all descendants.
+* A registry must be provided either via props or by nesting within another RegistryProvider.
+*/
+function RegistryProvider({ registry, children }) {
+	const parentRegistry = (0, react.useContext)(RegistryContext);
+	const contextValue = registry ?? parentRegistry;
+	if (!contextValue) throw new Error("RegistryProvider requires a registry prop or must be nested within another RegistryProvider.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RegistryContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+/**
+* Hook to access the widget registry from anywhere in the component tree.
+* Must be used within a RegistryProvider that has a registry prop.
+*/
+function useRegistry() {
+	const registry = (0, react.useContext)(RegistryContext);
+	if (!registry) throw new Error("useRegistry must be used within a RegistryProvider with a registry prop.");
+	return registry;
+}
+//#endregion
+Object.defineProperty(exports, "RegistryContext", {
+	enumerable: true,
+	get: function() {
+		return RegistryContext;
+	}
+});
+Object.defineProperty(exports, "RegistryProvider", {
+	enumerable: true,
+	get: function() {
+		return RegistryProvider;
+	}
+});
+Object.defineProperty(exports, "useRegistry", {
+	enumerable: true,
+	get: function() {
+		return useRegistry;
+	}
+});
+
+//# sourceMappingURL=RegistryContext-xjea4xVV.cjs.map

package/dist/RegistryContext-xjea4xVV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegistryContext-xjea4xVV.cjs","names":[],"sources":["../src/contexts/RegistryContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\nimport type { WidgetSchema } from \"@fluid-app/portal-core/types\";\n\n/**\n * Base props interface for widget components.\n * All widgets receive at least these props from the ScreenRenderer.\n */\nexport interface WidgetBaseProps {\n  readonly widget: WidgetSchema;\n  readonly path?: readonly number[];\n}\n\n/**\n * Generic widget component type.\n * Widgets receive WidgetBaseProps and may have additional props.\n */\nexport type WidgetComponent<P extends WidgetBaseProps = WidgetBaseProps> =\n  ComponentType<P>;\n\n/**\n * Registry mapping widget type names to their components.\n * The keys are widget type strings (e.g., \"TextWidget\", \"ButtonWidget\").\n * Using WidgetComponent for the value type provides better type safety than `any`.\n */\nexport type WidgetRegistry = Readonly<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Widget props vary by type\n  Record<string, WidgetComponent<any>>\n>;\n\n/**\n * Context for providing the widget registry to all components in the tree.\n * This eliminates prop drilling and makes the registry accessible anywhere.\n *\n * Default to undefined - registry must be provided by a RegistryProvider.\n */\nexport const RegistryContext: React.Context<WidgetRegistry | undefined> =\n  createContext<WidgetRegistry | undefined>(undefined);\n\nexport interface RegistryProviderProps {\n  registry?: WidgetRegistry;\n  children: ReactNode;\n}\n\n/**\n * Provider component that makes the widget registry available to all descendants.\n * A registry must be provided either via props or by nesting within another RegistryProvider.\n */\nexport function RegistryProvider({\n  registry,\n  children,\n}: RegistryProviderProps): React.JSX.Element {\n  // If no registry provided, inherit from parent provider\n  const parentRegistry = useContext(RegistryContext);\n  const contextValue = registry ?? parentRegistry;\n\n  if (!contextValue) {\n    throw new Error(\n      \"RegistryProvider requires a registry prop or must be nested within another RegistryProvider.\",\n    );\n  }\n\n  return (\n    <RegistryContext.Provider value={contextValue}>\n      {children}\n    </RegistryContext.Provider>\n  );\n}\n\n/**\n * Hook to access the widget registry from anywhere in the component tree.\n * Must be used within a RegistryProvider that has a registry prop.\n */\nexport function useRegistry(): WidgetRegistry {\n  const registry = useContext(RegistryContext);\n\n  if (!registry) {\n    throw new Error(\n      \"useRegistry must be used within a RegistryProvider with a registry prop.\",\n    );\n  }\n\n  return registry;\n}\n"],"mappings":";;;;;;;;;;;AAwCA,MAAa,mBAAA,GAAA,MAAA,eAC+B,KAAA,EAAU;;;;;AAWtD,SAAgB,iBAAiB,EAC/B,UACA,YAC2C;CAE3C,MAAM,kBAAA,GAAA,MAAA,YAA4B,gBAAgB;CAClD,MAAM,eAAe,YAAY;AAEjC,KAAI,CAAC,aACH,OAAM,IAAI,MACR,+FACD;AAGH,QACE,iBAAA,GAAA,kBAAA,KAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC9B;EACwB,CAAA;;;;;;AAQ/B,SAAgB,cAA8B;CAC5C,MAAM,YAAA,GAAA,MAAA,YAAsB,gBAAgB;AAE5C,KAAI,CAAC,SACH,OAAM,IAAI,MACR,2EACD;AAGH,QAAO"}

package/dist/ScreenRenderer-D52h5VQr.mjs

@@ -0,0 +1,76 @@
+import { n as RegistryProvider, r as useRegistry } from "./RegistryContext-CscXrsRa.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { WIDGET_TYPE_NAMES } from "@fluid-app/portal-core/types";
+//#region src/core/ScreenRenderer.tsx
+/**
+* Internal component that uses the registry from context.
+* This allows us to avoid prop drilling the registry.
+*/
+function ScreenRendererContent({ screen, containerWidgetTypes, className }) {
+	const registry = useRegistry();
+	const isContainerWidget = useCallback((widgetType) => containerWidgetTypes.includes(widgetType), [containerWidgetTypes]);
+	const renderWidget = 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
+		} : {};
+		return /* @__PURE__ */ jsx("div", {
+			className: "h-full w-full overflow-x-hidden",
+			children: /* @__PURE__ */ jsx(Component, {
+				...widget.props,
+				...additionalProps
+			})
+		}, widget.id || index);
+	}, [registry, isContainerWidget]);
+	return /* @__PURE__ */ jsx("div", {
+		className: className || "h-full w-full",
+		children: screen?.map((item, index) => {
+			if (!item) return null;
+			return renderWidget(item, index, []);
+		})
+	});
+}
+/**
+* ScreenRenderer - View-only component for rendering widget screens.
+*
+* This is a simplified version designed for the SDK that only handles
+* rendering widgets without edit mode or drag-and-drop functionality.
+*
+* Features:
+* - Static rendering of widgets
+* - Registry context: No prop drilling for widget registry
+* - Container widget support with path tracking
+*
+* Usage:
+* ```tsx
+* import { ScreenRenderer } from '@fluid-app/portal-widgets/core';
+* import { WIDGET_REGISTRY } from '@fluid-app/portal-widgets/widgets';
+*
+* <ScreenRenderer
+*   screen={widgets}
+*   registry={WIDGET_REGISTRY}
+* />
+* ```
+*/
+function ScreenRenderer(props) {
+	const { screen, registry, containerWidgetTypes = [WIDGET_TYPE_NAMES.Layout, WIDGET_TYPE_NAMES.Container], className } = props;
+	return /* @__PURE__ */ jsx(RegistryProvider, {
+		...registry !== void 0 ? { registry } : {},
+		children: /* @__PURE__ */ jsx(ScreenRendererContent, {
+			screen,
+			containerWidgetTypes,
+			className
+		})
+	});
+}
+//#endregion
+export { ScreenRenderer as t };
+
+//# sourceMappingURL=ScreenRenderer-D52h5VQr.mjs.map