@pipe0/react 1.0.39 → 1.0.41

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-value.mjs","names":[],"sources":["../../src/records/record-value.tsx"],"sourcesContent":["import type { DisplayValueMark, RecordFieldFormat } from \"@pipe0/base\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils.js\";\nimport {\n  FormatGlyph,\n  type RecordValueField,\n  type RecordWidgetKey,\n  RecordWidgets,\n  StateTile,\n} from \"./record-widgets.js\";\n\nconst CELL_VALUE_LENGTH_LIMIT = 60;\n\nconst JSON_PREVIEW_MAX_ENTRIES = 4;\nconst JSON_PREVIEW_MAX_STRING = 24;\n\nfunction jsonScalarPreview(value: unknown): string {\n  if (typeof value === \"string\") {\n    const truncated =\n      value.length > JSON_PREVIEW_MAX_STRING\n        ? `${value.slice(0, JSON_PREVIEW_MAX_STRING)}…`\n        : value;\n    return `\"${truncated}\"`;\n  }\n  if (typeof value === \"number\" || typeof value === \"boolean\" || value === null) {\n    return String(value);\n  }\n  if (Array.isArray(value)) return \"[ … ]\";\n  if (typeof value === \"object\") return \"{ … }\";\n  return String(value);\n}\n\n/**\n * Monospace preview chip for JSON values (the JSON signature chip). Keys in\n * foreground, values in muted gray, and only the outer brackets take the\n * chip's hue — the bracket is the glyph, so no syntax colouring.\n */\nfunction JsonChip({ value }: { value: unknown }) {\n  let body: ReactNode;\n  if (Array.isArray(value)) {\n    const shown = value.slice(0, JSON_PREVIEW_MAX_ENTRIES);\n    const items = shown.map(jsonScalarPreview).join(\", \");\n    body = (\n      <>\n        <span data-slot=\"sig-glyph\">[ </span>\n        {`${items}${value.length > shown.length ? \", …\" : \"\"}`}\n        <span data-slot=\"sig-glyph\"> ]</span>\n      </>\n    );\n  } else if (value && typeof value === \"object\") {\n    const entries = Object.entries(value).slice(0, JSON_PREVIEW_MAX_ENTRIES);\n    const truncated = Object.keys(value).length > entries.length;\n    body = (\n      <>\n        <span data-slot=\"sig-glyph\">{\"{ \"}</span>\n        {entries.map(([key, entryValue], i) => (\n          <span key={key}>\n            <span className=\"pz:text-foreground\">\"{key}\"</span>\n            {`: ${jsonScalarPreview(entryValue)}`}\n            {(i < entries.length - 1 || truncated) && \", \"}\n          </span>\n        ))}\n        {truncated && \"…\"}\n        <span data-slot=\"sig-glyph\">{\" }\"}</span>\n      </>\n    );\n  } else {\n    body = JSON.stringify(value)?.substring(0, CELL_VALUE_LENGTH_LIMIT) ?? \"\";\n  }\n\n  return (\n    <span className=\"p0-json-chip pz:inline-flex pz:max-w-full pz:min-w-0 pz:items-center pz:rounded-md pz:px-2 pz:py-0.5\">\n      <span className=\"pz:truncate pz:font-mono pz:text-xs pz:leading-normal pz:whitespace-nowrap pz:text-muted-foreground\">\n        {body}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Rich-text-style marks on a display label → classes. Marks compose (a set),\n * so the classes simply join. \"bold\" maps to semibold — the calm table\n * aesthetic treats full bold as shouting.\n */\nconst MARK_CLASSES: Record<DisplayValueMark, string> = {\n  bold: \"pz:font-semibold\",\n  italic: \"pz:italic\",\n  underline: \"pz:underline pz:underline-offset-2\",\n  strikethrough: \"pz:line-through\",\n};\n\nfunction marksClassName(field: RecordValueField): string {\n  return (field.widgets?.display_value?.marks ?? []).map((mark) => MARK_CLASSES[mark]).join(\" \");\n}\n\n// Formats rendered as an outbound link. Bare domains get their scheme added\n// at render time (see `RecordValueText`).\nconst LINK_FORMATS = new Set<RecordFieldFormat>([\"profile_url\", \"url\", \"website_url\", \"domain\"]);\n\nexport function isLinkFormat(format: RecordFieldFormat): boolean {\n  return format !== null && LINK_FORMATS.has(format);\n}\n\n// Identifiers read as one token — a person with their avatar, a company with\n// its logo, a domain, an email, a handle — so they sit on a quiet gray chip\n// that binds glyph and text together. Provenance tiles stay outside the chip.\nconst IDENTITY_FORMATS = new Set<RecordFieldFormat>([\n  \"domain\",\n  \"email\",\n  \"profile_url\",\n  \"url\",\n  \"website_url\",\n  \"phone\",\n]);\n\nexport function isIdentityValue(field: RecordValueField): boolean {\n  if (field.status !== \"completed\" || field.value == null) return false;\n  if (field.format !== null && IDENTITY_FORMATS.has(field.format)) return true;\n  return Boolean(field.widgets?.avatar || field.widgets?.entity_logo);\n}\n\n/**\n * Signature values (LinkedIn profile, contact data) get their own hue, see the\n * signature chips in pipe0.css; every other identity sits on the gray chip.\n */\nfunction chipMaterial(field: RecordValueField): string {\n  if (field.widgets?.icon?.key === \"linkedin\") return \"p0-linkedin-chip\";\n  // No leading glyph on contact chips, so the text gets the full inner padding.\n  if (field.format === \"email\" || field.format === \"phone\") return \"p0-contact-chip pz:pl-2\";\n  return \"p0-cell-chip\";\n}\n\n/**\n * Booleans read as a state, not a word: a quiet check tile for true, an empty\n * tile plus muted label for false. Both stay in the gray palette so a column\n * of booleans adds no local contrast; the check mark alone carries the signal.\n */\nfunction BooleanValue({ value }: { value: boolean }) {\n  return value ? (\n    <span className=\"pz:inline-flex pz:items-center pz:gap-1.5\">\n      <StateTile state=\"checked\" />\n      <span>True</span>\n    </span>\n  ) : (\n    <span className=\"pz:inline-flex pz:items-center pz:gap-1.5 pz:text-muted-foreground\">\n      <StateTile state=\"empty\" />\n      <span>False</span>\n    </span>\n  );\n}\n\n/** The value's text: status wording, a link, a JSON chip, a boolean tile, or the plain value. */\nexport function RecordValueText({\n  field,\n  inChip = false,\n}: {\n  field: RecordValueField;\n  inChip?: boolean;\n}) {\n  if (field.status === \"processing\")\n    return <span className=\"pz:text-muted-foreground pz:animate-status-pulse\">Running…</span>;\n  if (field.status === \"queued\")\n    return <span className=\"pz:text-muted-foreground pz:animate-status-pulse\">Queued…</span>;\n  if (field.status === \"skipped\") return <span>{field.reason?.summary || \"Skipped\"}</span>;\n  if (field.status === \"failed\")\n    return <span className=\"pz:text-failed-foreground\">{field.reason?.summary || \"Failed\"}</span>;\n  if (field.status === \"no_result\") return field.reason?.summary || \"No result\";\n  if (field.status === \"pending\") return \"\";\n\n  if (field.type === \"boolean\") return <BooleanValue value={Boolean(field.value)} />;\n\n  const displayLabel = field.widgets?.display_value?.label;\n\n  if (field.type === \"json\") {\n    return displayLabel ? (\n      <span\n        className={cn(\"pz:text-muted-foreground pz:text-sm pz:underline\", marksClassName(field))}\n      >\n        {displayLabel}\n      </span>\n    ) : (\n      <JsonChip value={field.value} />\n    );\n  }\n\n  if (isLinkFormat(field.format) && field.type === \"string\") {\n    const url = String(field.value);\n    // Bare domains (e.g. company_domain) are valid values but relative hrefs\n    const href = /^https?:\\/\\//i.test(url) ? url : `https://${url}`;\n    const display = (displayLabel ?? url).substring(0, CELL_VALUE_LENGTH_LIMIT);\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        onClick={(e) => e.stopPropagation()}\n        className={cn(\n          // Explicit colour and decoration: the library's reset covers only\n          // its form root, so outside a reset host a bare <a> is blue.\n          \"pz:cursor-pointer pz:text-inherit pz:underline-offset-2 pz:decoration-muted-foreground/60 pz:hover:decoration-foreground\",\n          inChip ? \"pz:no-underline pz:hover:underline\" : \"pz:underline\",\n        )}\n      >\n        {display}\n      </a>\n    );\n  }\n\n  if (displayLabel) {\n    const marks = marksClassName(field);\n    return marks ? <span className={marks}>{displayLabel}</span> : displayLabel;\n  }\n\n  if (field.type === \"number\") return String(field.value as number);\n\n  if (field.type === \"string\") {\n    return <span>{String(field.value as string).substring(0, CELL_VALUE_LENGTH_LIMIT)}</span>;\n  }\n\n  if (field.type === \"unknown\") return JSON.stringify(field.value);\n\n  const _: never = field.type;\n  return JSON.stringify(field.value);\n}\n\nconst DEFAULT_WIDGETS: readonly RecordWidgetKey[] = [\n  \"avatar\",\n  \"entity_logo\",\n  \"external_link\",\n  \"location_indicator\",\n  \"icon\",\n  \"emoji\",\n  \"action_summary\",\n];\n\nexport interface RecordValueProps {\n  field: RecordValueField;\n  /** Which glyph widgets to draw, in order. Defaults to every glyph widget. */\n  widgets?: readonly RecordWidgetKey[];\n  /**\n   * Rendered after the identity chip (or the glyphs) and before plain text —\n   * the slot for provenance tiles such as a waterfall or a status tile.\n   */\n  afterGlyphs?: ReactNode;\n  /** Class for the plain-text box (not used when the value sits on a chip). */\n  textClassName?: string;\n}\n\n/**\n * A read-only record value: glyph widgets, then the value — identity values\n * (domains, emails, profiles, people, companies) on a chip. Renders as\n * `display: contents` so the parts lay out in the host's flex row.\n */\nexport function RecordValue({\n  field,\n  widgets = DEFAULT_WIDGETS,\n  afterGlyphs,\n  textClassName,\n}: RecordValueProps) {\n  const glyphs = (\n    <>\n      <FormatGlyph field={field} />\n      <RecordWidgets field={field} widgets={widgets} />\n    </>\n  );\n\n  if (isIdentityValue(field)) {\n    return (\n      <span data-p0=\"record-value\" className=\"pz:contents\">\n        <span\n          className={cn(\n            \"pz:inline-flex pz:min-w-0 pz:max-w-75 pz:shrink pz:items-center pz:gap-1.5 pz:py-0.5 pz:pr-2 pz:pl-1\",\n            // Domains are outlined pills (an address you can open), the other\n            // identities sit on the filled gray chip.\n            field.format === \"domain\"\n              ? \"pz:rounded-full pz:border pz:border-border pz:bg-background pz:pl-1.5 pz:shadow-[0_1px_1px_rgb(0_0_0/0.03)]\"\n              : cn(\"pz:rounded-md\", chipMaterial(field)),\n          )}\n        >\n          {glyphs}\n          <span className=\"pz:min-w-0 pz:truncate\">\n            <RecordValueText field={field} inChip />\n          </span>\n        </span>\n        {afterGlyphs}\n      </span>\n    );\n  }\n\n  return (\n    <span data-p0=\"record-value\" className=\"pz:contents\">\n      {glyphs}\n      {afterGlyphs}\n      <span\n        className={cn(\n          \"pz:block pz:basis-0 pz:grow pz:overflow-hidden pz:max-w-75 pz:text-ellipsis\",\n          textClassName,\n        )}\n      >\n        <RecordValueText field={field} />\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/records/record-widgets.d.mts

