@manta-eu/react 0.11.0 → 0.13.0

package/src/routes/activity/detail/ActivityDetailRoute.tsx

@@ -7,12 +7,10 @@ import { useLocalStorage } from "usehooks-ts";
 import { ActivityDetail, activityLayoutValues, type ActivityLayout } from "./ActivityDetail";
 import { Button } from "#components/button/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
-import { useAuthContext } from "#providers/AuthContext";
 
 const layoutStorageKey = "activity-detail-layout";
 
 export function ActivityDetailRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
   const navigate = useNavigate();
   // The URL param is the IRI local name; buildActivityIri rebuilds the full IRI.
   const { id } = useParams();
@@ -27,14 +25,7 @@ export function ActivityDetailRoute() {
   );
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <ActivityDetail
         activityIri={activityIri}
         leading={

package/src/routes/activity/index.tsx

@@ -14,7 +14,6 @@ import { PageBody, PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
 import { useFittedPagination } from "#hooks/useFittedPagination";
 import { type ActivityFeedFilters, type ActivityStatusFilter, useActivityFeed } from "#ldo-ui";
-import { useAuthContext } from "#providers/AuthContext";
 
 const activityTableGeometry = {
   headerRowHeight: 52,
@@ -25,7 +24,6 @@ const activityTableGeometry = {
 const statusValues = ["all", "completed", "failed", "running"] as const;
 
 export function ActivityRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
   const navigate = useNavigate();
 
   const [page, setPage] = useQueryState("page", parseAsInteger.withDefault(1));
@@ -82,14 +80,7 @@ export function ActivityRoute() {
   }
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <PageHeader title="Activity" icon={ActivityIcon} />
       <PageBody className="flex min-h-0 flex-col gap-4">
         <ActivityFilters

package/src/routes/chat/index.tsx

@@ -1,60 +1,24 @@
-import type { MantaModelId } from "@manta-eu/client/shared/model";
-import type { ReactNode } from "react";
 import { Chat } from "#components/chat-view/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
-import type { ChatDraft, Datastore, User } from "#lib/chat-types";
-import { AssistantIconProvider, type AssistantIcon } from "#providers/AssistantIconProvider";
+import type { AuthenticatedChatProps } from "#lib/chat-types";
+import { AssistantIconProvider } from "#providers/AssistantIconProvider";
 import { AssistantNameProvider } from "#providers/AssistantNameProvider";
+import { useAuthContext } from "#providers/AuthContext";
 
-type ChatRouteProps = {
-  datastore?: Datastore;
-  user: User;
-  logout?: () => void;
-  isOperator: boolean;
-  canSwitchDatastore?: boolean;
-  datastores?: Datastore[];
-  allowedModels?: MantaModelId[];
-  initialPrompt?: string;
-  initialDraft?: ChatDraft;
-  title?: string;
-  welcomeSubtitle?: string;
-  assistantName?: string;
-  assistantIcon?: AssistantIcon;
-  mark?: ReactNode;
-};
+export type ChatRouteProps = Pick<
+  AuthenticatedChatProps,
+  "initialPrompt" | "initialDraft" | "title" | "welcomeSubtitle" | "assistantName" | "assistantIcon" | "mark"
+>;
 
 export function ChatRoute(props: ChatRouteProps) {
-  const {
-    datastore,
-    user,
-    logout,
-    isOperator,
-    canSwitchDatastore,
-    datastores,
-    allowedModels,
-    initialPrompt,
-    initialDraft,
-    title,
-    welcomeSubtitle,
-    assistantName,
-    assistantIcon,
-    mark,
-  } = props;
+  const { initialPrompt, initialDraft, title, welcomeSubtitle, assistantName, assistantIcon, mark } = props;
+
+  const { datastore, user, logout, isOperator, allowedModels } = useAuthContext();
 
   return (
     <AssistantNameProvider name={assistantName}>
       <AssistantIconProvider icon={assistantIcon}>
-        <RouteLayout
-          user={user}
-          datastore={datastore}
-          datastores={datastores}
-          isOperator={isOperator}
-          canSwitchDatastore={canSwitchDatastore}
-          logout={logout}
-          floatingMobileMenu
-          title={title}
-          mark={mark}
-        >
+        <RouteLayout floatingMobileMenu title={title} mark={mark}>
           <Chat
             datastore={datastore}
             user={user}

package/src/routes/data-collection/index.tsx

@@ -7,7 +7,6 @@ import { FileDropzone, UploadProgressList, type RejectedDrop } from "#components
 import { PageBody, PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
 import { useFileUpload } from "#lib/hooks/useFileUpload";
-import { useAuthContext } from "#providers/AuthContext";
 import { UploadedFilesSection } from "#routes/data-explorer/components/uploads/UploadsPages";
 import { useInvalidateUploads } from "#routes/data-explorer/uploads";
 
@@ -45,17 +44,8 @@ export function DataCollectionUploader() {
 }
 
 export function DataCollectionRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
-
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <PageHeader title="Data collection" icon={FolderUp} />
       <PageBody className="px-4 py-6 sm:px-6">
         <div className="mx-auto flex max-w-4xl flex-col gap-8">

package/src/routes/data-explorer/components/DataExplorerLayout.tsx

@@ -12,7 +12,6 @@ import { SelectionProvider } from "./SelectionProvider";
 import { PageBody, PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
 import { cn } from "#lib/utils";
-import { useAuthContext } from "#providers/AuthContext";
 
 const ontologyStaleTime = 5 * 60 * 1000;
 
@@ -28,8 +27,6 @@ function useExplorerQueryDefaults() {
 }
 
 export function DataExplorerLayout() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
-
   const isIndex = Boolean(useMatch(explorerPath));
   const isCoverage = Boolean(useMatch(coveragePath));
   const isFiles = Boolean(useMatch(filesPath));
@@ -41,14 +38,7 @@ export function DataExplorerLayout() {
   useExplorerQueryDefaults();
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <SelectionProvider>
         <PageHeader
           title="Data Explorer"

package/src/routes/data-explorer/components/class-detail/UsedByRules.tsx

@@ -9,7 +9,7 @@ import { sectionLabelClass } from "#ldo-ui";
 import { cn } from "#lib/utils";
 import { useMantaClient } from "#providers/index";
 import { labelWithinFamily, matchesNameQuery, nameFamilySections } from "#routes/data-explorer/families";
-import { getRuleDisplayName, getRuleRouteName } from "#routes/rules/components/rules.utils";
+import { getRuleDisplayName, getRuleHref } from "#routes/rules/components/rules.utils";
 
 type RuleLinkProps = { ruleIri: string; family?: string };
 
@@ -20,7 +20,7 @@ function RuleLink(props: RuleLinkProps) {
   const label = family ? labelWithinFamily(fullLabel, family) : fullLabel;
 
   return (
-    <LinkRow to={`/rules/${getRuleRouteName(ruleIri)}`}>
+    <LinkRow to={getRuleHref({ ruleIri })}>
       <span className="typography-small-medium min-w-0 flex-1 truncate text-default-foreground">{label}</span>
     </LinkRow>
   );

package/src/routes/datastores/index.tsx

@@ -105,7 +105,8 @@ type DatastoreFilterToggle = {
 };
 
 export function DatastoresRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
+  const { datastore, isOperator, canSwitchDatastore } = useAuthContext();
+
   const { mantaClient } = useMantaClient();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -745,14 +746,7 @@ export function DatastoresRoute() {
   }
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <PageHeader
         title="Datastores"
         icon={Database}

package/src/routes/explain/index.tsx

@@ -6,23 +6,13 @@ import { parseExplainUrlParams } from "./url-params";
 import { ExplainFact } from "#components/explain-fact/ExplainFact";
 import { PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
-import { useAuthContext } from "#providers/AuthContext";
 
 export function ExplainRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
-
   const [searchParams] = useSearchParams();
   const params = useMemo(() => parseExplainUrlParams(searchParams), [searchParams]);
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <PageHeader title="Explain" icon={Network} />
       <div className="min-h-0 flex-1 p-4">
         {params ? (

package/src/routes/integrations/components/connect-forms/DashConnectForm.tsx

@@ -16,7 +16,6 @@ import { Input } from "#components/input/index";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Dash",
   identityProviderName: "Dash",
   entitySingular: "folder",
   entityPlural: "folders",

package/src/routes/integrations/components/connect-forms/GoogleAdsConnectForm.tsx

@@ -11,7 +11,6 @@ import type { ConnectFormProps } from "./types";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Google Ads",
   identityProviderName: "Google",
   entitySingular: "account",
   entityPlural: "accounts",

package/src/routes/integrations/components/connect-forms/GoogleAnalyticsConnectForm.tsx

@@ -11,7 +11,6 @@ import type { ConnectFormProps } from "./types";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Google Analytics",
   identityProviderName: "Google",
   entitySingular: "property",
   entityPlural: "properties",

package/src/routes/integrations/components/connect-forms/GoogleMerchantCenterConnectForm.tsx

@@ -11,7 +11,6 @@ import type { ConnectFormProps } from "./types";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Merchant Center",
   identityProviderName: "Google",
   entitySingular: "account",
   entityPlural: "accounts",

package/src/routes/integrations/components/connect-forms/InferalCredentialConnectForm.tsx

@@ -37,7 +37,6 @@ export type CredentialStep<Key extends string = string> = {
 };
 
 export type InferalCredentialFormConfig<Key extends string = string> = {
-  providerName: string;
   fieldIdPrefix: string;
   identifier: CredentialField<Key> & { stepTitle: string; stepDescription: string };
   secrets: CredentialStep<Key>;
@@ -240,11 +239,14 @@ export type InferalCredentialConnectFormProps<Key extends string> = ConnectFormP
 
 export function InferalCredentialConnectForm<Key extends string>(props: InferalCredentialConnectFormProps<Key>) {
   const { onBack, onChanged, onDismiss, provider, inferalConfig, config, importNotice } = props;
+  const { name: providerName } = provider;
+
   if (!inferalConfig) {
-    throw new Error(`${config.providerName} is missing its Inferal connection configuration`);
+    throw new Error(`${providerName} is missing its Inferal connection configuration`);
   }
+
   const { deriveStreamName, locationLabels, setupInstructions } = inferalConfig;
-  const { providerName, identifier, secrets, settings, buildProviderInput } = config;
+  const { identifier, secrets, settings, buildProviderInput } = config;
 
   const credentialFields = useMemo(
     () => [identifier, ...secrets.fields, ...(settings?.fields ?? [])],

package/src/routes/integrations/components/connect-forms/KlaviyoConnectForm.tsx

@@ -18,7 +18,6 @@ function looksLikeMetricId(value: string): boolean {
 
 // companyId identifies the integration on our side only — Klaviyo's relay contract never receives it.
 export const klaviyoConfig: InferalCredentialFormConfig<"companyId" | "apiKey" | "conversionMetricId"> = {
-  providerName: "Klaviyo",
   fieldIdPrefix: "klaviyo",
   identifier: {
     key: "companyId",

package/src/routes/integrations/components/connect-forms/MicrosoftAdsConnectForm.tsx

@@ -15,7 +15,6 @@ import type { TreeSelectItem } from "#components/tree-multi-select/index";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Microsoft Ads",
   identityProviderName: "Microsoft",
   entitySingular: "account",
   entityPlural: "accounts",

package/src/routes/integrations/components/connect-forms/OAuthSetupConnectForm.tsx

@@ -39,9 +39,8 @@ export type OAuthSetup<Row extends SetupRow> = {
 
 export type SetupTreeOptions = Pick<TreeMultiSelectProps, "defaultCollapsed" | "includeDescendants">;
 
-// Every other string is derived from these names and the entity noun.
+// The rest of the copy is derived from the provider name, the identity provider name and the entity noun.
 export type SetupCopy = {
-  providerName: string;
   identityProviderName: string;
   entitySingular: string;
   entityPlural: string;
@@ -76,10 +75,11 @@ export type AlternateSignIn = { label: string; href: string };
 
 export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupConnectFormProps<Row>) {
   const { onBack, onChanged, onDismiss, provider, resumedFromOAuth = false, importNotice } = props;
-  const { integration, oauthStartPath, copy, setup, treeItems, treeOptions, resumesUnfinishedSetup, pickExtras } =
-    props;
-  const { alternateSignIns } = props;
-  const { providerName } = copy;
+  const { integration, oauthStartPath, setup, treeItems, treeOptions, resumesUnfinishedSetup, pickExtras } = props;
+  const { alternateSignIns, copy: setupCopy } = props;
+  const { name: providerName } = provider;
+
+  const copy = { ...setupCopy, providerName };
   const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
   const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
   const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
@@ -238,7 +238,7 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
 }
 
 type CopyProps = {
-  copy: SetupCopy;
+  copy: SetupCopy & { providerName: string };
 };
 
 type IdleViewProps = CopyProps & {

package/src/routes/integrations/components/connect-forms/TriplewhaleConnectForm.tsx

@@ -2,7 +2,6 @@ import { InferalCredentialConnectForm, type InferalCredentialFormConfig } from "
 import type { ConnectFormProps } from "./types";
 
 export const triplewhaleConfig: InferalCredentialFormConfig<"shopId" | "apiKey"> = {
-  providerName: "Triple Whale",
   fieldIdPrefix: "triplewhale",
   identifier: {
     key: "shopId",

package/src/routes/integrations/components/connect-forms/WoocommerceConnectForm.tsx

@@ -3,7 +3,6 @@ import { InferalCredentialConnectForm, type InferalCredentialFormConfig } from "
 import type { ConnectFormProps } from "./types";
 
 export const woocommerceConfig: InferalCredentialFormConfig<"sourceUrl" | "consumerKey" | "consumerSecret"> = {
-  providerName: "WooCommerce",
   fieldIdPrefix: "woocommerce",
   identifier: {
     key: "sourceUrl",

package/src/routes/integrations/types.ts

@@ -1,10 +1,10 @@
-import type {
-  GQLDataConnectionStatus,
-  GQLGmailIntegrationStatus,
-  GQLIncludedResource,
+import {
   GQLInferalIntegrationProvider,
-  GQLIntegration,
-  GQLRelayIntegrationStatus,
+  type GQLDataConnectionStatus,
+  type GQLGmailIntegrationStatus,
+  type GQLIncludedResource,
+  type GQLIntegration,
+  type GQLRelayIntegrationStatus,
 } from "@manta-eu/client";
 import type { HexColor } from "@manta-eu/lib/color";
 import type { ComponentType, SVGProps } from "react";
@@ -98,3 +98,19 @@ export type ConnectedProvider<Id extends string = ProviderId> = {
   category: string;
   connections: ConnectionView[];
 };
+
+export const inferalProviderNames: Record<`${GQLInferalIntegrationProvider}`, string> = {
+  [GQLInferalIntegrationProvider.GoogleAds]: "Google Ads",
+  [GQLInferalIntegrationProvider.GoogleAnalytics]: "Google Analytics",
+  [GQLInferalIntegrationProvider.GoogleMerchant]: "Merchant Center",
+  [GQLInferalIntegrationProvider.Klaviyo]: "Klaviyo",
+  [GQLInferalIntegrationProvider.Linkedin]: "LinkedIn Ads",
+  [GQLInferalIntegrationProvider.Mailchimp]: "Mailchimp",
+  [GQLInferalIntegrationProvider.Meta]: "Meta",
+  [GQLInferalIntegrationProvider.Microsoftads]: "Microsoft Ads",
+  [GQLInferalIntegrationProvider.Pinterest]: "Pinterest",
+  [GQLInferalIntegrationProvider.Shopify]: "Shopify",
+  [GQLInferalIntegrationProvider.Slack]: "Slack",
+  [GQLInferalIntegrationProvider.Triplewhale]: "Triple Whale",
+  [GQLInferalIntegrationProvider.Woocommerce]: "WooCommerce",
+};

package/src/routes/memories/components/DateValueInput.tsx

@@ -0,0 +1,72 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { format, isValid, parseISO } from "date-fns";
+import { X } from "lucide-react";
+import { Button } from "#components/button/index";
+import { InputDate, InputDateTime } from "#components/input/index";
+
+export function parseDateValue(value: string | null | undefined): Date | undefined {
+  if (!isPresent(value)) return undefined;
+  const parsed = parseISO(value);
+  return isValid(parsed) ? parsed : undefined;
+}
+
+// Dates are stored as a calendar day; date-times as a UTC instant, shown in local time.
+export function formatDateValue(date: Date, withTime: boolean): string {
+  return withTime ? date.toISOString() : format(date, "yyyy-MM-dd");
+}
+
+export type DateValueInputProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  withTime?: boolean;
+  min?: string | null;
+  max?: string | null;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+};
+
+export function DateValueInput(props: DateValueInputProps) {
+  const { id, label, value, onChange, withTime = false, min, max, placeholder, error, disabled } = props;
+  const errorId = `${id}-error`;
+  const pickerProps = {
+    id,
+    selected: parseDateValue(value),
+    minDate: parseDateValue(min),
+    maxDate: parseDateValue(max),
+    allowPast: true,
+    placeholder,
+    disabled,
+    invalid: isPresent(error),
+    "aria-label": label,
+    "aria-describedby": error ? errorId : undefined,
+    onChange: (date: Date) => onChange(formatDateValue(date, withTime)),
+  };
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex flex-wrap items-center gap-2">
+        {withTime ? <InputDateTime {...pickerProps} minuteStep={15} /> : <InputDate {...pickerProps} />}
+        {isPresent(value) && (
+          <Button
+            type="button"
+            variant="tertiary"
+            size="sm"
+            iconOnly
+            icon={X}
+            aria-label={`Clear ${label}`}
+            disabled={disabled}
+            onClick={() => onChange("")}
+          />
+        )}
+      </div>
+      {error && (
+        <p id={errorId} className="typography-small text-error-foreground">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/routes/memories/components/EntityValuePicker.tsx

@@ -0,0 +1,132 @@
+import { compactUri, isValidFullIri } from "@manta-eu/client/shared/rdf-namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { sanitizeSparqlLiteral } from "@manta-eu/rdf-lib/sparql-literal-escape";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { useDebounceValue } from "usehooks-ts";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+} from "#components/combobox/index";
+import { createSelectClassName } from "#components/select/index";
+import { useSparqlSelect } from "#hooks/use-sparql-construct";
+import { cn } from "#lib/utils";
+
+const schemaName = "https://schema.org/name";
+const resultLimit = 20;
+const untypedMinimumSearch = 2;
+
+// Anchored on the class when the property names one; otherwise a name search, which needs a few letters first.
+export function entitySearchQuery(entityClass: string | null, search: string): string | null {
+  const typed = entityClass !== null && isValidFullIri(entityClass);
+  if (!typed && search.trim().length < untypedMinimumSearch) return null;
+  const needle = sanitizeSparqlLiteral(search.trim().toLowerCase());
+  return `SELECT DISTINCT ?iri ?name WHERE {
+  ${typed ? `?iri a <${entityClass}> .` : ""}
+  ?iri <${schemaName}> ?name .
+  FILTER(!isBlank(?iri))
+  FILTER(CONTAINS(LCASE(STR(?name)), "${needle}"))
+} LIMIT ${resultLimit}`;
+}
+
+function entityNameQuery(iri: string): string | null {
+  return isValidFullIri(iri) ? `SELECT ?name WHERE { <${iri}> <${schemaName}> ?name } LIMIT 1` : null;
+}
+
+export type EntityValuePickerProps = {
+  id: string;
+  label: string;
+  value: string;
+  entityClass: string | null;
+  error?: string;
+  onChange: (iri: string) => void;
+};
+
+export function EntityValuePicker(props: EntityValuePickerProps) {
+  const { id, label, value, entityClass, error, onChange } = props;
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounceValue(search, 300);
+  const searchQuery = entitySearchQuery(entityClass, debouncedSearch);
+  const nameQuery = isPresent(value) ? entityNameQuery(value) : null;
+
+  const { data: results, isFetching } = useSparqlSelect({
+    query: searchQuery ?? "",
+    queryKey: ["memory-entity-search", entityClass, debouncedSearch],
+    enabled: open && searchQuery !== null,
+  });
+  const { data: named } = useSparqlSelect({
+    query: nameQuery ?? "",
+    queryKey: ["memory-entity-name", value],
+    enabled: nameQuery !== null,
+    staleTime: 60_000,
+  });
+
+  const options = (results ?? []).flatMap((binding) => {
+    const iri = binding.get("iri")?.value;
+    return iri ? [{ iri, name: binding.get("name")?.value ?? compactUri(iri) }] : [];
+  });
+  const selectedName = named?.[0]?.get("name")?.value;
+  const errorId = `${id}-error`;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Combobox open={open} onOpenChange={setOpen}>
+        <ComboboxTrigger asChild>
+          <button
+            type="button"
+            id={id}
+            aria-label={`${label}: ${isPresent(value) ? (selectedName ?? compactUri(value)) : "not set"}`}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={error ? errorId : undefined}
+            className={cn(createSelectClassName({ size: "base" }), "w-full min-w-0")}
+          >
+            <span
+              className={cn("min-w-0 flex-1 truncate text-left", !isPresent(value) && "text-placeholder-foreground")}
+            >
+              {isPresent(value) ? (selectedName ?? compactUri(value)) : "Choose a record"}
+            </span>
+            <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
+          </button>
+        </ComboboxTrigger>
+        <ComboboxContent align="start" className="w-[var(--radix-popover-trigger-width,320px)]" filter={() => 1}>
+          <ComboboxInput placeholder="Search by name…" value={search} onValueChange={setSearch} />
+          <ComboboxList>
+            <ComboboxEmpty>
+              {searchQuery === null
+                ? `Type at least ${untypedMinimumSearch} letters`
+                : isFetching
+                  ? "Searching…"
+                  : "No matching record"}
+            </ComboboxEmpty>
+            {isPresent(value) && (
+              <ComboboxItem value="__clear__" onSelect={() => onChange("")}>
+                Clear
+              </ComboboxItem>
+            )}
+            {options.map((option) => (
+              <ComboboxItem
+                key={option.iri}
+                value={option.iri}
+                selected={option.iri === value}
+                onSelect={() => onChange(option.iri)}
+              >
+                {option.name}
+              </ComboboxItem>
+            ))}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      {error && (
+        <p id={errorId} className="typography-small text-error-foreground">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}