@protoboardai/views 0.0.0-stage → 0.2.1

package/src/parts/LibrariesManager.tsx

@@ -0,0 +1,251 @@
+/**
+ * Manage libraries, as a settings page in its own tab (PB-902, design 03):
+ * the account the libraries use, the libraries in search order (the first
+ * that has an id wins unless a part is pinned to one) with their address,
+ * size and access, and adding one by URL. Tokens are never stored: a
+ * library that needs one names an environment variable, or uses the
+ * Protoboard sign-in.
+ */
+import { useState } from "react";
+import { Icon, ScrollArea, cx } from "@deltarobotics/uhd-viewer/components";
+import type { AccountModel, LibrariesActions, LibrariesModel, ManagedLibraryModel } from "./model.js";
+import { PartsSurface } from "./Surface.js";
+import { Avatar, BODY, Button, Card, Pill, RowAction, StatusText, type Tone } from "./ui.js";
+import { Select } from "../ui/Select.js";
+
+const ACCESS: Record<ManagedLibraryModel["access"], { tone: Tone; label: (l: ManagedLibraryModel) => string }> = {
+  "signed-in": { tone: "ok", label: () => "Signed in" },
+  token: { tone: "ok", label: (l) => `Token from ${l.authEnv}` },
+  "token-missing": { tone: "warning", label: (l) => `${l.authEnv} is not set` },
+  public: { tone: "neutral", label: () => "Public" },
+  "sign-in": { tone: "warning", label: () => "Needs a sign-in" },
+  error: { tone: "error", label: (l) => l.error ?? "Not reachable" },
+  checking: { tone: "neutral", label: () => "Checking…" },
+};
+
+/** A service URL as its host ("cloud.protoboard.ai"), or the text as given. */
+const hostOf = (service: string | undefined): string | undefined => {
+  if (!service) return undefined;
+  try {
+    return new URL(service).host || service;
+  } catch {
+    return service;
+  }
+};
+
+/** The account the libraries use: who, and the sign-in action. */
+export function AccountCard({ account, actions }: { account: AccountModel; actions: Pick<LibrariesActions, "signIn" | "signOut"> }) {
+  const signedIn = account.state === "signed-in";
+  const title =
+    account.state === "signed-in"
+      ? `Signed in as ${account.email ?? "you"}`
+      : account.state === "expired"
+        ? "Sign in again"
+        : account.state === "open"
+          ? "No account needed"
+          : account.state === "signed-out"
+            ? "Not signed in"
+            : account.detail
+              ? "Sign-in not checked"
+              : "Checking the sign-in…";
+  const note =
+    account.state === "signed-in"
+      ? (account.detail ?? hostOf(account.service) ?? "")
+      : account.state === "expired"
+        ? `The sign-in${account.email ? ` as ${account.email}` : ""} no longer works${account.problem ? `: ${account.problem}` : ""}`
+        : account.state === "open"
+          ? `${hostOf(account.service) ?? "This library"} needs no sign-in`
+          : account.state === "signed-out"
+            ? "Needed for library parts and prices"
+            : (account.detail ?? "");
+  return (
+    <Card className={cx(BODY, "flex items-center gap-3 px-4 py-3")}>
+      <Avatar email={signedIn ? account.email : undefined} size={32} />
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-[13.5px] text-fg">{title}</p>
+        <p className="truncate text-[12px] text-fg-muted">{note}</p>
+      </div>
+      {signedIn && actions.signOut && (
+        <Button size="sm" onClick={actions.signOut}>
+          Sign out
+        </Button>
+      )}
+      {(account.state === "signed-out" || account.state === "expired" || account.state === "unknown") && actions.signIn && (
+        <Button size="sm" kind="primary" icon="log-in" onClick={actions.signIn}>
+          Sign in
+        </Button>
+      )}
+    </Card>
+  );
+}
+
+const GRID = "grid grid-cols-[20px_minmax(150px,1.3fr)_minmax(160px,2.2fr)_64px_minmax(130px,1.4fr)_76px] items-center gap-3 max-[820px]:grid-cols-[20px_minmax(0,1fr)_76px]";
+
+/** A row being dragged by its handle: which library, and where it would land. */
+interface Drag {
+  key: string;
+  over?: string;
+}
+
+const rowKey = (l: ManagedLibraryModel) => `${l.scope}:${l.id}`;
+
+function LibraryRow({ lib, first, last, actions, working, alone, drag, setDrag, onDrop }: { lib: ManagedLibraryModel; first: boolean; last: boolean; actions: LibrariesActions; working: boolean; alone: boolean; drag?: Drag; setDrag: (d: Drag | undefined) => void; onDrop: (from: string, to: string) => void }) {
+  const a = ACCESS[lib.access];
+  const key = rowKey(lib);
+  const dragged = drag?.key === key;
+  // a library moves within its own scope (the project's order, or your personal list); the default library stays put
+  const movable = lib.scope !== "default" && !working && !alone;
+  const target = !!drag && !dragged && drag.key.split(":")[0] === lib.scope;
+  return (
+    <div
+      onDragOver={(e) => {
+        if (!target) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        if (drag?.over !== key) setDrag({ key: drag!.key, over: key });
+      }}
+      onDragLeave={() => drag?.over === key && setDrag({ key: drag.key })}
+      onDrop={(e) => {
+        if (!target) return;
+        e.preventDefault();
+        onDrop(drag!.key, key);
+      }}
+      className={cx(GRID, BODY, "min-h-11 border-t border-line-subtle px-3 py-1.5 text-[13px]", dragged && "opacity-50", drag?.over === key && "bg-accent-tint outline outline-1 -outline-offset-1 outline-focus")}
+    >
+      <span
+        draggable={movable}
+        role="img"
+        aria-label={movable ? "Drag to reorder" : undefined}
+        data-tooltip={movable ? "Drag to change the search order" : undefined}
+        onDragStart={(e) => {
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("text/plain", key);
+          setDrag({ key });
+        }}
+        onDragEnd={() => setDrag(undefined)}
+        className={cx("grid h-6 place-items-center rounded-[3px]", movable ? "cursor-grab text-fg-muted hover:bg-hover active:cursor-grabbing" : "text-fg-faint opacity-40")}
+      >
+        <Icon name="grip-vertical" size={14} aria-hidden />
+      </span>
+      <div className="flex min-w-0 flex-col max-[820px]:gap-0.5">
+        <span className="flex min-w-0 items-center gap-2">
+          <Icon name="library-big" size={14} strokeWidth={1.75} className="shrink-0 text-fg-muted" aria-hidden />
+          <span className="truncate text-fg" title={lib.id}>
+            {lib.name ?? lib.id}
+          </span>
+          <Pill>{lib.scope}</Pill>
+        </span>
+        <span className="hidden truncate font-ui text-[11.5px] text-fg-muted max-[820px]:block">{lib.url}</span>
+        <span className="hidden max-[820px]:block">
+          <StatusText tone={a.tone} plain>{a.label(lib)}</StatusText>
+        </span>
+      </div>
+      <span className="truncate font-ui text-[12px] text-fg max-[820px]:hidden" title={lib.url}>
+        {lib.url}
+      </span>
+      <span className="font-ui text-[12px] text-fg max-[820px]:hidden">{lib.parts !== undefined ? lib.parts.toLocaleString("en-US") : "—"}</span>
+      <span className="min-w-0 truncate max-[820px]:hidden" title={lib.error}>
+        <StatusText tone={a.tone} plain>{a.label(lib)}</StatusText>
+      </span>
+      <span className="flex justify-end">
+        <RowAction icon="arrow-up" label="Search it earlier" disabled={first || working} onClick={() => actions.move(lib.id, lib.scope, "up")} />
+        <RowAction icon="arrow-down" label="Search it later" disabled={last || working} onClick={() => actions.move(lib.id, lib.scope, "down")} />
+        <RowAction icon="trash" label={lib.scope === "default" ? "The default library stays unless the project lists others" : lib.pinned ? `Remove (${lib.pinned} part(s) pinned to it stay vendored)` : "Remove"} disabled={working || lib.scope === "default"} onClick={() => actions.remove(lib.id, lib.scope)} />
+      </span>
+    </div>
+  );
+}
+
+export function LibrariesManager({ model, actions }: { model: LibrariesModel; actions: LibrariesActions }) {
+  const [url, setUrl] = useState("");
+  const [scope, setScope] = useState<"project" | "personal">("project");
+  const [env, setEnv] = useState("");
+  const valid = /^https?:\/\/\S+$/.test(url.trim());
+  const [drag, setDrag] = useState<Drag>();
+  // dropped on another row of the same scope: move that many places within the scope's own order
+  const drop = (from: string, to: string) => {
+    setDrag(undefined);
+    const lib = model.libraries.find((l) => rowKey(l) === from);
+    if (!lib) return;
+    const same = model.libraries.filter((l) => l.scope === lib.scope).map(rowKey);
+    const delta = same.indexOf(to) - same.indexOf(from);
+    if (delta && same.indexOf(to) >= 0) actions.move(lib.id, lib.scope, delta < 0 ? "up" : "down", Math.abs(delta));
+  };
+  const add = () => {
+    if (!valid) return;
+    actions.add(url.trim(), scope, env.trim() || undefined);
+    setUrl("");
+    setEnv("");
+  };
+  return (
+    <PartsSurface place="editor">
+      <ScrollArea className="size-full" contentClassName="mx-auto flex max-w-[1060px] flex-col gap-4 px-10 pt-7 pb-10 max-[640px]:px-4">
+        <header className={BODY}>
+          <h1 className="text-[22px] font-semibold text-fg">Libraries</h1>
+          <p className="mt-1 text-[13px] text-fg-muted">Where parts come from, in search order.</p>
+        </header>
+        <AccountCard account={model.account} actions={actions} />
+        <Card className="overflow-hidden">
+          <div className={cx(GRID, BODY, "h-9 px-3 text-[12px] font-medium text-fg-muted")}>
+            <span />
+            <span>Library</span>
+            <span className="max-[820px]:hidden">URL</span>
+            <span className="max-[820px]:hidden">Parts</span>
+            <span className="max-[820px]:hidden">Access</span>
+            <span className="flex justify-end">{actions.check && <RowAction icon="refresh-cw" label="Check every library again" onClick={actions.check} />}</span>
+          </div>
+          {model.libraries.map((l, i) => (
+            <LibraryRow key={rowKey(l)} lib={l} first={i === 0} last={i === model.libraries.length - 1} actions={actions} working={model.working} alone={model.libraries.filter((x) => x.scope === l.scope).length < 2} drag={drag} setDrag={setDrag} onDrop={drop} />
+          ))}
+          {!model.libraries.length && <p className={cx(BODY, "border-t border-line-subtle px-4 py-3 text-[13px] text-fg-muted")}>{model.noProject ? "Open a Protoboard project to see its libraries." : "No libraries yet."}</p>}
+        </Card>
+        <form
+          className={cx(BODY, "flex flex-wrap items-center gap-2")}
+          onSubmit={(e) => {
+            e.preventDefault();
+            add();
+          }}
+        >
+          <label className="flex h-8 min-w-[240px] flex-[3_1_320px] items-center gap-2 rounded-[4px] border border-line bg-sunken px-2.5 focus-within:border-focus focus-within:outline focus-within:outline-1 focus-within:-outline-offset-1 focus-within:outline-focus">
+            <Icon name="link" size={14} className="shrink-0 text-fg-muted" aria-hidden />
+            <input value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://… a library that speaks uhd-library/v1" aria-label="Library URL" spellCheck={false} className="h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] text-fg outline-none placeholder:text-fg-faint" />
+          </label>
+          <label className="flex h-8 min-w-[150px] flex-[1_1_160px] items-center gap-2 rounded-[4px] border border-line bg-sunken px-2.5 focus-within:border-focus" data-tooltip="Only for a library that needs a token: the name of the environment variable holding it">
+            <Icon name="key-round" size={14} className="shrink-0 text-fg-muted" aria-hidden />
+            <input value={env} onChange={(e) => setEnv(e.target.value.toUpperCase())} placeholder="TOKEN_VARIABLE" aria-label="Token environment variable" spellCheck={false} className="h-full min-w-0 flex-1 border-0 bg-transparent p-0 font-ui text-[12px] text-fg outline-none placeholder:text-fg-faint" />
+          </label>
+          <Select
+            label="Where to add it"
+            tooltip="Project: protoboard.config.ts, for everyone. Personal: your settings only"
+            value={scope}
+            onChange={(v) => setScope(v as "project" | "personal")}
+            options={[
+              { value: "project", label: "Project" },
+              { value: "personal", label: "Personal" },
+            ]}
+            className="relative flex h-8 items-center gap-1 rounded-[4px] border border-[var(--pb-control-border)] px-2.5 text-[13px] text-fg hover:bg-hover"
+            trigger={
+              <>
+                <Icon name={scope === "project" ? "folder" : "user"} size={14} aria-hidden />
+                {scope === "project" ? "Project" : "Personal"}
+                <Icon name="chevron-down" size={12} aria-hidden />
+              </>
+            }
+          />
+          <Button kind="primary" icon={model.working ? "loader" : "plus"} type="submit" disabled={!valid || model.working || model.noProject}>
+            Add library
+          </Button>
+        </form>
+        {model.problems.map((p) => (
+          <p key={p} className={cx(BODY, "text-[12px] text-warning")}>
+            {p}
+          </p>
+        ))}
+        <Card className={cx(BODY, "flex items-center gap-3 px-4 py-3 text-[13px] text-fg")}>
+          <Icon name="info" size={15} className="shrink-0 text-info" aria-hidden />
+          Tokens come from an environment variable or your sign-in, never the project.
+        </Card>
+      </ScrollArea>
+    </PartsSurface>
+  );
+}

