@apify/mcp-widgets 0.1.0 → 0.1.1-featmcpwidgetssearchcomponen-5114c0.4

package/README.md

@@ -12,16 +12,20 @@ Peer dependencies: `react`, `react-dom`, `styled-components`. The components bui
 
 ## Usage
 
-Components reach the environment through `WidgetHostProvider`:
+Components take the tool's `structuredContent` as props and reach the environment through `WidgetHostProvider`:
 
 ```tsx
-import { WidgetHostProvider } from '@apify/mcp-widgets';
+import { ActorSearchWidget, WidgetHostProvider } from '@apify/mcp-widgets';
 
-<WidgetHostProvider host={{ openLink: (url) => window.open(url, '_blank', 'noopener') }}>{children}</WidgetHostProvider>;
+<WidgetHostProvider host={{ openLink: (url) => window.open(url, '_blank', 'noopener') }}>
+    <ActorSearchWidget output={toolResult.structuredContent} />
+</WidgetHostProvider>;
 ```
 
 `WidgetHost` has one required member, `openLink`. `requestDisplayMode` and `maxHeight` are optional: hosts with a single display mode or no height limit leave them out.
 
+Exports: `ActorSearchWidget`, `ActorSearchDetail`, `ActorCard`, `ActorSearchResultsSkeleton`, `ActorSearchDetailSkeleton`, `WidgetLayout`, `SkeletonBlock`, `WidgetHostProvider`, `useWidgetHost` and the tool output types. Test ids for Playwright live under `@apify/mcp-widgets/test-ids`.
+
 ## Development
 
 Inside the apify-core monorepo:

