@pipe0/react 1.0.38 → 1.0.40

package/dist/records/record-widgets.mjs

@@ -0,0 +1,273 @@
+import { cn } from "../lib/utils.mjs";
+import { Building2, Check, ExternalLink, X } from "../components/internal/icons.mjs";
+import { createContext, useContext, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/records/record-widgets.tsx
+/**
+* Rewrites every image URL the records components render (avatars, logos,
+* favicons). Identity by default; a host with a strict image policy (the MCP
+* Apps view) routes them through one allowed domain.
+*/
+const RecordImageUrlContext = createContext((src) => src);
+function faviconUrl(domain) {
+	return `https://www.google.com/s2/favicons?sz=32&domain=${domain.replace(/^(https?:\/\/)?(www\.)?/, "")}`;
+}
+function hideBrokenImage(e) {
+	const target = e.currentTarget;
+	target.style.display = "none";
+	target.onerror = null;
+}
+const AVATAR_COLORS = [
+	"pz:bg-red-100 pz:text-red-800",
+	"pz:bg-blue-100 pz:text-blue-800",
+	"pz:bg-green-100 pz:text-green-800",
+	"pz:bg-yellow-100 pz:text-yellow-800",
+	"pz:bg-purple-100 pz:text-purple-800",
+	"pz:bg-pink-100 pz:text-pink-800",
+	"pz:bg-indigo-100 pz:text-indigo-800",
+	"pz:bg-cyan-100 pz:text-cyan-800",
+	"pz:bg-orange-100 pz:text-orange-800",
+	"pz:bg-teal-100 pz:text-teal-800",
+	"pz:bg-amber-100 pz:text-amber-800",
+	"pz:bg-lime-100 pz:text-lime-800"
+];
+function avatarColor(name) {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) {
+		hash = name.charCodeAt(i) + ((hash << 5) - hash);
+		hash = hash & hash;
+	}
+	return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+function avatarLetters(name) {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	if (parts.length === 0) return "AN";
+	return ((Array.from(parts[0])[0] ?? "") + (parts.length > 1 ? Array.from(parts[parts.length - 1])[0] ?? "" : "")).toUpperCase() || "AN";
+}
+/** 24px round avatar: the image when it loads, coloured initials otherwise. */
+function RecordAvatar({ name, imageSrc }) {
+	const imageUrl = useContext(RecordImageUrlContext);
+	const [broken, setBroken] = useState(false);
+	const showImage = Boolean(imageSrc) && !broken;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("pz:relative pz:flex pz:size-6 pz:shrink-0 pz:overflow-hidden pz:rounded-full pz:select-none", "pz:shadow-[inset_0_0_0_0.5px_rgba(17,17,17,0.1)]", !showImage && avatarColor(name)),
+		children: showImage ? /* @__PURE__ */ jsx("img", {
+			src: imageSrc ? imageUrl(imageSrc) : void 0,
+			loading: "lazy",
+			decoding: "async",
+			alt: name,
+			className: "pz:aspect-square pz:size-full pz:object-cover",
+			onError: () => setBroken(true)
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "pz:flex pz:size-full pz:items-center pz:justify-center pz:text-[10px] pz:font-medium pz:tracking-tight",
+			children: avatarLetters(name)
+		})
+	});
+}
+/**
+* LinkedIn's mark, drawn as the real "in" bug: one filled rounded square with
+* the letters cut out (an SVG mask), so the letters show whatever surface the
+* badge sits on.
+*/
+function LinkedinMark({ className }) {
+	const maskId = useId();
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		className,
+		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
+			id: maskId,
+			children: [
+				/* @__PURE__ */ jsx("rect", {
+					x: "1.5",
+					y: "1.5",
+					width: "21",
+					height: "21",
+					rx: "4.6",
+					fill: "white"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "7.15",
+					cy: "7.15",
+					r: "1.65",
+					fill: "black"
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: "5.65",
+					y: "9.75",
+					width: "3",
+					height: "8.75",
+					rx: "0.35",
+					fill: "black"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					fill: "black",
+					d: "M10.55 9.75h2.85v1.3c.5-.85 1.5-1.55 2.95-1.55 2.3 0 3.25 1.5 3.25 3.85v5.15h-2.95v-4.6c0-1.15-.4-1.9-1.45-1.9-1.15 0-1.8.85-1.8 2v4.5h-2.85z"
+				})
+			]
+		}) }), /* @__PURE__ */ jsx("rect", {
+			x: "1.5",
+			y: "1.5",
+			width: "21",
+			height: "21",
+			rx: "4.6",
+			fill: "currentColor",
+			mask: `url(#${maskId})`
+		})]
+	});
+}
+/** LinkedIn's mark in LinkedIn blue, in a 20px slot. */
+function LinkedinBadge({ className, iconClassName }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("pz:flex pz:size-5 pz:shrink-0 pz:items-center pz:justify-center pz:text-[#0A66C2] pz:dark:text-[#3d8ee0]", className),
+		children: /* @__PURE__ */ jsx(LinkedinMark, { className: cn("pz:size-4", iconClassName) })
+	});
+}
+const SENIORITY_BARS = {
+	seniority_junior: 0,
+	seniority_frontline: 1,
+	seniority_ic: 1,
+	seniority_senior_ic: 2,
+	seniority_manager: 2,
+	seniority_leadership: 3,
+	seniority_c_suite: 4
+};
+/**
+* Seniority is a rank, so it renders as one: four bars filled up to the
+* level (the priority glyph convention).
+*/
+function SeniorityBars({ level }) {
+	return /* @__PURE__ */ jsx("svg", {
+		role: "img",
+		"aria-label": `Seniority ${level} of 4`,
+		viewBox: "0 0 14 14",
+		className: "pz:size-3 pz:shrink-0 pz:text-muted-foreground",
+		fill: "currentColor",
+		children: [
+			5,
+			8,
+			11,
+			14
+		].map((h, i) => /* @__PURE__ */ jsx("rect", {
+			x: i * 3.6,
+			y: 14 - h,
+			width: 2.6,
+			height: h,
+			rx: .8,
+			opacity: i < level ? 1 : .25
+		}, h))
+	});
+}
+function IconWidget({ widget }) {
+	if (widget.key === "linkedin") return /* @__PURE__ */ jsx(LinkedinBadge, {});
+	if (widget.key === "job") return /* @__PURE__ */ jsx(Building2, {
+		strokeWidth: .8,
+		className: "pz:size-4"
+	});
+	const level = SENIORITY_BARS[widget.key];
+	if (level === void 0) return null;
+	return /* @__PURE__ */ jsx(SeniorityBars, { level });
+}
+/**
+* The one glyph for a yes/no state in a cell: a quiet check tile, an empty
+* tile, or the failed tile. Booleans and action outcomes share it so a
+* column of "Enrolled" reads like a column of "True" — one vocabulary, gray.
+*/
+function StateTile({ state }) {
+	if (state === "failed") return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "pz:flex pz:size-4 pz:shrink-0 pz:items-center pz:justify-center pz:rounded-[4px] pz:bg-failed pz:text-failed-foreground",
+		children: /* @__PURE__ */ jsx(X, {
+			className: "pz:size-3",
+			strokeWidth: 2.5
+		})
+	});
+	if (state === "checked") return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "pz:flex pz:size-4 pz:shrink-0 pz:items-center pz:justify-center pz:rounded-[4px] pz:border pz:border-input pz:bg-muted pz:text-muted-foreground",
+		children: /* @__PURE__ */ jsx(Check, {
+			className: "pz:size-3",
+			strokeWidth: 2.5
+		})
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "pz:size-4 pz:shrink-0 pz:rounded-[4px] pz:border pz:border-input"
+	});
+}
+function ActionSummaryWidget({ widget }) {
+	if (widget.result_status === "completed") return /* @__PURE__ */ jsx(StateTile, { state: "checked" });
+	if (widget.result_status === "failed") return /* @__PURE__ */ jsx(StateTile, { state: "failed" });
+	widget.result_status;
+	return null;
+}
+/** Favicons and logos render raw at 16px — no tile chrome, no cast shadow. */
+function LogoImage({ src, alt }) {
+	return /* @__PURE__ */ jsx("img", {
+		src: useContext(RecordImageUrlContext)(src),
+		alt,
+		loading: "lazy",
+		decoding: "async",
+		className: "pz:inline-block pz:size-4 pz:shrink-0 pz:rounded-[3.5px] pz:object-contain",
+		onError: hideBrokenImage
+	});
+}
+/**
+* Icon-only anchor in the left widget rail. The value text stays plain (cell
+* clicks keep their normal behavior); only the icon navigates.
+*/
+function ExternalLinkWidget({ url }) {
+	return /* @__PURE__ */ jsx("a", {
+		href: url,
+		target: "_blank",
+		rel: "noreferrer noopener",
+		onClick: (e) => e.stopPropagation(),
+		title: url,
+		className: "pz:shrink-0 pz:text-muted-foreground/60 pz:hover:text-foreground",
+		children: /* @__PURE__ */ jsx(ExternalLink, { className: "pz:size-3.5" })
+	});
+}
+/** A favicon for link formats that carry no logo widget of their own. */
+function FormatGlyph({ field }) {
+	if (field.status !== "completed" || typeof field.value !== "string") return null;
+	if (field.format === "website_url" || field.format === "url") return /* @__PURE__ */ jsx(LogoImage, {
+		src: faviconUrl(field.value),
+		alt: "Favicon"
+	});
+	if (field.format === "domain" && !field.widgets?.entity_logo) return /* @__PURE__ */ jsx(LogoImage, {
+		src: faviconUrl(field.value),
+		alt: "Favicon"
+	});
+	return null;
+}
+/** The glyph widgets a field carries, in the order given. */
+function RecordWidgets({ field, widgets, className }) {
+	const available = field.widgets;
+	if (!available) return null;
+	const rendered = widgets.flatMap((key) => {
+		if (key === "avatar" && available.avatar) return [/* @__PURE__ */ jsx(RecordAvatar, {
+			name: available.avatar.name,
+			imageSrc: available.avatar.image_url
+		}, key)];
+		if (key === "entity_logo" && available.entity_logo?.image_url) return [/* @__PURE__ */ jsx(LogoImage, {
+			src: available.entity_logo.image_url,
+			alt: available.entity_logo.entity
+		}, key)];
+		if (key === "external_link" && available.external_link?.url && field.status === "completed") return [/* @__PURE__ */ jsx(ExternalLinkWidget, { url: available.external_link.url }, key)];
+		if (key === "location_indicator" && available.location_indicator) return [/* @__PURE__ */ jsx("span", { children: available.location_indicator.emoji }, key)];
+		if (key === "emoji" && available.emoji) return [/* @__PURE__ */ jsx("span", { children: available.emoji.value }, key)];
+		if (key === "icon" && available.icon) return [/* @__PURE__ */ jsx(IconWidget, { widget: available.icon }, key)];
+		if (key === "action_summary" && available.action_summary) return [/* @__PURE__ */ jsx(ActionSummaryWidget, { widget: available.action_summary }, key)];
+		return [];
+	});
+	if (rendered.length === 0) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("pz:flex pz:shrink-0 pz:items-center pz:gap-1", className),
+		children: rendered
+	});
+}
+
+//#endregion
+export { FormatGlyph, LinkedinBadge, LinkedinMark, RecordAvatar, RecordImageUrlContext, RecordWidgets, StateTile };
+//# sourceMappingURL=record-widgets.mjs.map

