@pipe0/react 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,119 @@
+# @pipe0/elements-react
+
+## 0.0.2
+
+### Patch Changes
+
+- Update packages
+- Updated dependencies
+  - @pipe0/base@0.0.2
+
+## 0.0.17
+
+### Patch Changes
+
+- Fix type issue
+- Updated dependencies
+  - @pipe0/elements@0.0.14
+
+## 0.0.16
+
+### Patch Changes
+
+- Update autocomplete dep
+- Updated dependencies
+  - @pipe0/elements@0.0.13
+
+## 0.0.15
+
+### Patch Changes
+
+- Update form-ui
+- Updated dependencies
+  - @pipe0/elements@0.0.12
+
+## 0.0.14
+
+### Patch Changes
+
+- update autocomplete
+- Updated dependencies
+  - @pipe0/elements@0.0.11
+
+## 0.0.13
+
+### Patch Changes
+
+- Update autocomplete
+- Updated dependencies
+  - @pipe0/elements@0.0.10
+
+## 0.0.12
+
+### Patch Changes
+
+- Update autocomplete config
+- Updated dependencies
+  - @pipe0/elements@0.0.9
+
+## 0.0.11
+
+### Patch Changes
+
+- @pipe0/elements@0.0.8
+
+## 0.0.10
+
+### Patch Changes
+
+- Fix style sheet
+
+## 0.0.9
+
+### Patch Changes
+
+- Fix style bleed
+
+## 0.0.8
+
+### Patch Changes
+
+- Removing Geist font from bundle
+
+## 0.0.7
+
+### Patch Changes
+
+- Externalize dependencies correctly
+
+## 0.0.6
+
+### Patch Changes
+
+- Clean build
+- Updated dependencies
+  - @pipe0/elements@0.0.7
+
+## 0.0.5
+
+### Patch Changes
+
+- Fix import config
+
+## 0.0.4
+
+### Patch Changes
+
+- Fix type export
+
+## 0.0.3
+
+### Patch Changes
+
+- Fix type export
+
+## 0.0.2
+
+### Patch Changes
+
+- Initial publish

package/README.md

