@pipe0/react 1.0.37 → 1.0.39

package/dist/widgets/avatar-group.mjs

@@ -10,6 +10,7 @@ import { getProviderEntry } from "@pipe0/base";
 const avatarGroupVariants = cva("pz:relative pz:inline-flex pz:items-center", {
 	variants: { size: {
 		sm: "",
+		base: "",
 		md: "",
 		lg: ""
 	} },
@@ -17,47 +18,58 @@ const avatarGroupVariants = cva("pz:relative pz:inline-flex pz:items-center", {
 });
 const tileSize = {
 	sm: "pz:h-5 pz:w-5",
+	base: "pz:h-6 pz:w-6",
 	md: "pz:h-8 pz:w-8",
 	lg: "pz:h-12 pz:w-12"
 };
 const tileLogoSize = {
-	sm: "pz:size-3",
-	md: "pz:size-5",
-	lg: "pz:size-7"
+	sm: "pz:size-[14px]",
+	base: "pz:size-[18px]",
+	md: "pz:size-[22px]",
+	lg: "pz:size-8"
+};
+const tileRadius = {
+	sm: "pz:rounded-[6px]",
+	base: "pz:rounded-[7px]",
+	md: "pz:rounded-[9px]",
+	lg: "pz:rounded-[12px]"
 };
 const tileOverlap = {
-	sm: "pz:-ml-1.5",
-	md: "pz:-ml-2",
+	sm: "pz:-ml-1",
+	base: "pz:-ml-[5px]",
+	md: "pz:-ml-1.5",
 	lg: "pz:-ml-2.5"
 };
 const tileSpread = {
 	sm: "pz:group-hover/p0ag:ml-0.5",
+	base: "pz:group-hover/p0ag:ml-0.5",
 	md: "pz:group-hover/p0ag:ml-0.5",
 	lg: "pz:group-hover/p0ag:ml-1"
 };
 const tileShadow = [
-	"inset 0 1px 0 rgba(255,255,255,.5)",
-	"inset 0 -1px 0 rgba(0,0,0,.1)",
-	"0 0 0 .5px rgba(17,17,17,.14)",
-	"0 0 0 2px var(--background, var(--pz-color-background, #fff))"
+	"0 1px 2px rgba(14,17,23,.10)",
+	"0 1px 1px rgba(14,17,23,.04)",
+	"0 0 0 1.5px var(--background, var(--pz-color-background, #fff))"
 ].join(", ");
-const tileGlare = "linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%, rgba(0,0,0,.07))";
 const overflowText = {
-	sm: "pz:text-[9px]",
+	sm: "pz:text-[9.5px]",
+	base: "pz:text-[10.5px]",
 	md: "pz:text-xs",
 	lg: "pz:text-sm"
 };
 const DEFAULT_MAX_TILES = 4;
 /**
-* Horizontal stack of provider tiles. Each tile is a brand-colored rectangle
-* with the provider's logo on top; tiles overlap slightly to read as a group.
+* Horizontal stack of provider cards: each a tinted tile with the provider's
+* logo, a same-hue hairline and a soft shadow. All cards share one size and
+* one axis; each sits under the one before it, so the group reads as a stack.
 * Defaults to a maximum of 4 tiles, then a "+N" overflow tile.
 *
 * Pure visual — no popover. For a hover-card with cost-per-provider, see
 * `<CatalogProviderAvatars>`.
 */
-const AvatarGroup = forwardRef(function AvatarGroup({ providers, size, max = DEFAULT_MAX_TILES, showCount = true, className, render, ...rest }, ref) {
+const AvatarGroup = forwardRef(function AvatarGroup({ providers, size, max = DEFAULT_MAX_TILES, showCount = true, variant = "stack", className, render, ...rest }, ref) {
 	const sizeKey = size ?? "md";
+	const isDeck = variant === "deck";
 	const overflows = providers.length > max;
 	const renderOverflow = overflows && showCount;
 	const visibleSlots = renderOverflow ? max - 1 : max;
@@ -73,62 +85,173 @@ const AvatarGroup = forwardRef(function AvatarGroup({ providers, size, max = DEF
 		},
 		props: mergeProps({
 			className: cn("pz:group/p0ag", avatarGroupVariants({ size }), className),
-			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [shown.map((provider, i) => /* @__PURE__ */ jsx(ProviderTile, {
+			children: isDeck ? /* @__PURE__ */ jsx(Deck, {
+				providers,
+				size: sizeKey
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [shown.map((provider, i) => /* @__PURE__ */ jsx(ProviderTile, {
 				provider,
 				size: sizeKey,
-				first: i === 0
+				index: i,
+				count: shown.length + (renderOverflow ? 1 : 0)
 			}, provider)), renderOverflow ? /* @__PURE__ */ jsx(OverflowTile, {
 				size: sizeKey,
 				count: remaining,
-				first: shown.length === 0
+				index: shown.length
 			}) : null] }),
-			"data-p0": "avatar-group"
+			"data-p0": "avatar-group",
+			"data-variant": variant,
+			...isDeck ? { title: providers.map((p) => getProviderEntry(p)?.label ?? p).join(", ") } : {}
 		}, rest)
 	});
 	if (!providers.length) return null;
 	return element;
 });
-const tileBase = "pz:relative pz:flex pz:items-center pz:justify-center pz:rounded-md pz:overflow-hidden pz:shrink-0 pz:transition-[margin-left] pz:duration-200 pz:ease-out";
-function ProviderTile({ provider, size, first }) {
+const deckTileSize = {
+	sm: "pz:size-[22px]",
+	base: "pz:size-[26px]",
+	md: "pz:size-9",
+	lg: "pz:size-14"
+};
+const deckLogoSize = {
+	sm: "pz:size-4",
+	base: "pz:size-5",
+	md: "pz:size-6",
+	lg: "pz:size-9"
+};
+const deckRadius = {
+	sm: "pz:rounded-[6.5px]",
+	base: "pz:rounded-[7.5px]",
+	md: "pz:rounded-[10px]",
+	lg: "pz:rounded-[14px]"
+};
+/** Each card behind is the front card's size in px, for the fan geometry. */
+const DECK_TILE_PX = {
+	sm: 22,
+	base: 26,
+	md: 36,
+	lg: 56
+};
+const DECK_TURN_DEG = 6;
+const DECK_SHIFT = .16;
+const DECK_MAX_BEHIND = 2;
+/** Room the fan needs to the right of the front card, as a share of its width. */
+const DECK_OVERHANG = .2;
+const deckCardLight = ["#F4F4F8", "#ECECF2"];
+const deckCardDark = ["#2A2A2F", "#303036"];
+const deckFrontShadow = ["0 1px 2px rgba(14,17,23,.10)", "0 1px 1px rgba(14,17,23,.04)"].join(", ");
+/**
+* The front card is the first provider; behind it, one blank card per further
+* provider (at most two), same size, fanned out to the right.
+*/
+function Deck({ providers, size }) {
+	const behind = Math.min(providers.length - 1, DECK_MAX_BEHIND);
+	const entry = getProviderEntry(providers[0]);
+	const px = DECK_TILE_PX[size];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pz:relative pz:flex pz:shrink-0",
+		style: { paddingRight: behind * px * DECK_OVERHANG },
+		children: [Array.from({ length: behind }, (_, i) => {
+			const depth = i + 1;
+			const shade = depth - 1;
+			return /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				"data-p0": "avatar-group-deck-card",
+				className: cn("pz:absolute pz:top-0 pz:left-0", deckTileSize[size]),
+				style: {
+					zIndex: DECK_MAX_BEHIND - depth,
+					transform: `translateX(${depth * DECK_SHIFT * px}px) rotate(${depth * DECK_TURN_DEG}deg)`,
+					transformOrigin: "50% 100%"
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("pz:absolute pz:inset-0 pz:dark:hidden", deckRadius[size]),
+					style: {
+						backgroundColor: deckCardLight[shade],
+						boxShadow: "inset 0 0 0 1px rgba(30,30,60,.13), 0 1px 2px rgba(14,17,23,.06)"
+					}
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("pz:absolute pz:inset-0 pz:hidden pz:dark:block", deckRadius[size]),
+					style: {
+						backgroundColor: deckCardDark[shade],
+						boxShadow: "inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.3)"
+					}
+				})]
+			}, depth);
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-p0": "avatar-group-tile",
+			className: cn(tileBase, deckTileSize[size], deckRadius[size]),
+			style: {
+				boxShadow: behind > 0 ? deckFrontShadow : void 0,
+				zIndex: DECK_MAX_BEHIND + 1
+			},
+			children: [/* @__PURE__ */ jsx(TileSurface, {
+				light: entry?.background?.light,
+				dark: entry?.background?.dark,
+				radius: deckRadius[size]
+			}), entry?.logoUrl ? /* @__PURE__ */ jsx("img", {
+				src: entry.logoUrl,
+				alt: entry.label ?? providers[0],
+				className: cn("pz:relative pz:object-contain", entry.invertLogoInDark && invertInDark, deckLogoSize[size])
+			}) : null]
+		})]
+	});
+}
+const invertInDark = "pz:dark:invert pz:dark:hue-rotate-180";
+const tileBase = "pz:relative pz:flex pz:items-center pz:justify-center pz:shrink-0 pz:transition-[margin-left] pz:duration-200 pz:ease-out";
+function ProviderTile({ provider, size, index, count }) {
 	const entry = getProviderEntry(provider);
 	const bg = entry?.background;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-p0": "avatar-group-tile",
-		className: cn(tileBase, tileSize[size], first ? void 0 : [tileOverlap[size], tileSpread[size]]),
-		style: { boxShadow: tileShadow },
+		className: cn(tileBase, tileSize[size], tileRadius[size], index === 0 ? void 0 : [tileOverlap[size], tileSpread[size]]),
+		style: {
+			boxShadow: count > 1 ? tileShadow : void 0,
+			zIndex: count - index
+		},
 		title: entry?.label ?? provider,
-		children: [
-			bg ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-				"aria-hidden": "true",
-				className: "pz:absolute pz:inset-0 pz:dark:hidden",
-				style: { backgroundColor: bg.light }
-			}), /* @__PURE__ */ jsx("div", {
-				"aria-hidden": "true",
-				className: "pz:absolute pz:inset-0 pz:hidden pz:dark:block",
-				style: { backgroundColor: bg.dark }
-			})] }) : /* @__PURE__ */ jsx("div", {
-				"aria-hidden": "true",
-				className: "pz:absolute pz:inset-0 pz:bg-muted"
-			}),
-			/* @__PURE__ */ jsx("div", {
-				"aria-hidden": "true",
-				className: "pz:absolute pz:inset-0",
-				style: { background: tileGlare }
-			}),
-			entry?.logoUrl ? /* @__PURE__ */ jsx("img", {
-				src: entry.logoUrl,
-				alt: entry.label ?? provider,
-				className: cn("pz:relative pz:object-contain", tileLogoSize[size])
-			}) : null
-		]
+		children: [/* @__PURE__ */ jsx(TileSurface, {
+			light: bg?.light,
+			dark: bg?.dark,
+			radius: tileRadius[size]
+		}), entry?.logoUrl ? /* @__PURE__ */ jsx("img", {
+			src: entry.logoUrl,
+			alt: entry.label ?? provider,
+			className: cn("pz:relative pz:object-contain", entry.invertLogoInDark && invertInDark, tileLogoSize[size])
+		}) : null]
 	});
 }