package/src/parts/LibraryBrowser.tsx

@@ -0,0 +1,191 @@
+/**
+ * The Library sidebar (PB-902, design 01; PB-934): search, the category
+ * breadcrumb, the categories as a list that drills in and out (it folds away
+ * to leave the parts the room), the count and the order, and the part cards.
+ * Opening a card shows the part's detail in an editor tab (the host's).
+ */
+import { useEffect, useRef, useState } from "react";
+import { EmptyState, Icon, ScrollArea, cx } from "@deltarobotics/uhd-viewer/components";
+import { CategoryList } from "./CategoryList.js";
+import { SORT_LABEL } from "./library-data.js";
+import type { LibraryActions, LibraryModel, LibrarySort, LibrarySortModel } from "./model.js";
+import { CARD_HEIGHT, PartCard } from "./PartCard.js";
+import { LinkPagesToggle, PagerProvider, PagesProvider, useNewPagerStore } from "./carousel.js";
+import { Windowed } from "./Windowed.js";
+import { PartsSurface } from "./Surface.js";
+import { BODY, Button, SearchField, categoryIcon } from "./ui.js";
+import { Select } from "../ui/Select.js";
+
+/** "All › Sensors › Environmental": each crumb goes back to that level. */
+export function Crumbs({ crumbs, onPick, className }: { crumbs: LibraryModel["crumbs"]; onPick: (path: string) => void; className?: string }) {
+  const list = crumbs.length ? crumbs : [{ path: "", name: "All" }];
+  return (
+    <nav aria-label="Category" className={cx(BODY, "flex min-w-0 items-center gap-1 text-[12.5px]", className)}>
+      <Icon name={list.length > 1 ? categoryIcon(list[list.length - 1].path) : "network"} size={13} strokeWidth={1.75} className="shrink-0 text-fg-muted" aria-hidden />
+      {list.map((c, i) => {
+        const last = i === list.length - 1;
+        return (
+          <span key={c.path || "all"} className="flex min-w-0 items-center gap-1">
+            {i > 0 && <Icon name="chevron-right" size={12} className="shrink-0 text-fg-faint" aria-hidden />}
+            <button
+              type="button"
+              aria-current={last ? "location" : undefined}
+              onClick={() => onPick(c.path)}
+              className={cx("cursor-pointer truncate rounded-[3px] px-0.5 hover:underline", last ? "font-semibold text-fg" : "text-fg-muted hover:text-fg")}
+            >
+              {i === 0 ? "All" : c.name}
+            </button>
+          </span>
+        );
+      })}
+    </nav>
+  );
+}
+
+/**
+ * The order of the results. It offers only the orders that work (`sort.options`,
+ * library-data.ts `sortState`), and says when an order was made here over the
+ * parts loaded so far instead of by the library.
+ */
+export function SortMenu({ sort, onSort, compact }: { sort: LibrarySortModel; onSort: (s: LibrarySort) => void; compact?: boolean }) {
+  const tip = sort.local ? `Ordered by ${SORT_LABEL[sort.value].toLowerCase()} (loaded parts only)` : `Ordered by ${SORT_LABEL[sort.value].toLowerCase()}`;
+  return (
+    <Select
+      label="Order of the results"
+      tooltip={tip}
+      value={sort.value}
+      onChange={(v) => onSort(v as LibrarySort)}
+      options={sort.options.map((s) => ({ value: s, label: SORT_LABEL[s] }))}
+      className={cx(
+        BODY,
+        "relative inline-flex shrink-0 items-center gap-1 text-fg-muted hover:text-fg",
+        compact ? "h-6 text-[12px]" : "h-8 rounded-[4px] border border-[var(--pb-control-border)] px-3 text-[13px] text-fg hover:bg-hover",
+      )}
+      trigger={
+        <>
+          <Icon name="arrow-down-up" size={compact ? 12 : 14} strokeWidth={1.75} aria-hidden />
+          <span>{SORT_LABEL[sort.value]}</span>
+          {compact && <Icon name="chevron-down" size={12} aria-hidden />}
+        </>
+      }
+    />
+  );
+}
+
+/** Asks for the next page when the end of the list comes into view. */
+export function LoadMore({ model, onMore }: { model: Pick<LibraryModel, "more" | "loadingMore">; onMore: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !model.more || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver((e) => e.some((x) => x.isIntersecting) && onMore(), { rootMargin: "200px" });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [model.more, onMore]);
+  if (!model.more) return null;
+  return (
+    <div ref={ref} className="flex justify-center py-2">
+      <Button size="sm" kind="ghost" icon={model.loadingMore ? "loader" : "chevrons-down"} disabled={model.loadingMore} onClick={onMore}>
+        {model.loadingMore ? "Loading…" : "More parts"}
+      </Button>
+    </div>
+  );
+}
+
+export function LibraryProblems({ model, onRetry }: { model: Pick<LibraryModel, "error" | "setupError" | "libraries">; onRetry?: () => void }) {
+  const failed = model.libraries.filter((l) => l.error);
+  const message = model.setupError ?? model.error;
+  if (!message && !failed.length) return null;
+  return (
+    <div role="status" className={cx(BODY, "flex items-start gap-2 rounded-[4px] border border-line px-2.5 py-2 text-[12px] text-fg-muted")}>
+      <Icon name="triangle-alert" size={14} className="mt-px shrink-0 text-warning" aria-hidden />
+      <div className="min-w-0 flex-1">
+        {message && <p className="text-fg">{message}</p>}
+        {failed.map((l) => (
+          <p key={l.id}>
+            {l.name ?? l.id}: {l.error}
+          </p>
+        ))}
+      </div>
+      {onRetry && <Button size="sm" kind="ghost" icon="refresh-cw" onClick={onRetry} aria-label="Try again" />}
+    </div>
+  );
+}
+
+export interface LibraryBrowserProps {
+  model: LibraryModel;
+  actions: LibraryActions;
+  /** The part whose detail is open (its card is outlined). */
+  selected?: string;
+}
+
+export function LibraryBrowser({ model, actions, selected }: LibraryBrowserProps) {
+  // the category list folds away: the breadcrumb stays, and says where the list is
+  const [open, setOpen] = useState(true);
+  const pager = useNewPagerStore();
+  const asked = model.libraries.length;
+  const pick = (category: string) => actions.query({ category });
+  return (
+    <PartsSurface place="sidebar">
+      <div className="flex size-full min-w-[220px] flex-col">
+        <div className="flex shrink-0 flex-col gap-2 px-3 pt-2 pb-2">
+          <SearchField value={model.query.text} placeholder="Search parts" onChange={(text) => actions.query({ text })} />
+          <div className="flex min-w-0 items-center gap-1">
+            <Crumbs crumbs={model.crumbs} onPick={pick} className="flex-1" />
+            <button
+              type="button"
+              aria-expanded={open}
+              aria-label={open ? "Hide the categories" : "Show the categories"}
+              data-tooltip={open ? "Hide the categories" : "Show the categories"}
+              onClick={() => setOpen(!open)}
+              className="grid size-6 shrink-0 cursor-pointer place-items-center rounded-[4px] text-fg-muted hover:bg-hover hover:text-fg focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-focus"
+            >
+              <Icon name={open ? "chevrons-down-up" : "chevrons-up-down"} size={14} strokeWidth={1.75} aria-hidden />
+            </button>
+          </div>
+          {/* the list scrolls inside its own area: the parts below keep most of the side bar */}
+          {open && <CategoryList model={model} onPick={pick} scroll className="max-h-[min(264px,38vh)] border-y border-line-subtle py-1" />}
+          <div className={cx(BODY, "flex items-center gap-2 text-[11.5px] text-fg-muted")}>
+            <span className="min-w-0 flex-1 truncate">
+              {model.loading ? "Searching…" : `${model.total} part${model.total === 1 ? "" : "s"}`}
+              {asked > 1 && ` · ${asked} libraries`}
+            </span>
+            {actions.pages && <LinkPagesToggle store={pager} compact />}
+            <SortMenu sort={model.sort} onSort={(sort) => actions.query({ sort })} compact />
+          </div>
+          <LibraryProblems model={model} onRetry={actions.retry} />
+        </div>
+        <ScrollArea className="min-h-0 flex-1" contentClassName="flex flex-col gap-2 px-3 pb-3">
+          <PagesProvider loader={actions.pages}>
+            <PagerProvider store={pager}>
+              {model.items.map((it, i) => (
+                <Windowed key={it.key} height={CARD_HEIGHT.row} eager={i < 10}>
+                  <PartCard item={it} selected={it.key === selected} noProject={model.noProject} onOpen={actions.open} onAdd={actions.add} onUpdate={actions.update} onMore={actions.more} />
+                </Windowed>
+              ))}
+            </PagerProvider>
+          </PagesProvider>
+          {!model.items.length && !model.loading && !model.setupError && (
+            <div className="py-8">
+              <EmptyState icon={<Icon name="search-x" size={24} strokeWidth={1.25} />} title="No parts match">
+                {model.query.text || model.query.category ? "Try other words, or a broader category." : "The libraries list no parts."}
+              </EmptyState>
+            </div>
+          )}
+          {model.loading && !model.items.length && <Skeleton />}
+          <LoadMore model={model} onMore={actions.loadMore} />
+        </ScrollArea>
+      </div>
+    </PartsSurface>
+  );
+}
+
+function Skeleton() {
+  return (
+    <>
+      {[0, 1, 2].map((i) => (
+        <div key={i} aria-hidden className="h-[132px] animate-pulse rounded-[4px] border border-line bg-[var(--pb-card)]" />
+      ))}
+    </>
+  );
+}