package/dist/records/record-widgets.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-widgets.mjs","names":[],"sources":["../../src/records/record-widgets.tsx"],"sourcesContent":["import type { RecordField, Widgets } from \"@pipe0/base\";\nimport { createContext, type SyntheticEvent, useContext, useId, useState } from \"react\";\nimport { Building2, Check, ExternalLink, X } from \"../components/internal/icons.js\";\nimport { cn } from \"../lib/utils.js\";\n\n/** The slice of a record field the read-only renderers look at. */\nexport type RecordValueField = Pick<\n  RecordField,\n  \"value\" | \"status\" | \"type\" | \"format\" | \"reason\" | \"widgets\"\n>;\n\n/**\n * Rewrites every image URL the records components render (avatars, logos,\n * favicons). Identity by default; a host with a strict image policy (the MCP\n * Apps view) routes them through one allowed domain.\n */\nexport const RecordImageUrlContext = createContext<(src: string) => string>((src) => src);\n\n// Same URL as @pipe0/base's getFaviconUrlGoogle, kept local so this module\n// stays free of @pipe0/base value imports (see utils/field-icons.tsx).\nfunction faviconUrl(domain: string): string {\n  return `https://www.google.com/s2/favicons?sz=32&domain=${domain.replace(/^(https?:\\/\\/)?(www\\.)?/, \"\")}`;\n}\n\nfunction hideBrokenImage(e: SyntheticEvent<HTMLImageElement>) {\n  const target = e.currentTarget;\n  target.style.display = \"none\";\n  target.onerror = null;\n}\n\nconst AVATAR_COLORS = [\n  \"pz:bg-red-100 pz:text-red-800\",\n  \"pz:bg-blue-100 pz:text-blue-800\",\n  \"pz:bg-green-100 pz:text-green-800\",\n  \"pz:bg-yellow-100 pz:text-yellow-800\",\n  \"pz:bg-purple-100 pz:text-purple-800\",\n  \"pz:bg-pink-100 pz:text-pink-800\",\n  \"pz:bg-indigo-100 pz:text-indigo-800\",\n  \"pz:bg-cyan-100 pz:text-cyan-800\",\n  \"pz:bg-orange-100 pz:text-orange-800\",\n  \"pz:bg-teal-100 pz:text-teal-800\",\n  \"pz:bg-amber-100 pz:text-amber-800\",\n  \"pz:bg-lime-100 pz:text-lime-800\",\n];\n\n// Same hash as the dash avatars, so a person keeps their colour everywhere.\nfunction avatarColor(name: string): string {\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = name.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];\n}\n\nfunction avatarLetters(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"AN\";\n  const first = Array.from(parts[0])[0] ?? \"\";\n  const last = parts.length > 1 ? (Array.from(parts[parts.length - 1])[0] ?? \"\") : \"\";\n  return (first + last).toUpperCase() || \"AN\";\n}\n\n/** 24px round avatar: the image when it loads, coloured initials otherwise. */\nexport function RecordAvatar({ name, imageSrc }: { name: string; imageSrc?: string | null }) {\n  const imageUrl = useContext(RecordImageUrlContext);\n  const [broken, setBroken] = useState(false);\n  const showImage = Boolean(imageSrc) && !broken;\n  return (\n    <span\n      className={cn(\n        \"pz:relative pz:flex pz:size-6 pz:shrink-0 pz:overflow-hidden pz:rounded-full pz:select-none\",\n        \"pz:shadow-[inset_0_0_0_0.5px_rgba(17,17,17,0.1)]\",\n        !showImage && avatarColor(name),\n      )}\n    >\n      {showImage ? (\n        <img\n          src={imageSrc ? imageUrl(imageSrc) : undefined}\n          loading=\"lazy\"\n          decoding=\"async\"\n          alt={name}\n          className=\"pz:aspect-square pz:size-full pz:object-cover\"\n          onError={() => setBroken(true)}\n        />\n      ) : (\n        <span className=\"pz:flex pz:size-full pz:items-center pz:justify-center pz:text-[10px] pz:font-medium pz:tracking-tight\">\n          {avatarLetters(name)}\n        </span>\n      )}\n    </span>\n  );\n}\n\n/**\n * LinkedIn's mark, drawn as the real \"in\" bug: one filled rounded square with\n * the letters cut out (an SVG mask), so the letters show whatever surface the\n * badge sits on.\n */\nexport function LinkedinMark({ className }: { className?: string }) {\n  const maskId = useId();\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" className={className}>\n      <defs>\n        <mask id={maskId}>\n          <rect x=\"1.5\" y=\"1.5\" width=\"21\" height=\"21\" rx=\"4.6\" fill=\"white\" />\n          {/* i */}\n          <circle cx=\"7.15\" cy=\"7.15\" r=\"1.65\" fill=\"black\" />\n          <rect x=\"5.65\" y=\"9.75\" width=\"3\" height=\"8.75\" rx=\"0.35\" fill=\"black\" />\n          {/* n */}\n          <path\n            fill=\"black\"\n            d=\"M10.55 9.75h2.85v1.3c.5-.85 1.5-1.55 2.95-1.55 2.3 0 3.25 1.5 3.25 3.85v5.15h-2.95v-4.6c0-1.15-.4-1.9-1.45-1.9-1.15 0-1.8.85-1.8 2v4.5h-2.85z\"\n          />\n        </mask>\n      </defs>\n      <rect\n        x=\"1.5\"\n        y=\"1.5\"\n        width=\"21\"\n        height=\"21\"\n        rx=\"4.6\"\n        fill=\"currentColor\"\n        mask={`url(#${maskId})`}\n      />\n    </svg>\n  );\n}\n\n/** LinkedIn's mark in LinkedIn blue, in a 20px slot. */\nexport function LinkedinBadge({\n  className,\n  iconClassName,\n}: {\n  className?: string;\n  iconClassName?: string;\n}) {\n  return (\n    <span\n      className={cn(\n        \"pz:flex pz:size-5 pz:shrink-0 pz:items-center pz:justify-center pz:text-[#0A66C2] pz:dark:text-[#3d8ee0]\",\n        className,\n      )}\n    >\n      <LinkedinMark className={cn(\"pz:size-4\", iconClassName)} />\n    </span>\n  );\n}\n\n// Filled bars per seniority bucket. Unknown renders nothing rather than a\n// placeholder glyph — absence is quieter than a question mark.\nconst SENIORITY_BARS: Partial<Record<NonNullable<Widgets[\"icon\"]>[\"key\"], number>> = {\n  seniority_junior: 0,\n  seniority_frontline: 1,\n  seniority_ic: 1,\n  seniority_senior_ic: 2,\n  seniority_manager: 2,\n  seniority_leadership: 3,\n  seniority_c_suite: 4,\n};\n\n/**\n * Seniority is a rank, so it renders as one: four bars filled up to the\n * level (the priority glyph convention).\n */\nfunction SeniorityBars({ level }: { level: number }) {\n  const heights = [5, 8, 11, 14];\n  return (\n    <svg\n      role=\"img\"\n      aria-label={`Seniority ${level} of 4`}\n      viewBox=\"0 0 14 14\"\n      className=\"pz:size-3 pz:shrink-0 pz:text-muted-foreground\"\n      fill=\"currentColor\"\n    >\n      {heights.map((h, i) => (\n        <rect\n          key={h}\n          x={i * 3.6}\n          y={14 - h}\n          width={2.6}\n          height={h}\n          rx={0.8}\n          opacity={i < level ? 1 : 0.25}\n        />\n      ))}\n    </svg>\n  );\n}\n\nfunction IconWidget({ widget }: { widget: NonNullable<Widgets[\"icon\"]> }) {\n  if (widget.key === \"linkedin\") return <LinkedinBadge />;\n  if (widget.key === \"job\") return <Building2 strokeWidth={0.8} className=\"pz:size-4\" />;\n  const level = SENIORITY_BARS[widget.key];\n  if (level === undefined) return null;\n  return <SeniorityBars level={level} />;\n}\n\n/**\n * The one glyph for a yes/no state in a cell: a quiet check tile, an empty\n * tile, or the failed tile. Booleans and action outcomes share it so a\n * column of \"Enrolled\" reads like a column of \"True\" — one vocabulary, gray.\n */\nexport function StateTile({ state }: { state: \"checked\" | \"empty\" | \"failed\" }) {\n  if (state === \"failed\") {\n    return (\n      <span\n        aria-hidden\n        className=\"pz:flex pz:size-4 pz:shrink-0 pz:items-center pz:justify-center pz:rounded-[4px] pz:bg-failed pz:text-failed-foreground\"\n      >\n        <X className=\"pz:size-3\" strokeWidth={2.5} />\n      </span>\n    );\n  }\n  if (state === \"checked\") {\n    return (\n      <span\n        aria-hidden\n        className=\"pz:flex pz:size-4 pz:shrink-0 pz:items-center pz:justify-center pz:rounded-[4px] pz:border pz:border-input pz:bg-muted pz:text-muted-foreground\"\n      >\n        <Check className=\"pz:size-3\" strokeWidth={2.5} />\n      </span>\n    );\n  }\n  return (\n    <span\n      aria-hidden\n      className=\"pz:size-4 pz:shrink-0 pz:rounded-[4px] pz:border pz:border-input\"\n    />\n  );\n}\n\nfunction ActionSummaryWidget({ widget }: { widget: NonNullable<Widgets[\"action_summary\"]> }) {\n  if (widget.result_status === \"completed\") return <StateTile state=\"checked\" />;\n  if (widget.result_status === \"failed\") return <StateTile state=\"failed\" />;\n  const _: never = widget.result_status;\n  return null;\n}\n\n/** Favicons and logos render raw at 16px — no tile chrome, no cast shadow. */\nfunction LogoImage({ src, alt }: { src: string; alt: string }) {\n  const imageUrl = useContext(RecordImageUrlContext);\n  return (\n    <img\n      src={imageUrl(src)}\n      alt={alt}\n      loading=\"lazy\"\n      decoding=\"async\"\n      className=\"pz:inline-block pz:size-4 pz:shrink-0 pz:rounded-[3.5px] pz:object-contain\"\n      onError={hideBrokenImage}\n    />\n  );\n}\n\n/**\n * Icon-only anchor in the left widget rail. The value text stays plain (cell\n * clicks keep their normal behavior); only the icon navigates.\n */\nfunction ExternalLinkWidget({ url }: { url: string }) {\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noreferrer noopener\"\n      onClick={(e) => e.stopPropagation()}\n      title={url}\n      className=\"pz:shrink-0 pz:text-muted-foreground/60 pz:hover:text-foreground\"\n    >\n      <ExternalLink className=\"pz:size-3.5\" />\n    </a>\n  );\n}\n\n/** A favicon for link formats that carry no logo widget of their own. */\nexport function FormatGlyph({ field }: { field: RecordValueField }) {\n  if (field.status !== \"completed\" || typeof field.value !== \"string\") return null;\n\n  if (field.format === \"website_url\" || field.format === \"url\") {\n    return <LogoImage src={faviconUrl(field.value)} alt=\"Favicon\" />;\n  }\n  // Catalog domain fields (company_domain) already carry an entity_logo\n  // widget; only fill in for user-made domain columns so the tile is not doubled.\n  if (field.format === \"domain\" && !field.widgets?.entity_logo) {\n    return <LogoImage src={faviconUrl(field.value)} alt=\"Favicon\" />;\n  }\n  return null;\n}\n\nexport type RecordWidgetKey =\n  | \"avatar\"\n  | \"entity_logo\"\n  | \"external_link\"\n  | \"location_indicator\"\n  | \"icon\"\n  | \"emoji\"\n  | \"action_summary\";\n\n/** The glyph widgets a field carries, in the order given. */\nexport function RecordWidgets({\n  field,\n  widgets,\n  className,\n}: {\n  field: RecordValueField;\n  widgets: readonly RecordWidgetKey[];\n  className?: string;\n}) {\n  const available = field.widgets;\n  if (!available) return null;\n\n  const rendered = widgets.flatMap((key) => {\n    if (key === \"avatar\" && available.avatar) {\n      return [\n        <RecordAvatar\n          key={key}\n          name={available.avatar.name}\n          imageSrc={available.avatar.image_url}\n        />,\n      ];\n    }\n    if (key === \"entity_logo\" && available.entity_logo?.image_url) {\n      return [\n        <LogoImage\n          key={key}\n          src={available.entity_logo.image_url}\n          alt={available.entity_logo.entity}\n        />,\n      ];\n    }\n    if (key === \"external_link\" && available.external_link?.url && field.status === \"completed\") {\n      return [<ExternalLinkWidget key={key} url={available.external_link.url} />];\n    }\n    if (key === \"location_indicator\" && available.location_indicator) {\n      return [<span key={key}>{available.location_indicator.emoji}</span>];\n    }\n    if (key === \"emoji\" && available.emoji) {\n      return [<span key={key}>{available.emoji.value}</span>];\n    }\n    if (key === \"icon\" && available.icon) {\n      return [<IconWidget key={key} widget={available.icon} />];\n    }\n    if (key === \"action_summary\" && available.action_summary) {\n      return [<ActionSummaryWidget key={key} widget={available.action_summary} />];\n    }\n    return [];\n  });\n\n  if (rendered.length === 0) return null;\n\n  // Row layout matters once a field carries more than one widget (e.g.\n  // x_profile_match emits entity_logo + avatar).\n  return (\n    <span className={cn(\"pz:flex pz:shrink-0 pz:items-center pz:gap-1\", className)}>\n      {rendered}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,wBAAwB,eAAwC,QAAQ,IAAI;AAIzF,SAAS,WAAW,QAAwB;AAC1C,QAAO,mDAAmD,OAAO,QAAQ,2BAA2B,GAAG;;AAGzG,SAAS,gBAAgB,GAAqC;CAC5D,MAAM,SAAS,EAAE;AACjB,QAAO,MAAM,UAAU;AACvB,QAAO,UAAU;;AAGnB,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAGD,SAAS,YAAY,MAAsB;CACzC,IAAI,OAAO;AACX,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,SAAO,KAAK,WAAW,EAAE,KAAK,QAAQ,KAAK;AAC3C,SAAO,OAAO;;AAEhB,QAAO,cAAc,KAAK,IAAI,KAAK,GAAG,cAAc;;AAGtD,SAAS,cAAc,MAAsB;CAC3C,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;AACtD,KAAI,MAAM,WAAW,EAAG,QAAO;AAG/B,UAFc,MAAM,KAAK,MAAM,GAAG,CAAC,MAAM,OAC5B,MAAM,SAAS,IAAK,MAAM,KAAK,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,KAAM,KAC3D,aAAa,IAAI;;;AAIzC,SAAgB,aAAa,EAAE,MAAM,YAAwD;CAC3F,MAAM,WAAW,WAAW,sBAAsB;CAClD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,YAAY,QAAQ,SAAS,IAAI,CAAC;AACxC,QACE,oBAAC,QAAD;EACE,WAAW,GACT,+FACA,oDACA,CAAC,aAAa,YAAY,KAAK,CAChC;YAEA,YACC,oBAAC,OAAD;GACE,KAAK,WAAW,SAAS,SAAS,GAAG;GACrC,SAAQ;GACR,UAAS;GACT,KAAK;GACL,WAAU;GACV,eAAe,UAAU,KAAK;GAC9B,IAEF,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,KAAK;GACf;EAEJ;;;;;;;AASX,SAAgB,aAAa,EAAE,aAAqC;CAClE,MAAM,SAAS,OAAO;AACtB,QACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,eAAY;EAAkB;YAAvD,CACE,oBAAC,QAAD,YACE,qBAAC,QAAD;GAAM,IAAI;aAAV;IACE,oBAAC,QAAD;KAAM,GAAE;KAAM,GAAE;KAAM,OAAM;KAAK,QAAO;KAAK,IAAG;KAAM,MAAK;KAAU;IAErE,oBAAC,UAAD;KAAQ,IAAG;KAAO,IAAG;KAAO,GAAE;KAAO,MAAK;KAAU;IACpD,oBAAC,QAAD;KAAM,GAAE;KAAO,GAAE;KAAO,OAAM;KAAI,QAAO;KAAO,IAAG;KAAO,MAAK;KAAU;IAEzE,oBAAC,QAAD;KACE,MAAK;KACL,GAAE;KACF;IACG;MACF,GACP,oBAAC,QAAD;GACE,GAAE;GACF,GAAE;GACF,OAAM;GACN,QAAO;GACP,IAAG;GACH,MAAK;GACL,MAAM,QAAQ,OAAO;GACrB,EACE;;;;AAKV,SAAgB,cAAc,EAC5B,WACA,iBAIC;AACD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,4GACA,UACD;YAED,oBAAC,cAAD,EAAc,WAAW,GAAG,aAAa,cAAc,EAAI;EACtD;;AAMX,MAAM,iBAA+E;CACnF,kBAAkB;CAClB,qBAAqB;CACrB,cAAc;CACd,qBAAqB;CACrB,mBAAmB;CACnB,sBAAsB;CACtB,mBAAmB;CACpB;;;;;AAMD,SAAS,cAAc,EAAE,SAA4B;AAEnD,QACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY,aAAa,MAAM;EAC/B,SAAQ;EACR,WAAU;EACV,MAAK;YAPO;GAAC;GAAG;GAAG;GAAI;GAAG,CASjB,KAAK,GAAG,MACf,oBAAC,QAAD;GAEE,GAAG,IAAI;GACP,GAAG,KAAK;GACR,OAAO;GACP,QAAQ;GACR,IAAI;GACJ,SAAS,IAAI,QAAQ,IAAI;GACzB,EAPK,EAOL,CACF;EACE;;AAIV,SAAS,WAAW,EAAE,UAAoD;AACxE,KAAI,OAAO,QAAQ,WAAY,QAAO,oBAAC,eAAD,EAAiB;AACvD,KAAI,OAAO,QAAQ,MAAO,QAAO,oBAAC,WAAD;EAAW,aAAa;EAAK,WAAU;EAAc;CACtF,MAAM,QAAQ,eAAe,OAAO;AACpC,KAAI,UAAU,OAAW,QAAO;AAChC,QAAO,oBAAC,eAAD,EAAsB,OAAS;;;;;;;AAQxC,SAAgB,UAAU,EAAE,SAAoD;AAC9E,KAAI,UAAU,SACZ,QACE,oBAAC,QAAD;EACE;EACA,WAAU;YAEV,oBAAC,GAAD;GAAG,WAAU;GAAY,aAAa;GAAO;EACxC;AAGX,KAAI,UAAU,UACZ,QACE,oBAAC,QAAD;EACE;EACA,WAAU;YAEV,oBAAC,OAAD;GAAO,WAAU;GAAY,aAAa;GAAO;EAC5C;AAGX,QACE,oBAAC,QAAD;EACE;EACA,WAAU;EACV;;AAIN,SAAS,oBAAoB,EAAE,UAA8D;AAC3F,KAAI,OAAO,kBAAkB,YAAa,QAAO,oBAAC,WAAD,EAAW,OAAM,WAAY;AAC9E,KAAI,OAAO,kBAAkB,SAAU,QAAO,oBAAC,WAAD,EAAW,OAAM,UAAW;AACzD,QAAO;AACxB,QAAO;;;AAIT,SAAS,UAAU,EAAE,KAAK,OAAqC;AAE7D,QACE,oBAAC,OAAD;EACE,KAHa,WAAW,sBAAsB,CAGhC,IAAI;EACb;EACL,SAAQ;EACR,UAAS;EACT,WAAU;EACV,SAAS;EACT;;;;;;AAQN,SAAS,mBAAmB,EAAE,OAAwB;AACpD,QACE,oBAAC,KAAD;EACE,MAAM;EACN,QAAO;EACP,KAAI;EACJ,UAAU,MAAM,EAAE,iBAAiB;EACnC,OAAO;EACP,WAAU;YAEV,oBAAC,cAAD,EAAc,WAAU,eAAgB;EACtC;;;AAKR,SAAgB,YAAY,EAAE,SAAsC;AAClE,KAAI,MAAM,WAAW,eAAe,OAAO,MAAM,UAAU,SAAU,QAAO;AAE5E,KAAI,MAAM,WAAW,iBAAiB,MAAM,WAAW,MACrD,QAAO,oBAAC,WAAD;EAAW,KAAK,WAAW,MAAM,MAAM;EAAE,KAAI;EAAY;AAIlE,KAAI,MAAM,WAAW,YAAY,CAAC,MAAM,SAAS,YAC/C,QAAO,oBAAC,WAAD;EAAW,KAAK,WAAW,MAAM,MAAM;EAAE,KAAI;EAAY;AAElE,QAAO;;;AAaT,SAAgB,cAAc,EAC5B,OACA,SACA,aAKC;CACD,MAAM,YAAY,MAAM;AACxB,KAAI,CAAC,UAAW,QAAO;CAEvB,MAAM,WAAW,QAAQ,SAAS,QAAQ;AACxC,MAAI,QAAQ,YAAY,UAAU,OAChC,QAAO,CACL,oBAAC,cAAD;GAEE,MAAM,UAAU,OAAO;GACvB,UAAU,UAAU,OAAO;GAC3B,EAHK,IAGL,CACH;AAEH,MAAI,QAAQ,iBAAiB,UAAU,aAAa,UAClD,QAAO,CACL,oBAAC,WAAD;GAEE,KAAK,UAAU,YAAY;GAC3B,KAAK,UAAU,YAAY;GAC3B,EAHK,IAGL,CACH;AAEH,MAAI,QAAQ,mBAAmB,UAAU,eAAe,OAAO,MAAM,WAAW,YAC9E,QAAO,CAAC,oBAAC,oBAAD,EAA8B,KAAK,UAAU,cAAc,KAAO,EAAzC,IAAyC,CAAC;AAE7E,MAAI,QAAQ,wBAAwB,UAAU,mBAC5C,QAAO,CAAC,oBAAC,QAAD,YAAiB,UAAU,mBAAmB,OAAa,EAAhD,IAAgD,CAAC;AAEtE,MAAI,QAAQ,WAAW,UAAU,MAC/B,QAAO,CAAC,oBAAC,QAAD,YAAiB,UAAU,MAAM,OAAa,EAAnC,IAAmC,CAAC;AAEzD,MAAI,QAAQ,UAAU,UAAU,KAC9B,QAAO,CAAC,oBAAC,YAAD,EAAsB,QAAQ,UAAU,MAAQ,EAA/B,IAA+B,CAAC;AAE3D,MAAI,QAAQ,oBAAoB,UAAU,eACxC,QAAO,CAAC,oBAAC,qBAAD,EAA+B,QAAQ,UAAU,gBAAkB,EAAzC,IAAyC,CAAC;AAE9E,SAAO,EAAE;GACT;AAEF,KAAI,SAAS,WAAW,EAAG,QAAO;AAIlC,QACE,oBAAC,QAAD;EAAM,WAAW,GAAG,gDAAgD,UAAU;YAC3E;EACI"}

