0 ? `2px solid ${item.stroke}` : undefined,
+ }}
+ >
+ {item.label}
+
+ );
+}
+
+/** Plays and pauses a sound without leaving the library. */
+function PlayButton({ url, name }: { url: string; name: string }) {
+ const audioRef = useRef
+
+ );
+ case "image":
+ return (
+
+ 
+
+ );
+ case "audio":
+ return (
+
+
+ );
+ case "document":
+ return (
+
+
+ );
+ }
+}
+
+/**
+ * One thing in the library. Clicking it adds it to the scene; an upload can
+ * also be removed from the library.
+ *
+ * The click target is a button stretched over the whole card, with the play
+ * and remove controls above it, so no button sits inside another.
+ * @component
+ */
+export default function AssetCard({
+ item,
+ busy,
+ onUse,
+ onDelete,
+}: {
+ item: LibraryItem;
+ busy: boolean;
+ onUse: (item: LibraryItem) => void;
+ onDelete?: (item: UploadItem) => void;
+}) {
+ const title = item.tags.length
+ ? `${item.name} (${item.tags.join(", ")})`
+ : item.name;
+
+ return (
+
+
+
+ ))}
+
+ {sections.length === 0 && (
+
+ );
+}
diff --git a/frontend/src/features/authoring/library/buttonComponent.js b/frontend/src/features/authoring/library/buttonComponent.js
new file mode 100644
index 000000000..9de41da74
--- /dev/null
+++ b/frontend/src/features/authoring/library/buttonComponent.js
@@ -0,0 +1,49 @@
+import { BUTTON_SIZE } from "./presets.js";
+
+/**
+ * The component for a preset button, centred on the canvas. It's an ordinary
+ * box or ellipse with text in it, so it can be restyled, moved and given a
+ * destination or property change like any shape the author draws.
+ *
+ * @param {object} preset - one of BUTTON_PRESETS
+ * @param {object} options
+ * @param {string} options.id
+ * @param {number} options.zIndex - where to put it in the stack
+ * @param {{ width: number, height: number }} options.canvas
+ */
+export function buttonComponent(preset, { id, zIndex, canvas }) {
+ const { width, height } = BUTTON_SIZE;
+ const x = Math.round((canvas.width - width) / 2);
+ const y = Math.round((canvas.height - height) / 2);
+
+ return {
+ id,
+ type: preset.shape,
+ clickable: true,
+ fill: preset.fill,
+ stroke: preset.stroke,
+ strokeWidth: preset.strokeWidth,
+ bounds: {
+ verts: [
+ { x, y },
+ { x: x + width, y: y + height },
+ ],
+ rotation: 0,
+ },
+ zIndex,
+ document: {
+ style: {
+ fontFamily: "Arial",
+ fontSize: 44,
+ fontWeight: "bold",
+ textColor: preset.textColor,
+ },
+ blocks: [
+ {
+ style: { alignment: "center" },
+ spans: [{ style: {}, text: preset.label }],
+ },
+ ],
+ },
+ };
+}
diff --git a/frontend/src/features/authoring/library/buttonComponent.test.js b/frontend/src/features/authoring/library/buttonComponent.test.js
new file mode 100644
index 000000000..22e781faf
--- /dev/null
+++ b/frontend/src/features/authoring/library/buttonComponent.test.js
@@ -0,0 +1,56 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { buttonComponent } from "./buttonComponent.js";
+import { BUTTON_PRESETS, BUTTON_SIZE } from "./presets.js";
+
+const canvas = { width: 1920, height: 1080 };
+const options = { id: "new-id", zIndex: 7, canvas };
+
+test("a button is centred on the canvas at the preset size", () => {
+ const { bounds } = buttonComponent(BUTTON_PRESETS[0], options);
+ const [topLeft, bottomRight] = bounds.verts;
+
+ assert.equal(bottomRight.x - topLeft.x, BUTTON_SIZE.width);
+ assert.equal(bottomRight.y - topLeft.y, BUTTON_SIZE.height);
+ assert.equal((topLeft.x + bottomRight.x) / 2, canvas.width / 2);
+ assert.equal((topLeft.y + bottomRight.y) / 2, canvas.height / 2);
+ assert.equal(bounds.rotation, 0);
+});
+
+test("a button carries its preset's look and its place in the stack", () => {
+ for (const preset of BUTTON_PRESETS) {
+ const button = buttonComponent(preset, options);
+ assert.equal(button.id, "new-id");
+ assert.equal(button.type, preset.shape);
+ assert.equal(button.zIndex, 7);
+ assert.equal(button.fill, preset.fill);
+ assert.equal(button.stroke, preset.stroke);
+ assert.equal(button.strokeWidth, preset.strokeWidth);
+ assert.equal(button.clickable, true);
+ }
+});
+
+test("a button's text is its label, in the preset's text colour", () => {
+ const preset = BUTTON_PRESETS[0];
+ const { document } = buttonComponent(preset, options);
+
+ assert.equal(document.blocks[0].spans[0].text, preset.label);
+ assert.equal(document.style.textColor, preset.textColor);
+ assert.equal(document.blocks[0].style.alignment, "center");
+});
+
+test("buttons don't share state with each other", () => {
+ const a = buttonComponent(BUTTON_PRESETS[0], options);
+ const b = buttonComponent(BUTTON_PRESETS[0], options);
+ a.document.blocks[0].spans[0].text = "changed";
+ a.bounds.verts[0].x = -1;
+
+ assert.notEqual(b.document.blocks[0].spans[0].text, "changed");
+ assert.notEqual(b.bounds.verts[0].x, -1);
+});
+
+test("an oval preset makes an ellipse", () => {
+ const oval = BUTTON_PRESETS.find((preset) => preset.id === "button-oval");
+ assert.equal(buttonComponent(oval, options).type, "ellipse");
+});
diff --git a/frontend/src/features/authoring/library/items.js b/frontend/src/features/authoring/library/items.js
new file mode 100644
index 000000000..41b4c2a7b
--- /dev/null
+++ b/frontend/src/features/authoring/library/items.js
@@ -0,0 +1,134 @@
+import { KINDS } from "./presets.js";
+
+// What the panel shows is a flat list of "items": presets and the user's
+// uploads, in one shape, so searching and grouping don't care which is which.
+
+/** @typedef {import("./presets.js").Kind} Kind */
+/** @typedef {import("./presets.js").PresetItem} PresetItem */
+/**
+ * An uploaded file, as the API returns it.
+ * @typedef {{
+ * _id: string,
+ * name: string,
+ * type: "image" | "audio" | "document",
+ * tags: string[],
+ * url: string,
+ * size: number,
+ * contentType: string,
+ * }} Asset
+ */
+/**
+ * @typedef {{
+ * key: string,
+ * source: "upload",
+ * kind: "image" | "audio" | "document",
+ * name: string,
+ * tags: string[],
+ * url: string,
+ * size: number,
+ * asset: Asset,
+ * }} UploadItem
+ */
+/** @typedef {PresetItem | UploadItem} LibraryItem */
+/** @typedef {{ id: string, title: string, items: LibraryItem[] }} Section */
+
+/**
+ * The heading each kind of thing goes under.
+ * @type {Record
+
+
+ {
+ chooseFile(e.target.files?.[0]);
+ e.target.value = "";
+ }}
+ />
+
+
+
+ {FILTERS.map(({ id, label }) => (
+
+ ))}
+
+
+ {pending && (
+
+ )}
+
+ {assets.isError && (
+
+ Couldn't load your uploads.
+
+
+ )}
+
+ {showUploadHint && (
+
+
+ )}
+
+ {sections.map((section) => (
+ Your uploads will appear here
++ Drop a file here, or press Upload. Anything you add can be used in + every scenario. +
++ {section.title} +
+-
+ {section.items.map((item) => (
+
+ Nothing matches{query.trim() ? ` “${query.trim()}”` : " that"}. +
+ )} + + {dragging && ( +
+ Drop to upload
+
+ )}
+