package/src/parts/LibraryPage.tsx

@@ -0,0 +1,168 @@
+/**
+ * The full-page library (PB-902, design 02; PB-934): a McMaster-style grid
+ * with larger pictures and more per part. On the left the categories as a
+ * list that drills in and out (with counts), the libraries searched and the
+ * "show only" filters; on the right the search, the order and grid/list
+ * switch, the category's breadcrumb and heading, then the cards. Narrow: the
+ * left column folds away behind a button.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { EmptyState, Icon, IconButton, ScrollArea, cx } from "@deltarobotics/uhd-viewer/components";
+import { CategoryList } from "./CategoryList.js";
+import { Crumbs, LibraryProblems, LoadMore, SortMenu } from "./LibraryBrowser.js";
+import type { LibraryActions, LibraryModel, PartCardModel } from "./model.js";
+import { CARD_HEIGHT, PartCard } from "./PartCard.js";
+import { LinkPagesToggle, PagerProvider, PagesProvider, useNewPagerStore } from "./carousel.js";
+import { Windowed } from "./Windowed.js";
+import { PartsSurface } from "./Surface.js";
+import { BODY, SearchField, SectionLabel, categoryIcon } from "./ui.js";
+
+type ShowOnly = "model" | "audited" | "project";
+const SHOW_ONLY: { id: ShowOnly; label: string; icon: string; test: (x: PartCardModel) => boolean | undefined; known: (x: PartCardModel) => boolean }[] = [
+  { id: "model", label: "Has 3D model", icon: "box", test: (x) => x.hasModel, known: (x) => x.hasModel !== undefined },
+  { id: "audited", label: "Independently audited", icon: "shield-check", test: (x) => x.audited, known: (x) => x.audited !== undefined },
+  { id: "project", label: "In this project", icon: "folder", test: (x) => !!x.used && !x.used.elsewhere, known: () => true },
+];
+
+export interface LibraryPageProps {
+  model: LibraryModel;
+  actions: LibraryActions;
+  selected?: string;
+}
+
+function Check({ checked, label, onChange, disabled, title, icon }: { checked: boolean; label: string; onChange: (v: boolean) => void; disabled?: boolean; title?: string; icon?: string }) {
+  return (
+    <label title={title} className={cx(BODY, "flex h-6 cursor-pointer items-center gap-2 rounded-[3px] px-1 text-[12.5px] text-fg hover:bg-hover", disabled && "cursor-default opacity-50 hover:bg-transparent")}>
+      {icon ? (
+        <Icon name={icon} size={14} strokeWidth={1.75} className={checked ? "text-accent" : "text-fg-muted"} aria-hidden />
+      ) : (
+        <span aria-hidden className={cx("grid size-3.5 shrink-0 place-items-center rounded-[3px] border", checked ? "border-accent bg-accent text-on-accent" : "border-[var(--pb-control-border)]")}>
+          {checked && <Icon name="check" size={11} strokeWidth={3} />}
+        </span>
+      )}
+      <input type="checkbox" className="sr-only" checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} />
+      <span className={cx("truncate", icon && checked && "font-medium")}>{label}</span>
+    </label>
+  );
+}
+
+export function LibraryPage({ model, actions, selected }: LibraryPageProps) {
+  const [layout, setLayout] = useState<"grid" | "list">("grid");
+  const [hidden, setHidden] = useState<Set<string>>(new Set());
+  const [only, setOnly] = useState<Set<ShowOnly>>(new Set());
+  const [rail, setRail] = useState(false);
+  const pager = useNewPagerStore();
+  const current = model.crumbs[model.crumbs.length - 1];
+  const heading = model.crumbs.length > 1 ? current.name : "All parts";
+  const items = useMemo(() => {
+    let list = model.items.filter((x) => !hidden.has(x.library));
+    for (const o of only) list = list.filter((x) => SHOW_ONLY.find((s) => s.id === o)!.test(x));
+    return list;
+  }, [model.items, hidden, only]);
+  // the catalog's size: the unfiltered search's total, remembered while a category or text narrows it (summing the categories counts a part once per category)
+  const [seenTotal, setSeenTotal] = useState<number>();
+  useEffect(() => {
+    if (model.catalogTotal !== undefined) setSeenTotal(model.catalogTotal);
+  }, [model.catalogTotal]);
+  const catalogSize = model.catalogTotal ?? seenTotal ?? 0;
+  const pick = (category: string) => actions.query({ category });
+  const toggle = <T,>(set: Set<T>, v: T, on: boolean) => {
+    const next = new Set(set);
+    if (on) next.add(v);
+    else next.delete(v);
+    return next;
+  };
+
+  const side = (
+    <div className="flex flex-col gap-4 px-4 pt-5 pb-4">
+      <section>
+        <SectionLabel>Categories</SectionLabel>
+        <CategoryList model={catalogSize ? { ...model, catalogTotal: catalogSize } : model} onPick={pick} className="mt-1" />
+      </section>
+      {model.libraries.length > 0 && (
+        <section>
+          <SectionLabel>Libraries</SectionLabel>
+          <div className="mt-1 flex flex-col">
+            {model.libraries.map((l) => (
+              <Check key={l.id} checked={!hidden.has(l.id)} label={l.name ?? l.id} title={l.error ? `${l.id}: ${l.error}` : l.total !== undefined ? `${l.total} matching` : undefined} onChange={(on) => setHidden(toggle(hidden, l.id, !on))} />
+            ))}
+          </div>
+        </section>
+      )}
+      <section>
+        <SectionLabel>Show only</SectionLabel>
+        <div className="mt-1 flex flex-col">
+          {SHOW_ONLY.map((s) => {
+            const known = model.items.some(s.known);
+            return (
+              <Check
+                key={s.id}
+                icon={s.icon}
+                checked={only.has(s.id)}
+                disabled={!known}
+                title={known ? undefined : "The libraries do not say this yet"}
+                label={s.label}
+                onChange={(on) => setOnly(toggle(only, s.id, on))}
+              />
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+
+  return (
+    <PartsSurface place="editor">
+      <div className="flex size-full min-w-[360px]">
+        <aside aria-label="Filters" className={cx("w-[260px] shrink-0 border-r border-line-subtle bg-[var(--pb-bg)] max-[760px]:absolute max-[760px]:inset-y-0 max-[760px]:left-0 max-[760px]:z-20 max-[760px]:shadow-float", !rail && "max-[760px]:hidden")}>
+          <ScrollArea className="size-full">{side}</ScrollArea>
+        </aside>
+        <main className="flex min-w-0 flex-1 flex-col">
+          <div className="flex shrink-0 items-center gap-2 px-6 pt-5 max-[760px]:px-4">
+            <span className="min-[761px]:hidden">
+              <IconButton icon="sliders-horizontal" label="Categories and filters" pressed={rail} onClick={() => setRail(!rail)} />
+            </span>
+            <SearchField className="min-w-0 flex-1" value={model.query.text} placeholder={`Search ${catalogSize ? `${catalogSize} ` : ""}parts by name, MPN or what it does…`} onChange={(text) => actions.query({ text })} />
+            <SortMenu sort={model.sort} onSort={(sort) => actions.query({ sort })} />
+            {actions.pages && <LinkPagesToggle store={pager} />}
+            <span className="flex items-center gap-1">
+              <IconButton icon="layout-grid" label="Grid" pressed={layout === "grid"} onClick={() => setLayout("grid")} />
+              <IconButton icon="list" label="List" pressed={layout === "list"} onClick={() => setLayout("list")} />
+            </span>
+          </div>
+          {model.crumbs.length > 1 && <Crumbs crumbs={model.crumbs} onPick={pick} className="shrink-0 px-6 pt-4 max-[760px]:px-4" />}
+          <div className={cx(BODY, "flex shrink-0 items-baseline gap-2 px-6 max-[760px]:px-4", model.crumbs.length > 1 ? "pt-1.5" : "pt-4")}>
+            <Icon name={model.crumbs.length > 1 ? categoryIcon(current.path) : "layout-grid"} size={16} strokeWidth={1.75} className="self-center text-fg" aria-hidden />
+            <h1 className="text-[17px] font-semibold text-fg">{heading}</h1>
+            <span className="text-[12.5px] text-fg-muted">{model.loading ? "searching…" : `${model.total} part${model.total === 1 ? "" : "s"}`}</span>
+          </div>
+          <div className="shrink-0 px-6 pt-2 empty:hidden max-[760px]:px-4">
+            <LibraryProblems model={model} onRetry={actions.retry} />
+          </div>
+          <ScrollArea className="min-h-0 flex-1" contentClassName="px-6 pt-3 pb-6 max-[760px]:px-4">
+            <div className={layout === "grid" ? "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4" : "flex flex-col gap-2"}>
+              <PagesProvider loader={actions.pages}>
+                <PagerProvider store={pager}>
+                  {items.map((it, i) => (
+                    <Windowed key={it.key} height={CARD_HEIGHT[layout === "grid" ? "tile" : "row"]} eager={i < 24}>
+                      <PartCard item={it} variant={layout === "grid" ? "tile" : "row"} selected={it.key === selected} noProject={model.noProject} onOpen={actions.open} onAdd={actions.add} onUpdate={actions.update} onMore={layout === "list" ? actions.more : undefined} />
+                    </Windowed>
+                  ))}
+                </PagerProvider>
+              </PagesProvider>
+              {model.loading && !items.length && [0, 1, 2, 3].map((i) => <div key={i} aria-hidden className="h-[300px] animate-pulse rounded-[6px] border border-line bg-[var(--pb-card)]" />)}
+            </div>
+            {!items.length && !model.loading && (
+              <div className="py-16">
+                <EmptyState icon={<Icon name="search-x" size={28} strokeWidth={1.25} />} title="No parts match">
+                  {hidden.size || only.size ? "The filters on the left hide them." : "Try other words, or a broader category."}
+                </EmptyState>
+              </div>
+            )}
+            <LoadMore model={model} onMore={actions.loadMore} />
+          </ScrollArea>
+        </main>
+      </div>
+    </PartsSurface>
+  );
+}