package/dist/records/records-table.d.mts

@@ -0,0 +1,51 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { RecordField } from "@pipe0/base";
+
+//#region src/records/records-table.d.ts
+/**
+ * A cell as both run responses carry it: a pipes record's field
+ * (`RecordField`) or a search result's field, which leaves `type` and
+ * `format` to its column's definition.
+ */
+type RecordsTableCell = Pick<RecordField, "value" | "status" | "widgets"> & Partial<Pick<RecordField, "type" | "format" | "reason">>;
+/**
+ * One row of native cells, field → cell: a pipes record's `fields`, or one
+ * search result, exactly as the API returns it.
+ */
+type RecordsTableRow = Record<string, RecordsTableCell | null | undefined>;
+/**
+ * The column metadata the table reads. Pipes field definitions
+ * (`PipesResponse.field_definitions`) and search field annotations
+ * (`SearchResponse.field_definitions`) both fit as they are.
+ */
+interface RecordsTableColumn {
+  label?: string | null;
+  type?: RecordField["type"];
+  format?: RecordField["format"];
+  order?: number | null;
+  /** Input columns get no outcome count; pipe and search outputs do. */
+  added_by?: {
+    ref: string;
+  };
+}
+interface RecordsTableProps {
+  rows: RecordsTableRow[];
+  fields?: Record<string, RecordsTableColumn>;
+  className?: string;
+  /** Rewrites image URLs (avatars, logos, favicons), e.g. through an image proxy. */
+  imageUrl?: (src: string) => string;
+}
+/**
+ * Read-only table of a run's native rows: one column per field, each cell
+ * rendered the way a pipe0 Sheet renders it, with its status. Empty cells
+ * show a muted dash; failed cells keep their reason.
+ */
+declare function RecordsTable({
+  rows,
+  fields,
+  imageUrl,
+  className
+}: RecordsTableProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RecordsTable, RecordsTableCell, RecordsTableColumn, RecordsTableProps, RecordsTableRow };
+//# sourceMappingURL=records-table.d.mts.map