@@ -0,0 +1,172 @@
+# @pipe0/react
+
+Prebuilt React components for rendering [pipe0](https://pipe0.com) pipe and search
+configuration forms. Drop a `pipeId` or `searchId` in and get a fully-typed,
+validated form with the right inputs, autocomplete, and connection pickers.
+
+## Install
+
+```bash
+npm install @pipe0/react
+```
+
+Import the stylesheet once in your app entry:
+
+```ts
+import "@pipe0/react/styles";
+```
+
+## PipeForm
+
+Renders a form for a specific pipe. The simplest usage is fully zero-config:
+
+```tsx
+import { PipeForm } from "@pipe0/react";
+
+<PipeForm
+  pipeId="people:name:split@1"
+  publicKey={PIPE0_PUBLIC_KEY}
+  onSubmit={(payload) => {
+    // payload is a fully-typed PipePayload for the given pipeId
+    console.log(payload);
+  }}
+/>;
+```
+
+For layout control, use the compound API and build the form yourself:
+
+```tsx
+import {
+  PipeForm,
+  PipeFormHeader,
+  PipeFormTitle,
+  PipeFormContent,
+  PipeFormSubmitButton,
+  usePipeForm,
+} from "@pipe0/react";
+
+function MyForm() {
+  const ctx = usePipeForm({
+    pipeId: "people:name:split@1",
+    publicKey: PIPE0_PUBLIC_KEY,
+    resolvers,
+  });
+
+  return (
+    <PipeForm context={ctx} onSubmit={(payload) => submit(payload)}>
+      <PipeFormHeader>
+        <PipeFormTitle>Split name</PipeFormTitle>
+      </PipeFormHeader>
+      <PipeFormContent />
+      <PipeFormSubmitButton>Run</PipeFormSubmitButton>
+    </PipeForm>
+  );
+}
+```
+
+## SearchForm
+
+Same shape as `PipeForm`, but for searches (e.g. `people:profiles:crustdata@1`):
+
+```tsx
+import { SearchForm } from "@pipe0/react";
+
+<SearchForm
+  searchId="people:profiles:crustdata@1"
+  publicKey={PIPE0_PUBLIC_KEY}
+  resolvers={resolvers}
+  onSubmit={(payload) => runSearch(payload)}
+/>;
+```
+
+The compound version uses `useSearchForm` plus `SearchFormHeader`,
+`SearchFormContent`, `SearchFormSubmitButton`, etc.
+
+## Resolvers
+
+Some fields can't be statically rendered — they depend on the user's own
+data. For example: a Resend "audience" dropdown needs to list the audiences
+attached to that user's Resend connection, and a Crustdata "locations"
+filter needs autocomplete suggestions. These are handled by `resolvers`:
+
+```ts
+import type { FormResolvers } from "@pipe0/base";
+
+const resolvers: FormResolvers = {
+  // Called once on mount. Return the user's connected providers.
+  // If omitted, connector-dependent fields are hidden.
+  getConnections: async () => [{ public_id: "resend_abc", provider: "resend" }],
+
+  // Called per dynamic field when its prerequisites are satisfied,
+  // when a dependency changes, or when the user types in a dropdown.
+  // `args.payload` contains the full form values — including `pipe_id`
+  // (from PipeForm) or `search_id` (from SearchForm), and the selected
+  // connector. Your backend can derive everything it needs from payload.
+  getFieldContext: async (args) => {
+    const path =
+      "pipe_id" in args.payload
+        ? "/api/pipe0/pipes/field-context"
+        : "/api/pipe0/search/field-context";
+
+    const res = await fetch(path, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        field_path: args.fieldPath,
+        query: args.query,
+        payload: args.payload,
+      }),
+    });
+    return await res.json(); // FormStore — merged into form store by the SDK
+  },
+};
+```
+
+`getFieldContext` is used by both pipe and search forms. Discriminate on
+`"pipe_id" in args.payload` vs `"search_id" in args.payload` to decide which
+backend endpoint to call.
+
+### Why you proxy instead of calling pipe0 directly
+
+`publicKey` identifies your pipe0 project in the browser but **does not
+authorize resolver requests**. Autocomplete and connection lookups hit
+pipe0's private API (`POST /v1/pipes/field-context` and `/v1/search/field-context`) which requires your
+pipe0 API key, and they need to know _which end user_ is asking (so the
+right connections are returned). Shipping the API key to the browser
+would leak it, and pipe0 has no way to know who your user is.
+
+So resolvers should call **your** backend, not pipe0's. Your backend:
+
+1. Authenticates the incoming request using whatever auth your app uses
+   (session cookie, JWT, etc.).
+2. Looks up that user's pipe0 connections / permissions.
+3. Forwards the request to pipe0 using the server-side API key.
+
+Minimal proxy example (Next.js route handler):
+
+```ts
+// app/api/pipe0/autocomplete/route.ts
+import { Pipe0 } from "@pipe0/client";
+
+const pipe0 = new Pipe0({ apiKey: process.env.PIPE0_API_KEY! });
+
+export async function POST(req: Request) {
+  const user = await requireUser(req); // your auth
+  const body = await req.json();
+
+  // Optionally scope connectionId to this user's connections
+  const suggestions = await pipe0.pipes.autocomplete({
+    pipe_id: body.pipeId,
+    field_path: body.fieldPath,
+    query: body.query,
+    connection_id: body.connectionId,
+    payload: body.payload,
+  });
+
+  return Response.json({ suggestions });
+}
+```
+
+`getConnections` follows the same pattern: your backend owns the mapping
+from "logged-in user" → "pipe0 connection ids", and returns only that
+user's connections to the browser.

package/dist/components/compound/pipe-catalog/active-filters.d.mts

@@ -0,0 +1,26 @@
+import { RenderProp } from "../../../utils/render-slot.mjs";
+import * as _$react from "react";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/compound/pipe-catalog/active-filters.d.ts
+interface ActiveFilter {
+  id: string;
+  value: string;
+  label: string;
+  remove: () => void;
+}
+interface PipeCatalogActiveFiltersState {
+  filters: ActiveFilter[];
+}
+interface PipeCatalogActiveFiltersProps {
+  className?: string;
+  render?: RenderProp<ComponentProps<"div">, PipeCatalogActiveFiltersState>;
+}
+declare function PipeCatalogActiveFilters({
+  className,
+  render
+}: PipeCatalogActiveFiltersProps): string | number | bigint | boolean | _$react_jsx_runtime0.JSX.Element | Iterable<_$react.ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<_$react.ReactNode> | null | undefined> | null | undefined;
+//#endregion
+export { ActiveFilter, PipeCatalogActiveFilters, PipeCatalogActiveFiltersProps, PipeCatalogActiveFiltersState };
+//# sourceMappingURL=active-filters.d.mts.map

package/dist/components/compound/pipe-catalog/active-filters.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-filters.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-catalog/active-filters.tsx"],"mappings":";;;;;;UAciB,YAAA;EACf,EAAA;EACA,KAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,UAGe,6BAAA;EACf,OAAA,EAAS,YAAA;AAAA;AAAA,UAGM,6BAAA;EACf,SAAA;EACA,MAAA,GAAS,UAAA,CAAW,cAAA,SAAuB,6BAAA;AAAA;AAAA,iBAG7B,wBAAA,CAAA;EAA2B,SAAA;EAAW;AAAA,GAAU,6BAAA,wCAA6B,oBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,OAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,OAAA,CAAA,WAAA,GAAA,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,OAAA,CAAA,SAAA"}

package/dist/components/compound/pipe-catalog/active-filters.mjs

@@ -0,0 +1,47 @@
+import { cn } from "../../../lib/utils.mjs";
+import { useCatalogConfig } from "../../../context/catalog-config-context.mjs";
+import { usePipeCatalogContext } from "../../../context/pipe-catalog-context.mjs";
+import { renderSlot } from "../../../utils/render-slot.mjs";
+import { DefaultActiveFilterPill } from "../../defaults/catalog/active-filter-pill.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/compound/pipe-catalog/active-filters.tsx
+const COLUMN_LABELS = {
+	inputFields: "Input",
+	outputFields: "Output",
+	providers: "Provider",
+	tags: "Tag"
+};
+function PipeCatalogActiveFilters({ className, render }) {
+	const { classNames } = useCatalogConfig();
+	const ctx = usePipeCatalogContext();
+	const filters = ctx.table.getState().columnFilters.filter((f) => f.value != null && f.value !== "").map((f) => ({
+		id: f.id,
+		value: String(f.value),
+		label: COLUMN_LABELS[f.id] ?? f.id,
+		remove: () => ctx.removeColumnFilter(f.id)
+	}));
+	if (filters.length === 0) return null;
+	if (render) return renderSlot({
+		defaultTagName: "div",
+		render,
+		state: { filters },
+		props: {
+			"data-p0": "catalog-active-filters",
+			className: cn("pz:flex pz:flex-wrap pz:items-center pz:gap-2", classNames?.activeFilters, className)
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-p0": "catalog-active-filters",
+		className: cn("pz:flex pz:flex-wrap pz:items-center pz:gap-2", classNames?.activeFilters, className),
+		children: filters.map((f) => /* @__PURE__ */ jsx(DefaultActiveFilterPill, {
+			label: f.label,
+			value: f.value,
+			onRemove: f.remove
+		}, f.id))
+	});
+}
+
+//#endregion
+export { PipeCatalogActiveFilters };
+//# sourceMappingURL=active-filters.mjs.map

package/dist/components/compound/pipe-catalog/active-filters.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-filters.mjs","names":[],"sources":["../../../../src/components/compound/pipe-catalog/active-filters.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCatalogConfig } from \"../../../context/catalog-config-context.js\";\nimport { usePipeCatalogContext } from \"../../../context/pipe-catalog-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { type RenderProp, renderSlot } from \"../../../utils/render-slot.js\";\nimport { DefaultActiveFilterPill } from \"../../defaults/catalog/active-filter-pill.js\";\n\nconst COLUMN_LABELS: Record<string, string> = {\n  inputFields: \"Input\",\n  outputFields: \"Output\",\n  providers: \"Provider\",\n  tags: \"Tag\",\n};\n\nexport interface ActiveFilter {\n  id: string;\n  value: string;\n  label: string;\n  remove: () => void;\n}\n\nexport interface PipeCatalogActiveFiltersState {\n  filters: ActiveFilter[];\n}\n\nexport interface PipeCatalogActiveFiltersProps {\n  className?: string;\n  render?: RenderProp<ComponentProps<\"div\">, PipeCatalogActiveFiltersState>;\n}\n\nexport function PipeCatalogActiveFilters({ className, render }: PipeCatalogActiveFiltersProps) {\n  const { classNames } = useCatalogConfig();\n  const ctx = usePipeCatalogContext();\n  const filters: ActiveFilter[] = ctx.table\n    .getState()\n    .columnFilters.filter((f) => f.value != null && f.value !== \"\")\n    .map((f) => ({\n      id: f.id,\n      value: String(f.value),\n      label: COLUMN_LABELS[f.id] ?? f.id,\n      remove: () =>\n        ctx.removeColumnFilter(f.id as \"inputFields\" | \"outputFields\" | \"tags\" | \"providers\"),\n    }));\n\n  if (filters.length === 0) return null;\n\n  if (render) {\n    return renderSlot({\n      defaultTagName: \"div\",\n      render,\n      state: { filters },\n      props: {\n        \"data-p0\": \"catalog-active-filters\",\n        className: cn(\n          \"pz:flex pz:flex-wrap pz:items-center pz:gap-2\",\n          classNames?.activeFilters,\n          className,\n        ),\n      } as ComponentProps<\"div\">,\n    });\n  }\n\n  return (\n    <div\n      data-p0=\"catalog-active-filters\"\n      className={cn(\n        \"pz:flex pz:flex-wrap pz:items-center pz:gap-2\",\n        classNames?.activeFilters,\n        className,\n      )}\n    >\n      {filters.map((f) => (\n        <DefaultActiveFilterPill key={f.id} label={f.label} value={f.value} onRemove={f.remove} />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,gBAAwC;CAC5C,aAAa;CACb,cAAc;CACd,WAAW;CACX,MAAM;CACP;AAkBD,SAAgB,yBAAyB,EAAE,WAAW,UAAyC;CAC7F,MAAM,EAAE,eAAe,kBAAkB;CACzC,MAAM,MAAM,uBAAuB;CACnC,MAAM,UAA0B,IAAI,MACjC,UAAU,CACV,cAAc,QAAQ,MAAM,EAAE,SAAS,QAAQ,EAAE,UAAU,GAAG,CAC9D,KAAK,OAAO;EACX,IAAI,EAAE;EACN,OAAO,OAAO,EAAE,MAAM;EACtB,OAAO,cAAc,EAAE,OAAO,EAAE;EAChC,cACE,IAAI,mBAAmB,EAAE,GAA4D;EACxF,EAAE;AAEL,KAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,KAAI,OACF,QAAO,WAAW;EAChB,gBAAgB;EAChB;EACA,OAAO,EAAE,SAAS;EAClB,OAAO;GACL,WAAW;GACX,WAAW,GACT,iDACA,YAAY,eACZ,UACD;GACF;EACF,CAAC;AAGJ,QACE,oBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GACT,iDACA,YAAY,eACZ,UACD;YAEA,QAAQ,KAAK,MACZ,oBAAC,yBAAD;GAAoC,OAAO,EAAE;GAAO,OAAO,EAAE;GAAO,UAAU,EAAE;GAAU,EAA5D,EAAE,GAA0D,CAC1F;EACE"}