-function OverflowTile({ size, count, first }) {
+/** The card face: a white card (dark: neutral), or the provider's own logo
+background, in the outline button's material, per colour scheme. */
+function TileSurface({ light = "#FFFFFF", dark = "#1F1F23", radius }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: cn("pz:absolute pz:inset-0 pz:box-border pz:dark:hidden", radius),
+		style: {
+			border: "1px solid transparent",
+			background: [`linear-gradient(180deg, ${light}, color-mix(in srgb, ${light}, #0e1117 2%)) padding-box`, "linear-gradient(180deg, rgba(14,17,23,.10), rgba(14,17,23,.24)) border-box"].join(", "),
+			boxShadow: "inset 0 1px 0 rgba(255,255,255,.6)"
+		}
+	}), /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: cn("pz:absolute pz:inset-0 pz:box-border pz:hidden pz:dark:block", radius),
+		style: {
+			border: "1px solid transparent",
+			background: [`linear-gradient(180deg, color-mix(in srgb, ${dark}, #ffffff 5%), ${dark}) padding-box`, "linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.09)) border-box"].join(", "),
+			boxShadow: "inset 0 1px 0 rgba(255,255,255,.1)"
+		}
+	})] });
+}
+function OverflowTile({ size, count, index }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-p0": "avatar-group-overflow",
-		className: cn(tileBase, "pz:bg-muted pz:text-muted-foreground pz:font-medium", tileSize[size], overflowText[size], first ? void 0 : [tileOverlap[size], tileSpread[size]]),
-		style: { boxShadow: "0 0 0 .5px rgba(17,17,17,.1), 0 0 0 2px var(--background, var(--pz-color-background, #fff))" },
-		children: ["+", count]
+		className: cn(tileBase, tileSize[size], tileRadius[size], "pz:font-semibold pz:tabular-nums pz:text-muted-foreground", overflowText[size], index === 0 ? void 0 : [tileOverlap[size], tileSpread[size]]),
+		style: {
+			boxShadow: tileShadow,
+			zIndex: 0
+		},
+		children: [/* @__PURE__ */ jsx(TileSurface, { radius: tileRadius[size] }), /* @__PURE__ */ jsxs("span", {
+			className: "pz:relative",
+			children: ["+", count]
+		})]
 	});
 }
 