package/dist/records/records-table.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"records-table.d.mts","names":[],"sources":["../../src/records/records-table.tsx"],"mappings":";;;;;;;AAcA;;KAAY,gBAAA,GAAmB,IAAA,CAAK,WAAA,oCAClC,OAAA,CAAQ,IAAA,CAAK,WAAA;;;;;KAMH,eAAA,GAAkB,MAAA,SAAe,gBAAA;;;;;;UAO5B,kBAAA;EACf,KAAA;EACA,IAAA,GAAO,WAAA;EACP,MAAA,GAAS,WAAA;EACT,KAAA;EAXyB;EAazB,QAAA;IAAa,GAAA;EAAA;AAAA;AAAA,UAGE,iBAAA;EACf,IAAA,EAAM,eAAA;EACN,MAAA,GAAS,MAAA,SAAe,kBAAA;EACxB,SAAA;EAVA;EAYA,QAAA,IAAY,GAAA;AAAA;;;;;;iBAuHE,YAAA,CAAA;EAAe,IAAA;EAAM,MAAA;EAAa,QAAA;EAAU;AAAA,GAAa,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/records/records-table.mjs

@@ -0,0 +1,168 @@
+import { cn } from "../lib/utils.mjs";
+import { Check, Copy } from "../components/internal/icons.mjs";
+import { getFieldFormatIcon } from "../utils/field-icons.mjs";
+import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table.mjs";
+import { RecordImageUrlContext, StateTile } from "./record-widgets.mjs";
+import { RecordValue } from "./record-value.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/records/records-table.tsx
+/** Declared columns by their display order, then any field only the rows carry. `id` is never shown. */
+function columnNames(fields, rows) {
+	const declared = Object.entries(fields).map(([name, column], index) => ({
+		name,
+		rank: column.order ?? Number.MAX_SAFE_INTEGER,
+		index
+	})).sort((a, b) => a.rank - b.rank || a.index - b.index).map(({ name }) => name);
+	const names = new Set(declared);
+	for (const row of rows) for (const name of Object.keys(row)) names.add(name);
+	names.delete("id");
+	return [...names];
+}
+function tallyColumn(rows, name) {
+	const tally = {
+		completed: 0,
+		no_result: 0,
+		failed: 0,
+		total: 0
+	};
+	for (const row of rows) {
+		const status = row[name]?.status;
+		if (!status) continue;
+		tally.total += 1;
+		if (status === "completed") tally.completed += 1;
+		else if (status === "no_result") tally.no_result += 1;
+		else if (status === "failed") tally.failed += 1;
+	}
+	return tally;
+}
+function isEmpty(cell) {
+	return !cell || cell.status === "completed" && (cell.value == null || cell.value === "");
+}
+/** What a cell's copy button puts on the clipboard; null = no button (empty or trivial values). */
+function copyableText(value) {
+	if (value === null || value === "" || typeof value === "boolean") return null;
+	if (typeof value === "object") return JSON.stringify(value, null, 2);
+	return String(value);
+}
+async function writeClipboard(text) {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		const area = document.createElement("textarea");
+		area.value = text;
+		area.setAttribute("readonly", "");
+		area.style.position = "fixed";
+		area.style.opacity = "0";
+		document.body.appendChild(area);
+		area.select();
+		const copied = document.execCommand("copy");
+		area.remove();
+		return copied;
+	}
+}
+function CopyCellButton({ text }) {
+	const [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Copy value",
+		title: copied ? "Copied" : "Copy",
+		onClick: async (e) => {
+			e.stopPropagation();
+			if (!await writeClipboard(text)) return;
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1500);
+		},
+		className: cn("pz:absolute pz:top-1/2 pz:right-1.5 pz:-translate-y-1/2 pz:inline-flex pz:size-6 pz:items-center pz:justify-center pz:rounded-md", "pz:border pz:border-border pz:bg-background pz:text-muted-foreground pz:shadow-xs pz:hover:text-foreground", "pz:opacity-0 pz:transition-opacity pz:group-hover/cell:opacity-100 pz:focus-visible:opacity-100", copied && "pz:opacity-100"),
+		children: copied ? /* @__PURE__ */ jsx(Check, { className: "pz:size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "pz:size-3.5" })
+	});
+}
+function TallyBadge({ tally }) {
+	return /* @__PURE__ */ jsxs("span", {
+		title: [
+			`${tally.completed} completed`,
+			tally.no_result ? `${tally.no_result} no result` : null,
+			tally.failed ? `${tally.failed} failed` : null
+		].filter(Boolean).join(" · "),
+		className: cn("pz:ml-1.5 pz:rounded pz:px-1 pz:font-normal pz:text-[11px] pz:tabular-nums", tally.failed > 0 ? "pz:bg-failed pz:text-failed-foreground" : "pz:text-muted-foreground"),
+		children: [
+			tally.completed,
+			"/",
+			tally.total
+		]
+	});
+}
+/**
+* Read-only table of a run's native rows: one column per field, each cell
+* rendered the way a pipe0 Sheet renders it, with its status. Empty cells
+* show a muted dash; failed cells keep their reason.
+*/
+function RecordsTable({ rows, fields = {}, imageUrl, className }) {
+	const names = columnNames(fields, rows);
+	const table = /* @__PURE__ */ jsx("div", {
+		"data-p0": "records-table",
+		className: cn("pz:overflow-auto pz:font-sans pz:text-foreground pz:text-sm pz:antialiased", className),
+		children: /* @__PURE__ */ jsxs("table", {
+			"data-slot": "table",
+			className: "pz:w-full pz:border-separate pz:border-spacing-0 pz:caption-bottom",
+			children: [/* @__PURE__ */ jsx(TableHeader, {
+				className: "pz:sticky pz:top-0 pz:z-10 pz:bg-muted",
+				children: /* @__PURE__ */ jsx(TableRow, {
+					className: "pz:hover:bg-transparent",
+					children: names.map((name) => {
+						const column = fields[name];
+						const sample = rows.find((row) => row[name])?.[name];
+						const Icon = getFieldFormatIcon(sample?.format ?? column?.format ?? null, sample?.type ?? column?.type ?? "unknown");
+						const tally = column?.added_by?.ref === "input" ? null : tallyColumn(rows, name);
+						return /* @__PURE__ */ jsx(TableHead, {
+							className: "pz:h-8 pz:border-b pz:border-border pz:px-2.5 pz:text-xs pz:text-muted-foreground",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "pz:inline-flex pz:items-center pz:gap-1.5",
+								children: [
+									/* @__PURE__ */ jsx(Icon, { className: "pz:size-3.5 pz:shrink-0" }),
+									/* @__PURE__ */ jsx("span", { children: column?.label || name }),
+									tally && tally.total > 0 && /* @__PURE__ */ jsx(TallyBadge, { tally })
+								]
+							})
+						}, name);
+					})
+				})
+			}), /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
+				className: "pz:hover:bg-muted/50",
+				children: names.map((name) => {
+					const cell = row[name];
+					const copyText = cell && cell.status === "completed" ? copyableText(cell.value) : null;
+					return /* @__PURE__ */ jsxs(TableCell, {
+						className: "pz:group/cell pz:relative pz:h-10 pz:border-b pz:border-border pz:px-2.5 pz:py-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn("pz:flex pz:h-full pz:items-center pz:gap-2 pz:whitespace-nowrap", (cell?.status === "no_result" || cell?.status === "skipped") && "pz:text-muted-foreground pz:opacity-60"),
+							title: cell?.status === "failed" ? cell.reason?.message ?? void 0 : void 0,
+							children: !cell || isEmpty(cell) ? /* @__PURE__ */ jsx("span", {
+								className: "pz:text-muted-foreground/60",
+								children: "—"
+							}) : /* @__PURE__ */ jsx(RecordValue, {
+								field: {
+									...cell,
+									type: cell.type ?? fields[name]?.type ?? "unknown",
+									format: cell.format ?? fields[name]?.format ?? null,
+									reason: cell.reason ?? null
+								},
+								afterGlyphs: cell.status === "failed" && /* @__PURE__ */ jsx(StateTile, { state: "failed" })
+							})
+						}), copyText !== null && /* @__PURE__ */ jsx(CopyCellButton, { text: copyText })]
+					}, name);
+				})
+			}, String(row.id?.value ?? rowIndex))) })]
+		})
+	});
+	return imageUrl ? /* @__PURE__ */ jsx(RecordImageUrlContext.Provider, {
+		value: imageUrl,
+		children: table
+	}) : table;
+}
+
+//#endregion
+export { RecordsTable };
+//# sourceMappingURL=records-table.mjs.map