package/dist/components/compound/pipe-catalog/card.d.mts

@@ -0,0 +1,30 @@
+import { RenderProp } from "../../../utils/render-slot.mjs";
+import { PipeCardData } from "../../../types/catalog-adapters.mjs";
+import * as _$react from "react";
+import { ComponentProps, MouseEvent } from "react";
+
+//#region src/components/compound/pipe-catalog/card.d.ts
+interface PipeCatalogCardState {
+  card: PipeCardData;
+  selected: boolean;
+  /** Whether this card's expansion drawer is currently open. */
+  expanded: boolean;
+  /**
+   * Open or close this card's expansion drawer. Only a single card inside a
+   * `<PipeCatalog>` can be expanded at any time — opening one closes the
+   * previously expanded card.
+   */
+  setExpanded: (open: boolean) => void;
+}
+interface PipeCatalogCardProps extends Omit<ComponentProps<"div">, "onClick" | "children"> {
+  card: PipeCardData;
+  index?: number;
+  selected?: boolean;
+  render?: RenderProp<ComponentProps<"div">, PipeCatalogCardState>;
+  /** Overrides the default click handler that fires `onSelectCard`. */
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+}
+declare const PipeCatalogCard: _$react.ForwardRefExoticComponent<Omit<PipeCatalogCardProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PipeCatalogCard, PipeCatalogCardProps };
+//# sourceMappingURL=card.d.mts.map