package/dist/widgets/avatar-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.mjs","names":[],"sources":["../../src/widgets/avatar-group.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { getProviderEntry, type ProviderName } from \"@pipe0/base\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { type CSSProperties, forwardRef } from \"react\";\nimport { cn } from \"../lib/utils.js\";\n\nconst avatarGroupVariants = cva(\"pz:relative pz:inline-flex pz:items-center\", {\n  variants: {\n    size: {\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nconst tileSize = {\n  sm: \"pz:h-5 pz:w-5\",\n  md: \"pz:h-8 pz:w-8\",\n  lg: \"pz:h-12 pz:w-12\",\n} as const;\n\nconst tileLogoSize = {\n  sm: \"pz:size-3\",\n  md: \"pz:size-5\",\n  lg: \"pz:size-7\",\n} as const;\n\nconst tileOverlap = {\n  sm: \"pz:-ml-1.5\",\n  md: \"pz:-ml-2\",\n  lg: \"pz:-ml-2.5\",\n} as const;\n\n/* Stacked tiles fan apart when the group is hovered (marker: group/p0ag). */\nconst tileSpread = {\n  sm: \"pz:group-hover/p0ag:ml-0.5\",\n  md: \"pz:group-hover/p0ag:ml-0.5\",\n  lg: \"pz:group-hover/p0ag:ml-1\",\n} as const;\n\n/* Convex \"glass\" material: top glare + bottom inner shade + hairline ring +\n   a 2px separation ring in the host's background color. One paint per tile. */\nconst tileShadow = [\n  \"inset 0 1px 0 rgba(255,255,255,.5)\",\n  \"inset 0 -1px 0 rgba(0,0,0,.1)\",\n  \"0 0 0 .5px rgba(17,17,17,.14)\",\n  \"0 0 0 2px var(--background, var(--pz-color-background, #fff))\",\n].join(\", \");\n\nconst tileGlare =\n  \"linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%, rgba(0,0,0,.07))\";\n\nconst overflowText = {\n  sm: \"pz:text-[9px]\",\n  md: \"pz:text-xs\",\n  lg: \"pz:text-sm\",\n} as const;\n\nconst DEFAULT_MAX_TILES = 4;\n\nexport interface AvatarGroupState {\n  overflows: boolean;\n  remaining: number;\n}\n\nexport interface AvatarGroupProps\n  extends VariantProps<typeof avatarGroupVariants>,\n    useRender.ComponentProps<\"div\", AvatarGroupState> {\n  providers: readonly ProviderName[];\n  /** Maximum tile slots before the overflow indicator. Default 4. */\n  max?: number;\n  /** Show the +N overflow tile when providers exceed `max`. Default true. */\n  showCount?: boolean;\n}\n\n/**\n * Horizontal stack of provider tiles. Each tile is a brand-colored rectangle\n * with the provider's logo on top; tiles overlap slightly to read as a group.\n * Defaults to a maximum of 4 tiles, then a \"+N\" overflow tile.\n *\n * Pure visual — no popover. For a hover-card with cost-per-provider, see\n * `<CatalogProviderAvatars>`.\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup(\n  { providers, size, max = DEFAULT_MAX_TILES, showCount = true, className, render, ...rest },\n  ref,\n) {\n  const sizeKey = size ?? \"md\";\n  const overflows = providers.length > max;\n  const renderOverflow = overflows && showCount;\n  const visibleSlots = renderOverflow ? max - 1 : max;\n  const shown = providers.slice(0, visibleSlots);\n  const remaining = providers.length - shown.length;\n\n  const element = useRender({\n    ref,\n    defaultTagName: \"div\",\n    render,\n    state: { overflows, remaining },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:group/p0ag\", avatarGroupVariants({ size }), className),\n        children: (\n          <>\n            {shown.map((provider, i) => (\n              <ProviderTile key={provider} provider={provider} size={sizeKey} first={i === 0} />\n            ))}\n            {renderOverflow ? (\n              <OverflowTile size={sizeKey} count={remaining} first={shown.length === 0} />\n            ) : null}\n          </>\n        ),\n        ...({ \"data-p0\": \"avatar-group\" } as Record<string, string>),\n      },\n      rest as Record<string, unknown>,\n    ),\n  });\n\n  if (!providers.length) return null;\n  return element;\n});\n\nconst tileBase =\n  \"pz:relative pz:flex pz:items-center pz:justify-center pz:rounded-md pz:overflow-hidden pz:shrink-0 pz:transition-[margin-left] pz:duration-200 pz:ease-out\";\n\nfunction ProviderTile({\n  provider,\n  size,\n  first,\n}: {\n  provider: ProviderName;\n  size: \"sm\" | \"md\" | \"lg\";\n  first: boolean;\n}) {\n  const entry = getProviderEntry(provider);\n  const bg = entry?.background;\n  return (\n    <div\n      data-p0=\"avatar-group-tile\"\n      className={cn(\n        tileBase,\n        tileSize[size],\n        first ? undefined : [tileOverlap[size], tileSpread[size]],\n      )}\n      style={{ boxShadow: tileShadow } as CSSProperties}\n      title={entry?.label ?? provider}\n    >\n      {bg ? (\n        <>\n          <div\n            aria-hidden=\"true\"\n            className=\"pz:absolute pz:inset-0 pz:dark:hidden\"\n            style={{ backgroundColor: bg.light } as CSSProperties}\n          />\n          <div\n            aria-hidden=\"true\"\n            className=\"pz:absolute pz:inset-0 pz:hidden pz:dark:block\"\n            style={{ backgroundColor: bg.dark } as CSSProperties}\n          />\n        </>\n      ) : (\n        <div aria-hidden=\"true\" className=\"pz:absolute pz:inset-0 pz:bg-muted\" />\n      )}\n      <div\n        aria-hidden=\"true\"\n        className=\"pz:absolute pz:inset-0\"\n        style={{ background: tileGlare }}\n      />\n      {entry?.logoUrl ? (\n        <img\n          src={entry.logoUrl}\n          alt={entry.label ?? provider}\n          className={cn(\"pz:relative pz:object-contain\", tileLogoSize[size])}\n        />\n      ) : null}\n    </div>\n  );\n}\n\nfunction OverflowTile({\n  size,\n  count,\n  first,\n}: {\n  size: \"sm\" | \"md\" | \"lg\";\n  count: number;\n  first: boolean;\n}) {\n  return (\n    <div\n      data-p0=\"avatar-group-overflow\"\n      className={cn(\n        tileBase,\n        \"pz:bg-muted pz:text-muted-foreground pz:font-medium\",\n        tileSize[size],\n        overflowText[size],\n        first ? undefined : [tileOverlap[size], tileSpread[size]],\n      )}\n      style={{\n        boxShadow:\n          \"0 0 0 .5px rgba(17,17,17,.1), 0 0 0 2px var(--background, var(--pz-color-background, #fff))\",\n      }}\n    >\n      +{count}\n    </div>\n  );\n}\n\nexport { avatarGroupVariants, tileSize as avatarSize };\n"],"mappings":";;;;;;;;;AAOA,MAAM,sBAAsB,IAAI,8CAA8C;CAC5E,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CAAC;AAEF,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAGD,MAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAID,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACD,CAAC,KAAK,KAAK;AAEZ,MAAM,YACJ;AAEF,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,oBAAoB;;;;;;;;;AAyB1B,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,MAAM,MAAM,mBAAmB,YAAY,MAAM,WAAW,QAAQ,GAAG,QACpF,KACA;CACA,MAAM,UAAU,QAAQ;CACxB,MAAM,YAAY,UAAU,SAAS;CACrC,MAAM,iBAAiB,aAAa;CACpC,MAAM,eAAe,iBAAiB,MAAM,IAAI;CAChD,MAAM,QAAQ,UAAU,MAAM,GAAG,aAAa;CAC9C,MAAM,YAAY,UAAU,SAAS,MAAM;CAE3C,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB;EACA,OAAO;GAAE;GAAW;GAAW;EAC/B,OAAO,WACL;GACE,WAAW,GAAG,iBAAiB,oBAAoB,EAAE,MAAM,CAAC,EAAE,UAAU;GACxE,UACE,8CACG,MAAM,KAAK,UAAU,MACpB,oBAAC,cAAD;IAAuC;IAAU,MAAM;IAAS,OAAO,MAAM;IAAK,EAA/D,SAA+D,CAClF,EACD,iBACC,oBAAC,cAAD;IAAc,MAAM;IAAS,OAAO;IAAW,OAAO,MAAM,WAAW;IAAK,IAC1E,KACH;GAEC,WAAW;GAClB,EACD,KACD;EACF,CAAC;AAEF,KAAI,CAAC,UAAU,OAAQ,QAAO;AAC9B,QAAO;EACP;AAEF,MAAM,WACJ;AAEF,SAAS,aAAa,EACpB,UACA,MACA,SAKC;CACD,MAAM,QAAQ,iBAAiB,SAAS;CACxC,MAAM,KAAK,OAAO;AAClB,QACE,qBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GACT,UACA,SAAS,OACT,QAAQ,SAAY,CAAC,YAAY,OAAO,WAAW,MAAM,CAC1D;EACD,OAAO,EAAE,WAAW,YAAY;EAChC,OAAO,OAAO,SAAS;YARzB;GAUG,KACC,8CACE,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,iBAAiB,GAAG,OAAO;IACpC,GACF,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,iBAAiB,GAAG,MAAM;IACnC,EACD,MAEH,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;IAAuC;GAE3E,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,YAAY,WAAW;IAChC;GACD,OAAO,UACN,oBAAC,OAAD;IACE,KAAK,MAAM;IACX,KAAK,MAAM,SAAS;IACpB,WAAW,GAAG,iCAAiC,aAAa,MAAM;IAClE,IACA;GACA;;;AAIV,SAAS,aAAa,EACpB,MACA,OACA,SAKC;AACD,QACE,qBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GACT,UACA,uDACA,SAAS,OACT,aAAa,OACb,QAAQ,SAAY,CAAC,YAAY,OAAO,WAAW,MAAM,CAC1D;EACD,OAAO,EACL,WACE,+FACH;YAZH,CAaC,KACG,MACE"}
+{"version":3,"file":"avatar-group.mjs","names":[],"sources":["../../src/widgets/avatar-group.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { getProviderEntry, type ProviderName } from \"@pipe0/base\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { type CSSProperties, forwardRef } from \"react\";\nimport { cn } from \"../lib/utils.js\";\n\nconst avatarGroupVariants = cva(\"pz:relative pz:inline-flex pz:items-center\", {\n  variants: {\n    size: {\n      sm: \"\",\n      base: \"\",\n      md: \"\",\n      lg: \"\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nconst tileSize = {\n  sm: \"pz:h-5 pz:w-5\",\n  base: \"pz:h-6 pz:w-6\",\n  md: \"pz:h-8 pz:w-8\",\n  lg: \"pz:h-12 pz:w-12\",\n} as const;\n\n// As large as the tile allows: the tile is the footprint, so a bigger logo\n// costs no space around it — only a hair of padding is kept for the edge.\nconst tileLogoSize = {\n  sm: \"pz:size-[14px]\",\n  base: \"pz:size-[18px]\",\n  md: \"pz:size-[22px]\",\n  lg: \"pz:size-8\",\n} as const;\n\nconst tileRadius = {\n  sm: \"pz:rounded-[6px]\",\n  base: \"pz:rounded-[7px]\",\n  md: \"pz:rounded-[9px]\",\n  lg: \"pz:rounded-[12px]\",\n} as const;\n\n// ~22% overlap: each card sits under the one before it, and its centred logo\n// must stay clear of that edge.\nconst tileOverlap = {\n  sm: \"pz:-ml-1\",\n  base: \"pz:-ml-[5px]\",\n  md: \"pz:-ml-1.5\",\n  lg: \"pz:-ml-2.5\",\n} as const;\n\n/* Stacked tiles fan apart when the group is hovered (marker: group/p0ag). */\nconst tileSpread = {\n  sm: \"pz:group-hover/p0ag:ml-0.5\",\n  base: \"pz:group-hover/p0ag:ml-0.5\",\n  md: \"pz:group-hover/p0ag:ml-0.5\",\n  lg: \"pz:group-hover/p0ag:ml-1\",\n} as const;\n\n/* A physical card in the outline button's material (`p0-glass` in the dash):\n   see `TileSurface` for the face and edge. Here: a soft drop shadow and a\n   1.5px separation ring in the host background so cards read as separate\n   where they overlap. */\nconst tileShadow = [\n  \"0 1px 2px rgba(14,17,23,.10)\",\n  \"0 1px 1px rgba(14,17,23,.04)\",\n  \"0 0 0 1.5px var(--background, var(--pz-color-background, #fff))\",\n].join(\", \");\n\nconst overflowText = {\n  sm: \"pz:text-[9.5px]\",\n  base: \"pz:text-[10.5px]\",\n  md: \"pz:text-xs\",\n  lg: \"pz:text-sm\",\n} as const;\n\nconst DEFAULT_MAX_TILES = 4;\n\nexport interface AvatarGroupState {\n  overflows: boolean;\n  remaining: number;\n}\n\nexport interface AvatarGroupProps\n  extends VariantProps<typeof avatarGroupVariants>,\n    useRender.ComponentProps<\"div\", AvatarGroupState> {\n  providers: readonly ProviderName[];\n  /** Maximum tile slots before the overflow indicator. Default 4. */\n  max?: number;\n  /** Show the +N overflow tile when providers exceed `max`. Default true. */\n  showCount?: boolean;\n  /**\n   * - `stack` (default): every provider's tile side by side, then \"+N\".\n   * - `deck`: only the first provider's tile, with up to two blank cards\n   *   peeking out behind it on the same horizontal line — \"this runs on\n   *   several providers\" in a fraction of the width. For dense chrome (column\n   *   headers) where the label matters more than the provider list.\n   */\n  variant?: \"stack\" | \"deck\";\n}\n\n/**\n * Horizontal stack of provider cards: each a tinted tile with the provider's\n * logo, a same-hue hairline and a soft shadow. All cards share one size and\n * one axis; each sits under the one before it, so the group reads as a stack.\n * Defaults to a maximum of 4 tiles, then a \"+N\" overflow tile.\n *\n * Pure visual — no popover. For a hover-card with cost-per-provider, see\n * `<CatalogProviderAvatars>`.\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup(\n  {\n    providers,\n    size,\n    max = DEFAULT_MAX_TILES,\n    showCount = true,\n    variant = \"stack\",\n    className,\n    render,\n    ...rest\n  },\n  ref,\n) {\n  const sizeKey = size ?? \"md\";\n  const isDeck = variant === \"deck\";\n  const overflows = providers.length > max;\n  const renderOverflow = overflows && showCount;\n  const visibleSlots = renderOverflow ? max - 1 : max;\n  const shown = providers.slice(0, visibleSlots);\n  const remaining = providers.length - shown.length;\n\n  const element = useRender({\n    ref,\n    defaultTagName: \"div\",\n    render,\n    state: { overflows, remaining },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:group/p0ag\", avatarGroupVariants({ size }), className),\n        children: isDeck ? (\n          <Deck providers={providers} size={sizeKey} />\n        ) : (\n          <>\n            {shown.map((provider, i) => (\n              <ProviderTile\n                key={provider}\n                provider={provider}\n                size={sizeKey}\n                index={i}\n                count={shown.length + (renderOverflow ? 1 : 0)}\n              />\n            ))}\n            {renderOverflow ? (\n              <OverflowTile size={sizeKey} count={remaining} index={shown.length} />\n            ) : null}\n          </>\n        ),\n        ...({ \"data-p0\": \"avatar-group\", \"data-variant\": variant } as Record<string, string>),\n        ...(isDeck\n          ? {\n              title: providers.map((p) => getProviderEntry(p)?.label ?? p).join(\", \"),\n            }\n          : {}),\n      },\n      rest as Record<string, unknown>,\n    ),\n  });\n\n  if (!providers.length) return null;\n  return element;\n});\n\n/* Deck: one step larger than the stack at the same size key — it holds a\n   single logo, so the footprint goes to the logo instead of to more tiles. */\nconst deckTileSize = {\n  sm: \"pz:size-[22px]\",\n  base: \"pz:size-[26px]\",\n  md: \"pz:size-9\",\n  lg: \"pz:size-14\",\n} as const;\nconst deckLogoSize = {\n  sm: \"pz:size-4\",\n  base: \"pz:size-5\",\n  md: \"pz:size-6\",\n  lg: \"pz:size-9\",\n} as const;\nconst deckRadius = {\n  sm: \"pz:rounded-[6.5px]\",\n  base: \"pz:rounded-[7.5px]\",\n  md: \"pz:rounded-[10px]\",\n  lg: \"pz:rounded-[14px]\",\n} as const;\n/** Each card behind is the front card's size in px, for the fan geometry. */\nconst DECK_TILE_PX = { sm: 22, base: 26, md: 36, lg: 56 } as const;\n/* A fanned hand, not a sideways slide: each card behind turns a further 6°\n   around its bottom edge and shifts right by 16% of its width, so it peeks\n   out at the top-right and the bottom-right. Flat copies slid along one axis\n   read as grey slabs at header size; the turn is what reads as a stack. */\nconst DECK_TURN_DEG = 6;\nconst DECK_SHIFT = 0.16;\nconst DECK_MAX_BEHIND = 2;\n/** Room the fan needs to the right of the front card, as a share of its width. */\nconst DECK_OVERHANG = 0.2;\n/* Cool greys, lighter toward the front, with a hairline — blank cards that\n   recede behind the logo card instead of competing with it. */\nconst deckCardLight = [\"#F4F4F8\", \"#ECECF2\"] as const;\nconst deckCardDark = [\"#2A2A2F\", \"#303036\"] as const;\n/* The stack's separation ring would cut a gap into the fan; the front card\n   only needs its drop shadow here. */\nconst deckFrontShadow = [\"0 1px 2px rgba(14,17,23,.10)\", \"0 1px 1px rgba(14,17,23,.04)\"].join(\", \");\n\n/**\n * The front card is the first provider; behind it, one blank card per further\n * provider (at most two), same size, fanned out to the right.\n */\nfunction Deck({\n  providers,\n  size,\n}: {\n  providers: readonly ProviderName[];\n  size: \"sm\" | \"base\" | \"md\" | \"lg\";\n}) {\n  const behind = Math.min(providers.length - 1, DECK_MAX_BEHIND);\n  const entry = getProviderEntry(providers[0]!);\n  const px = DECK_TILE_PX[size];\n  return (\n    <div\n      className=\"pz:relative pz:flex pz:shrink-0\"\n      style={{ paddingRight: behind * px * DECK_OVERHANG }}\n    >\n      {Array.from({ length: behind }, (_, i) => {\n        const depth = i + 1;\n        const shade = depth - 1;\n        return (\n          <div\n            key={depth}\n            aria-hidden=\"true\"\n            data-p0=\"avatar-group-deck-card\"\n            className={cn(\"pz:absolute pz:top-0 pz:left-0\", deckTileSize[size])}\n            style={{\n              zIndex: DECK_MAX_BEHIND - depth,\n              transform: `translateX(${depth * DECK_SHIFT * px}px) rotate(${depth * DECK_TURN_DEG}deg)`,\n              transformOrigin: \"50% 100%\",\n            }}\n          >\n            <div\n              className={cn(\"pz:absolute pz:inset-0 pz:dark:hidden\", deckRadius[size])}\n              style={{\n                backgroundColor: deckCardLight[shade],\n                boxShadow: \"inset 0 0 0 1px rgba(30,30,60,.13), 0 1px 2px rgba(14,17,23,.06)\",\n              }}\n            />\n            <div\n              className={cn(\"pz:absolute pz:inset-0 pz:hidden pz:dark:block\", deckRadius[size])}\n              style={{\n                backgroundColor: deckCardDark[shade],\n                boxShadow: \"inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.3)\",\n              }}\n            />\n          </div>\n        );\n      })}\n      <div\n        data-p0=\"avatar-group-tile\"\n        className={cn(tileBase, deckTileSize[size], deckRadius[size])}\n        // A lone card is not a stack: nothing to lift it off, so no shadow.\n        style={{ boxShadow: behind > 0 ? deckFrontShadow : undefined, zIndex: DECK_MAX_BEHIND + 1 }}\n      >\n        <TileSurface\n          light={entry?.background?.light}\n          dark={entry?.background?.dark}\n          radius={deckRadius[size]}\n        />\n        {entry?.logoUrl ? (\n          <img\n            src={entry.logoUrl}\n            alt={entry.label ?? providers[0]}\n            className={cn(\n              \"pz:relative pz:object-contain\",\n              entry.invertLogoInDark && invertInDark,\n              deckLogoSize[size],\n            )}\n          />\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\n/* Flips a dark glyph's lightness on the dark card; the hue rotation undoes the\n   hue shift invert causes, so a dark green logo turns light green, not pink. */\nconst invertInDark = \"pz:dark:invert pz:dark:hue-rotate-180\";\n\nconst tileBase =\n  \"pz:relative pz:flex pz:items-center pz:justify-center pz:shrink-0 pz:transition-[margin-left] pz:duration-200 pz:ease-out\";\n\nfunction ProviderTile({\n  provider,\n  size,\n  index,\n  count,\n}: {\n  provider: ProviderName;\n  size: \"sm\" | \"base\" | \"md\" | \"lg\";\n  index: number;\n  count: number;\n}) {\n  const entry = getProviderEntry(provider);\n  const bg = entry?.background;\n  return (\n    <div\n      data-p0=\"avatar-group-tile\"\n      className={cn(\n        tileBase,\n        tileSize[size],\n        tileRadius[size],\n        index === 0 ? undefined : [tileOverlap[size], tileSpread[size]],\n      )}\n      style={\n        {\n          // The shadow and separation ring exist for overlap; a lone tile\n          // (count 1 — a single provider) sits flat on the surface.\n          boxShadow: count > 1 ? tileShadow : undefined,\n          zIndex: count - index,\n        } as CSSProperties\n      }\n      title={entry?.label ?? provider}\n    >\n      <TileSurface light={bg?.light} dark={bg?.dark} radius={tileRadius[size]} />\n      {entry?.logoUrl ? (\n        <img\n          src={entry.logoUrl}\n          alt={entry.label ?? provider}\n          className={cn(\n            \"pz:relative pz:object-contain\",\n            entry.invertLogoInDark && invertInDark,\n            tileLogoSize[size],\n          )}\n        />\n      ) : null}\n    </div>\n  );\n}\n\n/** The card face: a white card (dark: neutral), or the provider's own logo\n    background, in the outline button's material, per colour scheme. */\nfunction TileSurface({\n  light = \"#FFFFFF\",\n  dark = \"#1F1F23\",\n  radius,\n}: {\n  light?: string;\n  dark?: string;\n  radius: string;\n}) {\n  // The outline button's material: a 1px border that darkens toward the\n  // bottom edge (light catches the top), a faint vertical shade on the face,\n  // and a highlight along the top inner edge.\n  return (\n    <>\n      <div\n        aria-hidden=\"true\"\n        className={cn(\"pz:absolute pz:inset-0 pz:box-border pz:dark:hidden\", radius)}\n        style={\n          {\n            border: \"1px solid transparent\",\n            background: [\n              `linear-gradient(180deg, ${light}, color-mix(in srgb, ${light}, #0e1117 2%)) padding-box`,\n              \"linear-gradient(180deg, rgba(14,17,23,.10), rgba(14,17,23,.24)) border-box\",\n            ].join(\", \"),\n            boxShadow: \"inset 0 1px 0 rgba(255,255,255,.6)\",\n          } as CSSProperties\n        }\n      />\n      <div\n        aria-hidden=\"true\"\n        className={cn(\"pz:absolute pz:inset-0 pz:box-border pz:hidden pz:dark:block\", radius)}\n        style={\n          {\n            border: \"1px solid transparent\",\n            background: [\n              `linear-gradient(180deg, color-mix(in srgb, ${dark}, #ffffff 5%), ${dark}) padding-box`,\n              \"linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.09)) border-box\",\n            ].join(\", \"),\n            boxShadow: \"inset 0 1px 0 rgba(255,255,255,.1)\",\n          } as CSSProperties\n        }\n      />\n    </>\n  );\n}\n\nfunction OverflowTile({\n  size,\n  count,\n  index,\n}: {\n  size: \"sm\" | \"base\" | \"md\" | \"lg\";\n  count: number;\n  index: number;\n}) {\n  return (\n    <div\n      data-p0=\"avatar-group-overflow\"\n      className={cn(\n        tileBase,\n        tileSize[size],\n        tileRadius[size],\n        \"pz:font-semibold pz:tabular-nums pz:text-muted-foreground\",\n        overflowText[size],\n        index === 0 ? undefined : [tileOverlap[size], tileSpread[size]],\n      )}\n      style={{\n        boxShadow: tileShadow,\n        zIndex: 0,\n      }}\n    >\n      <TileSurface radius={tileRadius[size]} />\n      <span className=\"pz:relative\">+{count}</span>\n    </div>\n  );\n}\n\nexport { avatarGroupVariants, tileSize as avatarSize };\n"],"mappings":"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"}

