@protoboardai/views 0.0.0-stage → 0.2.0

package/src/parts/CardPages.tsx

@@ -0,0 +1,317 @@
+/**
+ * A card's carousels (PB-918, designs 06 and 07): the picture carousel on
+ * top (dots always, arrows and the "2 / 4" index on hover or focus) and the
+ * pages of the text carousel under the title: overview, specs, dimensions,
+ * interfaces, CAD and artifacts, each drawn to fit a fixed box so the card
+ * never changes size. A list shows a still of the CAD, never the model.
+ */
+import { useEffect, useRef, type ReactNode } from "react";
+import { Icon, cx } from "@deltarobotics/uhd-viewer/components";
+import { StepButton, useSwipe, type PagesState } from "./carousel.js";
+import type { CardPageId, PartCardModel, PartFact, PartImage, PartOutline, PartPages } from "./model.js";
+import { BODY, Tag, Thumb } from "./ui.js";
+
+// ---------------------------------------------------------------- pictures
+
+export interface ImageCarouselProps {
+  images: PartImage[];
+  /** The part's name, for the pictures' accessible names. */
+  alt: string;
+  index: number;
+  onIndex(index: number): void;
+  className?: string;
+  /** The placeholder icon when the part has no picture. */
+  icon?: string;
+  iconSize?: number;
+  /** The arrows' size (24 on a tile, 18 on a row, 36 in the detail). */
+  arrow?: number;
+  /** Arrows and dots take part in the tab order (the detail); on a card the card's own keys turn the pictures. */
+  tabbable?: boolean;
+  /** Over the picture, above the carousel's own controls (the state pill, the expand button). */
+  children?: ReactNode;
+}
+
+/** A part's pictures, one at a time. With one picture there is nothing to turn: no dots, no arrows. */
+export function ImageCarousel({ images, alt, index, onIndex, className, icon, iconSize, arrow = 24, tabbable, children }: ImageCarouselProps) {
+  const n = images.length;
+  const i = n ? Math.min(Math.max(index, 0), n - 1) : 0;
+  const step = (d: number) => n > 1 && onIndex((i + d + n) % n);
+  const swipe = useSwipe(step);
+  const tab = tabbable ? 0 : -1;
+  const round = cx(
+    "pb-reveal absolute top-1/2 z-[1] -translate-y-1/2 !rounded-full bg-[color-mix(in_oklab,black_64%,transparent)] !text-white hover:bg-[color-mix(in_oklab,black_82%,transparent)]",
+    "outline-1 outline-contrast",
+  );
+  return (
+    <div role={n > 1 ? "group" : undefined} aria-roledescription={n > 1 ? "carousel" : undefined} aria-label={n > 1 ? `Pictures of ${alt}` : undefined} className={cx("relative shrink-0 touch-pan-y overflow-hidden", className)} {...(n > 1 ? swipe : {})}>
+      <Thumb src={images[i]?.url} alt={n > 1 ? `${alt}: ${images[i].label} (${i + 1} of ${n})` : alt} className="size-full" icon={icon} {...(iconSize ? { iconSize } : {})} />
+      {n > 1 && (
+        <>
+          <span aria-hidden className="pb-reveal absolute top-2 left-2 z-[1] rounded-full bg-[color-mix(in_oklab,black_64%,transparent)] px-1.5 py-0.5 font-ui text-[10px] leading-none text-white tabular-nums outline-1 outline-contrast">
+            {i + 1} / {n}
+          </span>
+          <StepButton dir="prev" label="Previous picture" onClick={() => step(-1)} size={arrow} tabIndex={tab} className={cx(round, arrow > 20 ? "left-2" : "left-1")} />
+          <StepButton dir="next" label="Next picture" onClick={() => step(1)} size={arrow} tabIndex={tab} className={cx(round, arrow > 20 ? "right-2" : "right-1")} />
+          <span className="absolute inset-x-0 bottom-1.5 z-[1] flex justify-center">
+            <span className="flex items-center gap-1 rounded-full bg-[color-mix(in_oklab,black_48%,transparent)] px-1.5 py-1 outline-1 outline-contrast">
+              {images.map((img, k) => (
+                <button
+                  key={k}
+                  type="button"
+                  tabIndex={tab}
+                  aria-label={`Picture ${k + 1} of ${n}: ${img.label}`}
+                  aria-current={k === i || undefined}
+                  data-tooltip={img.label}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onIndex(k);
+                  }}
+                  onKeyDown={(e) => e.stopPropagation()}
+                  className={cx("h-[5px] cursor-pointer rounded-full transition-[width] motion-reduce:transition-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-white", k === i ? "w-3 bg-white" : "w-[5px] bg-white/55 hover:bg-white/80")}
+                />
+              ))}
+            </span>
+          </span>
+        </>
+      )}
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------- the pages of a card
+
+/** Label and value on one line: the label gives way first, the value keeps to the right in the mono face. */
+function Row({ fact, tall }: { fact: PartFact; tall?: boolean }) {
+  return (
+    <div className={cx("flex min-w-0 items-baseline justify-between gap-2", tall ? "h-[17px]" : "h-[15px]")} title={`${fact.label}: ${fact.value}`}>
+      <span className="min-w-0 shrink truncate text-fg-muted">{fact.label}</span>
+      <span className="max-w-[62%] shrink-0 truncate font-ui text-[11px] text-fg">{fact.value}</span>
+    </div>
+  );
+}
+
+/**
+ * The part's outline with its two measures, drawn to scale: a board from
+ * above (length by width), a round part from the side (diameter by height).
+ */
+export function OutlineDrawing({ outline, width, height, className }: { outline: PartOutline; width: number; height: number; className?: string }) {
+  const round = outline.diameter !== undefined && (outline.length === undefined || outline.length === outline.width);
+  const a = round ? outline.diameter! : (outline.length ?? outline.width ?? outline.height ?? 1);
+  const b = round ? (outline.height ?? outline.diameter!) : (outline.width ?? outline.height ?? a);
+  // room for the two labels: below (the first measure) and to the right (the second)
+  const pad = { right: Math.max(26, width * 0.34), bottom: 12 };
+  const boxW = width - pad.right - 2;
+  const boxH = height - pad.bottom - 2;
+  const k = Math.min(boxW / a, boxH / b);
+  const w = Math.max(6, a * k);
+  const h = Math.max(6, b * k);
+  const x = 1 + (boxW - w) / 2;
+  const y = 1 + (boxH - h) / 2;
+  const n = (v: number) => String(Math.round(v * 10) / 10);
+  const font = Math.max(7.5, Math.min(10, width / 8));
+  return (
+    <svg role="img" aria-label={`Outline: ${round ? `diameter ${n(a)}` : n(a)} by ${n(b)} mm`} width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={cx("shrink-0 text-fg-muted", className)}>
+      <rect x={x} y={y} width={w} height={h} rx={round ? 1.5 : 2} fill="none" stroke="currentColor" strokeWidth={1.25} className="text-fg" />
+      <line x1={x} y1={y + h + 4} x2={x + w} y2={y + h + 4} stroke="currentColor" strokeWidth={0.75} />
+      <line x1={x + w + 4} y1={y} x2={x + w + 4} y2={y + h} stroke="currentColor" strokeWidth={0.75} />
+      <text x={x + w / 2} y={height - 1} textAnchor="middle" fontSize={font} fill="currentColor" className="font-ui">
+        {round ? `Ø${n(a)}` : n(a)}
+      </text>
+      <text x={x + w + 7} y={y + h / 2 + font / 3} fontSize={font} fill="currentColor" className="font-ui">
+        {n(b)}
+      </text>
+    </svg>
+  );
+}
+
+/** The rows beside a card's outline: the height the drawing does not show, then the rest (the size is the drawing). */
+export function dimensionRows(d: NonNullable<PartPages["dimensions"]>): PartFact[] {
+  if (!d.outline) return d.rows;
+  const round = d.outline.diameter !== undefined && (d.outline.length === undefined || d.outline.length === d.outline.width);
+  const rest = d.rows.filter((r) => r.label !== "Size" && !(round && /^(diameter|overall height)$/i.test(r.label)));
+  return [...(!round && d.outline.height !== undefined ? [{ label: "Height", value: `${d.outline.height} mm` }] : []), ...rest];
+}
+
+/** As many chips as fit a budget of characters, and how many are left. */
+export function fitChips(chips: string[], budget: number): { shown: string[]; more: number } {
+  const shown: string[] = [];
+  let used = 0;
+  for (const c of chips) {
+    const cost = c.length + 3;
+    if (shown.length && used + cost > budget) break;
+    shown.push(c);
+    used += cost;
+  }
+  return { shown, more: chips.length - shown.length };
+}
+
+function Skeleton({ lines }: { lines: number }) {
+  return (
+    <div role="status" aria-label="Loading" className="flex h-full flex-col justify-start gap-[7px] pt-1">
+      {Array.from({ length: lines }, (_, i) => (
+        <span key={i} aria-hidden className="h-[9px] animate-pulse rounded-[2px] bg-muted motion-reduce:animate-none" style={{ width: `${[92, 70, 84, 58][i % 4]}%` }} />
+      ))}
+    </div>
+  );
+}
+
+export interface CardPageProps {
+  page: CardPageId;
+  item: PartCardModel;
+  state: PagesState;
+  /** `tile`: four lines (68 px); `row`: three (46 px). */
+  variant: "tile" | "row";
+  /** Before the overview's first line (the Project Parts page: the part's status dot). */
+  status?: ReactNode;
+  onRetry(): void;
+  /** -1 or 1: the side the page came in from. */
+  from?: number;
+}
+
+/** One page of a card's text carousel, in its fixed box. */
+export function CardPage({ page, item, state, variant, status, onRetry, from = 1 }: CardPageProps) {
+  const tile = variant === "tile";
+  const lines = tile ? 4 : 3;
+  const box = cx(BODY, "pb-page-in min-w-0 overflow-hidden text-[11.5px] leading-[1.3]", tile ? "h-[68px]" : "h-[46px]");
+  const style = { "--pb-page-from": `${from * 6}px` } as React.CSSProperties;
+  if (page === "overview") {
+    const who = [item.manufacturer, item.mpn && item.mpn !== item.name ? item.mpn : undefined].filter(Boolean).join(" · ");
+    const first = tile ? [who, item.category?.split(" · ").pop()].filter(Boolean).join(" · ") : item.category;
+    return (
+      <div key="overview" className={box} style={style}>
+        {(first || status) && (
+          <div className="flex h-[15px] min-w-0 items-center gap-1.5 text-fg-muted">
+            {status}
+            {first && (
+              <span className="flex min-w-0 items-center gap-1">
+                {!tile && <Icon name="tag" size={11} strokeWidth={1.75} className="shrink-0" aria-hidden />}
+                <span className="truncate">{first}</span>
+              </span>
+            )}
+          </div>
+        )}
+        {item.description && <p className={cx("line-clamp-2 text-fg", tile ? "text-[12px]" : "text-[11.5px]")}>{item.description}</p>}
+        {tile && item.tags.length > 0 && (
+          <div className="mt-1 flex h-[18px] gap-1 overflow-hidden">
+            {item.tags.slice(0, 4).map((t) => (
+              <Tag key={t}>{t}</Tag>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+  if (state.status === "error")
+    return (
+      <div key="error" role="status" className={cx(box, "flex flex-col items-start gap-1 text-fg-muted")}>
+        <span className="line-clamp-2">The library did not give this part's details: {state.error}</span>
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRetry();
+          }}
+          className="cursor-pointer rounded-[3px] text-link underline-offset-2 hover:underline focus-visible:outline focus-visible:outline-1 focus-visible:outline-focus"
+        >
+          Try again
+        </button>
+      </div>
+    );
+  if (state.status !== "ready")
+    return (
+      <div key="loading" className={box}>
+        <Skeleton lines={lines} />
+      </div>
+    );
+  const p = state.pages;
+  switch (page) {
+    case "specs":
+      return (
+        <div key={page} className={box} style={style}>
+          {p.specs.slice(0, lines).map((f) => (
+            <Row key={f.label} fact={f} tall={tile} />
+          ))}
+        </div>
+      );
+    case "dimensions": {
+      const d = p.dimensions!;
+      const rows = dimensionRows(d).slice(0, d.outline ? 3 : lines);
+      return (
+        <div key={page} className={cx(box, "flex items-center gap-2.5")} style={style}>
+          {d.outline && <OutlineDrawing outline={d.outline} width={tile ? 78 : 62} height={tile ? 62 : 44} />}
+          <div className="min-w-0 flex-1">
+            {rows.map((f) => (
+              <Row key={f.label} fact={f} tall={tile} />
+            ))}
+          </div>
+        </div>
+      );
+    }
+    case "interfaces": {
+      const { shown, more } = fitChips(p.interfaces.chips, tile ? 74 : 44);
+      return (
+        <div key={page} className={cx(box, "flex flex-wrap content-start gap-1")} style={style} aria-label={`${p.interfaces.count} interfaces`}>
+          {shown.map((c) => (
+            <Tag key={c}>{c}</Tag>
+          ))}
+          {more > 0 && (
+            <span data-tooltip={p.interfaces.chips.slice(shown.length).join(", ")}>
+              <Tag>+{more}</Tag>
+            </span>
+          )}
+        </div>
+      );
+    }
+    case "cad": {
+      const c = p.cad!;
+      const texts = [c.file, c.origin, c.features ? `${c.features} mate feature${c.features === 1 ? "" : "s"}` : undefined].filter((x): x is string => !!x);
+      return (
+        <div key={page} className={cx(box, "flex items-center gap-2.5")} style={style}>
+          <div className={cx("relative shrink-0 overflow-hidden rounded-[3px] outline-1 -outline-offset-1 outline-contrast", tile ? "h-[60px] w-[84px]" : "h-[44px] w-[60px]")}>
+            <Thumb src={c.preview} alt="" className="size-full" icon="box" iconSize={20} />
+            <Icon name="rotate-3d" size={12} strokeWidth={1.75} className="absolute right-1 bottom-1 text-[var(--pb-thumb-fg)]" aria-hidden />
+          </div>
+          <div className="min-w-0 flex-1">
+            {texts.slice(0, tile ? 3 : 2).map((t, i) => (
+              <div key={t} className={cx("h-[15px] truncate", i === 0 ? "font-ui text-[11px] text-fg" : "text-fg-muted")}>
+                {t}
+              </div>
+            ))}
+            <div className="h-[15px] truncate text-fg-faint">{c.mesh ? "Open the part to orbit" : "No 3D mesh"}</div>
+          </div>
+        </div>
+      );
+    }
+    case "artifacts": {
+      const over = p.artifacts.length > lines;
+      const rows = over ? p.artifacts.slice(0, lines - 1) : p.artifacts;
+      return (
+        <div key={page} className={box} style={style}>
+          {rows.map((g) => (
+            <div key={g.kind} className={cx("flex min-w-0 items-center gap-1.5", tile ? "h-[17px]" : "h-[15px]")} title={`${g.label}: ${g.items.map((x) => x.name).join(", ")}`}>
+              <Icon name={g.icon} size={12} strokeWidth={1.75} className="shrink-0 text-fg-muted" aria-hidden />
+              <span className="min-w-0 flex-1 truncate text-fg">{g.summary}</span>
+              <span className="shrink-0 font-ui text-[10px] text-fg-muted">{g.note}</span>
+            </div>
+          ))}
+          {over && (
+            <div className={cx("flex items-center gap-1.5 text-fg-muted", tile ? "h-[17px]" : "h-[15px]")}>
+              <Icon name="ellipsis" size={12} strokeWidth={1.75} className="shrink-0" aria-hidden />
+              <span className="truncate">{p.artifacts.length - rows.length} more kinds</span>
+            </div>
+          )}
+        </div>
+      );
+    }
+  }
+}
+
+/** Says a page change to a screen reader, once, when the reader made it. */
+export function Announce({ text }: { text: string | undefined }) {
+  const ref = useRef<HTMLSpanElement>(null);
+  useEffect(() => {
+    if (ref.current && text) ref.current.textContent = text;
+  }, [text]);
+  return <span ref={ref} aria-live="polite" className="sr-only" />;
+}

package/src/parts/CategoryList.tsx

@@ -0,0 +1,72 @@
+/**
+ * The library's categories as a list that drills in and out (PB-934), the
+ * way the alpha's TaxonomyFilter does: one level of the taxonomy at a time.
+ * A row narrows the results to that category and, when it has categories of
+ * its own, the list moves down into it; the row at the top goes back up, and
+ * "All in …" is the level itself. A category with nothing below it stays
+ * listed among its siblings, selected. Every row carries its count; the
+ * breadcrumb above (Crumbs) says where the list is and jumps to any level.
+ */
+import { Icon, ScrollArea, cx } from "@deltarobotics/uhd-viewer/components";
+import type { LibraryModel } from "./model.js";
+import { BODY, categoryIcon } from "./ui.js";
+
+export interface CategoryListProps {
+  model: Pick<LibraryModel, "crumbs" | "categories" | "level" | "query" | "total" | "catalogTotal" | "loading">;
+  onPick: (path: string) => void;
+  /** Scroll the list inside its own area (give it a height limit in `className`): the side bar keeps room for the parts. */
+  scroll?: boolean;
+  className?: string;
+}
+
+function Row({ name, icon, count, active, more, title, onClick, back }: { name: string; icon: string; count?: number; active?: boolean; more?: boolean; title?: string; onClick: () => void; back?: boolean }) {
+  return (
+    <button
+      type="button"
+      role="treeitem"
+      aria-selected={active || undefined}
+      aria-current={active ? "true" : undefined}
+      aria-label={back ? `Back to ${name}` : more ? `${name}, ${count ?? 0} parts, has sub-categories` : count !== undefined ? `${name}, ${count} parts` : name}
+      title={title}
+      onClick={onClick}
+      className={cx(
+        BODY,
+        "group flex h-7 w-full min-w-0 cursor-pointer items-center gap-2 rounded-[4px] px-2 text-left text-[12.5px] transition-colors",
+        active ? "bg-active font-medium text-fg outline outline-1 -outline-offset-1 outline-contrast-active" : back ? "text-fg-muted hover:bg-hover hover:text-fg" : "text-fg hover:bg-hover",
+        "focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-focus",
+      )}
+    >
+      <Icon name={icon} size={14} strokeWidth={1.75} className={cx("shrink-0", active ? "text-fg" : "text-fg-muted")} aria-hidden />
+      <span className="min-w-0 flex-1 truncate">{name}</span>
+      {count !== undefined && <span className="shrink-0 font-ui text-[11px] text-fg-muted tabular-nums">{count}</span>}
+      {/* the chevron's place is kept on every row, so the counts line up */}
+      {!back && <Icon name="chevron-right" size={13} className={cx("shrink-0 text-fg-muted", !more && "invisible")} aria-hidden />}
+    </button>
+  );
+}
+
+export function CategoryList({ model, onPick, scroll, className }: CategoryListProps) {
+  const level = model.level;
+  const active = model.query.category;
+  // the level's parent: the crumb before it (the top for a first-level category)
+  const at = model.crumbs.findIndex((c) => c.path === level.path);
+  const parent = at > 0 ? model.crumbs[at - 1] : undefined;
+  const root = !level.path;
+  // at the top, "All parts" counts the catalog; below it, the level's own count
+  const allCount = root ? (model.catalogTotal ?? (active ? undefined : model.loading ? undefined : model.total)) : level.count;
+  const list = (
+    <div role="tree" aria-label={root ? "Categories" : `Categories in ${level.name}`} className="flex flex-col gap-px">
+      {parent && <Row back name={parent.path ? parent.name : "All categories"} icon="arrow-left" onClick={() => onPick(parent.path)} />}
+      <Row name={root ? "All parts" : `All in ${level.name}`} icon={root ? "layout-grid" : "layers"} count={allCount} active={active === level.path} onClick={() => onPick(level.path)} />
+      {model.categories.map((c) => (
+        <Row key={c.path} name={c.name} icon={c.icon ?? categoryIcon(c.path)} count={c.count} more={c.more} active={active === c.path} title={c.description} onClick={() => onPick(c.path)} />
+      ))}
+    </div>
+  );
+  if (!scroll) return <div className={className}>{list}</div>;
+  return (
+    <ScrollArea className={className} contentClassName="pr-1.5">
+      {list}
+    </ScrollArea>
+  );
+}

package/src/parts/CloudPanel.tsx

@@ -0,0 +1,160 @@
+/**
+ * The Cloud panel (PB-904, design 04): cloud information only, in its own
+ * container. The account (the real sign-in), the project (name, what it is,
+ * its libraries and parts, whether it is published), the releases and the
+ * Manufacturing Package action, the cost estimate as a preview (the BOM
+ * opens in its own tab), and quotes.
+ */
+import { Icon, ScrollArea, cx } from "@deltarobotics/uhd-viewer/components";
+import type { CloudActions, CloudModel } from "./model.js";
+import { PartsSurface } from "./Surface.js";
+import { Avatar, BODY, Button, Card, SectionLabel, StatusText } from "./ui.js";
+
+function Account({ model, actions }: { model: CloudModel; actions: CloudActions }) {
+  const a = model.account;
+  const signedIn = a.state === "signed-in";
+  return (
+    <div className={cx(BODY, "flex items-center gap-2.5")}>
+      <Avatar email={signedIn ? a.email : undefined} size={28} />
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-[13px] text-fg">
+          {signedIn ? (a.email ?? "Signed in") : a.state === "open" ? "No account needed" : a.state === "expired" ? "Sign in again" : a.state === "unknown" ? "Checking the sign-in…" : "Not signed in"}
+        </p>
+        <p className="truncate text-[11.5px] text-fg-muted">
+          {signedIn
+            ? (a.detail ?? (a.publisher ? "Publisher" : "Protoboard Cloud"))
+            : a.state === "open"
+              ? `${a.service ?? "The library"} signs no one in`
+              : a.state === "expired"
+                ? (a.problem ?? "The sign-in no longer works")
+                : "Prices, quotes and publishing need an account"}
+        </p>
+      </div>
+      {!signedIn && a.state !== "open" && a.state !== "unknown" && actions.signIn && (
+        <Button size="sm" kind="primary" icon="log-in" onClick={actions.signIn}>
+          Sign in
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function CloudPanel({ model, actions }: { model: CloudModel; actions: CloudActions }) {
+  const p = model.project;
+  const c = model.cost;
+  const running = model.release.state === "running";
+  const latest = model.releases[0];
+  const pct = c && c.bought ? Math.round((c.priced / c.bought) * 100) : 0;
+  return (
+    <PartsSurface place="sidebar">
+      <ScrollArea className="size-full" contentClassName={cx(BODY, "flex min-w-[220px] flex-col gap-2 px-3 pt-1 pb-4")}>
+        <SectionLabel icon="user">Account</SectionLabel>
+        <Account model={model} actions={actions} />
+
+        <SectionLabel icon="folder-kanban">Project</SectionLabel>
+        <Card className="flex flex-col gap-1 px-3 py-2.5">
+          <h2 className="truncate text-[14px] font-semibold text-fg">{p.name}</h2>
+          {p.description && <p className="line-clamp-2 text-[12px] leading-snug text-fg-muted">{p.description}</p>}
+          <p className="text-[12px] text-fg-muted">
+            {[p.author, `${p.libraries} librar${p.libraries === 1 ? "y" : "ies"}`, p.parts !== undefined ? `${p.parts} parts` : ""].filter(Boolean).join(" · ")}
+          </p>
+          <div className="flex items-center gap-2 pt-1">
+            <span className="flex-1">{p.published ? <StatusText tone="ok">Published {p.published.at}</StatusText> : <StatusText tone="warning">Not published</StatusText>}</span>
+            {actions.publish && (
+              <Button size="sm" icon="cloud-upload" onClick={actions.publish} title="Publishing a project to Protoboard Cloud is not available yet">
+                Publish
+              </Button>
+            )}
+          </div>
+        </Card>
+
+        <SectionLabel icon="package">Releases</SectionLabel>
+        {model.releases.length ? (
+          model.releases.slice(0, 3).map((r) => (
+            <div key={r.version} className="flex items-center gap-2.5 px-1">
+              <Icon name="tag" size={14} strokeWidth={1.75} className="shrink-0 text-fg-muted" aria-hidden />
+              <div className="min-w-0 flex-1">
+                <p className="font-ui text-[13px] text-fg">{r.version}</p>
+                <p className="truncate text-[11.5px] text-fg-muted">{[r.date, r.units !== undefined ? `${r.units} unit${r.units === 1 ? "" : "s"}` : "", r.files !== undefined ? `${r.files} files` : ""].filter(Boolean).join(" · ")}</p>
+              </div>
+              {actions.openRelease && (
+                <button type="button" aria-label={`Open release ${r.version}`} data-tooltip="Open the Manufacturing Package" onClick={() => actions.openRelease!(r.version)} className="grid size-6 cursor-pointer place-items-center rounded-[4px] text-fg-muted hover:bg-active hover:text-fg">
+                  <Icon name="external-link" size={14} aria-hidden />
+                </button>
+              )}
+            </div>
+          ))
+        ) : (
+          <p className="px-1 text-[12px] text-fg-muted">No release yet.</p>
+        )}
+        {actions.generate && (
+          <Button kind="primary" icon={running ? "loader" : "package-check"} className="w-full" disabled={running} onClick={actions.generate}>
+            {running ? (model.release.step ?? "Generating…") : "Generate Manufacturing Package"}
+          </Button>
+        )}
+        {model.release.state === "failed" || model.release.state === "refused" ? (
+          <div className="flex flex-col gap-0.5 px-1 text-[12px]">
+            <p className="text-error">{model.release.message}</p>
+            {(model.release.problems ?? []).slice(0, 4).map((x) => (
+              <p key={x.code + x.message} className="text-fg-muted">
+                {x.message}
+              </p>
+            ))}
+          </div>
+        ) : model.release.state === "done" && model.release.message ? (
+          <p className="px-1 text-[12px] text-ok">{model.release.message}</p>
+        ) : null}
+
+        <SectionLabel icon="calculator">Cost estimate</SectionLabel>
+        <Card className="flex flex-col gap-1.5 px-3 py-2.5">
+          {c ? (
+            <>
+              <p className="flex flex-wrap items-baseline gap-x-2">
+                <span className="font-ui text-[22px] leading-tight text-fg">{c.total}</span>
+                <span className="text-[11.5px] text-fg-muted">per unit</span>
+              </p>
+              {c.order && <p className="font-ui text-[12px] text-fg">{c.order}</p>}
+              {c.others.length > 0 && <p className="text-[11.5px] leading-snug text-fg-muted">{c.others.join(" · ")}</p>}
+              <div role="progressbar" aria-label="Bought lines priced" aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct} className="h-1 overflow-hidden rounded-full bg-muted">
+                <div className="h-full rounded-full bg-ok" style={{ width: `${pct}%` }} />
+              </div>
+              <p className="text-[11.5px] leading-snug text-fg-muted">
+                {c.priced} of {c.bought} bought lines priced · {c.unpriced} unpriced · {c.made} made (need a quote)
+              </p>
+              <div className="flex flex-col">
+                {c.top.map((l) => (
+                  <div key={l.item} className="flex items-center gap-2 py-0.5 text-[12px]">
+                    <span className="min-w-0 flex-1 truncate text-fg">{l.item}</span>
+                    <span className="font-ui text-fg">{l.price}</span>
+                  </div>
+                ))}
+              </div>
+              {actions.openBom && (
+                <Button icon="sheet" className="w-full" onClick={actions.openBom}>
+                  Open bill of materials
+                </Button>
+              )}
+            </>
+          ) : (
+            <p className="text-[12px] text-fg-muted">{model.costMissing ?? "Check the project to estimate its cost."}</p>
+          )}
+        </Card>
+
+        <SectionLabel icon="handshake">Quotes</SectionLabel>
+        <Card className="flex items-center gap-2 px-3 py-2">
+          <span className="flex-1 text-[12.5px] text-fg-muted">{model.quotes.length ? `${model.quotes.length} quote(s)` : "No quotes yet"}</span>
+          {actions.requestQuote && (
+            <Button size="sm" onClick={actions.requestQuote} title="Quotes from Protoboard Cloud are not available yet">
+              Request quote
+            </Button>
+          )}
+        </Card>
+        {latest === undefined && actions.fetchOffers && c && !c.priced && (
+          <button type="button" onClick={actions.fetchOffers} className="px-1 text-left text-[12px] text-link hover:underline">
+            Get catalog offers to price the lines
+          </button>
+        )}
+      </ScrollArea>
+    </PartsSurface>
+  );
+}

package/src/parts/GlbPreview.tsx

@@ -0,0 +1,116 @@
+/// <reference path="./three.d.ts" />
+/**
+ * A part's body model in a small orbiting scene (the part detail's CAD
+ * section): three.js (the viewer's own copy, already in every shell's
+ * bundle); the scene's background is the page's, its light neutral.
+ */
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { EmptyState, Icon } from "@deltarobotics/uhd-viewer/components";
+
+export function GlbPreview({ url, label }: { url: string; label: string }) {
+  const host = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<{ kind: "loading" | "ready" } | { kind: "error"; message: string }>({ kind: "loading" });
+  useEffect(() => {
+    const el = host.current;
+    if (!el) return;
+    let disposed = false;
+    let cleanup = () => {};
+    setState({ kind: "loading" });
+    void (async () => {
+      try {
+        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        renderer.outputColorSpace = THREE.SRGBColorSpace;
+        // the 3D view's look (uhd-viewer src/cad/scene.ts): filmic tone, a sky/ground fill, a key and a warm rim light (PB-899)
+        renderer.toneMapping = THREE.ACESFilmicToneMapping;
+        renderer.toneMappingExposure = 1.05;
+        renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
+        renderer.setClearColor(0x000000, 0);
+        el.replaceChildren(renderer.domElement);
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(35, 1, 0.0001, 100);
+        scene.add(new THREE.HemisphereLight(0xf5f5f4, 0x1c1917, 1.4));
+        // positions in glTF's Y-up: the 3D view's key (200, -150, 400) and rim (-300, 250, 120) in its Z-up
+        const key = new THREE.DirectionalLight(0xffffff, 2.2);
+        key.position.set(200, 400, 150);
+        const rim = new THREE.DirectionalLight(0xffedd5, 0.8);
+        rim.position.set(-300, 120, -250);
+        scene.add(key, rim);
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.autoRotate = true;
+        controls.autoRotateSpeed = 1.2;
+        controls.addEventListener("start", () => (controls.autoRotate = false));
+        const resize = () => {
+          const w = el.clientWidth || 300;
+          const h = el.clientHeight || 220;
+          renderer.setSize(w, h, false);
+          renderer.domElement.style.width = "100%";
+          renderer.domElement.style.height = "100%";
+          camera.aspect = w / h;
+          camera.updateProjectionMatrix();
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(el);
+        resize();
+        let frame = 0;
+        const tick = () => {
+          frame = requestAnimationFrame(tick);
+          controls.update();
+          renderer.render(scene, camera);
+        };
+        tick();
+        cleanup = () => {
+          cancelAnimationFrame(frame);
+          ro.disconnect();
+          controls.dispose();
+          renderer.dispose();
+          el.replaceChildren();
+        };
+        const gltf = await new GLTFLoader().loadAsync(url);
+        if (disposed) return cleanup();
+        // a mesh without a material of its own (glTF's default white) gets the 3D view's neutral satin, not a glossy white
+        gltf.scene.traverse((mesh: { isMesh?: boolean; material?: { map?: unknown; name?: string; color?: { r: number; g: number; b: number } } | unknown[] }) => {
+          const m = mesh.material;
+          if (mesh.isMesh && m && !Array.isArray(m) && !m.map && m.color && m.color.r > 0.98 && m.color.g > 0.98 && m.color.b > 0.98 && !m.name)
+            mesh.material = new THREE.MeshStandardMaterial({ color: 0x8b8b8b, roughness: 0.55, metalness: 0.1 });
+        });
+        const box = new THREE.Box3().setFromObject(gltf.scene);
+        const size = box.getSize(new THREE.Vector3()).length() || 1;
+        const center = box.getCenter(new THREE.Vector3());
+        gltf.scene.position.sub(center);
+        scene.add(gltf.scene);
+        camera.near = size / 100;
+        camera.far = size * 100;
+        camera.position.set(size * 0.9, size * 0.7, size * 0.9);
+        camera.updateProjectionMatrix();
+        controls.target.set(0, 0, 0);
+        setState({ kind: "ready" });
+      } catch (e) {
+        if (!disposed) setState({ kind: "error", message: (e as Error).message || "WebGL is not available here" });
+      }
+    })();
+    return () => {
+      disposed = true;
+      cleanup();
+    };
+  }, [url]);
+  return (
+    <div className="relative size-full">
+      <div ref={host} role="img" aria-label={`${label}: 3D model`} className="size-full" />
+      {state.kind !== "ready" && (
+        <div className="absolute inset-0 grid place-items-center">
+          {state.kind !== "error" ? (
+            <Icon name="loader" size={20} className="animate-spin text-fg-muted" aria-label="Loading the model" />
+          ) : (
+            <EmptyState icon={<Icon name="box" size={24} strokeWidth={1.25} />} title="The model does not show here">
+              {state.message}
+            </EmptyState>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}