package/dist/components/compound/pipe-catalog/card.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-catalog/card.tsx"],"mappings":";;;;;;UAyBiB,oBAAA;EACf,IAAA,EAAM,YAAA;EACN,QAAA;EAFe;EAIf,QAAA;;;;;;EAMA,WAAA,GAAc,IAAA;AAAA;AAAA,UAGC,oBAAA,SAA6B,IAAA,CAAK,cAAA;EACjD,IAAA,EAAM,YAAA;EACN,KAAA;EACA,QAAA;EACA,MAAA,GAAS,UAAA,CAAW,cAAA,SAAuB,oBAAA;;EAE3C,OAAA,IAAW,CAAA,EAAG,UAAA,CAAW,cAAA;AAAA;AAAA,cAUd,eAAA,EAAe,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,oBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/components/compound/pipe-catalog/card.mjs

@@ -0,0 +1,77 @@
+import { cn } from "../../../lib/utils.mjs";
+import { useCatalogConfig } from "../../../context/catalog-config-context.mjs";
+import { usePipeCatalogContext } from "../../../context/pipe-catalog-context.mjs";
+import { renderSlot } from "../../../utils/render-slot.mjs";
+import { PipeCatalogCardContext } from "../../../context/pipe-catalog-card-context.mjs";
+import { CatalogCardDescription, CatalogCardHeader, CatalogCardTitle } from "../../defaults/catalog/card-primitives.mjs";
+import { forwardRef, useCallback, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/compound/pipe-catalog/card.tsx
+const DEFAULT_BODY = /* @__PURE__ */ jsxs(CatalogCardHeader, { children: [/* @__PURE__ */ jsx(CatalogCardTitle, {}), /* @__PURE__ */ jsx(CatalogCardDescription, {})] });
+const PipeCatalogCard = forwardRef(function PipeCatalogCard({ card, index = 0, selected = false, render, onClick, className, ...rest }, ref) {
+	const { onSelectCard, expandedCardId, setExpandedCardId } = usePipeCatalogContext();
+	const { classNames, components } = useCatalogConfig();
+	const instanceId = useId();
+	const expanded = expandedCardId === instanceId;
+	const setExpanded = useCallback((open) => {
+		setExpandedCardId(open ? instanceId : null);
+	}, [instanceId, setExpandedCardId]);
+	const onSelect = useCallback((e) => {
+		onSelectCard?.(card, e);
+	}, [onSelectCard, card]);
+	const contextValue = useMemo(() => ({
+		card,
+		index,
+		selected,
+		onSelect
+	}), [
+		card,
+		index,
+		selected,
+		onSelect
+	]);
+	const interactive = !!(onClick || onSelectCard);
+	const handleClick = onClick ? onClick : onSelectCard ? (e) => onSelect(e) : void 0;
+	const handleKeyDown = interactive ? (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (onClick) onClick(e);
+			else onSelect(e);
+		}
+	} : void 0;
+	const Card = components?.Card;
+	if (Card) return /* @__PURE__ */ jsx(PipeCatalogCardContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Card, { children: DEFAULT_BODY })
+	});
+	const isUsingDefaultBody = !render;
+	return /* @__PURE__ */ jsx(PipeCatalogCardContext.Provider, {
+		value: contextValue,
+		children: renderSlot({
+			defaultTagName: "div",
+			render,
+			state: {
+				card,
+				selected,
+				expanded,
+				setExpanded
+			},
+			props: {
+				"data-p0": "catalog-card",
+				role: interactive ? "button" : void 0,
+				tabIndex: interactive ? 0 : void 0,
+				onClick: handleClick,
+				onKeyDown: handleKeyDown,
+				className: cn("pz:flex pz:flex-col", isUsingDefaultBody && "pz:rounded-md pz:border pz:border-input pz:bg-card pz:px-3 pz:py-2.5 pz:transition-colors", isUsingDefaultBody && interactive && "pz:hover:bg-muted/40", interactive && "pz:cursor-pointer", classNames?.card, className),
+				...isUsingDefaultBody ? { children: DEFAULT_BODY } : {}
+			},
+			externalProps: rest,
+			ref
+		})
+	});
+});
+
+//#endregion
+export { PipeCatalogCard };
+//# sourceMappingURL=card.mjs.map