package/dist/widgets/field-type-badge.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"field-type-badge.d.mts","names":[],"sources":["../../src/widgets/field-type-badge.tsx"],"mappings":";;;iBAWgB,cAAA,CAAA;EAAiB,IAAA;EAAM;AAAA;EAAY,IAAA;EAAc,MAAA;AAAA,IAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"field-type-badge.d.mts","names":[],"sources":["../../src/widgets/field-type-badge.tsx"],"mappings":";;;iBAkBgB,cAAA,CAAA;EAAiB,IAAA;EAAM;AAAA;EAAY,IAAA;EAAc,MAAA;AAAA,IAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/widgets/field-type-badge.mjs

@@ -1,5 +1,5 @@
+import { Braces, CircleHelp, Hash, ToggleLeft, Type } from "../components/internal/icons.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Braces, CircleHelp, Hash, ToggleLeft, Type } from "lucide-react";
 
 //#region src/widgets/field-type-badge.tsx
 const ICON_BY_TYPE = {

package/dist/widgets/field-type-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"field-type-badge.mjs","names":[],"sources":["../../src/widgets/field-type-badge.tsx"],"sourcesContent":["import { Braces, CircleHelp, Hash, type LucideIcon, ToggleLeft, Type } from \"lucide-react\";\n\n// Lucide pictograms for the canonical `RecordFieldType` values. `unknown` and\n// anything unmapped fall back to a question-mark glyph.\nconst ICON_BY_TYPE: Record<string, LucideIcon> = {\n  string: Type,\n  number: Hash,\n  boolean: ToggleLeft,\n  json: Braces,\n};\n\nexport function FieldTypeBadge({ type, format }: { type: string; format?: string }) {\n  const Icon = ICON_BY_TYPE[type] ?? CircleHelp;\n  const title = format ? `${type}:${format}` : type;\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      className=\"pz:inline-flex pz:items-center pz:gap-1 pz:text-xs pz:text-muted-foreground\"\n    >\n      <Icon className=\"pz:size-3.5\" strokeWidth={1.5} />\n      {format ? <span className=\"pz:font-mono\">{format}</span> : null}\n    </span>\n  );\n}\n"],"mappings":";;;;AAIA,MAAM,eAA2C;CAC/C,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACP;AAED,SAAgB,eAAe,EAAE,MAAM,UAA6C;CAClF,MAAM,OAAO,aAAa,SAAS;CACnC,MAAM,QAAQ,SAAS,GAAG,KAAK,GAAG,WAAW;AAC7C,QACE,qBAAC,QAAD;EACS;EACP,cAAY;EACZ,WAAU;YAHZ,CAKE,oBAAC,MAAD;GAAM,WAAU;GAAc,aAAa;GAAO,GACjD,SAAS,oBAAC,QAAD;GAAM,WAAU;aAAgB;GAAc,IAAG,KACtD"}
+{"version":3,"file":"field-type-badge.mjs","names":[],"sources":["../../src/widgets/field-type-badge.tsx"],"sourcesContent":["import {\n  Braces,\n  CircleHelp,\n  Hash,\n  type Icon,\n  ToggleLeft,\n  Type,\n} from \"../components/internal/icons.js\";\n\n// Pictograms for the canonical `RecordFieldType` values. `unknown` and\n// anything unmapped fall back to a question-mark glyph.\nconst ICON_BY_TYPE: Record<string, Icon> = {\n  string: Type,\n  number: Hash,\n  boolean: ToggleLeft,\n  json: Braces,\n};\n\nexport function FieldTypeBadge({ type, format }: { type: string; format?: string }) {\n  const Icon = ICON_BY_TYPE[type] ?? CircleHelp;\n  const title = format ? `${type}:${format}` : type;\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      className=\"pz:inline-flex pz:items-center pz:gap-1 pz:text-xs pz:text-muted-foreground\"\n    >\n      <Icon className=\"pz:size-3.5\" strokeWidth={1.5} />\n      {format ? <span className=\"pz:font-mono\">{format}</span> : null}\n    </span>\n  );\n}\n"],"mappings":";;;;AAWA,MAAM,eAAqC;CACzC,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACP;AAED,SAAgB,eAAe,EAAE,MAAM,UAA6C;CAClF,MAAM,OAAO,aAAa,SAAS;CACnC,MAAM,QAAQ,SAAS,GAAG,KAAK,GAAG,WAAW;AAC7C,QACE,qBAAC,QAAD;EACS;EACP,cAAY;EACZ,WAAU;YAHZ,CAKE,oBAAC,MAAD;GAAM,WAAU;GAAc,aAAa;GAAO,GACjD,SAAS,oBAAC,QAAD;GAAM,WAAU;aAAgB;GAAc,IAAG,KACtD"}

