@pipe0/react 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @pipe0/elements-react
 
+## 0.0.9
+
+### Patch Changes
+
+- v1 preparations
+- Updated dependencies
+  - @pipe0/base@0.0.9
+
+## 0.0.8
+
+### Patch Changes
+
+- Update billing info
+- Updated dependencies
+  - @pipe0/base@0.0.8
+
 ## 0.0.7
 
 ### Patch Changes

package/dist/components/defaults/adapters/connector-input.mjs

@@ -53,6 +53,7 @@ function ConnectorInputAdapter(field) {
 			type: "button",
 			variant: "link",
 			size: "xs",
+			className: "pz:px-0",
 			onClick: () => field.setValue({ connections: [] }),
 			children: [/* @__PURE__ */ jsx(IconPlus, {}), "Add custom connection"]
 		})

package/dist/components/defaults/adapters/connector-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"connector-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/connector-input.tsx"],"sourcesContent":["import type { ProviderName } from \"@pipe0/base\";\nimport { useMemo } from \"react\";\nimport { useFieldError } from \"../../../hooks/use-field-error.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { ProviderLogo } from \"../../../widgets/provider-logo.js\";\nimport { SuggestCombobox } from \"../../internal/combobox/suggest-combobox.js\";\nimport { IconPlus } from \"../../internal/icons.js\";\nimport { Button } from \"../../ui/button.js\";\n\nexport function ConnectorInputAdapter(field: FieldHandle<\"connector_input\">) {\n  const connections = field.meta.filteredConnections ?? [];\n  const value = field.value ?? null;\n  const current = value?.connections ?? [];\n  const error = useFieldError(field.form, field.path);\n  const hasError = !!error;\n\n  const options = useMemo(\n    () =>\n      connections.map((c) => ({\n        value: c.connection,\n        label: c.connection,\n      })),\n    [connections],\n  );\n\n  const providerByConnection = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const c of connections) map.set(c.connection, c.provider);\n    return map;\n  }, [connections]);\n\n  const renderLogo = (connectionId: string) => {\n    const provider = providerByConnection.get(connectionId);\n    if (!provider) return null;\n    return <ProviderLogo provider={provider as ProviderName} size={16} />;\n  };\n\n  if (field.meta.connectorMode === \"disabled\") {\n    return (\n      <div\n        data-p0=\"input\"\n        className=\"pz:flex pz:items-center pz:rounded-md pz:border pz:border-input pz:bg-muted pz:px-3 pz:py-2 pz:opacity-60\"\n      >\n        <span className=\"pz:text-sm pz:text-muted-foreground\">\n          Custom connections are not supported for this pipe.\n        </span>\n      </div>\n    );\n  }\n\n  if (connections.length === 0) {\n    return (\n      <div\n        data-p0=\"input\"\n        className=\"pz:flex pz:flex-col pz:gap-2 pz:rounded-md pz:border pz:border-input pz:bg-transparent pz:px-3 pz:py-2\"\n      >\n        <span className=\"pz:text-xs pz:text-muted-foreground\">No connections available.</span>\n      </div>\n    );\n  }\n\n  if (value == null) {\n    return (\n      <div data-p0=\"input\" className=\"pz:flex pz:items-center\">\n        <Button\n          type=\"button\"\n          variant=\"link\"\n          size=\"xs\"\n          onClick={() => field.setValue({ connections: [] })}\n        >\n          <IconPlus />\n          Add custom connection\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      <div className={cn(hasError && \"pz:[&_[data-slot=combobox-chips]]:border-destructive\")}>\n        <SuggestCombobox\n          value={current.map((c) => c.connection)}\n          onChange={(next) =>\n            field.setValue({\n              ...value,\n              connections: next.map((connection) => ({\n                type: \"vault\",\n                connection,\n              })),\n            })\n          }\n          options={options}\n          iconFor={renderLogo}\n          ariaInvalid={hasError}\n          placeholder=\"Select a connection\"\n        />\n      </div>\n      <div className=\"pz:flex pz:items-center pz:justify-end\">\n        <Button type=\"button\" variant=\"link\" size=\"xs\" onClick={() => field.setValue(null)}>\n          Reset\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,sBAAsB,OAAuC;CAC3E,MAAM,cAAc,MAAM,KAAK,uBAAuB,EAAE;CACxD,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,UAAU,OAAO,eAAe,EAAE;CAExC,MAAM,WAAW,CAAC,CADJ,cAAc,MAAM,MAAM,MAAM,KAAK;CAGnD,MAAM,UAAU,cAEZ,YAAY,KAAK,OAAO;EACtB,OAAO,EAAE;EACT,OAAO,EAAE;EACV,EAAE,EACL,CAAC,YAAY,CACd;CAED,MAAM,uBAAuB,cAAc;EACzC,MAAM,sBAAM,IAAI,KAAqB;AACrC,OAAK,MAAM,KAAK,YAAa,KAAI,IAAI,EAAE,YAAY,EAAE,SAAS;AAC9D,SAAO;IACN,CAAC,YAAY,CAAC;CAEjB,MAAM,cAAc,iBAAyB;EAC3C,MAAM,WAAW,qBAAqB,IAAI,aAAa;AACvD,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,oBAAC,cAAD;GAAwB;GAA0B,MAAM;GAAM;;AAGvE,KAAI,MAAM,KAAK,kBAAkB,WAC/B,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,WAAU;YAEV,oBAAC,QAAD;GAAM,WAAU;aAAsC;GAE/C;EACH;AAIV,KAAI,YAAY,WAAW,EACzB,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,WAAU;YAEV,oBAAC,QAAD;GAAM,WAAU;aAAsC;GAAgC;EAClF;AAIV,KAAI,SAAS,KACX,QACE,oBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAC7B,qBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,eAAe,MAAM,SAAS,EAAE,aAAa,EAAE,EAAE,CAAC;aAJpD,CAME,oBAAC,UAAD,EAAY,2BAEL;;EACL;AAIV,QACE,qBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAA/B,CACE,oBAAC,OAAD;GAAK,WAAW,GAAG,YAAY,uDAAuD;aACpF,oBAAC,iBAAD;IACE,OAAO,QAAQ,KAAK,MAAM,EAAE,WAAW;IACvC,WAAW,SACT,MAAM,SAAS;KACb,GAAG;KACH,aAAa,KAAK,KAAK,gBAAgB;MACrC,MAAM;MACN;MACD,EAAE;KACJ,CAAC;IAEK;IACT,SAAS;IACT,aAAa;IACb,aAAY;IACZ;GACE,GACN,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAQ;IAAO,MAAK;IAAK,eAAe,MAAM,SAAS,KAAK;cAAE;IAE3E;GACL,EACF"}
+{"version":3,"file":"connector-input.mjs","names":[],"sources":["../../../../src/components/defaults/adapters/connector-input.tsx"],"sourcesContent":["import type { ProviderName } from \"@pipe0/base\";\nimport { useMemo } from \"react\";\nimport { useFieldError } from \"../../../hooks/use-field-error.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { ProviderLogo } from \"../../../widgets/provider-logo.js\";\nimport { SuggestCombobox } from \"../../internal/combobox/suggest-combobox.js\";\nimport { IconPlus } from \"../../internal/icons.js\";\nimport { Button } from \"../../ui/button.js\";\n\nexport function ConnectorInputAdapter(field: FieldHandle<\"connector_input\">) {\n  const connections = field.meta.filteredConnections ?? [];\n  const value = field.value ?? null;\n  const current = value?.connections ?? [];\n  const error = useFieldError(field.form, field.path);\n  const hasError = !!error;\n\n  const options = useMemo(\n    () =>\n      connections.map((c) => ({\n        value: c.connection,\n        label: c.connection,\n      })),\n    [connections],\n  );\n\n  const providerByConnection = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const c of connections) map.set(c.connection, c.provider);\n    return map;\n  }, [connections]);\n\n  const renderLogo = (connectionId: string) => {\n    const provider = providerByConnection.get(connectionId);\n    if (!provider) return null;\n    return <ProviderLogo provider={provider as ProviderName} size={16} />;\n  };\n\n  if (field.meta.connectorMode === \"disabled\") {\n    return (\n      <div\n        data-p0=\"input\"\n        className=\"pz:flex pz:items-center pz:rounded-md pz:border pz:border-input pz:bg-muted pz:px-3 pz:py-2 pz:opacity-60\"\n      >\n        <span className=\"pz:text-sm pz:text-muted-foreground\">\n          Custom connections are not supported for this pipe.\n        </span>\n      </div>\n    );\n  }\n\n  if (connections.length === 0) {\n    return (\n      <div\n        data-p0=\"input\"\n        className=\"pz:flex pz:flex-col pz:gap-2 pz:rounded-md pz:border pz:border-input pz:bg-transparent pz:px-3 pz:py-2\"\n      >\n        <span className=\"pz:text-xs pz:text-muted-foreground\">No connections available.</span>\n      </div>\n    );\n  }\n\n  if (value == null) {\n    return (\n      <div data-p0=\"input\" className=\"pz:flex pz:items-center\">\n        <Button\n          type=\"button\"\n          variant=\"link\"\n          size=\"xs\"\n          className=\"pz:px-0\"\n          onClick={() => field.setValue({ connections: [] })}\n        >\n          <IconPlus />\n          Add custom connection\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      <div className={cn(hasError && \"pz:[&_[data-slot=combobox-chips]]:border-destructive\")}>\n        <SuggestCombobox\n          value={current.map((c) => c.connection)}\n          onChange={(next) =>\n            field.setValue({\n              ...value,\n              connections: next.map((connection) => ({\n                type: \"vault\",\n                connection,\n              })),\n            })\n          }\n          options={options}\n          iconFor={renderLogo}\n          ariaInvalid={hasError}\n          placeholder=\"Select a connection\"\n        />\n      </div>\n      <div className=\"pz:flex pz:items-center pz:justify-end\">\n        <Button type=\"button\" variant=\"link\" size=\"xs\" onClick={() => field.setValue(null)}>\n          Reset\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,sBAAsB,OAAuC;CAC3E,MAAM,cAAc,MAAM,KAAK,uBAAuB,EAAE;CACxD,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,UAAU,OAAO,eAAe,EAAE;CAExC,MAAM,WAAW,CAAC,CADJ,cAAc,MAAM,MAAM,MAAM,KAAK;CAGnD,MAAM,UAAU,cAEZ,YAAY,KAAK,OAAO;EACtB,OAAO,EAAE;EACT,OAAO,EAAE;EACV,EAAE,EACL,CAAC,YAAY,CACd;CAED,MAAM,uBAAuB,cAAc;EACzC,MAAM,sBAAM,IAAI,KAAqB;AACrC,OAAK,MAAM,KAAK,YAAa,KAAI,IAAI,EAAE,YAAY,EAAE,SAAS;AAC9D,SAAO;IACN,CAAC,YAAY,CAAC;CAEjB,MAAM,cAAc,iBAAyB;EAC3C,MAAM,WAAW,qBAAqB,IAAI,aAAa;AACvD,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,oBAAC,cAAD;GAAwB;GAA0B,MAAM;GAAM;;AAGvE,KAAI,MAAM,KAAK,kBAAkB,WAC/B,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,WAAU;YAEV,oBAAC,QAAD;GAAM,WAAU;aAAsC;GAE/C;EACH;AAIV,KAAI,YAAY,WAAW,EACzB,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,WAAU;YAEV,oBAAC,QAAD;GAAM,WAAU;aAAsC;GAAgC;EAClF;AAIV,KAAI,SAAS,KACX,QACE,oBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAC7B,qBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,WAAU;GACV,eAAe,MAAM,SAAS,EAAE,aAAa,EAAE,EAAE,CAAC;aALpD,CAOE,oBAAC,UAAD,EAAY,2BAEL;;EACL;AAIV,QACE,qBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAA/B,CACE,oBAAC,OAAD;GAAK,WAAW,GAAG,YAAY,uDAAuD;aACpF,oBAAC,iBAAD;IACE,OAAO,QAAQ,KAAK,MAAM,EAAE,WAAW;IACvC,WAAW,SACT,MAAM,SAAS;KACb,GAAG;KACH,aAAa,KAAK,KAAK,gBAAgB;MACrC,MAAM;MACN;MACD,EAAE;KACJ,CAAC;IAEK;IACT,SAAS;IACT,aAAa;IACb,aAAY;IACZ;GACE,GACN,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAQ;IAAO,MAAK;IAAK,eAAe,MAAM,SAAS,KAAK;cAAE;IAE3E;GACL,EACF"}

package/dist/components/defaults/adapters/providers-input.mjs

@@ -1,7 +1,9 @@
 import { cn } from "../../../lib/utils.mjs";
 import { IconGripVertical, IconPlus } from "../../internal/icons.mjs";
+import { PricingBadge } from "../../../widgets/pricing-badge.mjs";
 import { WidgetStrip } from "../../../widgets/widget-strip.mjs";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.mjs";
+import { AvatarGroup } from "../../../widgets/avatar-group.mjs";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Search, X } from "lucide-react";
@@ -11,15 +13,33 @@ import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-
 //#region src/components/defaults/adapters/providers-input.tsx
 function splitWidgets(widgets) {
 	if (!widgets) return {
+		providerName: void 0,
 		leading: void 0,
 		pricing: void 0
 	};
-	const { pricing, ...rest } = widgets;
+	const { pricing, provider_logo, ...rest } = widgets;
+	const hasLeading = Object.values(rest).some((v) => v != null);
 	return {
-		leading: Object.values(rest).some((v) => v != null) ? rest : void 0,
+		providerName: provider_logo?.provider,
+		leading: hasLeading ? rest : void 0,
 		pricing
 	};
 }