package/dist/components/compound/pipe-catalog/card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.mjs","names":[],"sources":["../../../../src/components/compound/pipe-catalog/card.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type SyntheticEvent,\n  useCallback,\n  useId,\n  useMemo,\n} from \"react\";\nimport { useCatalogConfig } from \"../../../context/catalog-config-context.js\";\nimport {\n  PipeCatalogCardContext,\n  type PipeCatalogCardContextValue,\n} from \"../../../context/pipe-catalog-card-context.js\";\nimport { usePipeCatalogContext } from \"../../../context/pipe-catalog-context.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { PipeCardData } from \"../../../types/catalog-adapters.js\";\nimport { type RenderProp, renderSlot } from \"../../../utils/render-slot.js\";\nimport {\n  CatalogCardDescription,\n  CatalogCardHeader,\n  CatalogCardTitle,\n} from \"../../defaults/catalog/card-primitives.js\";\n\nexport interface PipeCatalogCardState {\n  card: PipeCardData;\n  selected: boolean;\n  /** Whether this card's expansion drawer is currently open. */\n  expanded: boolean;\n  /**\n   * Open or close this card's expansion drawer. Only a single card inside a\n   * `<PipeCatalog>` can be expanded at any time — opening one closes the\n   * previously expanded card.\n   */\n  setExpanded: (open: boolean) => void;\n}\n\nexport interface PipeCatalogCardProps extends Omit<ComponentProps<\"div\">, \"onClick\" | \"children\"> {\n  card: PipeCardData;\n  index?: number;\n  selected?: boolean;\n  render?: RenderProp<ComponentProps<\"div\">, PipeCatalogCardState>;\n  /** Overrides the default click handler that fires `onSelectCard`. */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\nconst DEFAULT_BODY = (\n  <CatalogCardHeader>\n    <CatalogCardTitle />\n    <CatalogCardDescription />\n  </CatalogCardHeader>\n);\n\nexport const PipeCatalogCard = forwardRef<HTMLDivElement, PipeCatalogCardProps>(\n  function PipeCatalogCard(\n    { card, index = 0, selected = false, render, onClick, className, ...rest },\n    ref,\n  ) {\n    const { onSelectCard, expandedCardId, setExpandedCardId } = usePipeCatalogContext();\n    const { classNames, components } = useCatalogConfig();\n    const instanceId = useId();\n    const expanded = expandedCardId === instanceId;\n\n    const setExpanded = useCallback(\n      (open: boolean) => {\n        setExpandedCardId(open ? instanceId : null);\n      },\n      [instanceId, setExpandedCardId],\n    );\n\n    const onSelect = useCallback(\n      (e: SyntheticEvent) => {\n        onSelectCard?.(card, e);\n      },\n      [onSelectCard, card],\n    );\n\n    const contextValue = useMemo<PipeCatalogCardContextValue>(\n      () => ({ card, index, selected, onSelect }),\n      [card, index, selected, onSelect],\n    );\n\n    const interactive = !!(onClick || onSelectCard);\n    const handleClick = onClick\n      ? onClick\n      : onSelectCard\n        ? (e: MouseEvent<HTMLDivElement>) => onSelect(e)\n        : undefined;\n    const handleKeyDown = interactive\n      ? (e: KeyboardEvent<HTMLDivElement>) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            if (onClick) onClick(e as unknown as MouseEvent<HTMLDivElement>);\n            else onSelect(e);\n          }\n        }\n      : undefined;\n\n    const Card = components?.Card;\n\n    if (Card) {\n      return (\n        <PipeCatalogCardContext.Provider value={contextValue}>\n          <Card>{DEFAULT_BODY}</Card>\n        </PipeCatalogCardContext.Provider>\n      );\n    }\n\n    const isUsingDefaultBody = !render;\n\n    return (\n      <PipeCatalogCardContext.Provider value={contextValue}>\n        {renderSlot({\n          defaultTagName: \"div\",\n          render,\n          state: { card, selected, expanded, setExpanded },\n          props: {\n            \"data-p0\": \"catalog-card\",\n            role: interactive ? \"button\" : undefined,\n            tabIndex: interactive ? 0 : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            className: cn(\n              \"pz:flex pz:flex-col\",\n              isUsingDefaultBody &&\n                \"pz:rounded-md pz:border pz:border-input pz:bg-card pz:px-3 pz:py-2.5 pz:transition-colors\",\n              isUsingDefaultBody && interactive && \"pz:hover:bg-muted/40\",\n              interactive && \"pz:cursor-pointer\",\n              classNames?.card,\n              className,\n            ),\n            ...(isUsingDefaultBody ? { children: DEFAULT_BODY } : {}),\n          } as ComponentProps<\"div\">,\n          externalProps: rest as Record<string, unknown>,\n          ref,\n        })}\n      </PipeCatalogCardContext.Provider>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AA+CA,MAAM,eACJ,qBAAC,mBAAD,aACE,oBAAC,kBAAD,EAAoB,GACpB,oBAAC,wBAAD,EAA0B,EACR;AAGtB,MAAa,kBAAkB,WAC7B,SAAS,gBACP,EAAE,MAAM,QAAQ,GAAG,WAAW,OAAO,QAAQ,SAAS,WAAW,GAAG,QACpE,KACA;CACA,MAAM,EAAE,cAAc,gBAAgB,sBAAsB,uBAAuB;CACnF,MAAM,EAAE,YAAY,eAAe,kBAAkB;CACrD,MAAM,aAAa,OAAO;CAC1B,MAAM,WAAW,mBAAmB;CAEpC,MAAM,cAAc,aACjB,SAAkB;AACjB,oBAAkB,OAAO,aAAa,KAAK;IAE7C,CAAC,YAAY,kBAAkB,CAChC;CAED,MAAM,WAAW,aACd,MAAsB;AACrB,iBAAe,MAAM,EAAE;IAEzB,CAAC,cAAc,KAAK,CACrB;CAED,MAAM,eAAe,eACZ;EAAE;EAAM;EAAO;EAAU;EAAU,GAC1C;EAAC;EAAM;EAAO;EAAU;EAAS,CAClC;CAED,MAAM,cAAc,CAAC,EAAE,WAAW;CAClC,MAAM,cAAc,UAChB,UACA,gBACG,MAAkC,SAAS,EAAE,GAC9C;CACN,MAAM,gBAAgB,eACjB,MAAqC;AACpC,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,OAAI,QAAS,SAAQ,EAA2C;OAC3D,UAAS,EAAE;;KAGpB;CAEJ,MAAM,OAAO,YAAY;AAEzB,KAAI,KACF,QACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;YACtC,oBAAC,MAAD,YAAO,cAAoB;EACK;CAItC,MAAM,qBAAqB,CAAC;AAE5B,QACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;YACrC,WAAW;GACV,gBAAgB;GAChB;GACA,OAAO;IAAE;IAAM;IAAU;IAAU;IAAa;GAChD,OAAO;IACL,WAAW;IACX,MAAM,cAAc,WAAW;IAC/B,UAAU,cAAc,IAAI;IAC5B,SAAS;IACT,WAAW;IACX,WAAW,GACT,uBACA,sBACE,6FACF,sBAAsB,eAAe,wBACrC,eAAe,qBACf,YAAY,MACZ,UACD;IACD,GAAI,qBAAqB,EAAE,UAAU,cAAc,GAAG,EAAE;IACzD;GACD,eAAe;GACf;GACD,CAAC;EAC8B;EAGvC"}