@@ -0,0 +1,69 @@
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { RecordField } from "@pipe0/base";
+
+//#region src/records/record-widgets.d.ts
+/** The slice of a record field the read-only renderers look at. */
+type RecordValueField = Pick<RecordField, "value" | "status" | "type" | "format" | "reason" | "widgets">;
+/**
+ * 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.
+ */
+declare const RecordImageUrlContext: _$react.Context<(src: string) => string>;
+/** 24px round avatar: the image when it loads, coloured initials otherwise. */
+declare function RecordAvatar({
+  name,
+  imageSrc
+}: {
+  name: string;
+  imageSrc?: string | null;
+}): _$react_jsx_runtime0.JSX.Element;
+/**
+ * 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.
+ */
+declare function LinkedinMark({
+  className
+}: {
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+/** LinkedIn's mark in LinkedIn blue, in a 20px slot. */
+declare function LinkedinBadge({
+  className,
+  iconClassName
+}: {
+  className?: string;
+  iconClassName?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+/**
+ * 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.
+ */
+declare function StateTile({
+  state
+}: {
+  state: "checked" | "empty" | "failed";
+}): _$react_jsx_runtime0.JSX.Element;
+/** A favicon for link formats that carry no logo widget of their own. */
+declare function FormatGlyph({
+  field
+}: {
+  field: RecordValueField;
+}): _$react_jsx_runtime0.JSX.Element | null;
+type RecordWidgetKey = "avatar" | "entity_logo" | "external_link" | "location_indicator" | "icon" | "emoji" | "action_summary";
+/** The glyph widgets a field carries, in the order given. */
+declare function RecordWidgets({
+  field,
+  widgets,
+  className
+}: {
+  field: RecordValueField;
+  widgets: readonly RecordWidgetKey[];
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { FormatGlyph, LinkedinBadge, LinkedinMark, RecordAvatar, RecordImageUrlContext, RecordValueField, RecordWidgetKey, RecordWidgets, StateTile };
+//# sourceMappingURL=record-widgets.d.mts.map

package/dist/records/record-widgets.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-widgets.d.mts","names":[],"sources":["../../src/records/record-widgets.tsx"],"mappings":";;;;;;KAMY,gBAAA,GAAmB,IAAA,CAC7B,WAAA;;;AADF;;;cAUa,qBAAA,EAA4E,OAAA,CAAvD,OAAA,EAAA,GAAA;;iBAgDlB,YAAA,CAAA;EAAe,IAAA;EAAM;AAAA;EAAc,IAAA;EAAc,QAAA;AAAA,IAA0B,oBAAA,CAAA,GAAA,CAAA,OAAA;;AAA3F;;;;iBAmCgB,YAAA,CAAA;EAAe;AAAA;EAAe,SAAA;AAAA,IAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;;iBA+BlD,aAAA,CAAA;EACd,SAAA;EACA;AAAA;EAEA,SAAA;EACA,aAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;iBAmEe,SAAA,CAAA;EAAY;AAAA;EAAW,KAAA;AAAA,IAAuC,oBAAA,CAAA,GAAA,CAAA,OAAA;;iBAuE9D,WAAA,CAAA;EAAc;AAAA;EAAW,KAAA,EAAO,gBAAA;AAAA,IAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KActD,eAAA;;iBAUI,aAAA,CAAA;EACd,KAAA;EACA,OAAA;EACA;AAAA;EAEA,KAAA,EAAO,gBAAA;EACP,OAAA,WAAkB,eAAA;EAClB,SAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA"}

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":"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"}

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