+function LeadingAvatar({ providerName, leading }) {
+	if (providerName) return /* @__PURE__ */ jsx(AvatarGroup, {
+		providers: [providerName],
+		size: "sm",
+		className: "pz:shrink-0"
+	});
+	if (leading) return /* @__PURE__ */ jsx("span", {
+		className: "pz:flex pz:items-center pz:shrink-0",
+		children: /* @__PURE__ */ jsx(WidgetStrip, {
+			widgets: leading,
+			size: 18
+		})
+	});
+	return null;
+}
 /**
 * Provider waterfall — vertical, ordered list of providers tried sequentially
 * until a valid result is returned. The list makes the running order legible
@@ -93,7 +113,7 @@ function ProviderRow({ value, index, label, widgets, onRemove }) {
 		transition,
 		opacity: isDragging ? .6 : 1
 	};
-	const { leading, pricing } = splitWidgets(widgets);
+	const { providerName, leading, pricing } = splitWidgets(widgets);
 	const orderLabel = String(index + 1).padStart(2, "0");
 	return /* @__PURE__ */ jsxs("li", {
 		ref: setNodeRef,
@@ -111,21 +131,15 @@ function ProviderRow({ value, index, label, widgets, onRemove }) {
 					height: 14
 				})
 			}),
-			leading && /* @__PURE__ */ jsx("span", {
-				className: "pz:flex pz:items-center pz:shrink-0",
-				children: /* @__PURE__ */ jsx(WidgetStrip, {
-					widgets: leading,
-					size: 18
-				})
+			/* @__PURE__ */ jsx(LeadingAvatar, {
+				providerName,
+				leading
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "pz:text-sm pz:font-medium pz:text-foreground pz:flex-1 pz:truncate",
 				children: label
 			}),
-			pricing && /* @__PURE__ */ jsxs("span", {
-				className: "pz:text-xs pz:text-muted-foreground pz:tabular-nums",
-				children: [pricing.credits, " cr"]
-			}),
+			pricing && /* @__PURE__ */ jsx(PricingBadge, { credits: pricing.credits }),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
 				className: cn("pz:inline-flex pz:items-center pz:justify-center pz:min-w-7 pz:h-5 pz:px-1.5", "pz:rounded-full pz:bg-muted pz:text-muted-foreground pz:text-[10.5px]", "pz:font-medium pz:tabular-nums"),
@@ -190,7 +204,7 @@ function AddProviderControl({ options, excluded, onAdd, ariaInvalid }) {
 					className: "pz:px-2 pz:py-3 pz:text-center pz:text-xs pz:text-muted-foreground",
 					children: "No providers"
 				}), filtered.map((option) => {
-					const { leading, pricing } = splitWidgets(option.widgets);
+					const { providerName, leading, pricing } = splitWidgets(option.widgets);
 					return /* @__PURE__ */ jsx("li", {
 						className: "pz:contents",
 						children: /* @__PURE__ */ jsxs("button", {
@@ -202,21 +216,15 @@ function AddProviderControl({ options, excluded, onAdd, ariaInvalid }) {
 							},
 							className: cn("pz:flex pz:items-center pz:gap-2 pz:w-full pz:text-left", "pz:px-2 pz:py-1.5 pz:rounded-md pz:text-sm", "pz:hover:bg-accent pz:hover:text-accent-foreground", "pz:transition-colors pz:cursor-pointer"),
 							children: [
-								leading && /* @__PURE__ */ jsx("span", {
-									className: "pz:flex pz:items-center pz:shrink-0",
-									children: /* @__PURE__ */ jsx(WidgetStrip, {
-										widgets: leading,
-										size: 16
-									})
+								/* @__PURE__ */ jsx(LeadingAvatar, {
+									providerName,
+									leading
 								}),
 								/* @__PURE__ */ jsx("span", {
 									className: "pz:flex-1 pz:truncate",
 									children: option.label
 								}),
-								pricing && /* @__PURE__ */ jsxs("span", {
-									className: "pz:text-xs pz:text-muted-foreground pz:tabular-nums",
-									children: [pricing.credits, " cr"]
-								})
+								pricing && /* @__PURE__ */ jsx(PricingBadge, { credits: pricing.credits })
 							]
 						})
 					}, option.value);

package/dist/components/defaults/adapters/providers-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"providers-input.mjs","names":["XIcon","SearchIcon"],"sources":["../../../../src/components/defaults/adapters/providers-input.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { SortableContext, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport type { WidgetsByKind } from \"@pipe0/base\";\nimport { Search as SearchIcon, X as XIcon } from \"lucide-react\";\nimport { type CSSProperties, useMemo, useState } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { WidgetStrip } from \"../../../widgets/widget-strip.js\";\nimport { IconGripVertical, IconPlus } from \"../../internal/icons.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui/popover.js\";\n\ntype ProviderOption = {\n  value: string;\n  label: string;\n  widgets?: WidgetsByKind;\n};\n\nfunction splitWidgets(widgets: WidgetsByKind | undefined): {\n  leading: WidgetsByKind | undefined;\n  pricing: WidgetsByKind[\"pricing\"] | undefined;\n} {\n  if (!widgets) return { leading: undefined, pricing: undefined };\n  const { pricing, ...rest } = widgets;\n  const hasLeading = Object.values(rest).some((v) => v != null);\n  return { leading: hasLeading ? rest : undefined, pricing };\n}\n\n/**\n * Provider waterfall — vertical, ordered list of providers tried sequentially\n * until a valid result is returned. The list makes the running order legible\n * (numeric badge per row, drag-to-reorder), and the credit widget per\n * provider stays visible.\n */\nexport function ProvidersInputAdapter(field: FieldHandle<\"providers_input\">) {\n  const selected: string[] = useMemo(\n    () => (field.value ?? []).map((p: { provider: string }) => p.provider),\n    [field.value],\n  );\n\n  const options = field.options ?? [];\n  const optionByValue = useMemo(() => {\n    const map = new Map<string, ProviderOption>();\n    for (const o of options) map.set(o.value, o);\n    return map;\n  }, [options]);\n\n  const maxItems = field.meta.maxItems;\n  const atMax = maxItems !== undefined && selected.length >= maxItems;\n\n  const setValue = (next: string[]) =>\n    field.setValue(next.map((provider) => ({ provider })));\n\n  const handleRemove = (value: string) => setValue(selected.filter((v) => v !== value));\n  const handleAdd = (value: string) => {\n    if (selected.includes(value)) return;\n    setValue([...selected, value]);\n  };\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n    if (!over || active.id === over.id) return;\n    const from = selected.indexOf(String(active.id));\n    const to = selected.indexOf(String(over.id));\n    if (from === -1 || to === -1) return;\n    const next = [...selected];\n    const [moved] = next.splice(from, 1);\n    next.splice(to, 0, moved);\n    setValue(next);\n  };\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      {selected.length > 0 && (\n        <DndContext\n          sensors={sensors}\n          collisionDetection={closestCenter}\n          onDragEnd={handleDragEnd}\n        >\n          <SortableContext items={selected} strategy={verticalListSortingStrategy}>\n            <ul className=\"pz:flex pz:flex-col pz:gap-0.5 pz:list-none pz:m-0 pz:p-0\">\n              {selected.map((value, index) => {\n                const option = optionByValue.get(value);\n                return (\n                  <ProviderRow\n                    key={value}\n                    value={value}\n                    index={index}\n                    label={option?.label ?? value}\n                    widgets={option?.widgets}\n                    onRemove={() => handleRemove(value)}\n                  />\n                );\n              })}\n            </ul>\n          </SortableContext>\n        </DndContext>\n      )}\n      {!atMax && (\n        <AddProviderControl\n          options={options}\n          excluded={selected}\n          onAdd={handleAdd}\n          ariaInvalid={!!field.error}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ProviderRow({\n  value,\n  index,\n  label,\n  widgets,\n  onRemove,\n}: {\n  value: string;\n  index: number;\n  label: string;\n  widgets?: WidgetsByKind;\n  onRemove: () => void;\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: value,\n  });\n  const style: CSSProperties = {\n    transform: transform\n      ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`\n      : undefined,\n    transition,\n    opacity: isDragging ? 0.6 : 1,\n  };\n\n  const { leading, pricing } = splitWidgets(widgets);\n  const orderLabel = String(index + 1).padStart(2, \"0\");\n\n  return (\n    <li\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        \"pz:group/prov pz:flex pz:items-center pz:gap-2.5 pz:rounded-md pz:px-1.5 pz:py-1.5\",\n        \"pz:hover:bg-muted/60 pz:transition-colors\",\n      )}\n      {...attributes}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Drag to reorder\"\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:size-4 pz:cursor-grab pz:touch-none\",\n          \"pz:text-muted-foreground/60 pz:hover:text-foreground pz:transition-colors\",\n        )}\n        {...listeners}\n      >\n        <IconGripVertical width={11} height={14} />\n      </button>\n      {leading && (\n        <span className=\"pz:flex pz:items-center pz:shrink-0\">\n          <WidgetStrip widgets={leading} size={18} />\n        </span>\n      )}\n      <span className=\"pz:text-sm pz:font-medium pz:text-foreground pz:flex-1 pz:truncate\">\n        {label}\n      </span>\n      {pricing && (\n        <span className=\"pz:text-xs pz:text-muted-foreground pz:tabular-nums\">\n          {pricing.credits} cr\n        </span>\n      )}\n      <span\n        aria-hidden\n        className={cn(\n          \"pz:inline-flex pz:items-center pz:justify-center pz:min-w-7 pz:h-5 pz:px-1.5\",\n          \"pz:rounded-full pz:bg-muted pz:text-muted-foreground pz:text-[10.5px]\",\n          \"pz:font-medium pz:tabular-nums\",\n        )}\n      >\n        {orderLabel}\n      </span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${label}`}\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:size-5 pz:rounded\",\n          \"pz:text-muted-foreground/70\",\n          \"pz:hover:bg-destructive/10 pz:hover:text-destructive pz:transition-colors\",\n        )}\n      >\n        <XIcon className=\"pz:size-3\" />\n      </button>\n    </li>\n  );\n}\n\nfunction AddProviderControl({\n  options,\n  excluded,\n  onAdd,\n  ariaInvalid,\n}: {\n  options: ProviderOption[];\n  excluded: string[];\n  onAdd: (value: string) => void;\n  ariaInvalid?: boolean;\n}) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const excludedSet = useMemo(() => new Set(excluded), [excluded]);\n  const available = useMemo(\n    () => options.filter((o) => !excludedSet.has(o.value)),\n    [options, excludedSet],\n  );\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return available;\n    return available.filter(\n      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),\n    );\n  }, [available, query]);\n\n  if (available.length === 0 && excluded.length === 0) {\n    return (\n      <div className=\"pz:text-xs pz:text-muted-foreground pz:px-1.5 pz:py-2\">\n        No providers available\n      </div>\n    );\n  }\n\n  if (available.length === 0) return null;\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(next) => {\n        setOpen(next);\n        if (!next) setQuery(\"\");\n      }}\n    >\n      <PopoverTrigger\n        aria-invalid={ariaInvalid || undefined}\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:gap-1.5 pz:w-full\",\n          \"pz:px-2.5 pz:py-1.5 pz:mt-1 pz:rounded-md\",\n          \"pz:border pz:border-dashed pz:border-input pz:bg-transparent\",\n          \"pz:text-xs pz:text-muted-foreground\",\n          \"pz:hover:bg-muted/60 pz:hover:text-foreground pz:hover:border-muted-foreground/40\",\n          \"pz:transition-colors pz:cursor-pointer\",\n        )}\n      >\n        <IconPlus width={12} height={12} />\n        Add provider\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"pz:w-(--anchor-width) pz:p-0 pz:gap-0\">\n        <div className=\"pz:flex pz:items-center pz:gap-1.5 pz:px-2.5 pz:py-2 pz:border-b pz:border-border\">\n          <SearchIcon className=\"pz:size-3.5 pz:text-muted-foreground pz:shrink-0\" />\n          <input\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search providers…\"\n            // biome-ignore lint/a11y/noAutofocus: popover-scoped picker\n            autoFocus\n            className=\"pz:flex-1 pz:bg-transparent pz:outline-none pz:text-sm pz:placeholder:text-muted-foreground/70\"\n          />\n        </div>\n        <ul className=\"pz:flex pz:flex-col pz:p-1 pz:max-h-72 pz:overflow-auto pz:list-none pz:m-0\">\n          {filtered.length === 0 && (\n            <li className=\"pz:px-2 pz:py-3 pz:text-center pz:text-xs pz:text-muted-foreground\">\n              No providers\n            </li>\n          )}\n          {filtered.map((option) => {\n            const { leading, pricing } = splitWidgets(option.widgets);\n            return (\n              <li key={option.value} className=\"pz:contents\">\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onAdd(option.value);\n                    setOpen(false);\n                    setQuery(\"\");\n                  }}\n                  className={cn(\n                    \"pz:flex pz:items-center pz:gap-2 pz:w-full pz:text-left\",\n                    \"pz:px-2 pz:py-1.5 pz:rounded-md pz:text-sm\",\n                    \"pz:hover:bg-accent pz:hover:text-accent-foreground\",\n                    \"pz:transition-colors pz:cursor-pointer\",\n                  )}\n                >\n                  {leading && (\n                    <span className=\"pz:flex pz:items-center pz:shrink-0\">\n                      <WidgetStrip widgets={leading} size={16} />\n                    </span>\n                  )}\n                  <span className=\"pz:flex-1 pz:truncate\">{option.label}</span>\n                  {pricing && (\n                    <span className=\"pz:text-xs pz:text-muted-foreground pz:tabular-nums\">\n                      {pricing.credits} cr\n                    </span>\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"providers-input.mjs","names":["XIcon","SearchIcon"],"sources":["../../../../src/components/defaults/adapters/providers-input.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { SortableContext, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport type { ProviderName, WidgetsByKind } from \"@pipe0/base\";\nimport { Search as SearchIcon, X as XIcon } from \"lucide-react\";\nimport { type CSSProperties, useMemo, useState } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { AvatarGroup } from \"../../../widgets/avatar-group.js\";\nimport { PricingBadge } from \"../../../widgets/pricing-badge.js\";\nimport { WidgetStrip } from \"../../../widgets/widget-strip.js\";\nimport { IconGripVertical, IconPlus } from \"../../internal/icons.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui/popover.js\";\n\ntype ProviderOption = {\n  value: string;\n  label: string;\n  widgets?: WidgetsByKind;\n};\n\nfunction splitWidgets(widgets: WidgetsByKind | undefined): {\n  providerName: ProviderName | undefined;\n  leading: WidgetsByKind | undefined;\n  pricing: WidgetsByKind[\"pricing\"] | undefined;\n} {\n  if (!widgets) return { providerName: undefined, leading: undefined, pricing: undefined };\n  const { pricing, provider_logo, ...rest } = widgets;\n  const hasLeading = Object.values(rest).some((v) => v != null);\n  return {\n    providerName: provider_logo?.provider,\n    leading: hasLeading ? rest : undefined,\n    pricing,\n  };\n}\n\nfunction LeadingAvatar({\n  providerName,\n  leading,\n}: {\n  providerName: ProviderName | undefined;\n  leading: WidgetsByKind | undefined;\n}) {\n  if (providerName) {\n    return <AvatarGroup providers={[providerName]} size=\"sm\" className=\"pz:shrink-0\" />;\n  }\n  if (leading) {\n    return (\n      <span className=\"pz:flex pz:items-center pz:shrink-0\">\n        <WidgetStrip widgets={leading} size={18} />\n      </span>\n    );\n  }\n  return null;\n}\n\n/**\n * Provider waterfall — vertical, ordered list of providers tried sequentially\n * until a valid result is returned. The list makes the running order legible\n * (numeric badge per row, drag-to-reorder), and the credit widget per\n * provider stays visible.\n */\nexport function ProvidersInputAdapter(field: FieldHandle<\"providers_input\">) {\n  const selected: string[] = useMemo(\n    () => (field.value ?? []).map((p: { provider: string }) => p.provider),\n    [field.value],\n  );\n\n  const options = field.options ?? [];\n  const optionByValue = useMemo(() => {\n    const map = new Map<string, ProviderOption>();\n    for (const o of options) map.set(o.value, o);\n    return map;\n  }, [options]);\n\n  const maxItems = field.meta.maxItems;\n  const atMax = maxItems !== undefined && selected.length >= maxItems;\n\n  const setValue = (next: string[]) =>\n    field.setValue(next.map((provider) => ({ provider })));\n\n  const handleRemove = (value: string) => setValue(selected.filter((v) => v !== value));\n  const handleAdd = (value: string) => {\n    if (selected.includes(value)) return;\n    setValue([...selected, value]);\n  };\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n    if (!over || active.id === over.id) return;\n    const from = selected.indexOf(String(active.id));\n    const to = selected.indexOf(String(over.id));\n    if (from === -1 || to === -1) return;\n    const next = [...selected];\n    const [moved] = next.splice(from, 1);\n    next.splice(to, 0, moved);\n    setValue(next);\n  };\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      {selected.length > 0 && (\n        <DndContext\n          sensors={sensors}\n          collisionDetection={closestCenter}\n          onDragEnd={handleDragEnd}\n        >\n          <SortableContext items={selected} strategy={verticalListSortingStrategy}>\n            <ul className=\"pz:flex pz:flex-col pz:gap-0.5 pz:list-none pz:m-0 pz:p-0\">\n              {selected.map((value, index) => {\n                const option = optionByValue.get(value);\n                return (\n                  <ProviderRow\n                    key={value}\n                    value={value}\n                    index={index}\n                    label={option?.label ?? value}\n                    widgets={option?.widgets}\n                    onRemove={() => handleRemove(value)}\n                  />\n                );\n              })}\n            </ul>\n          </SortableContext>\n        </DndContext>\n      )}\n      {!atMax && (\n        <AddProviderControl\n          options={options}\n          excluded={selected}\n          onAdd={handleAdd}\n          ariaInvalid={!!field.error}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ProviderRow({\n  value,\n  index,\n  label,\n  widgets,\n  onRemove,\n}: {\n  value: string;\n  index: number;\n  label: string;\n  widgets?: WidgetsByKind;\n  onRemove: () => void;\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: value,\n  });\n  const style: CSSProperties = {\n    transform: transform\n      ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`\n      : undefined,\n    transition,\n    opacity: isDragging ? 0.6 : 1,\n  };\n\n  const { providerName, leading, pricing } = splitWidgets(widgets);\n  const orderLabel = String(index + 1).padStart(2, \"0\");\n\n  return (\n    <li\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        \"pz:group/prov pz:flex pz:items-center pz:gap-2.5 pz:rounded-md pz:px-1.5 pz:py-1.5\",\n        \"pz:hover:bg-muted/60 pz:transition-colors\",\n      )}\n      {...attributes}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Drag to reorder\"\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:size-4 pz:cursor-grab pz:touch-none\",\n          \"pz:text-muted-foreground/60 pz:hover:text-foreground pz:transition-colors\",\n        )}\n        {...listeners}\n      >\n        <IconGripVertical width={11} height={14} />\n      </button>\n      <LeadingAvatar providerName={providerName} leading={leading} />\n      <span className=\"pz:text-sm pz:font-medium pz:text-foreground pz:flex-1 pz:truncate\">\n        {label}\n      </span>\n      {pricing && <PricingBadge credits={pricing.credits} />}\n      <span\n        aria-hidden\n        className={cn(\n          \"pz:inline-flex pz:items-center pz:justify-center pz:min-w-7 pz:h-5 pz:px-1.5\",\n          \"pz:rounded-full pz:bg-muted pz:text-muted-foreground pz:text-[10.5px]\",\n          \"pz:font-medium pz:tabular-nums\",\n        )}\n      >\n        {orderLabel}\n      </span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${label}`}\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:size-5 pz:rounded\",\n          \"pz:text-muted-foreground/70\",\n          \"pz:hover:bg-destructive/10 pz:hover:text-destructive pz:transition-colors\",\n        )}\n      >\n        <XIcon className=\"pz:size-3\" />\n      </button>\n    </li>\n  );\n}\n\nfunction AddProviderControl({\n  options,\n  excluded,\n  onAdd,\n  ariaInvalid,\n}: {\n  options: ProviderOption[];\n  excluded: string[];\n  onAdd: (value: string) => void;\n  ariaInvalid?: boolean;\n}) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const excludedSet = useMemo(() => new Set(excluded), [excluded]);\n  const available = useMemo(\n    () => options.filter((o) => !excludedSet.has(o.value)),\n    [options, excludedSet],\n  );\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return available;\n    return available.filter(\n      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),\n    );\n  }, [available, query]);\n\n  if (available.length === 0 && excluded.length === 0) {\n    return (\n      <div className=\"pz:text-xs pz:text-muted-foreground pz:px-1.5 pz:py-2\">\n        No providers available\n      </div>\n    );\n  }\n\n  if (available.length === 0) return null;\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(next) => {\n        setOpen(next);\n        if (!next) setQuery(\"\");\n      }}\n    >\n      <PopoverTrigger\n        aria-invalid={ariaInvalid || undefined}\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:gap-1.5 pz:w-full\",\n          \"pz:px-2.5 pz:py-1.5 pz:mt-1 pz:rounded-md\",\n          \"pz:border pz:border-dashed pz:border-input pz:bg-transparent\",\n          \"pz:text-xs pz:text-muted-foreground\",\n          \"pz:hover:bg-muted/60 pz:hover:text-foreground pz:hover:border-muted-foreground/40\",\n          \"pz:transition-colors pz:cursor-pointer\",\n        )}\n      >\n        <IconPlus width={12} height={12} />\n        Add provider\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"pz:w-(--anchor-width) pz:p-0 pz:gap-0\">\n        <div className=\"pz:flex pz:items-center pz:gap-1.5 pz:px-2.5 pz:py-2 pz:border-b pz:border-border\">\n          <SearchIcon className=\"pz:size-3.5 pz:text-muted-foreground pz:shrink-0\" />\n          <input\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search providers…\"\n            // biome-ignore lint/a11y/noAutofocus: popover-scoped picker\n            autoFocus\n            className=\"pz:flex-1 pz:bg-transparent pz:outline-none pz:text-sm pz:placeholder:text-muted-foreground/70\"\n          />\n        </div>\n        <ul className=\"pz:flex pz:flex-col pz:p-1 pz:max-h-72 pz:overflow-auto pz:list-none pz:m-0\">\n          {filtered.length === 0 && (\n            <li className=\"pz:px-2 pz:py-3 pz:text-center pz:text-xs pz:text-muted-foreground\">\n              No providers\n            </li>\n          )}\n          {filtered.map((option) => {\n            const { providerName, leading, pricing } = splitWidgets(option.widgets);\n            return (\n              <li key={option.value} className=\"pz:contents\">\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onAdd(option.value);\n                    setOpen(false);\n                    setQuery(\"\");\n                  }}\n                  className={cn(\n                    \"pz:flex pz:items-center pz:gap-2 pz:w-full pz:text-left\",\n                    \"pz:px-2 pz:py-1.5 pz:rounded-md pz:text-sm\",\n                    \"pz:hover:bg-accent pz:hover:text-accent-foreground\",\n                    \"pz:transition-colors pz:cursor-pointer\",\n                  )}\n                >\n                  <LeadingAvatar providerName={providerName} leading={leading} />\n                  <span className=\"pz:flex-1 pz:truncate\">{option.label}</span>\n                  {pricing && <PricingBadge credits={pricing.credits} />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAS,aAAa,SAIpB;AACA,KAAI,CAAC,QAAS,QAAO;EAAE,cAAc;EAAW,SAAS;EAAW,SAAS;EAAW;CACxF,MAAM,EAAE,SAAS,eAAe,GAAG,SAAS;CAC5C,MAAM,aAAa,OAAO,OAAO,KAAK,CAAC,MAAM,MAAM,KAAK,KAAK;AAC7D,QAAO;EACL,cAAc,eAAe;EAC7B,SAAS,aAAa,OAAO;EAC7B;EACD;;AAGH,SAAS,cAAc,EACrB,cACA,WAIC;AACD,KAAI,aACF,QAAO,oBAAC,aAAD;EAAa,WAAW,CAAC,aAAa;EAAE,MAAK;EAAK,WAAU;EAAgB;AAErF,KAAI,QACF,QACE,oBAAC,QAAD;EAAM,WAAU;YACd,oBAAC,aAAD;GAAa,SAAS;GAAS,MAAM;GAAM;EACtC;AAGX,QAAO;;;;;;;;AAST,SAAgB,sBAAsB,OAAuC;CAC3E,MAAM,WAAqB,eAClB,MAAM,SAAS,EAAE,EAAE,KAAK,MAA4B,EAAE,SAAS,EACtE,CAAC,MAAM,MAAM,CACd;CAED,MAAM,UAAU,MAAM,WAAW,EAAE;CACnC,MAAM,gBAAgB,cAAc;EAClC,MAAM,sBAAM,IAAI,KAA6B;AAC7C,OAAK,MAAM,KAAK,QAAS,KAAI,IAAI,EAAE,OAAO,EAAE;AAC5C,SAAO;IACN,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,MAAM,KAAK;CAC5B,MAAM,QAAQ,aAAa,UAAa,SAAS,UAAU;CAE3D,MAAM,YAAY,SAChB,MAAM,SAAS,KAAK,KAAK,cAAc,EAAE,UAAU,EAAE,CAAC;CAExD,MAAM,gBAAgB,UAAkB,SAAS,SAAS,QAAQ,MAAM,MAAM,MAAM,CAAC;CACrF,MAAM,aAAa,UAAkB;AACnC,MAAI,SAAS,SAAS,MAAM,CAAE;AAC9B,WAAS,CAAC,GAAG,UAAU,MAAM,CAAC;;CAGhC,MAAM,UAAU,WACd,UAAU,eAAe,EAAE,sBAAsB,EAAE,UAAU,GAAG,EAAE,CAAC,EACnE,UAAU,eAAe,CAC1B;CAED,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AACzB,MAAI,CAAC,QAAQ,OAAO,OAAO,KAAK,GAAI;EACpC,MAAM,OAAO,SAAS,QAAQ,OAAO,OAAO,GAAG,CAAC;EAChD,MAAM,KAAK,SAAS,QAAQ,OAAO,KAAK,GAAG,CAAC;AAC5C,MAAI,SAAS,MAAM,OAAO,GAAI;EAC9B,MAAM,OAAO,CAAC,GAAG,SAAS;EAC1B,MAAM,CAAC,SAAS,KAAK,OAAO,MAAM,EAAE;AACpC,OAAK,OAAO,IAAI,GAAG,MAAM;AACzB,WAAS,KAAK;;AAGhB,QACE,qBAAC,OAAD;EAAK,WAAQ;EAAQ,WAAU;YAA/B,CACG,SAAS,SAAS,KACjB,oBAAC,YAAD;GACW;GACT,oBAAoB;GACpB,WAAW;aAEX,oBAAC,iBAAD;IAAiB,OAAO;IAAU,UAAU;cAC1C,oBAAC,MAAD;KAAI,WAAU;eACX,SAAS,KAAK,OAAO,UAAU;MAC9B,MAAM,SAAS,cAAc,IAAI,MAAM;AACvC,aACE,oBAAC,aAAD;OAES;OACA;OACP,OAAO,QAAQ,SAAS;OACxB,SAAS,QAAQ;OACjB,gBAAgB,aAAa,MAAM;OACnC,EANK,MAML;OAEJ;KACC;IACW;GACP,GAEd,CAAC,SACA,oBAAC,oBAAD;GACW;GACT,UAAU;GACV,OAAO;GACP,aAAa,CAAC,CAAC,MAAM;GACrB,EAEA;;;AAIV,SAAS,YAAY,EACnB,OACA,OACA,OACA,SACA,YAOC;CACD,MAAM,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAe,YAAY,EAC3F,IAAI,OACL,CAAC;CACF,MAAM,QAAuB;EAC3B,WAAW,YACP,eAAe,KAAK,MAAM,UAAU,EAAE,CAAC,MAAM,KAAK,MAAM,UAAU,EAAE,CAAC,UACrE;EACJ;EACA,SAAS,aAAa,KAAM;EAC7B;CAED,MAAM,EAAE,cAAc,SAAS,YAAY,aAAa,QAAQ;CAChE,MAAM,aAAa,OAAO,QAAQ,EAAE,CAAC,SAAS,GAAG,IAAI;AAErD,QACE,qBAAC,MAAD;EACE,KAAK;EACE;EACP,WAAW,GACT,sFACA,4CACD;EACD,GAAI;YAPN;GASE,oBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,WAAW,GACT,oFACA,4EACD;IACD,GAAI;cAEJ,oBAAC,kBAAD;KAAkB,OAAO;KAAI,QAAQ;KAAM;IACpC;GACT,oBAAC,eAAD;IAA6B;IAAuB;IAAW;GAC/D,oBAAC,QAAD;IAAM,WAAU;cACb;IACI;GACN,WAAW,oBAAC,cAAD,EAAc,SAAS,QAAQ,SAAW;GACtD,oBAAC,QAAD;IACE;IACA,WAAW,GACT,gFACA,yEACA,iCACD;cAEA;IACI;GACP,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,UAAU;IACtB,UAAU,MAAM;AACd,OAAE,iBAAiB;AACnB,eAAU;;IAEZ,WAAW,GACT,kEACA,+BACA,4EACD;cAED,oBAACA,GAAD,EAAO,WAAU,aAAc;IACxB;GACN;;;AAIT,SAAS,mBAAmB,EAC1B,SACA,UACA,OACA,eAMC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CAEtC,MAAM,cAAc,cAAc,IAAI,IAAI,SAAS,EAAE,CAAC,SAAS,CAAC;CAChE,MAAM,YAAY,cACV,QAAQ,QAAQ,MAAM,CAAC,YAAY,IAAI,EAAE,MAAM,CAAC,EACtD,CAAC,SAAS,YAAY,CACvB;CAED,MAAM,WAAW,cAAc;EAC7B,MAAM,IAAI,MAAM,MAAM,CAAC,aAAa;AACpC,MAAI,CAAC,EAAG,QAAO;AACf,SAAO,UAAU,QACd,MAAM,EAAE,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC,SAAS,EAAE,CAC9E;IACA,CAAC,WAAW,MAAM,CAAC;AAEtB,KAAI,UAAU,WAAW,KAAK,SAAS,WAAW,EAChD,QACE,oBAAC,OAAD;EAAK,WAAU;YAAwD;EAEjE;AAIV,KAAI,UAAU,WAAW,EAAG,QAAO;AAEnC,QACE,qBAAC,SAAD;EACQ;EACN,eAAe,SAAS;AACtB,WAAQ,KAAK;AACb,OAAI,CAAC,KAAM,UAAS,GAAG;;YAJ3B,CAOE,qBAAC,gBAAD;GACE,gBAAc,eAAe;GAC7B,WAAW,GACT,kEACA,6CACA,gEACA,uCACA,qFACA,yCACD;aATH,CAWE,oBAAC,UAAD;IAAU,OAAO;IAAI,QAAQ;IAAM,kBAEpB;MACjB,qBAAC,gBAAD;GAAgB,OAAM;GAAQ,WAAU;aAAxC,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAACC,QAAD,EAAY,WAAU,oDAAqD,GAC3E,oBAAC,SAAD;KACE,OAAO;KACP,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;KACzC,aAAY;KAEZ;KACA,WAAU;KACV,EACE;OACN,qBAAC,MAAD;IAAI,WAAU;cAAd,CACG,SAAS,WAAW,KACnB,oBAAC,MAAD;KAAI,WAAU;eAAqE;KAE9E,GAEN,SAAS,KAAK,WAAW;KACxB,MAAM,EAAE,cAAc,SAAS,YAAY,aAAa,OAAO,QAAQ;AACvE,YACE,oBAAC,MAAD;MAAuB,WAAU;gBAC/B,qBAAC,UAAD;OACE,MAAK;OACL,eAAe;AACb,cAAM,OAAO,MAAM;AACnB,gBAAQ,MAAM;AACd,iBAAS,GAAG;;OAEd,WAAW,GACT,2DACA,8CACA,sDACA,yCACD;iBAZH;QAcE,oBAAC,eAAD;SAA6B;SAAuB;SAAW;QAC/D,oBAAC,QAAD;SAAM,WAAU;mBAAyB,OAAO;SAAa;QAC5D,WAAW,oBAAC,cAAD,EAAc,SAAS,QAAQ,SAAW;QAC/C;;MACN,EAnBI,OAAO,MAmBX;MAEP,CACC;MACU;KACT"}

package/dist/components/defaults/catalog/layout.mjs

@@ -27,7 +27,7 @@ function DefaultCatalogRoot({ className, render, children, ...props }) {
 		render,
 		ref: portalRef,
 		props: mergeProps({
-			className: cn("pz:flex pz:flex-col pz:gap-4", classNames?.root, className),
+			className: cn("pz:flex pz:flex-col pz:gap-1", classNames?.root, className),
 			children: wrappedChildren,
 			"data-p0": "catalog"
 		}, props)

package/dist/components/defaults/catalog/layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/defaults/catalog/layout.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type ReactNode, useCallback, useState } from \"react\";\nimport { useCatalogConfig } from \"../../../context/catalog-config-context.js\";\nimport { PortalContainerContext } from \"../../../context/portal-container-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\n\n/**\n * Outermost catalog wrapper. Owns the `PortalContainerContext.Provider` so\n * elements-react popovers/dropdowns mounted inside the catalog tree portal\n * back into this container — keeping them inside the catalog's CSS scope.\n */\nexport function DefaultCatalogRoot({\n  className,\n  render,\n  children,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n  const portalRef = useCallback((node: HTMLElement | null) => {\n    setPortalContainer(node);\n  }, []);\n\n  const wrappedChildren: ReactNode = (\n    <PortalContainerContext.Provider value={portalContainer}>\n      {children}\n    </PortalContainerContext.Provider>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    ref: portalRef,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:flex pz:flex-col pz:gap-4\", classNames?.root, className),\n        children: wrappedChildren,\n        ...({ \"data-p0\": \"catalog\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\nexport function DefaultCatalogList({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"pz:grid pz:gap-3 pz:grid-cols-1 pz:sm:grid-cols-2 pz:lg:grid-cols-3\",\n          classNames?.list,\n          className,\n        ),\n        ...({ \"data-p0\": \"catalog-list\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\nexport function DefaultCatalogFilters({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:flex pz:flex-wrap pz:gap-2\", classNames?.filters, className),\n        ...({ \"data-p0\": \"catalog-filters\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,SAAgB,mBAAmB,EACjC,WACA,QACA,UACA,GAAG,SAC+B;CAClC,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAChF,MAAM,YAAY,aAAa,SAA6B;AAC1D,qBAAmB,KAAK;IACvB,EAAE,CAAC;CAEN,MAAM,kBACJ,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;EACrC;EAC+B;AAGpC,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAAK;EACL,OAAO,WACL;GACE,WAAW,GAAG,gCAAgC,YAAY,MAAM,UAAU;GAC1E,UAAU;GACJ,WAAW;GAClB,EACD,MACD;EACF,CAAC;;AA0BJ,SAAgB,sBAAsB,EACpC,WACA,QACA,GAAG,SAC+B;CAClC,MAAM,EAAE,eAAe,kBAAkB;AACzC,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,WAAW,GAAG,iCAAiC,YAAY,SAAS,UAAU;GACxE,WAAW;GAClB,EACD,MACD;EACF,CAAC"}
+{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/defaults/catalog/layout.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type ReactNode, useCallback, useState } from \"react\";\nimport { useCatalogConfig } from \"../../../context/catalog-config-context.js\";\nimport { PortalContainerContext } from \"../../../context/portal-container-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\n\n/**\n * Outermost catalog wrapper. Owns the `PortalContainerContext.Provider` so\n * elements-react popovers/dropdowns mounted inside the catalog tree portal\n * back into this container — keeping them inside the catalog's CSS scope.\n */\nexport function DefaultCatalogRoot({\n  className,\n  render,\n  children,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n  const portalRef = useCallback((node: HTMLElement | null) => {\n    setPortalContainer(node);\n  }, []);\n\n  const wrappedChildren: ReactNode = (\n    <PortalContainerContext.Provider value={portalContainer}>\n      {children}\n    </PortalContainerContext.Provider>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    ref: portalRef,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:flex pz:flex-col pz:gap-1\", classNames?.root, className),\n        children: wrappedChildren,\n        ...({ \"data-p0\": \"catalog\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\nexport function DefaultCatalogList({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"pz:grid pz:gap-3 pz:grid-cols-1 pz:sm:grid-cols-2 pz:lg:grid-cols-3\",\n          classNames?.list,\n          className,\n        ),\n        ...({ \"data-p0\": \"catalog-list\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n\nexport function DefaultCatalogFilters({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const { classNames } = useCatalogConfig();\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:flex pz:flex-wrap pz:gap-2\", classNames?.filters, className),\n        ...({ \"data-p0\": \"catalog-filters\" } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,SAAgB,mBAAmB,EACjC,WACA,QACA,UACA,GAAG,SAC+B;CAClC,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAChF,MAAM,YAAY,aAAa,SAA6B;AAC1D,qBAAmB,KAAK;IACvB,EAAE,CAAC;CAEN,MAAM,kBACJ,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;EACrC;EAC+B;AAGpC,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAAK;EACL,OAAO,WACL;GACE,WAAW,GAAG,gCAAgC,YAAY,MAAM,UAAU;GAC1E,UAAU;GACJ,WAAW;GAClB,EACD,MACD;EACF,CAAC;;AA0BJ,SAAgB,sBAAsB,EACpC,WACA,QACA,GAAG,SAC+B;CAClC,MAAM,EAAE,eAAe,kBAAkB;AACzC,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,WAAW,GAAG,iCAAiC,YAAY,SAAS,UAAU;GACxE,WAAW;GAClB,EACD,MACD;EACF,CAAC"}

package/dist/components/defaults/layout/group.mjs

@@ -16,7 +16,8 @@ function DefaultGroup({ group, children, className, render, ...props }) {
 	const { classNames } = useFormConfig();
 	const [expanded, setExpanded] = useState(group.defaultExpand);
 	const hasErrors = group.errorCount > 0;
-	const countLabel = group.dirtyCount > 0 ? `${group.dirtyCount} modified` : group.setCount > 0 ? `${group.setCount} set` : null;
+	const showDirty = group.dirtyCount > 0;
+	const countLabel = showDirty ? `${group.dirtyCount} modified` : group.setCount > 0 ? `${group.setCount} set` : null;
 	const defaultContent = /* @__PURE__ */ jsx(Accordion.Root, {
 		value: expanded ? [ITEM_VALUE] : [],
 		onValueChange: (next) => setExpanded(next.includes(ITEM_VALUE)),
@@ -46,7 +47,7 @@ function DefaultGroup({ group, children, className, render, ...props }) {
 						className: "pz:flex pz:items-center pz:gap-2",
 						children: [
 							countLabel && /* @__PURE__ */ jsx(Badge, {
-								variant: "secondary",
+								variant: showDirty ? "default" : "secondary",
 								"data-p0": "group-badge",
 								children: countLabel
 							}),
@@ -71,7 +72,7 @@ function DefaultGroup({ group, children, className, render, ...props }) {
 				"data-p0": "group-content",
 				className: "pz:overflow-hidden pz:border-t pz:border-border pz:data-open:animate-accordion-down pz:data-closed:animate-accordion-up",
 				children: /* @__PURE__ */ jsx("div", {
-					className: classNames?.groupContent ?? cn("pz:flex pz:flex-col pz:gap-3 pz:px-3.5 pz:pb-3.5 pz:pt-2", "pz:h-(--accordion-panel-height) pz:data-ending-style:h-0 pz:data-starting-style:h-0"),
+					className: classNames?.groupContent ?? cn("pz:flex pz:flex-col pz:gap-3 pz:px-3.5 pz:pb-2 pz:pt-2", "pz:h-(--accordion-panel-height) pz:data-ending-style:h-0 pz:data-starting-style:h-0"),
 					children
 				})
 			})]

package/dist/components/defaults/layout/group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":["AccordionPrimitive"],"sources":["../../../../src/components/defaults/layout/group.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useState } from \"react\";\nimport { useFormConfig } from \"../../../context/form-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { AnyFieldProps } from \"../../../types/field-props.js\";\nimport type { FormGroupHandle } from \"../../../types/form-handle.js\";\nimport { IconGlyph } from \"../../../widgets/icon-glyph.js\";\nimport { HoverInfo } from \"../../hover-info.js\";\nimport { IconChevronDown } from \"../../internal/icons.js\";\nimport { Badge } from \"../../ui/badge.js\";\n\nexport interface DefaultGroupState {\n  expanded: boolean;\n  setExpanded: (expanded: boolean) => void;\n  fields: ReadonlyArray<AnyFieldProps>;\n  hasErrors: boolean;\n  errorCount: number;\n  setCount: number;\n  dirtyCount: number;\n}\n\nexport interface DefaultGroupProps extends useRender.ComponentProps<\"div\", DefaultGroupState> {\n  group: FormGroupHandle;\n}\n\nconst ITEM_VALUE = \"group\";\n\nexport function DefaultGroup({ group, children, className, render, ...props }: DefaultGroupProps) {\n  const { classNames } = useFormConfig();\n  // Track open state alongside the accordion so consumers reading\n  // `state.expanded` (via render-prop) still get the right value.\n  const [expanded, setExpanded] = useState(group.defaultExpand);\n  const hasErrors = group.errorCount > 0;\n  const showDirty = group.dirtyCount > 0;\n  const countLabel = showDirty\n    ? `${group.dirtyCount} modified`\n    : group.setCount > 0\n      ? `${group.setCount} set`\n      : null;\n\n  const defaultContent = (\n    <AccordionPrimitive.Root\n      value={expanded ? [ITEM_VALUE] : []}\n      onValueChange={(next) => setExpanded(next.includes(ITEM_VALUE))}\n    >\n      <AccordionPrimitive.Item value={ITEM_VALUE}>\n        <AccordionPrimitive.Header className=\"pz:flex\">\n          <AccordionPrimitive.Trigger\n            data-p0=\"group-header\"\n            className={\n              classNames?.groupHeader ??\n              cn(\n                \"pz:group/group-trigger\",\n                \"pz:flex pz:items-center pz:justify-between pz:gap-4 pz:w-full\",\n                \"pz:px-3.5 pz:py-2.5 pz:cursor-pointer pz:text-sm pz:font-medium pz:text-left\",\n                \"pz:transition-colors pz:hover:bg-muted/60\",\n                \"pz:aria-expanded:hover:bg-transparent\",\n                \"pz:focus-visible:outline-none\",\n                hasErrors && \"pz:text-destructive pz:bg-destructive/10\",\n              )\n            }\n          >\n            <span className=\"pz:flex pz:items-center pz:gap-2\">\n              {group.iconKey && (\n                <IconGlyph\n                  keyName={group.iconKey}\n                  size={14}\n                  className=\"pz:text-muted-foreground pz:shrink-0\"\n                />\n              )}\n              {group.label ?? group.key}\n              {group.description && (\n                <span onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>\n                  <HoverInfo>{group.description}</HoverInfo>\n                </span>\n              )}\n            </span>\n            <span className=\"pz:flex pz:items-center pz:gap-2\">\n              {countLabel && (\n                <Badge variant=\"secondary\" data-p0=\"group-badge\">\n                  {countLabel}\n                </Badge>\n              )}\n              {hasErrors && (\n                <Badge variant=\"destructive\" data-p0=\"group-error-badge\">\n                  {group.errorCount} {group.errorCount === 1 ? \"error\" : \"errors\"}\n                </Badge>\n              )}\n              <IconChevronDown\n                width={16}\n                height={16}\n                className={cn(\n                  \"pz:text-muted-foreground pz:transition-transform pz:duration-150\",\n                  \"pz:group-aria-expanded/group-trigger:rotate-180\",\n                )}\n              />\n            </span>\n          </AccordionPrimitive.Trigger>\n        </AccordionPrimitive.Header>\n        <AccordionPrimitive.Panel\n          data-p0=\"group-content\"\n          // The library ships keyframes via `tw-animate-css` —\n          // `animate-accordion-down` / `animate-accordion-up` plus the\n          // `--accordion-panel-height` var that base-ui populates on the\n          // panel give a smooth height transition without JS measuring.\n          className=\"pz:overflow-hidden pz:border-t pz:border-border pz:data-open:animate-accordion-down pz:data-closed:animate-accordion-up\"\n        >\n          <div\n            className={\n              classNames?.groupContent ??\n              cn(\n                \"pz:flex pz:flex-col pz:gap-3 pz:px-3.5 pz:pb-3.5 pz:pt-2\",\n                \"pz:h-(--accordion-panel-height) pz:data-ending-style:h-0 pz:data-starting-style:h-0\",\n              )\n            }\n          >\n            {children}\n          </div>\n        </AccordionPrimitive.Panel>\n      </AccordionPrimitive.Item>\n    </AccordionPrimitive.Root>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: {\n      expanded,\n      setExpanded,\n      fields: group.fields,\n      hasErrors,\n      errorCount: group.errorCount,\n      setCount: group.setCount,\n      dirtyCount: group.dirtyCount,\n    },\n    stateAttributesMapping: {\n      setExpanded: () => null,\n      fields: () => null,\n    },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          classNames?.group ??\n            cn(\n              \"pz:flex pz:flex-col pz:bg-card pz:border pz:border-border pz:rounded-lg pz:overflow-hidden\",\n              hasErrors && \"pz:border-destructive\",\n            ),\n          className,\n        ),\n        children: defaultContent,\n        ...({\n          \"data-p0\": \"group\",\n          \"data-p0-group\": group.key,\n          \"data-p0-expanded\": String(expanded),\n        } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,aAAa;AAEnB,SAAgB,aAAa,EAAE,OAAO,UAAU,WAAW,QAAQ,GAAG,SAA4B;CAChG,MAAM,EAAE,eAAe,eAAe;CAGtC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM,cAAc;CAC7D,MAAM,YAAY,MAAM,aAAa;CAErC,MAAM,aADY,MAAM,aAAa,IAEjC,GAAG,MAAM,WAAW,aACpB,MAAM,WAAW,IACf,GAAG,MAAM,SAAS,QAClB;CAEN,MAAM,iBACJ,oBAACA,UAAmB,MAApB;EACE,OAAO,WAAW,CAAC,WAAW,GAAG,EAAE;EACnC,gBAAgB,SAAS,YAAY,KAAK,SAAS,WAAW,CAAC;YAE/D,qBAACA,UAAmB,MAApB;GAAyB,OAAO;aAAhC,CACE,oBAACA,UAAmB,QAApB;IAA2B,WAAU;cACnC,qBAACA,UAAmB,SAApB;KACE,WAAQ;KACR,WACE,YAAY,eACZ,GACE,0BACA,iEACA,gFACA,6CACA,yCACA,iCACA,aAAa,2CACd;eAZL,CAeE,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,MAAM,WACL,oBAAC,WAAD;QACE,SAAS,MAAM;QACf,MAAM;QACN,WAAU;QACV;OAEH,MAAM,SAAS,MAAM;OACrB,MAAM,eACL,oBAAC,QAAD;QAAM,UAAU,MAAM,EAAE,iBAAiB;QAAE,YAAY,MAAM,EAAE,iBAAiB;kBAC9E,oBAAC,WAAD,YAAY,MAAM,aAAwB;QACrC;OAEJ;SACP,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,cACC,oBAAC,OAAD;QAAO,SAAQ;QAAY,WAAQ;kBAChC;QACK;OAET,aACC,qBAAC,OAAD;QAAO,SAAQ;QAAc,WAAQ;kBAArC;SACG,MAAM;SAAW;SAAE,MAAM,eAAe,IAAI,UAAU;SACjD;;OAEV,oBAAC,iBAAD;QACE,OAAO;QACP,QAAQ;QACR,WAAW,GACT,oEACA,kDACD;QACD;OACG;QACoB;;IACH,GAC5B,oBAACA,UAAmB,OAApB;IACE,WAAQ;IAKR,WAAU;cAEV,oBAAC,OAAD;KACE,WACE,YAAY,gBACZ,GACE,4DACA,sFACD;KAGF;KACG;IACmB,EACH;;EACF;AAG5B,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL;GACA;GACA,QAAQ,MAAM;GACd;GACA,YAAY,MAAM;GAClB,UAAU,MAAM;GAChB,YAAY,MAAM;GACnB;EACD,wBAAwB;GACtB,mBAAmB;GACnB,cAAc;GACf;EACD,OAAO,WACL;GACE,WAAW,GACT,YAAY,SACV,GACE,8FACA,aAAa,wBACd,EACH,UACD;GACD,UAAU;GAER,WAAW;GACX,iBAAiB,MAAM;GACvB,oBAAoB,OAAO,SAAS;GAEvC,EACD,MACD;EACF,CAAC"}
+{"version":3,"file":"group.mjs","names":["AccordionPrimitive"],"sources":["../../../../src/components/defaults/layout/group.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useState } from \"react\";\nimport { useFormConfig } from \"../../../context/form-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { AnyFieldProps } from \"../../../types/field-props.js\";\nimport type { FormGroupHandle } from \"../../../types/form-handle.js\";\nimport { IconGlyph } from \"../../../widgets/icon-glyph.js\";\nimport { HoverInfo } from \"../../hover-info.js\";\nimport { IconChevronDown } from \"../../internal/icons.js\";\nimport { Badge } from \"../../ui/badge.js\";\n\nexport interface DefaultGroupState {\n  expanded: boolean;\n  setExpanded: (expanded: boolean) => void;\n  fields: ReadonlyArray<AnyFieldProps>;\n  hasErrors: boolean;\n  errorCount: number;\n  setCount: number;\n  dirtyCount: number;\n}\n\nexport interface DefaultGroupProps extends useRender.ComponentProps<\"div\", DefaultGroupState> {\n  group: FormGroupHandle;\n}\n\nconst ITEM_VALUE = \"group\";\n\nexport function DefaultGroup({ group, children, className, render, ...props }: DefaultGroupProps) {\n  const { classNames } = useFormConfig();\n  // Track open state alongside the accordion so consumers reading\n  // `state.expanded` (via render-prop) still get the right value.\n  const [expanded, setExpanded] = useState(group.defaultExpand);\n  const hasErrors = group.errorCount > 0;\n  const showDirty = group.dirtyCount > 0;\n  const countLabel = showDirty\n    ? `${group.dirtyCount} modified`\n    : group.setCount > 0\n      ? `${group.setCount} set`\n      : null;\n\n  const defaultContent = (\n    <AccordionPrimitive.Root\n      value={expanded ? [ITEM_VALUE] : []}\n      onValueChange={(next) => setExpanded(next.includes(ITEM_VALUE))}\n    >\n      <AccordionPrimitive.Item value={ITEM_VALUE}>\n        <AccordionPrimitive.Header className=\"pz:flex\">\n          <AccordionPrimitive.Trigger\n            data-p0=\"group-header\"\n            className={\n              classNames?.groupHeader ??\n              cn(\n                \"pz:group/group-trigger\",\n                \"pz:flex pz:items-center pz:justify-between pz:gap-4 pz:w-full\",\n                \"pz:px-3.5 pz:py-2.5 pz:cursor-pointer pz:text-sm pz:font-medium pz:text-left\",\n                \"pz:transition-colors pz:hover:bg-muted/60\",\n                \"pz:aria-expanded:hover:bg-transparent\",\n                \"pz:focus-visible:outline-none\",\n                hasErrors && \"pz:text-destructive pz:bg-destructive/10\",\n              )\n            }\n          >\n            <span className=\"pz:flex pz:items-center pz:gap-2\">\n              {group.iconKey && (\n                <IconGlyph\n                  keyName={group.iconKey}\n                  size={14}\n                  className=\"pz:text-muted-foreground pz:shrink-0\"\n                />\n              )}\n              {group.label ?? group.key}\n              {group.description && (\n                <span onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>\n                  <HoverInfo>{group.description}</HoverInfo>\n                </span>\n              )}\n            </span>\n            <span className=\"pz:flex pz:items-center pz:gap-2\">\n              {countLabel && (\n                <Badge variant={showDirty ? \"default\" : \"secondary\"} data-p0=\"group-badge\">\n                  {countLabel}\n                </Badge>\n              )}\n              {hasErrors && (\n                <Badge variant=\"destructive\" data-p0=\"group-error-badge\">\n                  {group.errorCount} {group.errorCount === 1 ? \"error\" : \"errors\"}\n                </Badge>\n              )}\n              <IconChevronDown\n                width={16}\n                height={16}\n                className={cn(\n                  \"pz:text-muted-foreground pz:transition-transform pz:duration-150\",\n                  \"pz:group-aria-expanded/group-trigger:rotate-180\",\n                )}\n              />\n            </span>\n          </AccordionPrimitive.Trigger>\n        </AccordionPrimitive.Header>\n        <AccordionPrimitive.Panel\n          data-p0=\"group-content\"\n          // The library ships keyframes via `tw-animate-css` —\n          // `animate-accordion-down` / `animate-accordion-up` plus the\n          // `--accordion-panel-height` var that base-ui populates on the\n          // panel give a smooth height transition without JS measuring.\n          className=\"pz:overflow-hidden pz:border-t pz:border-border pz:data-open:animate-accordion-down pz:data-closed:animate-accordion-up\"\n        >\n          <div\n            className={\n              classNames?.groupContent ??\n              cn(\n                \"pz:flex pz:flex-col pz:gap-3 pz:px-3.5 pz:pb-2 pz:pt-2\",\n                \"pz:h-(--accordion-panel-height) pz:data-ending-style:h-0 pz:data-starting-style:h-0\",\n              )\n            }\n          >\n            {children}\n          </div>\n        </AccordionPrimitive.Panel>\n      </AccordionPrimitive.Item>\n    </AccordionPrimitive.Root>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: {\n      expanded,\n      setExpanded,\n      fields: group.fields,\n      hasErrors,\n      errorCount: group.errorCount,\n      setCount: group.setCount,\n      dirtyCount: group.dirtyCount,\n    },\n    stateAttributesMapping: {\n      setExpanded: () => null,\n      fields: () => null,\n    },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          classNames?.group ??\n            cn(\n              \"pz:flex pz:flex-col pz:bg-card pz:border pz:border-border pz:rounded-lg pz:overflow-hidden\",\n              hasErrors && \"pz:border-destructive\",\n            ),\n          className,\n        ),\n        children: defaultContent,\n        ...({\n          \"data-p0\": \"group\",\n          \"data-p0-group\": group.key,\n          \"data-p0-expanded\": String(expanded),\n        } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,aAAa;AAEnB,SAAgB,aAAa,EAAE,OAAO,UAAU,WAAW,QAAQ,GAAG,SAA4B;CAChG,MAAM,EAAE,eAAe,eAAe;CAGtC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM,cAAc;CAC7D,MAAM,YAAY,MAAM,aAAa;CACrC,MAAM,YAAY,MAAM,aAAa;CACrC,MAAM,aAAa,YACf,GAAG,MAAM,WAAW,aACpB,MAAM,WAAW,IACf,GAAG,MAAM,SAAS,QAClB;CAEN,MAAM,iBACJ,oBAACA,UAAmB,MAApB;EACE,OAAO,WAAW,CAAC,WAAW,GAAG,EAAE;EACnC,gBAAgB,SAAS,YAAY,KAAK,SAAS,WAAW,CAAC;YAE/D,qBAACA,UAAmB,MAApB;GAAyB,OAAO;aAAhC,CACE,oBAACA,UAAmB,QAApB;IAA2B,WAAU;cACnC,qBAACA,UAAmB,SAApB;KACE,WAAQ;KACR,WACE,YAAY,eACZ,GACE,0BACA,iEACA,gFACA,6CACA,yCACA,iCACA,aAAa,2CACd;eAZL,CAeE,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,MAAM,WACL,oBAAC,WAAD;QACE,SAAS,MAAM;QACf,MAAM;QACN,WAAU;QACV;OAEH,MAAM,SAAS,MAAM;OACrB,MAAM,eACL,oBAAC,QAAD;QAAM,UAAU,MAAM,EAAE,iBAAiB;QAAE,YAAY,MAAM,EAAE,iBAAiB;kBAC9E,oBAAC,WAAD,YAAY,MAAM,aAAwB;QACrC;OAEJ;SACP,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,cACC,oBAAC,OAAD;QAAO,SAAS,YAAY,YAAY;QAAa,WAAQ;kBAC1D;QACK;OAET,aACC,qBAAC,OAAD;QAAO,SAAQ;QAAc,WAAQ;kBAArC;SACG,MAAM;SAAW;SAAE,MAAM,eAAe,IAAI,UAAU;SACjD;;OAEV,oBAAC,iBAAD;QACE,OAAO;QACP,QAAQ;QACR,WAAW,GACT,oEACA,kDACD;QACD;OACG;QACoB;;IACH,GAC5B,oBAACA,UAAmB,OAApB;IACE,WAAQ;IAKR,WAAU;cAEV,oBAAC,OAAD;KACE,WACE,YAAY,gBACZ,GACE,0DACA,sFACD;KAGF;KACG;IACmB,EACH;;EACF;AAG5B,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL;GACA;GACA,QAAQ,MAAM;GACd;GACA,YAAY,MAAM;GAClB,UAAU,MAAM;GAChB,YAAY,MAAM;GACnB;EACD,wBAAwB;GACtB,mBAAmB;GACnB,cAAc;GACf;EACD,OAAO,WACL;GACE,WAAW,GACT,YAAY,SACV,GACE,8FACA,aAAa,wBACd,EACH,UACD;GACD,UAAU;GAER,WAAW;GACX,iBAAiB,MAAM;GACvB,oBAAoB,OAAO,SAAS;GAEvC,EACD,MACD;EACF,CAAC"}

package/dist/components/defaults/layout/section.mjs

@@ -10,7 +10,7 @@ function DefaultSection({ section, children, className, render, hideLabel, ...pr
 	const hasErrors = section.groups.some((g) => g.errorCount > 0);
 	const defaultContent = /* @__PURE__ */ jsxs(Fragment, { children: [!hideLabel && section.label && /* @__PURE__ */ jsxs("div", {
 		"data-p0": "section-header",
-		className: classNames?.sectionLabel ?? "pz:flex pz:items-center pz:gap-2.5 pz:px-1",
+		className: classNames?.sectionLabel ?? "pz:flex pz:items-center pz:gap-2.5 pz:px-1 mb-0.5 mt-2 pz:select-none",
 		children: [/* @__PURE__ */ jsx("h2", {
 			className: cn("pz:text-[10.5px] pz:font-medium pz:tracking-[0.12em] pz:uppercase pz:text-muted-foreground pz:m-0 pz:whitespace-nowrap"),
 			children: section.label

package/dist/components/defaults/layout/section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"section.mjs","names":[],"sources":["../../../../src/components/defaults/layout/section.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useFormConfig } from \"../../../context/form-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FormGroupHandle, FormSectionHandle } from \"../../../types/form-handle.js\";\n\nexport interface DefaultSectionState {\n  groups: ReadonlyArray<FormGroupHandle>;\n  hasErrors: boolean;\n}\n\nexport interface DefaultSectionProps extends useRender.ComponentProps<\"div\", DefaultSectionState> {\n  section: FormSectionHandle;\n  /**\n   * Suppress the section's own header. Set when several consecutive sections\n   * share an umbrella label so the label only renders above the first\n   * section in the cluster (the renderer in `pipe-form/content.tsx` and\n   * `search-form/content.tsx` handles this automatically).\n   */\n  hideLabel?: boolean;\n}\n\nexport function DefaultSection({\n  section,\n  children,\n  className,\n  render,\n  hideLabel,\n  ...props\n}: DefaultSectionProps) {\n  const { classNames } = useFormConfig();\n  const hasErrors = section.groups.some((g) => g.errorCount > 0);\n\n  // Section descriptions are intentionally not rendered — the umbrella label\n  // alone is enough signal, and per-section descriptions add noise once\n  // multiple sections sit under one umbrella. Field-level descriptions cover\n  // the cases where copy is actually load-bearing.\n  const defaultContent = (\n    <>\n      {!hideLabel && section.label && (\n        <div\n          data-p0=\"section-header\"\n          className={classNames?.sectionLabel ?? \"pz:flex pz:items-center pz:gap-2.5 pz:px-1\"}\n        >\n          <h2\n            className={cn(\n              \"pz:text-[10.5px] pz:font-medium pz:tracking-[0.12em] pz:uppercase pz:text-muted-foreground pz:m-0 pz:whitespace-nowrap\",\n            )}\n          >\n            {section.label}\n          </h2>\n          <span aria-hidden className=\"pz:flex-1 pz:h-px pz:bg-border\" />\n        </div>\n      )}\n      {children}\n    </>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: { groups: section.groups, hasErrors },\n    stateAttributesMapping: {\n      groups: () => null,\n    },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(classNames?.section ?? \"pz:flex pz:flex-col pz:gap-2\", className),\n        children: defaultContent,\n        ...({\n          \"data-p0\": \"section\",\n          \"data-p0-section\": section.key,\n        } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,eAAe,EAC7B,SACA,UACA,WACA,QACA,WACA,GAAG,SACmB;CACtB,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,YAAY,QAAQ,OAAO,MAAM,MAAM,EAAE,aAAa,EAAE;CAM9D,MAAM,iBACJ,4CACG,CAAC,aAAa,QAAQ,SACrB,qBAAC,OAAD;EACE,WAAQ;EACR,WAAW,YAAY,gBAAgB;YAFzC,CAIE,oBAAC,MAAD;GACE,WAAW,GACT,yHACD;aAEA,QAAQ;GACN,GACL,oBAAC,QAAD;GAAM;GAAY,WAAU;GAAmC,EAC3D;KAEP,SACA;AAGL,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GAAE,QAAQ,QAAQ;GAAQ;GAAW;EAC5C,wBAAwB,EACtB,cAAc,MACf;EACD,OAAO,WACL;GACE,WAAW,GAAG,YAAY,WAAW,gCAAgC,UAAU;GAC/E,UAAU;GAER,WAAW;GACX,mBAAmB,QAAQ;GAE9B,EACD,MACD;EACF,CAAC"}
+{"version":3,"file":"section.mjs","names":[],"sources":["../../../../src/components/defaults/layout/section.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useFormConfig } from \"../../../context/form-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FormGroupHandle, FormSectionHandle } from \"../../../types/form-handle.js\";\n\nexport interface DefaultSectionState {\n  groups: ReadonlyArray<FormGroupHandle>;\n  hasErrors: boolean;\n}\n\nexport interface DefaultSectionProps extends useRender.ComponentProps<\"div\", DefaultSectionState> {\n  section: FormSectionHandle;\n  /**\n   * Suppress the section's own header. Set when several consecutive sections\n   * share an umbrella label so the label only renders above the first\n   * section in the cluster (the renderer in `pipe-form/content.tsx` and\n   * `search-form/content.tsx` handles this automatically).\n   */\n  hideLabel?: boolean;\n}\n\nexport function DefaultSection({\n  section,\n  children,\n  className,\n  render,\n  hideLabel,\n  ...props\n}: DefaultSectionProps) {\n  const { classNames } = useFormConfig();\n  const hasErrors = section.groups.some((g) => g.errorCount > 0);\n\n  // Section descriptions are intentionally not rendered — the umbrella label\n  // alone is enough signal, and per-section descriptions add noise once\n  // multiple sections sit under one umbrella. Field-level descriptions cover\n  // the cases where copy is actually load-bearing.\n  const defaultContent = (\n    <>\n      {!hideLabel && section.label && (\n        <div\n          data-p0=\"section-header\"\n          className={\n            classNames?.sectionLabel ??\n            \"pz:flex pz:items-center pz:gap-2.5 pz:px-1 mb-0.5 mt-2 pz:select-none\"\n          }\n        >\n          <h2\n            className={cn(\n              \"pz:text-[10.5px] pz:font-medium pz:tracking-[0.12em] pz:uppercase pz:text-muted-foreground pz:m-0 pz:whitespace-nowrap\",\n            )}\n          >\n            {section.label}\n          </h2>\n          <span aria-hidden className=\"pz:flex-1 pz:h-px pz:bg-border\" />\n        </div>\n      )}\n      {children}\n    </>\n  );\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    state: { groups: section.groups, hasErrors },\n    stateAttributesMapping: {\n      groups: () => null,\n    },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(classNames?.section ?? \"pz:flex pz:flex-col pz:gap-2\", className),\n        children: defaultContent,\n        ...({\n          \"data-p0\": \"section\",\n          \"data-p0-section\": section.key,\n        } as Record<string, string>),\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,eAAe,EAC7B,SACA,UACA,WACA,QACA,WACA,GAAG,SACmB;CACtB,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,YAAY,QAAQ,OAAO,MAAM,MAAM,EAAE,aAAa,EAAE;CAM9D,MAAM,iBACJ,4CACG,CAAC,aAAa,QAAQ,SACrB,qBAAC,OAAD;EACE,WAAQ;EACR,WACE,YAAY,gBACZ;YAJJ,CAOE,oBAAC,MAAD;GACE,WAAW,GACT,yHACD;aAEA,QAAQ;GACN,GACL,oBAAC,QAAD;GAAM;GAAY,WAAU;GAAmC,EAC3D;KAEP,SACA;AAGL,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GAAE,QAAQ,QAAQ;GAAQ;GAAW;EAC5C,wBAAwB,EACtB,cAAc,MACf;EACD,OAAO,WACL;GACE,WAAW,GAAG,YAAY,WAAW,gCAAgC,UAAU;GAC/E,UAAU;GAER,WAAW;GACX,mBAAmB,QAAQ;GAE9B,EACD,MACD;EACF,CAAC"}

package/dist/components/ui/button.d.mts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/ui/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "link" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+  variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
   size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Button$1({

package/dist/context/catalog-config-context.d.mts

@@ -23,16 +23,6 @@ interface CatalogProviderProps {
   components?: CatalogComponentOverrides;
   children: ReactNode;
 }
-/**
- * Provides customization to the catalog component tree. Nests — inner
- * providers override outer keys.
- *
- * ```tsx
- * <CatalogProvider classNames={{ card: "shadow-lg" }}>
- *   <PipeCatalog />
- * </CatalogProvider>
- * ```
- */
 declare function CatalogProvider({
   classNames,
   components,

package/dist/context/catalog-config-context.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"catalog-config-context.d.mts","names":[],"sources":["../../src/context/catalog-config-context.tsx"],"mappings":";;;;;UAIiB,aAAA;EACf,UAAA,GAAa,iBAAA;EACb,UAAA,GAAa,yBAAA;AAAA;AAAA,iBAKC,gBAAA,CAAA,GAAoB,aAAA;;;;;;iBASpB,WAAA,CAAA;EAAc;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAIhD,oBAAA;EACf,UAAA,GAAa,iBAAA;EACb,UAAA,GAAa,yBAAA;EACb,QAAA,EAAU,SAAA;AAAA;AAPZ;;;;;;;;;;AAAA,iBAoBgB,eAAA,CAAA;EAAkB,UAAA;EAAY,UAAA;EAAY;AAAA,GAAY,oBAAA,GAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"catalog-config-context.d.mts","names":[],"sources":["../../src/context/catalog-config-context.tsx"],"mappings":";;;;;UAIiB,aAAA;EACf,UAAA,GAAa,iBAAA;EACb,UAAA,GAAa,yBAAA;AAAA;AAAA,iBAKC,gBAAA,CAAA,GAAoB,aAAA;;;;;;iBASpB,WAAA,CAAA;EAAc;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAIhD,oBAAA;EACf,UAAA,GAAa,iBAAA;EACb,UAAA,GAAa,yBAAA;EACb,QAAA,EAAU,SAAA;AAAA;AAAA,iBAGI,eAAA,CAAA;EAAkB,UAAA;EAAY,UAAA;EAAY;AAAA,GAAY,oBAAA,GAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/context/catalog-config-context.mjs

@@ -15,16 +15,6 @@ function useCatalogConfig() {
 function CatalogRoot({ children }) {
 	return /* @__PURE__ */ jsx(TooltipProvider, { children });
 }
-/**
-* Provides customization to the catalog component tree. Nests — inner
-* providers override outer keys.
-*
-* ```tsx
-* <CatalogProvider classNames={{ card: "shadow-lg" }}>
-*   <PipeCatalog />
-* </CatalogProvider>
-* ```
-*/
 function CatalogProvider({ classNames, components, children }) {
 	const parent = useCatalogConfig();
 	const merged = {

package/dist/context/catalog-config-context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"catalog-config-context.mjs","names":[],"sources":["../../src/context/catalog-config-context.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\nimport { TooltipProvider } from \"../components/ui/tooltip.js\";\nimport type { CatalogClassNames, CatalogComponentOverrides } from \"../types/catalog-adapters.js\";\n\nexport interface CatalogConfig {\n  classNames?: CatalogClassNames;\n  components?: CatalogComponentOverrides;\n}\n\nconst CatalogConfigContext = createContext<CatalogConfig>({});\n\nexport function useCatalogConfig(): CatalogConfig {\n  return useContext(CatalogConfigContext);\n}\n\n/**\n * Root-level providers required by any catalog component tree (tooltips, etc.).\n * Always mounted by `<PipeCatalog>` / `<SearchCatalog>` / `<SearchesCatalog>`\n * at the outermost layer.\n */\nexport function CatalogRoot({ children }: { children: ReactNode }) {\n  return <TooltipProvider>{children}</TooltipProvider>;\n}\n\nexport interface CatalogProviderProps {\n  classNames?: CatalogClassNames;\n  components?: CatalogComponentOverrides;\n  children: ReactNode;\n}\n\n/**\n * Provides customization to the catalog component tree. Nests — inner\n * providers override outer keys.\n *\n * ```tsx\n * <CatalogProvider classNames={{ card: \"shadow-lg\" }}>\n *   <PipeCatalog />\n * </CatalogProvider>\n * ```\n */\nexport function CatalogProvider({ classNames, components, children }: CatalogProviderProps) {\n  const parent = useCatalogConfig();\n  const merged: CatalogConfig = {\n    classNames: { ...parent.classNames, ...classNames },\n    components: { ...parent.components, ...components },\n  };\n  return <CatalogConfigContext.Provider value={merged}>{children}</CatalogConfigContext.Provider>;\n}\n"],"mappings":";;;;;AASA,MAAM,uBAAuB,cAA6B,EAAE,CAAC;AAE7D,SAAgB,mBAAkC;AAChD,QAAO,WAAW,qBAAqB;;;;;;;AAQzC,SAAgB,YAAY,EAAE,YAAqC;AACjE,QAAO,oBAAC,iBAAD,EAAkB,UAA2B;;;;;;;;;;;;AAmBtD,SAAgB,gBAAgB,EAAE,YAAY,YAAY,YAAkC;CAC1F,MAAM,SAAS,kBAAkB;CACjC,MAAM,SAAwB;EAC5B,YAAY;GAAE,GAAG,OAAO;GAAY,GAAG;GAAY;EACnD,YAAY;GAAE,GAAG,OAAO;GAAY,GAAG;GAAY;EACpD;AACD,QAAO,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAS;EAAyC"}
+{"version":3,"file":"catalog-config-context.mjs","names":[],"sources":["../../src/context/catalog-config-context.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\nimport { TooltipProvider } from \"../components/ui/tooltip.js\";\nimport type { CatalogClassNames, CatalogComponentOverrides } from \"../types/catalog-adapters.js\";\n\nexport interface CatalogConfig {\n  classNames?: CatalogClassNames;\n  components?: CatalogComponentOverrides;\n}\n\nconst CatalogConfigContext = createContext<CatalogConfig>({});\n\nexport function useCatalogConfig(): CatalogConfig {\n  return useContext(CatalogConfigContext);\n}\n\n/**\n * Root-level providers required by any catalog component tree (tooltips, etc.).\n * Always mounted by `<PipeCatalog>` / `<SearchCatalog>` / `<SearchesCatalog>`\n * at the outermost layer.\n */\nexport function CatalogRoot({ children }: { children: ReactNode }) {\n  return <TooltipProvider>{children}</TooltipProvider>;\n}\n\nexport interface CatalogProviderProps {\n  classNames?: CatalogClassNames;\n  components?: CatalogComponentOverrides;\n  children: ReactNode;\n}\n\nexport function CatalogProvider({ classNames, components, children }: CatalogProviderProps) {\n  const parent = useCatalogConfig();\n  const merged: CatalogConfig = {\n    classNames: { ...parent.classNames, ...classNames },\n    components: { ...parent.components, ...components },\n  };\n  return <CatalogConfigContext.Provider value={merged}>{children}</CatalogConfigContext.Provider>;\n}\n"],"mappings":";;;;;AASA,MAAM,uBAAuB,cAA6B,EAAE,CAAC;AAE7D,SAAgB,mBAAkC;AAChD,QAAO,WAAW,qBAAqB;;;;;;;AAQzC,SAAgB,YAAY,EAAE,YAAqC;AACjE,QAAO,oBAAC,iBAAD,EAAkB,UAA2B;;AAStD,SAAgB,gBAAgB,EAAE,YAAY,YAAY,YAAkC;CAC1F,MAAM,SAAS,kBAAkB;CACjC,MAAM,SAAwB;EAC5B,YAAY;GAAE,GAAG,OAAO;GAAY,GAAG;GAAY;EACnD,YAAY;GAAE,GAAG,OAAO;GAAY,GAAG;GAAY;EACpD;AACD,QAAO,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAS;EAAyC"}

package/dist/index.mjs

@@ -33,6 +33,7 @@ import { PricingBadge } from "./widgets/pricing-badge.mjs";
 import { ProviderLogo } from "./widgets/provider-logo.mjs";
 import { WidgetView } from "./widgets/widget-view.mjs";
 import { WidgetStrip } from "./widgets/widget-strip.mjs";
+import { AvatarGroup } from "./widgets/avatar-group.mjs";
 import { defaultAdapters } from "./components/defaults/adapters/index.mjs";
 import { FieldRenderer } from "./components/field-renderer.mjs";
 import { PipeFormField } from "./components/compound/pipe-form/field.mjs";
@@ -86,7 +87,6 @@ import { SearchesCatalog } from "./components/compound/searches-catalog/root.mjs
 import { SearchesCatalogTagFilter } from "./components/compound/searches-catalog/tag-filter.mjs";
 import { CatalogCopyId, CatalogCreditBadge, CatalogDocsBadge, CatalogFieldBadge } from "./components/defaults/catalog/card-derived.mjs";
 import { CatalogCategorySection } from "./components/defaults/catalog/category-section.mjs";
-import { AvatarGroup } from "./widgets/avatar-group.mjs";
 import { CatalogProviderAvatars } from "./components/defaults/catalog/provider-avatars.mjs";
 
 export { AvatarGroup, CatalogCard, CatalogCardBadge, CatalogCardBadges, CatalogCardDescription, CatalogCardHeader, CatalogCardTitle, CatalogCategorySection, CatalogCopyId, CatalogCreditBadge, CatalogDocsBadge, CatalogFieldBadge, CatalogProvider, CatalogProviderAvatars, CatalogRoot, EmojiGlyph, FieldRenderer, FieldTypeBadge, FormProvider, FormRoot, IconGlyph, LogoUrl, PipeCatalog, PipeCatalogActiveFilters, PipeCatalogCard, PipeCatalogCardContext, PipeCatalogCategoryFilter, PipeCatalogColumnFilter, PipeCatalogColumnFilters, PipeCatalogContext, PipeCatalogEmpty, PipeCatalogInputFieldFilter, PipeCatalogList, PipeCatalogOutputFieldFilter, PipeCatalogProviderFilter, PipeCatalogSearchFilter, PipeCatalogTagFilter, PipeForm, PipeFormContent, PipeFormContext, PipeFormErrors, PipeFormField, PipeFormFooter, PipeFormGroup, PipeFormHeader, PipeFormSection, PipeFormSubmitButton, PipeFormTitle, PricingBadge, ProviderLogo, SearchCatalog, SearchCatalogActiveFilters, SearchCatalogCard, SearchCatalogCardContext, SearchCatalogCategoryFilter, SearchCatalogColumnFilter, SearchCatalogColumnFilters, SearchCatalogContext, SearchCatalogEmpty, SearchCatalogList, SearchCatalogOutputFieldFilter, SearchCatalogProviderFilter, SearchCatalogSearchFilter, SearchCatalogTagFilter, SearchForm, SearchFormContent, SearchFormContext, SearchFormErrors, SearchFormField, SearchFormFooter, SearchFormGroup, SearchFormHeader, SearchFormSection, SearchFormSubmitButton, SearchFormTitle, SearchesCatalog, SearchesCatalogActiveFilters, SearchesCatalogCard, SearchesCatalogCardContext, SearchesCatalogCategoryFilter, SearchesCatalogColumnFilter, SearchesCatalogColumnFilters, SearchesCatalogContext, SearchesCatalogEmpty, SearchesCatalogList, SearchesCatalogOutputFieldFilter, SearchesCatalogProviderFilter, SearchesCatalogSearchFilter, SearchesCatalogTagFilter, WidgetStrip, WidgetView, defaultAdapters, fuzzyFilter, getFieldStatusIcon, getFieldTypeIcon, useCatalogConfig, useFieldError, usePipeCatalogCard, usePipeCatalogContext, usePipeCatalogTable, usePipeForm, usePipeFormContext, usePortalContainer, useSearchCatalogCard, useSearchCatalogContext, useSearchCatalogTable, useSearchForm, useSearchFormContext, useSearchesCatalogCard, useSearchesCatalogContext, useSearchesCatalogTable };

package/dist/styles/pipe0-form.css

@@ -65,7 +65,6 @@
     --pz-tracking-widest: 0.1em;
     --pz-leading-tight: 1.25;
     --pz-radius-md: calc(var(--p0-radius) - 2px);
-    --pz-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --pz-animate-spin: spin 1s linear infinite;
     --pz-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --pz-blur-xs: 4px;
@@ -406,9 +405,6 @@
   .pz\:w-72 {
     width: calc(var(--pz-spacing) * 72);
   }
-  .pz\:w-80 {
-    width: calc(var(--pz-spacing) * 80);
-  }
   .pz\:w-auto {
     width: auto;
   }
@@ -500,9 +496,6 @@
   .pz\:rotate-45 {
     rotate: 45deg;
   }
-  .pz\:rotate-180 {
-    rotate: 180deg;
-  }
   .pz\:animate-pulse {
     animation: var(--pz-animate-pulse);
   }
@@ -1008,9 +1001,6 @@
   .pz\:pt-2 {
     padding-top: calc(var(--pz-spacing) * 2);
   }
-  .pz\:pt-3 {
-    padding-top: calc(var(--pz-spacing) * 3);
-  }
   .pz\:pr-0 {
     padding-right: calc(var(--pz-spacing) * 0);
   }
@@ -1044,9 +1034,6 @@
   .pz\:pb-3 {
     padding-bottom: calc(var(--pz-spacing) * 3);
   }
-  .pz\:pb-3\.5 {
-    padding-bottom: calc(var(--pz-spacing) * 3.5);
-  }
   .pz\:pl-0 {
     padding-left: calc(var(--pz-spacing) * 0);
   }
@@ -1255,12 +1242,6 @@
       color: color-mix(in oklab, var(--p0-muted-foreground) 70%, transparent);
     }
   }
-  .pz\:text-muted-foreground\/80 {
-    color: var(--p0-muted-foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--p0-muted-foreground) 80%, transparent);
-    }
-  }
   .pz\:text-orange-700 {
     color: var(--pz-color-orange-700);
   }
@@ -1385,16 +1366,6 @@
       outline-offset: 2px;
     }
   }
-  .pz\:transition-\[height\,opacity\] {
-    transition-property: height,opacity;
-    transition-timing-function: var(--tw-ease, var(--pz-default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--pz-default-transition-duration));
-  }
-  .pz\:transition-\[height\] {
-    transition-property: height;
-    transition-timing-function: var(--tw-ease, var(--pz-default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--pz-default-transition-duration));
-  }
   .pz\:transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--pz-default-transition-timing-function));
@@ -1426,14 +1397,6 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
-  .pz\:duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .pz\:ease-out {
-    --tw-ease: var(--pz-ease-out);
-    transition-timing-function: var(--pz-ease-out);
-  }
   .pz\:outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1448,25 +1411,12 @@
   .pz\:duration-150 {
     animation-duration: 150ms;
   }
-  .pz\:duration-200 {
-    animation-duration: 200ms;
-  }
-  .pz\:ease-out {
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
   .pz\:not-last\:border-b {
     &:not(*:last-child) {
       border-bottom-style: var(--tw-border-style);
       border-bottom-width: 1px;
     }
   }
-  .pz\:group-hover\/prov\:opacity-100 {
-    &:is(:where(.pz\:group\/prov):hover *) {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
   .pz\:group-has-disabled\/field\:opacity-50 {
     &:is(:where(.pz\:group\/field):has(*:disabled) *) {
       opacity: 50%;
@@ -3935,10 +3885,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -4083,7 +4029,6 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
-      --tw-ease: initial;
       --tw-content: "";
       --tw-outline-style: solid;
       --tw-backdrop-blur: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipe0/react",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "React component library for building forms and catalogs powered by pipe0 pipes and searches.",
   "license": "MIT",
   "author": "pipe0",
@@ -87,7 +87,7 @@
     "lucide-react": "^0.475.0",
     "swr": "^2.4.1",
     "tailwind-merge": "^3.3.1",
-    "@pipe0/base": "0.0.7"
+    "@pipe0/base": "0.0.9"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.3.1",