package/dist/components/compound/pipe-catalog/category-filter.d.mts

@@ -0,0 +1,30 @@
+import { RenderProp } from "../../../utils/render-slot.mjs";
+import { CategoryOption } from "../../defaults/catalog/category-filter.mjs";
+import * as _$react from "react";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { PipeCategory } from "@pipe0/base";
+
+//#region src/components/compound/pipe-catalog/category-filter.d.ts
+interface PipeCatalogCategoryFilterState {
+  value: PipeCategory | null;
+  setValue: (v: PipeCategory | null) => void;
+  options: ReadonlyArray<CategoryOption<PipeCategory>>;
+  counts: Partial<Record<PipeCategory, number>>;
+  totalCount: number;
+  isActive: (id: PipeCategory | null) => boolean;
+}
+interface PipeCatalogCategoryFilterProps {
+  /** Override the default category options. */
+  options?: ReadonlyArray<CategoryOption<PipeCategory>>;
+  className?: string;
+  render?: RenderProp<ComponentProps<"div">, PipeCatalogCategoryFilterState>;
+}
+declare function PipeCatalogCategoryFilter({
+  options,
+  className,
+  render
+}: PipeCatalogCategoryFilterProps): string | number | bigint | boolean | _$react_jsx_runtime0.JSX.Element | Iterable<_$react.ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<_$react.ReactNode> | null | undefined> | null | undefined;
+//#endregion
+export { PipeCatalogCategoryFilter, PipeCatalogCategoryFilterProps, PipeCatalogCategoryFilterState };
+//# sourceMappingURL=category-filter.d.mts.map

package/dist/components/compound/pipe-catalog/category-filter.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-filter.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-catalog/category-filter.tsx"],"mappings":";;;;;;;;UA4CiB,8BAAA;EACf,KAAA,EAAO,YAAA;EACP,QAAA,GAAW,CAAA,EAAG,YAAA;EACd,OAAA,EAAS,aAAA,CAAc,cAAA,CAAe,YAAA;EACtC,MAAA,EAAQ,OAAA,CAAQ,MAAA,CAAO,YAAA;EACvB,UAAA;EACA,QAAA,GAAW,EAAA,EAAI,YAAA;AAAA;AAAA,UAGA,8BAAA;EANuB;EAQtC,OAAA,GAAU,aAAA,CAAc,cAAA,CAAe,YAAA;EACvC,SAAA;EACA,MAAA,GAAS,UAAA,CAAW,cAAA,SAAuB,8BAAA;AAAA;AAAA,iBAG7B,yBAAA,CAAA;EACd,OAAA;EACA,SAAA;EACA;AAAA,GACC,8BAAA,wCAA8B,oBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,OAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,OAAA,CAAA,WAAA,GAAA,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,OAAA,CAAA,SAAA"}