package/dist/widgets/icon-glyph.mjs

@@ -1,6 +1,5 @@
-import { LinkedinGlyph } from "./glyphs/linkedin.mjs";
+import { Activity, Award, Banknote, BarChart3, BookOpen, Boxes, Braces, Brain, Briefcase, BriefcaseBusiness, Building2, Calendar, Code2, Compass, Contact, Download, Factory, Filter, GraduationCap, Handshake, History, Languages, LetterText, Library, Linkedin, List, Mail, MapPin, Medal, Plug, Search, Shuffle, Sigma, SlidersHorizontal, Sparkles, Star, Swords, Tags, Type, Upload, User, Workflow, Zap } from "../components/internal/icons.mjs";
 import { jsx } from "react/jsx-runtime";
-import { Activity, Award, Banknote, BarChart3, BookOpen, Boxes, Braces, Brain, Briefcase, BriefcaseBusiness, Building2, Calendar, Code2, Compass, Contact, Download, Factory, Filter, GraduationCap, Handshake, History, Languages, LetterText, Library, List, Mail, MapPin, Medal, Plug, Search, Shuffle, Sigma, SlidersHorizontal, Sparkles, Star, Swords, Tags, Type, Upload, User, Workflow, Zap } from "lucide-react";
 
 //#region src/widgets/icon-glyph.tsx
 const iconMap = {
@@ -18,7 +17,7 @@ const iconMap = {
 	plug: Plug,
 	mix: Shuffle,
 	job: BriefcaseBusiness,
-	linkedin: LinkedinGlyph,
+	linkedin: Linkedin,
 	text: Type,
 	workflow: Workflow,
 	letter: LetterText,

package/dist/widgets/icon-glyph.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon-glyph.mjs","names":[],"sources":["../../src/widgets/icon-glyph.tsx"],"sourcesContent":["import type { IconKey } from \"@pipe0/base\";\nimport {\n  Activity,\n  Award,\n  Banknote,\n  BarChart3,\n  BookOpen,\n  Boxes,\n  Braces,\n  Brain,\n  Briefcase,\n  BriefcaseBusiness,\n  Building2,\n  Calendar,\n  Code2,\n  Compass,\n  Contact,\n  Download,\n  Factory,\n  Filter,\n  GraduationCap,\n  Handshake,\n  History,\n  Languages,\n  LetterText,\n  Library,\n  List,\n  Mail,\n  MapPin,\n  Medal,\n  Plug,\n  Search,\n  Shuffle,\n  Sigma,\n  SlidersHorizontal,\n  Sparkles,\n  Star,\n  Swords,\n  Tags,\n  Type,\n  Upload,\n  User,\n  Workflow,\n  Zap,\n} from \"lucide-react\";\nimport type { ComponentType } from \"react\";\nimport { LinkedinGlyph } from \"./glyphs/linkedin.js\";\n\nconst iconMap: Record<IconKey, ComponentType<{ className?: string; size?: number }>> = {\n  school: GraduationCap,\n  user: User,\n  location: MapPin,\n  language: Languages,\n  brain: Brain,\n  book: BookOpen,\n  money: Banknote,\n  office: Building2,\n  search: Search,\n  output: Upload,\n  input: Download,\n  plug: Plug,\n  mix: Shuffle,\n  job: BriefcaseBusiness,\n  linkedin: LinkedinGlyph,\n  text: Type,\n  workflow: Workflow,\n  letter: LetterText,\n  source: Sigma,\n  web: Compass,\n  activity: Activity,\n  boxes: Boxes,\n  competition: Swords,\n  bill: Banknote,\n  bolt: Zap,\n  star: Star,\n  scholar: Library,\n  // expanded set\n  briefcase: Briefcase,\n  history: History,\n  sparkles: Sparkles,\n  list: List,\n  sliders: SlidersHorizontal,\n  factory: Factory,\n  award: Award,\n  tags: Tags,\n  handshake: Handshake,\n  contact: Contact,\n  mail: Mail,\n  calendar: Calendar,\n  chart: BarChart3,\n  code: Code2,\n  braces: Braces,\n  filter: Filter,\n};\n\nexport function IconGlyph({\n  keyName,\n  className,\n  size,\n}: {\n  keyName: IconKey;\n  className?: string;\n  size?: number;\n}) {\n  const Icon = iconMap[keyName] ?? Medal;\n  return <Icon className={className} size={size} />;\n}\n"],"mappings":";;;;;AAgDA,MAAM,UAAiF;CACrF,QAAQ;CACR,MAAM;CACN,UAAU;CACV,UAAU;CACV,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,KAAK;CACL,UAAU;CACV,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,KAAK;CACL,UAAU;CACV,OAAO;CACP,aAAa;CACb,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CAET,WAAW;CACX,SAAS;CACT,UAAU;CACV,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,OAAO;CACP,MAAM;CACN,QAAQ;CACR,QAAQ;CACT;AAED,SAAgB,UAAU,EACxB,SACA,WACA,QAKC;AAED,QAAO,oBADM,QAAQ,YAAY,OAC1B;EAAiB;EAAiB;EAAQ"}
+{"version":3,"file":"icon-glyph.mjs","names":[],"sources":["../../src/widgets/icon-glyph.tsx"],"sourcesContent":["import type { IconKey } from \"@pipe0/base\";\nimport type { ComponentType } from \"react\";\nimport {\n  Activity,\n  Award,\n  Banknote,\n  BarChart3,\n  BookOpen,\n  Boxes,\n  Braces,\n  Brain,\n  Briefcase,\n  BriefcaseBusiness,\n  Building2,\n  Calendar,\n  Code2,\n  Compass,\n  Contact,\n  Download,\n  Factory,\n  Filter,\n  GraduationCap,\n  Handshake,\n  History,\n  Languages,\n  LetterText,\n  Library,\n  Linkedin,\n  List,\n  Mail,\n  MapPin,\n  Medal,\n  Plug,\n  Search,\n  Shuffle,\n  Sigma,\n  SlidersHorizontal,\n  Sparkles,\n  Star,\n  Swords,\n  Tags,\n  Type,\n  Upload,\n  User,\n  Workflow,\n  Zap,\n} from \"../components/internal/icons.js\";\n\nconst iconMap: Record<IconKey, ComponentType<{ className?: string; size?: number }>> = {\n  school: GraduationCap,\n  user: User,\n  location: MapPin,\n  language: Languages,\n  brain: Brain,\n  book: BookOpen,\n  money: Banknote,\n  office: Building2,\n  search: Search,\n  output: Upload,\n  input: Download,\n  plug: Plug,\n  mix: Shuffle,\n  job: BriefcaseBusiness,\n  linkedin: Linkedin,\n  text: Type,\n  workflow: Workflow,\n  letter: LetterText,\n  source: Sigma,\n  web: Compass,\n  activity: Activity,\n  boxes: Boxes,\n  competition: Swords,\n  bill: Banknote,\n  bolt: Zap,\n  star: Star,\n  scholar: Library,\n  // expanded set\n  briefcase: Briefcase,\n  history: History,\n  sparkles: Sparkles,\n  list: List,\n  sliders: SlidersHorizontal,\n  factory: Factory,\n  award: Award,\n  tags: Tags,\n  handshake: Handshake,\n  contact: Contact,\n  mail: Mail,\n  calendar: Calendar,\n  chart: BarChart3,\n  code: Code2,\n  braces: Braces,\n  filter: Filter,\n};\n\nexport function IconGlyph({\n  keyName,\n  className,\n  size,\n}: {\n  keyName: IconKey;\n  className?: string;\n  size?: number;\n}) {\n  const Icon = iconMap[keyName] ?? Medal;\n  return <Icon className={className} size={size} />;\n}\n"],"mappings":";;;;AAgDA,MAAM,UAAiF;CACrF,QAAQ;CACR,MAAM;CACN,UAAU;CACV,UAAU;CACV,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,KAAK;CACL,UAAU;CACV,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,KAAK;CACL,UAAU;CACV,OAAO;CACP,aAAa;CACb,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CAET,WAAW;CACX,SAAS;CACT,UAAU;CACV,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,OAAO;CACP,MAAM;CACN,QAAQ;CACR,QAAQ;CACT;AAED,SAAgB,UAAU,EACxB,SACA,WACA,QAKC;AAED,QAAO,oBADM,QAAQ,YAAY,OAC1B;EAAiB;EAAiB;EAAQ"}