package/dist/components/actor_card/actor_card.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { Actor } from '../../types';
+type ActorCardProps = {
+    actor: Actor;
+    isDetail?: boolean;
+    customActionButton?: ReactNode;
+};
+export declare function ActorCard({ actor, isDetail, customActionButton }: ActorCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actor_card.d.ts.map

package/dist/components/actor_card/actor_card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_card.d.ts","sourceRoot":"","sources":["../../../src/components/actor_card/actor_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,KAAK,EAAqC,MAAM,aAAa,CAAC;AAI5E,KAAK,cAAc,GAAG;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,SAAS,CAAC;CAClC,CAAC;AAmKF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAgB,EAAE,kBAAkB,EAAE,EAAE,cAAc,2CA+DxF"}

package/dist/components/actor_card/actor_card.js

@@ -0,0 +1,205 @@
+import { useWidgetHost } from "../../host/widget_host_provider.js";
+import { formatDecimalNumber, formatNumber, formatPricing } from "../../utils/formatting.js";
+import { actorCardTestIds } from "./actor_card.test_ids.js";
+import styled from "styled-components";
+import { CoinIcon, ExternalLinkIcon, PeopleIcon, StarEmptyIcon } from "@apify/ui-icons";
+import { ActorAvatar, Box, Text, clampLines, theme } from "@apify/ui-library";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actor_card/actor_card.tsx
+var Container = styled(Box)`
+    background: ${theme.color.neutral.background};
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+    border-radius: ${theme.radius.radius12};
+    border: ${(props) => props.$withBorder ? `1px solid ${theme.color.neutral.separatorSubtle}` : "none"};
+
+    .clampToOneLine {
+        ${clampLines(1)}
+    }
+`;
+var BoxRow = styled(Box)`
+    display: flex;
+    gap: ${theme.space.space8};
+    align-items: center;
+    position: relative;
+`;
+var ActorHeaderWithActionButton = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+`;
+var BoxGroup = styled(Box)`
+    display: flex;
+    gap: ${theme.space.space4};
+    align-items: center;
+`;
+var ExternalLinkButton = styled.button`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: ${theme.radius.radius6};
+    background-color: ${theme.color.neutral.backgroundMuted};
+    border: 1px solid ${theme.color.neutral.border};
+    color: ${theme.color.neutral.text};
+    flex-shrink: 0;
+    cursor: pointer;
+
+    &:hover {
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    & > * {
+        pointer-events: none;
+    }
+`;
+var StyledSeparator = styled(Box)`
+    border-left: 1px solid ${theme.color.neutral.separatorSubtle};
+    height: 8px;
+    width: 1px;
+`;
+var DescriptionText = styled(Text)`
+    white-space: pre-wrap;
+    ${({ $isDetail }) => !$isDetail && clampLines(1)};
+`;
+var ActorHeader = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+var ActorTitleWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space2};
+`;
+var ActorAvatarWrapper = styled.div`
+    display: flex;
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius8};
+    overflow: hidden;
+    flex-shrink: 0;
+`;
+function Stat({ icon, value, additionalInfo }) {
+	return /* @__PURE__ */ jsxs(BoxGroup, { children: [icon, /* @__PURE__ */ jsxs(Text, {
+		size: "small",
+		weight: "medium",
+		color: theme.color.neutral.textMuted,
+		children: [value, additionalInfo && /* @__PURE__ */ jsxs(Text, {
+			size: "small",
+			color: theme.color.neutral.textSubtle,
+			as: "span",
+			children: [" ", additionalInfo]
+		})]
+	})] });
+}
+var StatsContainer = styled(Box)`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: ${theme.space.space8};
+    align-items: center;
+`;
+var ShowOnMobile = styled(BoxRow)`
+    display: flex;
+
+    @media ${theme.device.tablet} {
+        display: none;
+    }
+`;
+var ShowOnTabletAndDesktop = styled(BoxRow)`
+    display: none;
+
+    @media ${theme.device.tablet} {
+        display: flex;
+    }
+`;
+function StatsRow({ stats, pricingInfo, showFirstSeparator = false }) {
+	return /* @__PURE__ */ jsxs(StatsContainer, { children: [
+		showFirstSeparator && /* @__PURE__ */ jsx(StyledSeparator, {}),
+		/* @__PURE__ */ jsx(Stat, {
+			icon: /* @__PURE__ */ jsx(PeopleIcon, {
+				size: "12",
+				color: theme.color.neutral.icon
+			}),
+			value: formatNumber(stats.totalUsers)
+		}),
+		/* @__PURE__ */ jsx(StyledSeparator, {}),
+		/* @__PURE__ */ jsx(Stat, {
+			icon: /* @__PURE__ */ jsx(StarEmptyIcon, {
+				size: "12",
+				color: theme.color.neutral.icon
+			}),
+			value: formatDecimalNumber(stats.actorReviewRating),
+			additionalInfo: `(${formatNumber(stats.actorReviewCount)})`
+		}),
+		/* @__PURE__ */ jsx(StyledSeparator, {}),
+		/* @__PURE__ */ jsx(Stat, {
+			icon: /* @__PURE__ */ jsx(CoinIcon, {
+				size: "12",
+				color: theme.color.neutral.icon
+			}),
+			value: formatPricing(pricingInfo)
+		})
+	] });
+}
+function ActorCard({ actor, isDetail = false, customActionButton }) {
+	const host = useWidgetHost();
+	const statsProps = {
+		stats: actor.stats,
+		pricingInfo: actor.currentPricingInfo
+	};
+	return /* @__PURE__ */ jsxs(Container, {
+		px: "space16",
+		py: "space12",
+		$withBorder: !isDetail,
+		"data-test": actorCardTestIds.ROOT,
+		children: [
+			/* @__PURE__ */ jsx(BoxRow, { children: /* @__PURE__ */ jsxs(ActorHeaderWithActionButton, { children: [/* @__PURE__ */ jsxs(ActorHeader, { children: [/* @__PURE__ */ jsx(ActorAvatarWrapper, { children: /* @__PURE__ */ jsx(ActorAvatar, {
+				size: 40,
+				name: actor.title,
+				url: actor.pictureUrl
+			}) }), /* @__PURE__ */ jsxs(ActorTitleWrapper, { children: [/* @__PURE__ */ jsx(Text, {
+				as: "h3",
+				weight: "bold",
+				color: theme.color.neutral.text,
+				className: "clampToOneLine",
+				children: actor.title
+			}), /* @__PURE__ */ jsxs(BoxRow, { children: [/* @__PURE__ */ jsxs(Text, {
+				size: "small",
+				weight: "medium",
+				type: "code",
+				color: theme.color.neutral.textSubtle,
+				className: "clampToOneLine",
+				children: [
+					actor.username,
+					"/",
+					actor.name
+				]
+			}), !isDetail && /* @__PURE__ */ jsx(ShowOnTabletAndDesktop, { children: /* @__PURE__ */ jsx(StatsRow, {
+				...statsProps,
+				showFirstSeparator: true
+			}) })] })] })] }), customActionButton || /* @__PURE__ */ jsx(ExternalLinkButton, {
+				type: "button",
+				onClick: () => host.openLink(actor.url),
+				"aria-label": `Open ${actor.title} in Apify Store`,
+				"data-test": actorCardTestIds.OPEN_ACTOR_BUTTON,
+				children: /* @__PURE__ */ jsx(ExternalLinkIcon, { size: "16" })
+			})] }) }),
+			/* @__PURE__ */ jsx(DescriptionText, {
+				size: "small",
+				weight: "normal",
+				color: theme.color.neutral.text,
+				$isDetail: isDetail,
+				children: actor.description
+			}),
+			isDetail ? /* @__PURE__ */ jsx(StatsRow, { ...statsProps }) : /* @__PURE__ */ jsx(ShowOnMobile, { children: /* @__PURE__ */ jsx(StatsRow, { ...statsProps }) })
+		]
+	});
+}
+//#endregion
+export { ActorCard };

package/dist/components/actor_card/actor_card.test_ids.d.ts

@@ -0,0 +1,5 @@
+export declare const actorCardTestIds: {
+    readonly ROOT: "actor-card";
+    readonly OPEN_ACTOR_BUTTON: "actor-card-open-actor-button";
+};
+//# sourceMappingURL=actor_card.test_ids.d.ts.map

package/dist/components/actor_card/actor_card.test_ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_card.test_ids.d.ts","sourceRoot":"","sources":["../../../src/components/actor_card/actor_card.test_ids.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC"}

package/dist/components/actor_card/actor_card.test_ids.js

@@ -0,0 +1,7 @@
+//#region src/components/actor_card/actor_card.test_ids.ts
+var actorCardTestIds = {
+	ROOT: "actor-card",
+	OPEN_ACTOR_BUTTON: "actor-card-open-actor-button"
+};
+//#endregion
+export { actorCardTestIds };

package/dist/components/actor_search/actor_search_detail.d.ts

@@ -0,0 +1,7 @@
+import { ActorDetails } from '../../types';
+type ActorSearchDetailProps = {
+    details: ActorDetails;
+};
+export declare function ActorSearchDetail({ details }: ActorSearchDetailProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actor_search_detail.d.ts.map

package/dist/components/actor_search/actor_search_detail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_search_detail.d.ts","sourceRoot":"","sources":["../../../src/components/actor_search/actor_search_detail.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAyJhD,KAAK,sBAAsB,GAAG;IAC1B,OAAO,EAAE,YAAY,CAAC;CACzB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAsDpE"}

package/dist/components/actor_search/actor_search_detail.js

@@ -0,0 +1,180 @@
+import { useWidgetHost } from "../../host/widget_host_provider.js";
+import { ActorCard } from "../actor_card/actor_card.js";
+import { actorSearchDetailTestIds } from "./actor_search_detail.test_ids.js";
+import styled from "styled-components";
+import { BookOpenIcon, FullscreenIcon, MinimizeIcon } from "@apify/ui-icons";
+import { Badge, Box, ICON_BUTTON_VARIANTS, IconButton, Markdown, theme, useActorTitleHeadingFilter } from "@apify/ui-library";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actor_search/actor_search_detail.tsx
+var FULLSCREEN_WIDTH_THRESHOLD = 900;
+var README_CLASSNAMES = {
+	MARKDOWN_WRAPPER: "Readme-MarkdownWrapper",
+	MARKDOWN: "Readme-Markdown",
+	ONELINE_SCROLLABLE_WRAPPER: "OneLineCode-ScrollableWrapper"
+};
+var Container = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background: ${theme.color.neutral.background};
+    border-radius: ${theme.radius.radius12};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+`;
+var CardWrapper = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    max-width: 796px;
+`;
+var SectionContent = styled(Box)`
+    background: ${theme.color.neutral.background};
+    border-top: 1px solid ${theme.color.neutral.separatorSubtle};
+    color: ${theme.color.neutral.text};
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    ${(props) => props.$isExpanded ? `
+        overflow-y: auto;
+        max-height: none;
+        flex: 1;
+    ` : `
+        overflow: hidden;
+        max-height: 408px;
+    `}
+`;
+var ReadmeWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space16};
+    position: relative;
+
+    .${README_CLASSNAMES.MARKDOWN_WRAPPER} {
+        display: flex;
+        flex-direction: column;
+        gap: ${theme.space.space8};
+    }
+    /* Design-system exception: denser readme typography, links in text color. */
+    .${README_CLASSNAMES.MARKDOWN} {
+        a {
+            color: inherit;
+        }
+
+        p,
+        li,
+        strong,
+        b,
+        table,
+        code {
+            font-size: 1.2rem;
+        }
+
+        ul {
+            display: block;
+            list-style-type: disc;
+            margin-block-start: 1em;
+            margin-block-end: 1em;
+            padding-inline-start: 40px;
+            unicode-bidi: isolate;
+        }
+
+        div:not(.${README_CLASSNAMES.ONELINE_SCROLLABLE_WRAPPER}) > pre {
+            display: block;
+            padding-left: 1.6rem;
+            padding-right: 1.6rem;
+        }
+    }
+`;
+var GradientOverlay = styled.div`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 155px;
+    background: linear-gradient(178.84deg, transparent 13.4%, ${theme.color.neutral.background} 81.59%);
+    pointer-events: none;
+    z-index: 1;
+`;
+var ReadmeHeader = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+`;
+var BadgeWrapper = styled.div`
+    flex-shrink: 0;
+`;
+function ReadmeSection({ readme, isExpanded }) {
+	const allowElement = useActorTitleHeadingFilter("Readme");
+	if (!readme) return null;
+	return /* @__PURE__ */ jsxs(SectionContent, {
+		p: "space16",
+		$isExpanded: isExpanded,
+		children: [/* @__PURE__ */ jsxs(ReadmeWrapper, { children: [/* @__PURE__ */ jsx(ReadmeHeader, { children: /* @__PURE__ */ jsx(BadgeWrapper, { children: /* @__PURE__ */ jsx(Badge, {
+			size: "small",
+			LeadingIcon: BookOpenIcon,
+			children: "Readme"
+		}) }) }), /* @__PURE__ */ jsx("div", {
+			className: README_CLASSNAMES.MARKDOWN_WRAPPER,
+			children: /* @__PURE__ */ jsx(Markdown, {
+				markdown: readme,
+				className: README_CLASSNAMES.MARKDOWN,
+				allowElement,
+				lazyLoadImages: true
+			})
+		})] }), !isExpanded && /* @__PURE__ */ jsx(GradientOverlay, {})]
+	});
+}
+function ActorSearchDetail({ details }) {
+	const host = useWidgetHost();
+	const [isExpanded, setIsExpanded] = useState(false);
+	const manualMode = useRef(null);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const resizeObserver = new ResizeObserver(([entry]) => {
+			const shouldBeExpanded = entry.contentRect.width > FULLSCREEN_WIDTH_THRESHOLD;
+			if (manualMode.current === "collapsed" && shouldBeExpanded) return;
+			if (manualMode.current === "expanded" && !shouldBeExpanded) return;
+			manualMode.current = null;
+			setIsExpanded(shouldBeExpanded);
+		});
+		resizeObserver.observe(container);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, []);
+	const handleToggleExpand = () => {
+		const nextExpanded = !isExpanded;
+		manualMode.current = nextExpanded ? "expanded" : "collapsed";
+		setIsExpanded(nextExpanded);
+		host.requestDisplayMode?.(nextExpanded ? "fullscreen" : "inline");
+	};
+	const fullscreenButton = /* @__PURE__ */ jsx(IconButton, {
+		Icon: isExpanded ? MinimizeIcon : FullscreenIcon,
+		variant: ICON_BUTTON_VARIANTS.BORDERED,
+		onClick: handleToggleExpand,
+		"aria-label": isExpanded ? "Collapse readme" : "Expand readme",
+		"data-test": actorSearchDetailTestIds.TOGGLE_FULLSCREEN_BUTTON
+	});
+	return /* @__PURE__ */ jsx(Container, {
+		ref: containerRef,
+		children: /* @__PURE__ */ jsxs(CardWrapper, { children: [/* @__PURE__ */ jsx(ActorCard, {
+			actor: details.actorInfo,
+			isDetail: true,
+			customActionButton: fullscreenButton
+		}), /* @__PURE__ */ jsx(ReadmeSection, {
+			readme: details.readme,
+			isExpanded
+		})] })
+	});
+}
+//#endregion
+export { ActorSearchDetail };

package/dist/components/actor_search/actor_search_detail.test_ids.d.ts

@@ -0,0 +1,4 @@
+export declare const actorSearchDetailTestIds: {
+    readonly TOGGLE_FULLSCREEN_BUTTON: "actor-search-detail-toggle-fullscreen-button";
+};
+//# sourceMappingURL=actor_search_detail.test_ids.d.ts.map

package/dist/components/actor_search/actor_search_detail.test_ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_search_detail.test_ids.d.ts","sourceRoot":"","sources":["../../../src/components/actor_search/actor_search_detail.test_ids.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB;;CAE3B,CAAC"}

package/dist/components/actor_search/actor_search_detail.test_ids.js

@@ -0,0 +1,4 @@
+//#region src/components/actor_search/actor_search_detail.test_ids.ts
+var actorSearchDetailTestIds = { TOGGLE_FULLSCREEN_BUTTON: "actor-search-detail-toggle-fullscreen-button" };
+//#endregion
+export { actorSearchDetailTestIds };

package/dist/components/actor_search/actor_search_skeleton.d.ts

@@ -0,0 +1,5 @@
+export declare function ActorSearchResultsSkeleton({ items }: {
+    items?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ActorSearchDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=actor_search_skeleton.d.ts.map

package/dist/components/actor_search/actor_search_skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_search_skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/actor_search/actor_search_skeleton.tsx"],"names":[],"mappings":"AAsFA,wBAAgB,0BAA0B,CAAC,EAAE,KAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAQ3E;AAsED,wBAAgB,yBAAyB,4CA4BxC"}

package/dist/components/actor_search/actor_search_skeleton.js

@@ -0,0 +1,189 @@
+import { SkeletonBlock } from "../skeleton_block/skeleton_block.js";
+import { actorSearchSkeletonTestIds } from "./actor_search_skeleton.test_ids.js";
+import styled from "styled-components";
+import { Box, theme } from "@apify/ui-library";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actor_search/actor_search_skeleton.tsx
+var SquareSkeleton = styled(SkeletonBlock)`
+    width: ${({ $size }) => $size};
+    height: ${({ $size }) => $size};
+    border-radius: ${theme.radius.radius8};
+    flex-shrink: 0;
+`;
+var LineSkeleton = styled(SkeletonBlock)`
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+`;
+var Container = styled(Box)`
+    background: ${theme.color.neutral.background};
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+    border-radius: ${theme.radius.radius12};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+`;
+var BoxRow = styled(Box)`
+    display: flex;
+    gap: ${theme.space.space8};
+    position: relative;
+`;
+var ContentColumn = styled(Box)`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: ${theme.space.space6};
+    min-width: 0;
+    justify-content: center;
+`;
+var DescriptionGroup = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space4};
+    width: 100%;
+`;
+var AlignEnd = styled.div`
+    margin-left: auto;
+    align-self: flex-start;
+    position: absolute;
+    right: 0;
+    top: 0;
+`;
+function ActorListItemSkeleton() {
+	return /* @__PURE__ */ jsxs(Container, {
+		px: "space16",
+		py: "space12",
+		children: [/* @__PURE__ */ jsxs(BoxRow, { children: [
+			/* @__PURE__ */ jsx(SquareSkeleton, { $size: "40px" }),
+			/* @__PURE__ */ jsxs(ContentColumn, { children: [/* @__PURE__ */ jsx(LineSkeleton, {
+				$height: "20px",
+				$width: "66%"
+			}), /* @__PURE__ */ jsx(LineSkeleton, {
+				$height: "16px",
+				$width: "80%"
+			})] }),
+			/* @__PURE__ */ jsx(AlignEnd, { children: /* @__PURE__ */ jsx(SquareSkeleton, { $size: "32px" }) })
+		] }), /* @__PURE__ */ jsxs(DescriptionGroup, { children: [/* @__PURE__ */ jsx(LineSkeleton, {
+			$height: "14px",
+			$width: "100%"
+		}), /* @__PURE__ */ jsx(LineSkeleton, {
+			$height: "14px",
+			$width: "100%"
+		})] })]
+	});
+}
+var ResultsContainer = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+    width: 100%;
+`;
+function ActorSearchResultsSkeleton({ items = 3 }) {
+	return /* @__PURE__ */ jsx(ResultsContainer, {
+		"data-test": actorSearchSkeletonTestIds.RESULTS,
+		children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx(ActorListItemSkeleton, {}, index))
+	});
+}
+var DetailContainer = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+`;
+var CardWrapper = styled(Box)`
+    background: ${theme.color.neutral.background};
+    border-radius: ${theme.radius.radius12};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    max-width: 796px;
+    width: 100%;
+`;
+var HeaderSection = styled(Box)`
+    background: ${theme.color.neutral.background};
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+`;
+var HeaderRow = styled(Box)`
+    display: flex;
+    gap: ${theme.space.space8};
+    align-items: center;
+`;
+var HeaderColumn = styled(Box)`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+    min-width: 0;
+`;
+var DescriptionLines = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+`;
+var SectionsGroup = styled(Box)`
+    display: flex;
+    flex-direction: column;
+`;
+var SectionHeaderWrapper = styled(Box)`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: ${theme.color.neutral.background};
+    border-top: 1px solid ${theme.color.neutral.separatorSubtle};
+`;
+function SectionHeaderSkeleton() {
+	return /* @__PURE__ */ jsxs(SectionHeaderWrapper, {
+		px: "space16",
+		py: "space12",
+		children: [/* @__PURE__ */ jsx(LineSkeleton, {
+			$height: "24px",
+			$width: "96px"
+		}), /* @__PURE__ */ jsx(LineSkeleton, {
+			$height: "16px",
+			$width: "64px"
+		})]
+	});
+}
+function ActorSearchDetailSkeleton() {
+	return /* @__PURE__ */ jsx(DetailContainer, {
+		"data-test": actorSearchSkeletonTestIds.DETAIL,
+		children: /* @__PURE__ */ jsxs(CardWrapper, { children: [/* @__PURE__ */ jsxs(HeaderSection, {
+			px: "space16",
+			py: "space12",
+			children: [
+				/* @__PURE__ */ jsxs(HeaderRow, {
+					py: "space2",
+					children: [/* @__PURE__ */ jsx(SquareSkeleton, { $size: "64px" }), /* @__PURE__ */ jsxs(HeaderColumn, { children: [/* @__PURE__ */ jsx(LineSkeleton, {
+						$height: "20px",
+						$width: "50%"
+					}), /* @__PURE__ */ jsx(LineSkeleton, {
+						$height: "16px",
+						$width: "33%"
+					})] })]
+				}),
+				/* @__PURE__ */ jsxs(DescriptionLines, { children: [/* @__PURE__ */ jsx(LineSkeleton, {
+					$height: "16px",
+					$width: "100%"
+				}), /* @__PURE__ */ jsx(LineSkeleton, {
+					$height: "16px",
+					$width: "80%"
+				})] }),
+				/* @__PURE__ */ jsx(LineSkeleton, {
+					$height: "16px",
+					$width: "66%"
+				})
+			]
+		}), /* @__PURE__ */ jsxs(SectionsGroup, { children: [
+			/* @__PURE__ */ jsx(SectionHeaderSkeleton, {}),
+			/* @__PURE__ */ jsx(SectionHeaderSkeleton, {}),
+			/* @__PURE__ */ jsx(SectionHeaderSkeleton, {}),
+			/* @__PURE__ */ jsx(SectionHeaderSkeleton, {}),
+			/* @__PURE__ */ jsx(SectionHeaderSkeleton, {})
+		] })] })
+	});
+}
+//#endregion
+export { ActorSearchDetailSkeleton, ActorSearchResultsSkeleton };

package/dist/components/actor_search/actor_search_skeleton.test_ids.d.ts

@@ -0,0 +1,5 @@
+export declare const actorSearchSkeletonTestIds: {
+    readonly RESULTS: "actor-search-results-skeleton";
+    readonly DETAIL: "actor-search-detail-skeleton";
+};
+//# sourceMappingURL=actor_search_skeleton.test_ids.d.ts.map

package/dist/components/actor_search/actor_search_skeleton.test_ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_search_skeleton.test_ids.d.ts","sourceRoot":"","sources":["../../../src/components/actor_search/actor_search_skeleton.test_ids.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B;;;CAG7B,CAAC"}

package/dist/components/actor_search/actor_search_skeleton.test_ids.js

@@ -0,0 +1,7 @@
+//#region src/components/actor_search/actor_search_skeleton.test_ids.ts
+var actorSearchSkeletonTestIds = {
+	RESULTS: "actor-search-results-skeleton",
+	DETAIL: "actor-search-detail-skeleton"
+};
+//#endregion
+export { actorSearchSkeletonTestIds };

package/dist/components/actor_search/actor_search_widget.d.ts

@@ -0,0 +1,9 @@
+import { SearchActorsOutput } from '../../types';
+type ActorSearchWidgetProps = {
+    /** `structuredContent` of the tool result; `null` while the result has not arrived. */
+    output: SearchActorsOutput | null;
+};
+/** Renders the `search-actors-widget` / `fetch-actor-details-widget` tool result. */
+export declare function ActorSearchWidget({ output }: ActorSearchWidgetProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actor_search_widget.d.ts.map

package/dist/components/actor_search/actor_search_widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_search_widget.d.ts","sourceRoot":"","sources":["../../../src/components/actor_search/actor_search_widget.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AActD,KAAK,sBAAsB,GAAG;IAC1B,uFAAuF;IACvF,MAAM,EAAE,kBAAkB,GAAG,IAAI,CAAC;CACrC,CAAC;AAsBF,qFAAqF;AACrF,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,sBAAsB,2CAQnE"}

package/dist/components/actor_search/actor_search_widget.js

@@ -0,0 +1,32 @@
+import { ActorCard } from "../actor_card/actor_card.js";
+import { ActorSearchDetail } from "./actor_search_detail.js";
+import { ActorSearchResultsSkeleton } from "./actor_search_skeleton.js";
+import { WidgetLayout } from "../widget_layout/widget_layout.js";
+import { actorSearchWidgetTestIds } from "./actor_search_widget.test_ids.js";
+import styled from "styled-components";
+import { Box, Message, theme } from "@apify/ui-library";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actor_search/actor_search_widget.tsx
+var ActorSearchResults = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+    width: 100%;
+`;
+function ActorSearchContent({ output }) {
+	if (output === null) return /* @__PURE__ */ jsx(ActorSearchResultsSkeleton, {});
+	if ("actorDetails" in output) return /* @__PURE__ */ jsx(ActorSearchDetail, { details: output.actorDetails });
+	if (output.widgetActors.length === 0) return /* @__PURE__ */ jsx(Message, {
+		type: "info",
+		caption: "No actors found",
+		"data-test": actorSearchWidgetTestIds.EMPTY_STATE,
+		children: "Try a different search query"
+	});
+	return output.widgetActors.map((actor) => /* @__PURE__ */ jsx(ActorCard, { actor }, actor.id));
+}
+/** Renders the `search-actors-widget` / `fetch-actor-details-widget` tool result. */
+function ActorSearchWidget({ output }) {
+	return /* @__PURE__ */ jsx(WidgetLayout, { children: /* @__PURE__ */ jsx(ActorSearchResults, { children: /* @__PURE__ */ jsx(ActorSearchContent, { output }) }) });
+}
+//#endregion
+export { ActorSearchWidget };

package/dist/components/actor_search/actor_search_widget.test_ids.d.ts

@@ -0,0 +1,4 @@
+export declare const actorSearchWidgetTestIds: {
+    readonly EMPTY_STATE: "actor-search-widget-empty-state";
+};
+//# sourceMappingURL=actor_search_widget.test_ids.d.ts.map

package/dist/components/actor_search/actor_search_widget.test_ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_search_widget.test_ids.d.ts","sourceRoot":"","sources":["../../../src/components/actor_search/actor_search_widget.test_ids.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB;;CAE3B,CAAC"}

package/dist/components/actor_search/actor_search_widget.test_ids.js

@@ -0,0 +1,4 @@
+//#region src/components/actor_search/actor_search_widget.test_ids.ts
+var actorSearchWidgetTestIds = { EMPTY_STATE: "actor-search-widget-empty-state" };
+//#endregion
+export { actorSearchWidgetTestIds };

package/dist/components/skeleton_block/skeleton_block.d.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from 'react';
+export declare function SkeletonBlock(props: ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeleton_block.d.ts.map

package/dist/components/skeleton_block/skeleton_block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton_block.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton_block/skeleton_block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAoBtD,wBAAgB,aAAa,CAAC,KAAK,EAAE,wBAAwB,CAAC,KAAK,CAAC,2CAEnE"}

package/dist/components/skeleton_block/skeleton_block.js

@@ -0,0 +1,22 @@
+import styled, { keyframes } from "styled-components";
+import { theme } from "@apify/ui-library";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton_block/skeleton_block.tsx
+var pulse = keyframes`
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+`;
+var StyledSkeletonBlock = styled.div`
+    background-color: ${theme.color.neutral.backgroundSubtle};
+    border-radius: ${theme.radius.radius4};
+    animation: ${pulse} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+`;
+function SkeletonBlock(props) {
+	return /* @__PURE__ */ jsx(StyledSkeletonBlock, { ...props });
+}
+//#endregion
+export { SkeletonBlock };

package/dist/components/widget_layout/widget_layout.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, ReactNode } from 'react';
+type WidgetLayoutProps = {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function WidgetLayout({ children, className, style }: WidgetLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=widget_layout.d.ts.map

package/dist/components/widget_layout/widget_layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget_layout.d.ts","sourceRoot":"","sources":["../../../src/components/widget_layout/widget_layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBtD,KAAK,iBAAiB,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,iBAAiB,2CAQ7E"}

package/dist/components/widget_layout/widget_layout.js

@@ -0,0 +1,25 @@
+import { useWidgetHost } from "../../host/widget_host_provider.js";
+import styled from "styled-components";
+import { Box } from "@apify/ui-library";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/widget_layout/widget_layout.tsx
+var Layout = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+    padding: 1rem 1.25rem 2.5rem;
+    overflow-y: auto;
+    max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : "none"};
+`;
+function WidgetLayout({ children, className, style }) {
+	const { maxHeight } = useWidgetHost();
+	return /* @__PURE__ */ jsx(Layout, {
+		className,
+		style,
+		$maxHeight: maxHeight,
+		children
+	});
+}
+//#endregion
+export { WidgetLayout };

package/dist/files_hash_at_build.txt

@@ -1 +1 @@
-bfef79b760b10bb6ed95f9d99db9cba17b9541a9
+9fe09228f3920b39eb00142fb1fe677e974207e8

package/dist/index.d.ts

@@ -1,3 +1,10 @@
+export { ActorCard } from './components/actor_card/actor_card';
+export { ActorSearchDetail } from './components/actor_search/actor_search_detail';
+export { ActorSearchDetailSkeleton, ActorSearchResultsSkeleton } from './components/actor_search/actor_search_skeleton';
+export { ActorSearchWidget } from './components/actor_search/actor_search_widget';
+export { SkeletonBlock } from './components/skeleton_block/skeleton_block';
+export { WidgetLayout } from './components/widget_layout/widget_layout';
 export type { WidgetDisplayMode, WidgetHost } from './host/types';
 export { useWidgetHost, WidgetHostProvider } from './host/widget_host_provider';
+export type { Actor, ActorDetails, ActorStats, SearchActorsOutput, StructuredPricingInfo } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AACxH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAChF,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,2 +1,8 @@
 import { WidgetHostProvider, useWidgetHost } from "./host/widget_host_provider.js";
-export { WidgetHostProvider, useWidgetHost };
+import { ActorCard } from "./components/actor_card/actor_card.js";
+import { ActorSearchDetail } from "./components/actor_search/actor_search_detail.js";
+import { SkeletonBlock } from "./components/skeleton_block/skeleton_block.js";
+import { ActorSearchDetailSkeleton, ActorSearchResultsSkeleton } from "./components/actor_search/actor_search_skeleton.js";
+import { WidgetLayout } from "./components/widget_layout/widget_layout.js";
+import { ActorSearchWidget } from "./components/actor_search/actor_search_widget.js";
+export { ActorCard, ActorSearchDetail, ActorSearchDetailSkeleton, ActorSearchResultsSkeleton, ActorSearchWidget, SkeletonBlock, WidgetHostProvider, WidgetLayout, useWidgetHost };

package/dist/test_ids.d.ts

@@ -0,0 +1,5 @@
+export { actorCardTestIds } from './components/actor_card/actor_card.test_ids.js';
+export { actorSearchDetailTestIds } from './components/actor_search/actor_search_detail.test_ids.js';
+export { actorSearchSkeletonTestIds } from './components/actor_search/actor_search_skeleton.test_ids.js';
+export { actorSearchWidgetTestIds } from './components/actor_search/actor_search_widget.test_ids.js';
+//# sourceMappingURL=test_ids.d.ts.map

package/dist/test_ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test_ids.d.ts","sourceRoot":"","sources":["../src/test_ids.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAC;AACrG,OAAO,EAAE,0BAA0B,EAAE,MAAM,6DAA6D,CAAC;AACzG,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAC"}

package/dist/test_ids.js

@@ -0,0 +1,5 @@
+import { actorCardTestIds } from "./components/actor_card/actor_card.test_ids.js";
+import { actorSearchDetailTestIds } from "./components/actor_search/actor_search_detail.test_ids.js";
+import { actorSearchSkeletonTestIds } from "./components/actor_search/actor_search_skeleton.test_ids.js";
+import { actorSearchWidgetTestIds } from "./components/actor_search/actor_search_widget.test_ids.js";
+export { actorCardTestIds, actorSearchDetailTestIds, actorSearchSkeletonTestIds, actorSearchWidgetTestIds };

package/dist/types.d.ts

@@ -0,0 +1,59 @@
+export type StructuredPricingInfo = {
+    model: string;
+    userTier?: string;
+    pricePerUnit?: number;
+    unitName?: string;
+    trialMinutes?: number;
+    tieredPricing?: {
+        tier: string;
+        pricePerUnit: number;
+    }[];
+    events?: {
+        title: string;
+        description?: string;
+        priceUsd?: number;
+        tieredPricing?: {
+            tier: string;
+            priceUsd: number;
+        }[];
+    }[];
+    pricingNote?: string;
+    eventDescriptionsOmitted?: boolean;
+    eventDescriptionsNote?: string;
+};
+export type ActorStats = {
+    totalUsers: number;
+    actorReviewRating: number;
+    actorReviewCount: number;
+};
+/** Actor as the MCP server formats it for widgets (`widgetActors`, `actorDetails.actorInfo`). */
+export type Actor = {
+    id: string;
+    name: string;
+    username: string;
+    url: string;
+    fullName: string;
+    title: string;
+    description: string;
+    /** Empty when the Actor has no picture. */
+    pictureUrl: string;
+    stats: ActorStats;
+    currentPricingInfo: StructuredPricingInfo;
+};
+export type ActorDetails = {
+    actorInfo: Actor;
+    actorCard: string;
+    readme: string;
+    inputSchema?: {
+        type: string;
+        properties: Record<string, unknown>;
+    };
+};
+/** `structuredContent` of the `search-actors-widget` tool, or of `fetch-actor-details-widget`. */
+export type SearchActorsOutput = {
+    widgetActors: Actor[];
+    query: string;
+} | {
+    actorDetails: ActorDetails;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;KACxB,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,aAAa,CAAC,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,QAAQ,EAAE,MAAM,CAAC;SACpB,EAAE,CAAC;KACP,EAAE,CAAC;IACJ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,iGAAiG;AACjG,MAAM,MAAM,KAAK,GAAG;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,kBAAkB,EAAE,qBAAqB,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,SAAS,EAAE,KAAK,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACvC,CAAC;CACL,CAAC;AAEF,kGAAkG;AAClG,MAAM,MAAM,kBAAkB,GAAG;IAAE,YAAY,EAAE,KAAK,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC"}

package/dist/utils/formatting.d.ts

@@ -0,0 +1,5 @@
+import { StructuredPricingInfo } from '../types';
+export declare function formatPricing(pricing: StructuredPricingInfo): string;
+export declare function formatNumber(value: number): string;
+export declare function formatDecimalNumber(value: number): string;
+//# sourceMappingURL=formatting.d.ts.map

package/dist/utils/formatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../src/utils/formatting.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAyDtD,wBAAgB,aAAa,CAAC,OAAO,EAAE,qBAAqB,GAAG,MAAM,CAiBpE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIlD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD"}

package/dist/utils/formatting.js

@@ -0,0 +1,62 @@
+import pluralize from "pluralize";
+//#region src/utils/formatting.ts
+var PER_THOUSAND_PRICING_THRESHOLD = .01;
+var PRICE_DISPLAY_UNIT_SIZE = 1e3;
+function formatPriceUsd(price) {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+		useGrouping: true,
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	}).format(price);
+}
+/** Cheapest paid tier scaled to 1,000 units, `null` when every tier is free. */
+function cheapestPaidPricePerThousand(tiers) {
+	const paidPrices = tiers.filter(({ tier, price }) => tier !== "FREE" && price > 0).map(({ price }) => price);
+	if (paidPrices.length === 0) return null;
+	return Math.min(...paidPrices) * PRICE_DISPLAY_UNIT_SIZE;
+}
+function formatFlatPricePerMonth(pricePerUnit) {
+	return `${formatPriceUsd(pricePerUnit ?? 0)}/month + usage`;
+}
+function formatPayPerEventPricing(event) {
+	const title = event.title.toLowerCase() || "result";
+	const perThousand = `1,000 ${pluralize(title, PRICE_DISPLAY_UNIT_SIZE)}`;
+	const tieredPerThousand = cheapestPaidPricePerThousand((event.tieredPricing ?? []).map(({ tier, priceUsd }) => ({
+		tier,
+		price: priceUsd
+	})));
+	if (tieredPerThousand !== null) return `from ${formatPriceUsd(tieredPerThousand)} / ${perThousand}`;
+	if (typeof event.priceUsd === "number") {
+		if (event.priceUsd < PER_THOUSAND_PRICING_THRESHOLD) return `${formatPriceUsd(event.priceUsd * PRICE_DISPLAY_UNIT_SIZE)} / ${perThousand}`;
+		return `${formatPriceUsd(event.priceUsd)} / ${title}`;
+	}
+	return "Pay per event";
+}
+function formatPricePerDatasetItem(pricing) {
+	const perThousand = `1,000 ${pluralize(pricing.unitName || "result")}`;
+	return `from ${formatPriceUsd(cheapestPaidPricePerThousand((pricing.tieredPricing ?? []).map(({ tier, pricePerUnit }) => ({
+		tier,
+		price: pricePerUnit
+	}))) ?? (pricing.pricePerUnit ?? 0) * PRICE_DISPLAY_UNIT_SIZE)} / ${perThousand}`;
+}
+function formatPricing(pricing) {
+	if (pricing.model === "FLAT_PRICE_PER_MONTH") return formatFlatPricePerMonth(pricing.pricePerUnit);
+	if (pricing.model === "PAY_PER_EVENT") {
+		if (pricing.events?.length === 1) return formatPayPerEventPricing(pricing.events[0]);
+		return "Pay per event";
+	}
+	if (pricing.model === "PRICE_PER_DATASET_ITEM") return formatPricePerDatasetItem(pricing);
+	return "Pay per usage";
+}
+function formatNumber(value) {
+	if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+	if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+	return value.toString();
+}
+function formatDecimalNumber(value) {
+	return Number.isInteger(value) ? value.toString() : value.toFixed(1);
+}
+//#endregion
+export { formatDecimalNumber, formatNumber, formatPricing };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@apify/mcp-widgets",
-    "version": "0.1.0",
-    "description": "React components that render the output of Apify MCP tools",
+    "version": "0.1.1-featmcpwidgetssearchcomponen-5114c0.4+95308c53d47",
+    "description": "React components that render the output of Apify MCP tools (Actor search, Actor details)",
     "keywords": [
         "apify",
         "mcp",
@@ -18,6 +18,10 @@
             "types": "./dist/index.d.ts",
             "default": "./dist/index.js"
         },
+        "./test-ids": {
+            "types": "./dist/test_ids.d.ts",
+            "default": "./dist/test_ids.js"
+        },
         "./package.json": "./package.json"
     },
     "files": [
@@ -43,7 +47,8 @@
     },
     "dependencies": {
         "@apify/ui-icons": "^1.50.0",
-        "@apify/ui-library": "^1.165.7"
+        "@apify/ui-library": "^1.165.7",
+        "pluralize": "^8.0.0"
     },
     "peerDependencies": {
         "react": "17.x || 18.x || 19.x",
@@ -51,6 +56,8 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
+        "@storybook/react-vite": "^10.3.5",
+        "@types/pluralize": "0.0.33",
         "@types/react": "19.2.2",
         "@types/react-dom": "19.2.2",
         "@vitejs/plugin-react-swc": "^4.3.1",
@@ -60,5 +67,5 @@
         "vite": "^8.0.14",
         "vite-plugin-dts": "^5.0.1"
     },
-    "gitHead": "a9005d23458f4971a321cec030fb1590d3d48ebe"
+    "gitHead": "95308c53d4704fe965fa660fe731e4919e16b14b"
 }