package/dist/components/compound/pipe-catalog/category-filter.mjs

@@ -0,0 +1,56 @@
+import { usePipeCatalogContext } from "../../../context/pipe-catalog-context.mjs";
+import { renderSlot } from "../../../utils/render-slot.mjs";
+import { DefaultCategoryFilter } from "../../defaults/catalog/category-filter.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Building2, Database, Hammer, Plug, ScanFace, Search, Users, X, Zap } from "lucide-react";
+import { getPipeCategoryEntries } from "@pipe0/base";
+
+//#region src/components/compound/pipe-catalog/category-filter.tsx
+const PIPE_CATEGORY_ICONS = {
+	people_data: ScanFace,
+	company_data: Building2,
+	find_people: Users,
+	find_comapnies: Search,
+	tools: Hammer,
+	actions: Zap,
+	integrations: Plug,
+	deprecated: X
+};
+const DEFAULT_OPTIONS = [{
+	id: null,
+	label: "All",
+	icon: Database
+}, ...[...getPipeCategoryEntries()].sort((a, b) => a.order - b.order).map((entry) => ({
+	id: entry.id,
+	label: entry.label,
+	icon: PIPE_CATEGORY_ICONS[entry.id]
+}))];
+function PipeCatalogCategoryFilter({ options = DEFAULT_OPTIONS, className, render }) {
+	const ctx = usePipeCatalogContext();
+	if (render) return renderSlot({
+		defaultTagName: "div",
+		render,
+		state: {
+			value: ctx.category,
+			setValue: ctx.setCategory,
+			options,
+			counts: ctx.baselineCategoryCounts,
+			totalCount: ctx.baselineCardCount,
+			isActive: (id) => ctx.category === id
+		},
+		props: {
+			"data-p0": "catalog-category-filter",
+			className
+		}
+	});
+	return /* @__PURE__ */ jsx(DefaultCategoryFilter, {
+		options,
+		value: ctx.category,
+		onChange: ctx.setCategory,
+		className
+	});
+}
+
+//#endregion
+export { PipeCatalogCategoryFilter };
+//# sourceMappingURL=category-filter.mjs.map

package/dist/components/compound/pipe-catalog/category-filter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-filter.mjs","names":["SearchIcon"],"sources":["../../../../src/components/compound/pipe-catalog/category-filter.tsx"],"sourcesContent":["import { getPipeCategoryEntries, type PipeCategory } from \"@pipe0/base\";\nimport {\n  Building2,\n  Database,\n  Hammer,\n  Plug,\n  ScanFace,\n  Search as SearchIcon,\n  Users,\n  X,\n  Zap,\n} from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { usePipeCatalogContext } from \"../../../context/pipe-catalog-context.js\";\nimport { type RenderProp, renderSlot } from \"../../../utils/render-slot.js\";\nimport {\n  type CategoryOption,\n  DefaultCategoryFilter,\n} from \"../../defaults/catalog/category-filter.js\";\n\nconst PIPE_CATEGORY_ICONS: Record<PipeCategory, CategoryOption<PipeCategory>[\"icon\"]> = {\n  people_data: ScanFace,\n  company_data: Building2,\n  find_people: Users,\n  find_comapnies: SearchIcon,\n  tools: Hammer,\n  actions: Zap,\n  integrations: Plug,\n  deprecated: X,\n};\n\nconst DEFAULT_OPTIONS: ReadonlyArray<CategoryOption<PipeCategory>> = [\n  { id: null, label: \"All\", icon: Database },\n  ...[...getPipeCategoryEntries()]\n    .sort((a, b) => a.order - b.order)\n    .map(\n      (entry): CategoryOption<PipeCategory> => ({\n        id: entry.id,\n        label: entry.label,\n        icon: PIPE_CATEGORY_ICONS[entry.id],\n      }),\n    ),\n];\n\nexport interface PipeCatalogCategoryFilterState {\n  value: PipeCategory | null;\n  setValue: (v: PipeCategory | null) => void;\n  options: ReadonlyArray<CategoryOption<PipeCategory>>;\n  counts: Partial<Record<PipeCategory, number>>;\n  totalCount: number;\n  isActive: (id: PipeCategory | null) => boolean;\n}\n\nexport interface PipeCatalogCategoryFilterProps {\n  /** Override the default category options. */\n  options?: ReadonlyArray<CategoryOption<PipeCategory>>;\n  className?: string;\n  render?: RenderProp<ComponentProps<\"div\">, PipeCatalogCategoryFilterState>;\n}\n\nexport function PipeCatalogCategoryFilter({\n  options = DEFAULT_OPTIONS,\n  className,\n  render,\n}: PipeCatalogCategoryFilterProps) {\n  const ctx = usePipeCatalogContext();\n\n  if (render) {\n    return renderSlot({\n      defaultTagName: \"div\",\n      render,\n      state: {\n        value: ctx.category,\n        setValue: ctx.setCategory,\n        options,\n        counts: ctx.baselineCategoryCounts,\n        totalCount: ctx.baselineCardCount,\n        isActive: (id: PipeCategory | null) => ctx.category === id,\n      },\n      props: {\n        \"data-p0\": \"catalog-category-filter\",\n        className,\n      } as ComponentProps<\"div\">,\n    });\n  }\n\n  return (\n    <DefaultCategoryFilter\n      options={options}\n      value={ctx.category}\n      onChange={ctx.setCategory}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,MAAM,sBAAkF;CACtF,aAAa;CACb,cAAc;CACd,aAAa;CACb,gBAAgBA;CAChB,OAAO;CACP,SAAS;CACT,cAAc;CACd,YAAY;CACb;AAED,MAAM,kBAA+D,CACnE;CAAE,IAAI;CAAM,OAAO;CAAO,MAAM;CAAU,EAC1C,GAAG,CAAC,GAAG,wBAAwB,CAAC,CAC7B,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,CACjC,KACE,WAAyC;CACxC,IAAI,MAAM;CACV,OAAO,MAAM;CACb,MAAM,oBAAoB,MAAM;CACjC,EACF,CACJ;AAkBD,SAAgB,0BAA0B,EACxC,UAAU,iBACV,WACA,UACiC;CACjC,MAAM,MAAM,uBAAuB;AAEnC,KAAI,OACF,QAAO,WAAW;EAChB,gBAAgB;EAChB;EACA,OAAO;GACL,OAAO,IAAI;GACX,UAAU,IAAI;GACd;GACA,QAAQ,IAAI;GACZ,YAAY,IAAI;GAChB,WAAW,OAA4B,IAAI,aAAa;GACzD;EACD,OAAO;GACL,WAAW;GACX;GACD;EACF,CAAC;AAGJ,QACE,oBAAC,uBAAD;EACW;EACT,OAAO,IAAI;EACX,UAAU,IAAI;EACH;EACX"}