package/dist/widgets/token-pricing-badge.mjs

@@ -1,6 +1,6 @@
 import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip.mjs";
+import { Coins } from "../components/internal/icons.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Coins } from "lucide-react";
 
 //#region src/widgets/token-pricing-badge.tsx
 /** Trim floating-point noise to a few significant figures for display. */

package/dist/widgets/token-pricing-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"token-pricing-badge.mjs","names":[],"sources":["../../src/widgets/token-pricing-badge.tsx"],"sourcesContent":["import { Coins } from \"lucide-react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip\";\n\n/** Trim floating-point noise to a few significant figures for display. */\nfunction fmt(n: number): number {\n  return Number(n.toPrecision(3));\n}\n\n/**\n * Usage-based pricing badge for the LLM model picker. Inline it just reads\n * \"Usage-based\"; the absolute per-billing-block (per `blockSize` tokens) input\n * and output credit rates appear on hover.\n */\nexport function TokenPricingBadge({\n  inputPerBlock,\n  outputPerBlock,\n  blockSize,\n}: {\n  inputPerBlock: number;\n  outputPerBlock: number;\n  blockSize: number;\n}) {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <span className=\"pz:inline-flex pz:items-center pz:gap-1 pz:text-xs pz:text-muted-foreground pz:cursor-help pz:whitespace-nowrap\">\n            <Coins className=\"pz:size-3\" />\n            Usage\n          </span>\n        }\n      />\n      <TooltipContent side=\"top\" align=\"center\">\n        <div className=\"pz:text-xs pz:leading-snug pz:flex pz:flex-col pz:gap-0.5\">\n          <span className=\"pz:inline-flex pz:items-center pz:gap-1 pz:tabular-nums\">\n            {fmt(inputPerBlock)} <Coins className=\"pz:size-3\" /> / {blockSize} input tokens\n          </span>\n          <span className=\"pz:inline-flex pz:items-center pz:gap-1 pz:tabular-nums\">\n            {fmt(outputPerBlock)} <Coins className=\"pz:size-3\" /> / {blockSize} output tokens\n          </span>\n          <span className=\"pz:text-muted-foreground pz:mt-1\"></span>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;;AAIA,SAAS,IAAI,GAAmB;AAC9B,QAAO,OAAO,EAAE,YAAY,EAAE,CAAC;;;;;;;AAQjC,SAAgB,kBAAkB,EAChC,eACA,gBACA,aAKC;AACD,QACE,qBAAC,SAAD,aACE,oBAAC,gBAAD,EACE,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,OAAD,EAAO,WAAU,aAAc,WAE1B;KAET,GACF,oBAAC,gBAAD;EAAgB,MAAK;EAAM,OAAM;YAC/B,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IAAI,cAAc;MAAC;MAAC,oBAAC,OAAD,EAAO,WAAU,aAAc;;MAAI;MAAU;MAC7D;;IACP,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IAAI,eAAe;MAAC;MAAC,oBAAC,OAAD,EAAO,WAAU,aAAc;;MAAI;MAAU;MAC9D;;IACP,oBAAC,QAAD,EAAM,WAAU,oCAA0C;IACtD;;EACS,EACT"}
+{"version":3,"file":"token-pricing-badge.mjs","names":[],"sources":["../../src/widgets/token-pricing-badge.tsx"],"sourcesContent":["import { Coins } from \"../components/internal/icons.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip\";\n\n/** Trim floating-point noise to a few significant figures for display. */\nfunction fmt(n: number): number {\n  return Number(n.toPrecision(3));\n}\n\n/**\n * Usage-based pricing badge for the LLM model picker. Inline it just reads\n * \"Usage-based\"; the absolute per-billing-block (per `blockSize` tokens) input\n * and output credit rates appear on hover.\n */\nexport function TokenPricingBadge({\n  inputPerBlock,\n  outputPerBlock,\n  blockSize,\n}: {\n  inputPerBlock: number;\n  outputPerBlock: number;\n  blockSize: number;\n}) {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <span className=\"pz:inline-flex pz:items-center pz:gap-1 pz:text-xs pz:text-muted-foreground pz:cursor-help pz:whitespace-nowrap\">\n            <Coins className=\"pz:size-3\" />\n            Usage\n          </span>\n        }\n      />\n      <TooltipContent side=\"top\" align=\"center\">\n        <div className=\"pz:text-xs pz:leading-snug pz:flex pz:flex-col pz:gap-0.5\">\n          <span className=\"pz:inline-flex pz:items-center pz:gap-1 pz:tabular-nums\">\n            {fmt(inputPerBlock)} <Coins className=\"pz:size-3\" /> / {blockSize} input tokens\n          </span>\n          <span className=\"pz:inline-flex pz:items-center pz:gap-1 pz:tabular-nums\">\n            {fmt(outputPerBlock)} <Coins className=\"pz:size-3\" /> / {blockSize} output tokens\n          </span>\n          <span className=\"pz:text-muted-foreground pz:mt-1\"></span>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;;AAIA,SAAS,IAAI,GAAmB;AAC9B,QAAO,OAAO,EAAE,YAAY,EAAE,CAAC;;;;;;;AAQjC,SAAgB,kBAAkB,EAChC,eACA,gBACA,aAKC;AACD,QACE,qBAAC,SAAD,aACE,oBAAC,gBAAD,EACE,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,OAAD,EAAO,WAAU,aAAc,WAE1B;KAET,GACF,oBAAC,gBAAD;EAAgB,MAAK;EAAM,OAAM;YAC/B,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IAAI,cAAc;MAAC;MAAC,oBAAC,OAAD,EAAO,WAAU,aAAc;;MAAI;MAAU;MAC7D;;IACP,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,IAAI,eAAe;MAAC;MAAC,oBAAC,OAAD,EAAO,WAAU,aAAc;;MAAI;MAAU;MAC9D;;IACP,oBAAC,QAAD,EAAM,WAAU,oCAA0C;IACtD;;EACS,EACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipe0/react",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "React component library for building forms and catalogs powered by pipe0 pipes and searches.",
   "license": "MIT",
   "author": "pipe0",
@@ -69,6 +69,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.27.0",
     "@hookform/resolvers": "^5.2.1",
+    "@hugeicons/core-free-icons": "^4.3.5",
+    "@hugeicons/react": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.2",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^9.2.4",
@@ -81,11 +83,10 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "jsonata": "^2.1.0",
-    "lucide-react": "^1.33.0",
     "react-hook-form": "^7.62.0",
     "swr": "^2.4.1",
     "tailwind-merge": "^3.3.1",
-    "@pipe0/base": "1.0.37"
+    "@pipe0/base": "1.0.39"
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",

package/dist/widgets/glyphs/linkedin.mjs

@@ -1,32 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-
-//#region src/widgets/glyphs/linkedin.tsx
-/**
-* The LinkedIn mark.
-*
-* Carried here because lucide REMOVED every brand icon in v1 — they are
-* trademarks, and lucide chose not to ship them rather than police their use.
-* The dash gets this from `@phosphor-icons/react`, which still does; this
-* package has no icon dependency beyond lucide, so adding one for a single
-* glyph would cost more than the glyph.
-*
-* Sized and stroked like the lucide icons around it in `iconGlyphs`, so it does
-* not stand out as the one that came from somewhere else. Filled rather than
-* stroked because that is how the mark is drawn.
-*/
-function LinkedinGlyph({ size = 24, ...props }) {
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: size,
-		height: size,
-		viewBox: "0 0 24 24",
-		fill: "currentColor",
-		"aria-hidden": "true",
-		...props,
-		children: /* @__PURE__ */ jsx("path", { d: "M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05a3.74 3.74 0 0 1 3.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zm1.78 13.02H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" })
-	});
-}
-
-//#endregion
-export { LinkedinGlyph };
-//# sourceMappingURL=linkedin.mjs.map

package/dist/widgets/glyphs/linkedin.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"linkedin.mjs","names":[],"sources":["../../../src/widgets/glyphs/linkedin.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\n\n/**\n * The LinkedIn mark.\n *\n * Carried here because lucide REMOVED every brand icon in v1 — they are\n * trademarks, and lucide chose not to ship them rather than police their use.\n * The dash gets this from `@phosphor-icons/react`, which still does; this\n * package has no icon dependency beyond lucide, so adding one for a single\n * glyph would cost more than the glyph.\n *\n * Sized and stroked like the lucide icons around it in `iconGlyphs`, so it does\n * not stand out as the one that came from somewhere else. Filled rather than\n * stroked because that is how the mark is drawn.\n */\nexport function LinkedinGlyph({\n  size = 24,\n  ...props\n}: SVGProps<SVGSVGElement> & { size?: number | string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05a3.74 3.74 0 0 1 3.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zm1.78 13.02H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z\" />\n    </svg>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,cAAc,EAC5B,OAAO,IACP,GAAG,SACoD;AACvD,QACE,oBAAC,OAAD;EACE,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,eAAY;EACZ,GAAI;YAEJ,oBAAC,QAAD,EAAM,GAAE,mXAAoX;EACxX"}