package/dist/records/records-table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"records-table.mjs","names":[],"sources":["../../src/records/records-table.tsx"],"sourcesContent":["import type { FieldValue, RecordField } from \"@pipe0/base\";\nimport { useState } from \"react\";\nimport { Check, Copy } from \"../components/internal/icons.js\";\nimport { TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../components/ui/table.js\";\nimport { cn } from \"../lib/utils.js\";\nimport { getFieldFormatIcon } from \"../utils/field-icons.js\";\nimport { RecordValue } from \"./record-value.js\";\nimport { RecordImageUrlContext, StateTile } from \"./record-widgets.js\";\n\n/**\n * A cell as both run responses carry it: a pipes record's field\n * (`RecordField`) or a search result's field, which leaves `type` and\n * `format` to its column's definition.\n */\nexport type RecordsTableCell = Pick<RecordField, \"value\" | \"status\" | \"widgets\"> &\n  Partial<Pick<RecordField, \"type\" | \"format\" | \"reason\">>;\n\n/**\n * One row of native cells, field → cell: a pipes record's `fields`, or one\n * search result, exactly as the API returns it.\n */\nexport type RecordsTableRow = Record<string, RecordsTableCell | null | undefined>;\n\n/**\n * The column metadata the table reads. Pipes field definitions\n * (`PipesResponse.field_definitions`) and search field annotations\n * (`SearchResponse.field_definitions`) both fit as they are.\n */\nexport interface RecordsTableColumn {\n  label?: string | null;\n  type?: RecordField[\"type\"];\n  format?: RecordField[\"format\"];\n  order?: number | null;\n  /** Input columns get no outcome count; pipe and search outputs do. */\n  added_by?: { ref: string };\n}\n\nexport interface RecordsTableProps {\n  rows: RecordsTableRow[];\n  fields?: Record<string, RecordsTableColumn>;\n  className?: string;\n  /** Rewrites image URLs (avatars, logos, favicons), e.g. through an image proxy. */\n  imageUrl?: (src: string) => string;\n}\n\n/** Declared columns by their display order, then any field only the rows carry. `id` is never shown. */\nfunction columnNames(\n  fields: Record<string, RecordsTableColumn>,\n  rows: RecordsTableRow[],\n): string[] {\n  const declared = Object.entries(fields)\n    .map(([name, column], index) => ({\n      name,\n      rank: column.order ?? Number.MAX_SAFE_INTEGER,\n      index,\n    }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ name }) => name);\n  const names = new Set(declared);\n  for (const row of rows) for (const name of Object.keys(row)) names.add(name);\n  names.delete(\"id\");\n  return [...names];\n}\n\ntype Tally = { completed: number; no_result: number; failed: number; total: number };\n\nfunction tallyColumn(rows: RecordsTableRow[], name: string): Tally {\n  const tally: Tally = { completed: 0, no_result: 0, failed: 0, total: 0 };\n  for (const row of rows) {\n    const status = row[name]?.status;\n    if (!status) continue;\n    tally.total += 1;\n    if (status === \"completed\") tally.completed += 1;\n    else if (status === \"no_result\") tally.no_result += 1;\n    else if (status === \"failed\") tally.failed += 1;\n  }\n  return tally;\n}\n\nfunction isEmpty(cell: RecordsTableCell | null | undefined): boolean {\n  return !cell || (cell.status === \"completed\" && (cell.value == null || cell.value === \"\"));\n}\n\n/** What a cell's copy button puts on the clipboard; null = no button (empty or trivial values). */\nfunction copyableText(value: FieldValue): string | null {\n  if (value === null || value === \"\" || typeof value === \"boolean\") return null;\n  if (typeof value === \"object\") return JSON.stringify(value, null, 2);\n  return String(value);\n}\n\n// Hosts render the view in a sandboxed iframe whose permissions policy may\n// block the async Clipboard API; execCommand still copies on a user gesture.\nasync function writeClipboard(text: string): Promise<boolean> {\n  try {\n    await navigator.clipboard.writeText(text);\n    return true;\n  } catch {\n    const area = document.createElement(\"textarea\");\n    area.value = text;\n    area.setAttribute(\"readonly\", \"\");\n    area.style.position = \"fixed\";\n    area.style.opacity = \"0\";\n    document.body.appendChild(area);\n    area.select();\n    const copied = document.execCommand(\"copy\");\n    area.remove();\n    return copied;\n  }\n}\n\nfunction CopyCellButton({ text }: { text: string }) {\n  const [copied, setCopied] = useState(false);\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Copy value\"\n      title={copied ? \"Copied\" : \"Copy\"}\n      onClick={async (e) => {\n        e.stopPropagation();\n        if (!(await writeClipboard(text))) return;\n        setCopied(true);\n        setTimeout(() => setCopied(false), 1500);\n      }}\n      className={cn(\n        \"pz:absolute pz:top-1/2 pz:right-1.5 pz:-translate-y-1/2 pz:inline-flex pz:size-6 pz:items-center pz:justify-center pz:rounded-md\",\n        \"pz:border pz:border-border pz:bg-background pz:text-muted-foreground pz:shadow-xs pz:hover:text-foreground\",\n        \"pz:opacity-0 pz:transition-opacity pz:group-hover/cell:opacity-100 pz:focus-visible:opacity-100\",\n        copied && \"pz:opacity-100\",\n      )}\n    >\n      {copied ? <Check className=\"pz:size-3.5\" /> : <Copy className=\"pz:size-3.5\" />}\n    </button>\n  );\n}\n\nfunction TallyBadge({ tally }: { tally: Tally }) {\n  const title = [\n    `${tally.completed} completed`,\n    tally.no_result ? `${tally.no_result} no result` : null,\n    tally.failed ? `${tally.failed} failed` : null,\n  ]\n    .filter(Boolean)\n    .join(\" · \");\n  return (\n    <span\n      title={title}\n      className={cn(\n        \"pz:ml-1.5 pz:rounded pz:px-1 pz:font-normal pz:text-[11px] pz:tabular-nums\",\n        tally.failed > 0 ? \"pz:bg-failed pz:text-failed-foreground\" : \"pz:text-muted-foreground\",\n      )}\n    >\n      {tally.completed}/{tally.total}\n    </span>\n  );\n}\n\n/**\n * Read-only table of a run's native rows: one column per field, each cell\n * rendered the way a pipe0 Sheet renders it, with its status. Empty cells\n * show a muted dash; failed cells keep their reason.\n */\nexport function RecordsTable({ rows, fields = {}, imageUrl, className }: RecordsTableProps) {\n  const names = columnNames(fields, rows);\n\n  const table = (\n    // The root is the one scroll container, both axes: bound its height\n    // (className) and the header stays put while rows and columns scroll.\n    <div\n      data-p0=\"records-table\"\n      className={cn(\n        \"pz:overflow-auto pz:font-sans pz:text-foreground pz:text-sm pz:antialiased\",\n        className,\n      )}\n    >\n      <table\n        data-slot=\"table\"\n        className=\"pz:w-full pz:border-separate pz:border-spacing-0 pz:caption-bottom\"\n      >\n        <TableHeader className=\"pz:sticky pz:top-0 pz:z-10 pz:bg-muted\">\n          <TableRow className=\"pz:hover:bg-transparent\">\n            {names.map((name) => {\n              const column = fields[name];\n              const sample = rows.find((row) => row[name])?.[name];\n              const Icon = getFieldFormatIcon(\n                sample?.format ?? column?.format ?? null,\n                sample?.type ?? column?.type ?? \"unknown\",\n              );\n              const tally = column?.added_by?.ref === \"input\" ? null : tallyColumn(rows, name);\n              return (\n                <TableHead\n                  key={name}\n                  className=\"pz:h-8 pz:border-b pz:border-border pz:px-2.5 pz:text-xs pz:text-muted-foreground\"\n                >\n                  <span className=\"pz:inline-flex pz:items-center pz:gap-1.5\">\n                    <Icon className=\"pz:size-3.5 pz:shrink-0\" />\n                    <span>{column?.label || name}</span>\n                    {tally && tally.total > 0 && <TallyBadge tally={tally} />}\n                  </span>\n                </TableHead>\n              );\n            })}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {rows.map((row, rowIndex) => (\n            // A run's rows never reorder; search results carry no id.\n            <TableRow key={String(row.id?.value ?? rowIndex)} className=\"pz:hover:bg-muted/50\">\n              {names.map((name) => {\n                const cell = row[name];\n                const copyText =\n                  cell && cell.status === \"completed\" ? copyableText(cell.value) : null;\n                return (\n                  <TableCell\n                    key={name}\n                    className=\"pz:group/cell pz:relative pz:h-10 pz:border-b pz:border-border pz:px-2.5 pz:py-0\"\n                  >\n                    <div\n                      className={cn(\n                        \"pz:flex pz:h-full pz:items-center pz:gap-2 pz:whitespace-nowrap\",\n                        // Quiet outcomes recede as a whole, as in a Sheet.\n                        (cell?.status === \"no_result\" || cell?.status === \"skipped\") &&\n                          \"pz:text-muted-foreground pz:opacity-60\",\n                      )}\n                      title={\n                        cell?.status === \"failed\" ? (cell.reason?.message ?? undefined) : undefined\n                      }\n                    >\n                      {!cell || isEmpty(cell) ? (\n                        <span className=\"pz:text-muted-foreground/60\">—</span>\n                      ) : (\n                        <RecordValue\n                          field={{\n                            ...cell,\n                            type: cell.type ?? fields[name]?.type ?? \"unknown\",\n                            format: cell.format ?? fields[name]?.format ?? null,\n                            reason: cell.reason ?? null,\n                          }}\n                          afterGlyphs={cell.status === \"failed\" && <StateTile state=\"failed\" />}\n                        />\n                      )}\n                    </div>\n                    {copyText !== null && <CopyCellButton text={copyText} />}\n                  </TableCell>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableBody>\n      </table>\n    </div>\n  );\n  return imageUrl ? (\n    <RecordImageUrlContext.Provider value={imageUrl}>{table}</RecordImageUrlContext.Provider>\n  ) : (\n    table\n  );\n}\n"],"mappings":"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"}