package/dist/components/compound/pipe-catalog/column-filter.d.mts

@@ -0,0 +1,40 @@
+import { RenderProp } from "../../../utils/render-slot.mjs";
+import { FilterSelectOption } from "../../defaults/catalog/filter-select.mjs";
+import * as _$react from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/compound/pipe-catalog/column-filter.d.ts
+type PipeColumnFilterId = "inputFields" | "outputFields" | "providers" | "tags";
+/**
+ * Render-prop state shared by every specific column filter component
+ * (input/output/provider/tag) and the generic `<PipeCatalogColumnFilter>`.
+ */
+interface ColumnFilterState {
+  value: string;
+  setValue: (v: string | null) => void;
+  options: ReadonlyArray<FilterSelectOption>;
+  isActive: boolean;
+}
+interface PipeCatalogColumnFilterProps {
+  id: PipeColumnFilterId;
+  placeholder?: ReactNode;
+  options?: ReadonlyArray<FilterSelectOption>;
+  className?: string;
+  render?: RenderProp<ComponentProps<"div">, ColumnFilterState>;
+}
+/**
+ * Generic column-filter escape hatch. For built-in filters prefer the specific
+ * components: `<PipeCatalogInputFieldFilter>`, `<PipeCatalogOutputFieldFilter>`,
+ * `<PipeCatalogProviderFilter>`, `<PipeCatalogTagFilter>`.
+ */
+declare function PipeCatalogColumnFilter({
+  id,
+  placeholder,
+  options,
+  className,
+  render
+}: PipeCatalogColumnFilterProps): string | number | bigint | boolean | _$react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//#endregion
+export { ColumnFilterState, PipeCatalogColumnFilter, PipeCatalogColumnFilterProps, PipeColumnFilterId };
+//# sourceMappingURL=column-filter.d.mts.map

package/dist/components/compound/pipe-catalog/column-filter.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-filter.d.mts","names":[],"sources":["../../../../src/components/compound/pipe-catalog/column-filter.tsx"],"mappings":";;;;;;;KAQY,kBAAA;;;;AAAZ;UAMiB,iBAAA;EACf,KAAA;EACA,QAAA,GAAW,CAAA;EACX,OAAA,EAAS,aAAA,CAAc,kBAAA;EACvB,QAAA;AAAA;AAAA,UAGe,4BAAA;EACf,EAAA,EAAI,kBAAA;EACJ,WAAA,GAAc,SAAA;EACd,OAAA,GAAU,aAAA,CAAc,kBAAA;EACxB,SAAA;EACA,MAAA,GAAS,UAAA,CAAW,cAAA,SAAuB,iBAAA;AAAA;;;;;AAL7C;iBAmCgB,uBAAA,CAAA;EACd,EAAA;EACA,WAAA;EACA,OAAA;EACA,SAAA;EACA;AAAA,GACC,4BAAA,wCAA4B,oBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,OAAA,CAAA,WAAA,GAAA,OAAA,CAAA,YAAA,mBAAA,OAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA"}