Selects application entities.
<div class="ep ep--type-all ep--sel-brief" style="--accent:#F5C2E0;">
<label class="ep__label" for="ep-trigger">Link a record</label>
<div class="ep__combo ep__combo--open" role="combobox" aria-haspopup="listbox" aria-owns="ep-listbox" aria-expanded="true">
<button type="button" id="ep-trigger" class="ep__trigger" aria-controls="ep-listbox">Search records…</button>
<ul id="ep-listbox" class="ep__listbox" role="listbox" aria-label="Link a record results">
<li class="ep__row" data-id="brief" data-type="document" role="option" aria-selected="true">
<svg class="ep__icon" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><rect x="4" y="2.5" width="12" height="15" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"></rect><line x1="7" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.4"></line><line x1="7" y1="10.5" x2="13" y2="10.5" stroke="currentColor" stroke-width="1.4"></line></svg>
<span class="ep__name">Q3 Brief</span>
<span class="ep__type">Document</span>
</li>
<li class="ep__row" data-id="declan" data-type="person" role="option" aria-selected="false">
<svg class="ep__icon" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><circle cx="10" cy="6.5" r="3" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M4 17c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" fill="none" stroke="currentColor" stroke-width="1.4"></path></svg>
<span class="ep__name">Declan Fox</span>
<span class="ep__type">Person</span>
</li>
<li class="ep__row" data-id="roadmap" data-type="document" role="option" aria-selected="false">
<svg class="ep__icon" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><rect x="4" y="2.5" width="12" height="15" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"></rect><line x1="7" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.4"></line><line x1="7" y1="10.5" x2="13" y2="10.5" stroke="currentColor" stroke-width="1.4"></line></svg>
<span class="ep__name">Product Roadmap</span>
<span class="ep__type">Document</span>
</li>
</ul>
</div>
</div>
<style>
.ep { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 280px; }
.ep__label { display: block; margin-bottom: 6px; font-weight: 500; }
.ep__combo { position: relative; }
.ep__trigger { width: 100%; box-sizing: border-box; text-align: left; padding: 10px 12px; font: inherit; color: #24143099; background: #FAF7F2; border: 1.5px solid #24143040; cursor: pointer; }
.ep__trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.ep__listbox { list-style: none; margin: 4px 0 0; padding: 4px; border: 1.5px solid #24143020; background: #FAF7F2; box-shadow: 0 8px 20px #24143022; display: none; }
.ep__combo--open .ep__listbox { display: block; }
.ep__row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.ep__row:hover { background: #24143014; }
.ep__icon { flex-shrink: 0; color: #24143099; }
.ep__name { flex: 1; }
.ep__type { font-size: 12px; color: #24143080; }
.ep--type-document .ep__row[data-type="person"] { display: none; }
.ep--type-person .ep__row[data-type="document"] { display: none; }
.ep--sel-brief .ep__row[data-id="brief"], .ep--sel-declan .ep__row[data-id="declan"], .ep--sel-roadmap .ep__row[data-id="roadmap"] { background: var(--accent); }
</style><div class="ep-tw ep-tw--type-all ep-tw--sel-brief font-sans text-sm text-[#241430] max-w-[280px]">
<label class="block mb-1.5 font-medium" for="ep-trigger-tw">Link a record</label>
<div class="relative" role="combobox" aria-haspopup="listbox" aria-owns="ep-listbox-tw" aria-expanded="true">
<button type="button" id="ep-trigger-tw" aria-controls="ep-listbox-tw"
class="w-full box-border text-left px-3 py-2.5 text-[#24143099] bg-[#FAF7F2] border-[1.5px] border-[#24143040] cursor-pointer focus-visible:outline-none">Search records…</button>
<ul id="ep-listbox-tw" role="listbox" aria-label="Link a record results"
class="block list-none m-0 mt-1 p-1 border-[1.5px] border-[#24143020] bg-[#FAF7F2] shadow-lg">
<li class="ep-tw-row flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143014]" data-id="brief" data-type="document" role="option" aria-selected="true">
<svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" class="shrink-0 text-[#24143099]"><rect x="4" y="2.5" width="12" height="15" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"></rect><line x1="7" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.4"></line><line x1="7" y1="10.5" x2="13" y2="10.5" stroke="currentColor" stroke-width="1.4"></line></svg>
<span class="flex-1">Q3 Brief</span>
<span class="text-xs text-[#24143080]">Document</span>
</li>
<li class="ep-tw-row flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143014]" data-id="declan" data-type="person" role="option" aria-selected="false">
<svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" class="shrink-0 text-[#24143099]"><circle cx="10" cy="6.5" r="3" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M4 17c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" fill="none" stroke="currentColor" stroke-width="1.4"></path></svg>
<span class="flex-1">Declan Fox</span>
<span class="text-xs text-[#24143080]">Person</span>
</li>
<li class="ep-tw-row flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143014]" data-id="roadmap" data-type="document" role="option" aria-selected="false">
<svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" class="shrink-0 text-[#24143099]"><rect x="4" y="2.5" width="12" height="15" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"></rect><line x1="7" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.4"></line><line x1="7" y1="10.5" x2="13" y2="10.5" stroke="currentColor" stroke-width="1.4"></line></svg>
<span class="flex-1">Product Roadmap</span>
<span class="text-xs text-[#24143080]">Document</span>
</li>
</ul>
</div>
</div>
<style>
.ep-tw--type-document .ep-tw-row[data-type="person"] { display: none; }
.ep-tw--type-person .ep-tw-row[data-type="document"] { display: none; }
.ep-tw--sel-brief .ep-tw-row[data-id="brief"], .ep-tw--sel-declan .ep-tw-row[data-id="declan"], .ep-tw--sel-roadmap .ep-tw-row[data-id="roadmap"] { background: #F5C2E0; }
</style>export function EntityPicker({
label = "Link a record",
entityType = "all",
entity = "brief",
open = true,
accent = "#F5C2E0",
}) {
const docIcon = (
<svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" style={{ flexShrink: 0, color: "#24143099" }}>
<rect x="4" y="2.5" width="12" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.4" />
<line x1="7" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="1.4" />
<line x1="7" y1="10.5" x2="13" y2="10.5" stroke="currentColor" strokeWidth="1.4" />
</svg>
);
const personIcon = (
<svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" style={{ flexShrink: 0, color: "#24143099" }}>
<circle cx="10" cy="6.5" r="3" fill="none" stroke="currentColor" strokeWidth="1.4" />
<path d="M4 17c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" fill="none" stroke="currentColor" strokeWidth="1.4" />
</svg>
);
const entities = [
{ id: "brief", name: "Q3 Brief", type: "document", icon: docIcon },
{ id: "declan", name: "Declan Fox", type: "person", icon: personIcon },
{ id: "roadmap", name: "Product Roadmap", type: "document", icon: docIcon },
];
const rows = entities.filter((e) => entityType === "all" || e.type === entityType);
return (
<div style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 280 }}>
<label htmlFor="ep-trigger-r" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</label>
<div style={{ position: "relative" }} role="combobox" aria-haspopup="listbox" aria-owns="ep-listbox-r" aria-expanded={open}>
<button type="button" id="ep-trigger-r" aria-controls="ep-listbox-r" style={{
width: "100%", boxSizing: "border-box", textAlign: "left", padding: "10px 12px", font: "inherit",
color: "#24143099", background: "#FAF7F2", border: "1.5px solid #24143040", cursor: "pointer",
}}>Search records…</button>
<ul id="ep-listbox-r" role="listbox" aria-label={label + " results"} style={{
display: open ? "block" : "none", listStyle: "none", margin: "4px 0 0", padding: 4,
border: "1.5px solid #24143020", background: "#FAF7F2", boxShadow: "0 8px 20px #24143022",
}}>
{rows.map((row) => (
<li key={row.id} role="option" aria-selected={row.id === entity} style={{
display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderRadius: 6, cursor: "pointer",
background: row.id === entity ? accent : "transparent",
}}>
{row.icon}
<span style={{ flex: 1 }}>{row.name}</span>
<span style={{ fontSize: 12, color: "#24143080" }}>{row.type === "document" ? "Document" : "Person"}</span>
</li>
))}
</ul>
</div>
</div>
);
}