@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/FileView.js

@@ -0,0 +1,449 @@
+import { formatSize } from "./kit/numbers.js";
+import { classes } from "./classes.js";
+import { KitProvider } from "./kit/context.js";
+import { Button } from "./kit/Button.js";
+import { baseName, cleanDocument, extensionOf, pretty, previewOf, tableOf, typedFor } from "./files.js";
+import { FileMark } from "./kit/FileMark.js";
+import { AudioPlayer } from "./kit/AudioPlayer.js";
+import { Markdown } from "./surface/Markdown.js";
+import { useEffect, useMemo, useState } from "react";
+import { DownloadSimpleIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/FileView.tsx
+const FILE_MESSAGES = {
+	download: "Download",
+	noPreview: "This file can't be previewed here.",
+	noPreviewHint: "Download it to open it on your device.",
+	truncated: "Only the beginning is shown. Download it to see it whole.",
+	file: "File",
+	size: (bytes) => formatSize(bytes),
+	pages: (count) => count === 1 ? "1 page" : `${count} pages`,
+	sheets: "Sheets",
+	rows: (shown, total) => `The first ${shown} of ${total} rows`,
+	emptySheet: "This sheet is empty.",
+	slide: (number) => `Slide ${number}`,
+	notes: "Notes"
+};
+/** The most of a file read as words: a longer one shows its beginning. */
+const TEXT_LIMIT = 262144;
+/** The most rows a table draws. */
+const ROW_LIMIT = 500;
+/**
+* One file, to see and to save, whatever its kind: a bar with its kind, its size (a PDF's pages)
+* and the button that saves it under its name, over the file as it reads. A PDF in the browser's
+* own viewer; a spreadsheet as a grid, its header kept in view, its sheets as tabs at its foot; a
+* Word file as a document at a reading measure; a deck as its slides one under another, their
+* notes under each; Markdown drawn, plain words as written, a source in the mono face, wrapped,
+* never run; a picture whole, a video and a sound in the browser's own players; any other kind
+* says it can't be shown, and is saved. What it can't read alone (a sheet, a document, slides)
+* it draws from `preview`. It fills the height it is given (a dialog's body), and scrolls inside.
+* The addresses it makes for the bytes are let go when it goes.
+*/
+function FileView(props) {
+	return /* @__PURE__ */ jsx(KitProvider, {
+		classNames: props.classNames,
+		children: /* @__PURE__ */ jsx(View, { ...props })
+	});
+}
+function View({ blob, name, preview, messages, classNames }) {
+	const words = {
+		...FILE_MESSAGES,
+		...messages
+	};
+	const extension = extensionOf(name);
+	const save = useObjectUrl(useMemo(() => new Blob([blob], { type: "application/octet-stream" }), [blob]));
+	const pages = preview?.kind === "pdf" ? preview.pages : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `sc ${classes(classNames, "sc-file")}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classes(classNames, "sc-file__bar"),
+			children: [
+				/* @__PURE__ */ jsx(FileMark, {
+					name,
+					size: 24
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: classes(classNames, "sc-file__meta"),
+					children: [
+						/* @__PURE__ */ jsx("span", { children: extension === "" ? words.file : extension.toUpperCase() }),
+						/* @__PURE__ */ jsx("span", { children: words.size(blob.size) }),
+						pages !== null && /* @__PURE__ */ jsx("span", { children: words.pages(pages) })
+					]
+				}),
+				save !== null && /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					icon: DownloadSimpleIcon,
+					href: save,
+					download: baseName(name),
+					children: words.download
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: classes(classNames, "sc-file__body"),
+			children: preview === void 0 ? /* @__PURE__ */ jsx(Read, {
+				blob,
+				name,
+				words,
+				classNames
+			}) : /* @__PURE__ */ jsx(Previewed, {
+				preview,
+				blob,
+				name,
+				words,
+				classNames
+			})
+		})]
+	});
+}
+/** Under a file shown only in part: the words that say so. */
+function Cut({ shown, words, classNames }) {
+	return shown ? /* @__PURE__ */ jsx("p", {
+		className: classes(classNames, "sc-file__note"),
+		children: words.truncated
+	}) : null;
+}
+/** The file as the API made it to draw, by its kind. */
+function Previewed({ preview, blob, name, words, classNames }) {
+	switch (preview.kind) {
+		case "pdf": return /* @__PURE__ */ jsx(Pdf, {
+			blob,
+			name,
+			classNames
+		});
+		case "image": return preview.media_type.includes("svg") ? /* @__PURE__ */ jsx(Svg, {
+			blob,
+			name,
+			classNames
+		}) : /* @__PURE__ */ jsx(Media, {
+			blob,
+			type: preview.media_type,
+			name,
+			classNames,
+			kind: "image"
+		});
+		case "video":
+		case "audio": return /* @__PURE__ */ jsx(Media, {
+			blob,
+			type: preview.media_type,
+			name,
+			classNames,
+			kind: preview.kind
+		});
+		case "sheet": return /* @__PURE__ */ jsx(Sheets, {
+			sheets: preview.sheets,
+			truncated: preview.truncated,
+			words,
+			classNames
+		});
+		case "document": return /* @__PURE__ */ jsx(Document, {
+			html: preview.html,
+			truncated: preview.truncated,
+			words,
+			classNames
+		});
+		case "slides": return /* @__PURE__ */ jsx(Slides, {
+			slides: preview.slides,
+			truncated: preview.truncated,
+			words,
+			classNames
+		});
+		case "markdown":
+		case "text": return /* @__PURE__ */ jsx(Words, {
+			text: preview.text,
+			markdown: preview.kind === "markdown",
+			truncated: preview.truncated,
+			words,
+			classNames
+		});
+		case "code":
+		case "json": return /* @__PURE__ */ jsx(Source, {
+			text: preview.kind === "json" && !preview.truncated ? pretty(preview.text) : preview.text,
+			truncated: preview.truncated,
+			words,
+			classNames
+		});
+		case "unknown": return /* @__PURE__ */ jsx(None, {
+			name,
+			words,
+			classNames
+		});
+	}
+}
+/** The file as the browser reads its bytes alone, by its name and type. */
+function Read({ blob, name, words, classNames }) {
+	const preview = previewOf(name, blob.type);
+	const svg = extensionOf(name) === "svg";
+	const text = useText(blob, preview === "markdown" || preview === "text" || preview === "code" || preview === "table", TEXT_LIMIT);
+	const cut = blob.size > TEXT_LIMIT;
+	if (preview === "image") return svg ? /* @__PURE__ */ jsx(Svg, {
+		blob,
+		name,
+		classNames
+	}) : /* @__PURE__ */ jsx(Media, {
+		blob: typedFor(blob, name),
+		name,
+		classNames,
+		kind: "image"
+	});
+	if (preview === "pdf") return /* @__PURE__ */ jsx(Pdf, {
+		blob,
+		name,
+		classNames
+	});
+	if (preview === "none") return /* @__PURE__ */ jsx(None, {
+		name,
+		words,
+		classNames
+	});
+	if (text === null) return null;
+	const rows = preview === "table" ? tableOf(text) : null;
+	if (rows !== null) {
+		const [columns = [], ...body] = rows;
+		return /* @__PURE__ */ jsx(Sheets, {
+			sheets: [{
+				name: baseName(name),
+				columns,
+				rows: body,
+				total_rows: body.length
+			}],
+			truncated: cut,
+			words,
+			classNames
+		});
+	}
+	if (preview === "markdown" || preview === "text") return /* @__PURE__ */ jsx(Words, {
+		text,
+		markdown: preview === "markdown",
+		truncated: cut,
+		words,
+		classNames
+	});
+	return /* @__PURE__ */ jsx(Source, {
+		text: extensionOf(name) === "json" && !cut ? pretty(text) : text,
+		truncated: cut,
+		words,
+		classNames
+	});
+}
+/** A PDF in the browser's own viewer. */
+function Pdf({ blob, name, classNames }) {
+	const view = useObjectUrl(useMemo(() => typedFor(blob, name), [blob, name]));
+	return view !== null && /* @__PURE__ */ jsx("iframe", {
+		src: view,
+		title: baseName(name),
+		className: classes(classNames, "sc-file__frame")
+	});
+}
+/**
+* An SVG, from its words as a data address: one of the page's own (a blob's) would run its
+* scripts as the page if it were opened apart.
+*/
+function Svg({ blob, name, classNames }) {
+	const text = useText(blob, true, Infinity);
+	return text !== null && /* @__PURE__ */ jsx("div", {
+		className: classes(classNames, "sc-file__image"),
+		children: /* @__PURE__ */ jsx("img", {
+			src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(text)}`,
+			alt: baseName(name)
+		})
+	});
+}
+/** A picture whole, a video or a sound in the browser's own player, from its bytes typed. */
+function Media({ blob, type, name, kind, classNames }) {
+	const src = useObjectUrl(useMemo(() => type === void 0 || blob.type === type ? blob : new Blob([blob], { type }), [blob, type]));
+	if (src === null) return null;
+	if (kind === "image") return /* @__PURE__ */ jsx("div", {
+		className: classes(classNames, "sc-file__image"),
+		children: /* @__PURE__ */ jsx("img", {
+			src,
+			alt: baseName(name)
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: classes(classNames, "sc-file__media"),
+		"data-kind": kind,
+		children: kind === "video" ? /* @__PURE__ */ jsx("video", {
+			src,
+			controls: true,
+			playsInline: true,
+			preload: "metadata",
+			"aria-label": baseName(name)
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FileMark, {
+			name,
+			size: 44
+		}), /* @__PURE__ */ jsx(AudioPlayer, {
+			src,
+			label: baseName(name)
+		})] })
+	});
+}
+/**
+* A spreadsheet: one sheet at a time as a grid, its columns over it kept in view as it scrolls;
+* its sheets as tabs at its foot, as a spreadsheet has them. Under a
+* sheet shown in part, how many of its rows are.
+*/
+function Sheets({ sheets, truncated, words, classNames }) {
+	const [at, setAt] = useState(0);
+	const sheet = sheets[at] ?? sheets[0];
+	if (sheet === void 0) return /* @__PURE__ */ jsx(None, {
+		name: "",
+		words,
+		classNames
+	});
+	const rows = sheet.rows.slice(0, ROW_LIMIT);
+	const width = Math.max(sheet.columns?.length ?? 0, ...rows.map((row) => row.length));
+	const several = sheets.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes(classNames, "sc-file__sheet"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			role: several ? "tabpanel" : void 0,
+			className: classes(classNames, "sc-file__table"),
+			children: [sheet.columns === null ? /* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-file__note"),
+				children: words.emptySheet
+			}) : /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: pad(sheet.columns, width).map((cell, index) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				children: cell
+			}, index)) }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx("tr", { children: pad(row, width).map((cell, column) => /* @__PURE__ */ jsx("td", {
+				title: cell.length > 36 ? cell : void 0,
+				children: cell
+			}, column)) }, index)) })] }), sheet.total_rows > rows.length ? /* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-file__note"),
+				children: words.rows(rows.length, sheet.total_rows)
+			}) : /* @__PURE__ */ jsx(Cut, {
+				shown: truncated,
+				words,
+				classNames
+			})]
+		}, at), several && /* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			"aria-label": words.sheets,
+			className: classes(classNames, "sc-file__tabs"),
+			children: sheets.map((each, index) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": index === at,
+				onClick: () => {
+					setAt(index);
+				},
+				className: classes(classNames, "sc-file__tab"),
+				children: each.name
+			}, index))
+		})]
+	});
+}
+/** A row as wide as the widest, its missing cells empty. */
+const pad = (cells, width) => cells.length >= width ? [...cells] : [...cells, ...Array(width - cells.length).fill("")];
+/**
+* A Word file as its HTML at a reading measure: headings, paragraphs, lists, tables, pictures,
+* kept to what a viewer draws (`cleanDocument`), again here after the API.
+*/
+function Document({ html, truncated, words, classNames }) {
+	const clean = useMemo(() => cleanDocument(html), [html]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes(classNames, "sc-file__text"),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: classes(classNames, "sc-file__document"),
+			dangerouslySetInnerHTML: { __html: clean }
+		}), /* @__PURE__ */ jsx(Cut, {
+			shown: truncated,
+			words,
+			classNames
+		})]
+	});
+}
+/** A deck: its slides one under another, each a card with its number, its words, its notes. */
+function Slides({ slides, truncated, words, classNames }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("ol", {
+		className: classes(classNames, "sc-file__slides"),
+		children: slides.map((slide, index) => /* @__PURE__ */ jsxs("li", {
+			className: classes(classNames, "sc-file__slide"),
+			children: [
+				/* @__PURE__ */ jsx("span", { children: words.slide(index + 1) }),
+				slide.title !== null && slide.title !== "" && /* @__PURE__ */ jsx("h3", { children: slide.title }),
+				slide.text !== "" && /* @__PURE__ */ jsx("p", { children: slide.text }),
+				slide.notes !== null && slide.notes !== "" && /* @__PURE__ */ jsxs("div", {
+					className: classes(classNames, "sc-file__notes"),
+					children: [/* @__PURE__ */ jsx("span", { children: words.notes }), /* @__PURE__ */ jsx("p", { children: slide.notes })]
+				})
+			]
+		}, index))
+	}), /* @__PURE__ */ jsx(Cut, {
+		shown: truncated,
+		words,
+		classNames
+	})] });
+}
+/** Words at a reading measure: Markdown drawn, plain words as written. */
+function Words({ text, markdown, truncated, words, classNames }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes(classNames, "sc-file__text"),
+		children: [markdown ? /* @__PURE__ */ jsx(Markdown, { text }) : /* @__PURE__ */ jsx("p", {
+			className: classes(classNames, "sc-file__plain"),
+			children: text
+		}), /* @__PURE__ */ jsx(Cut, {
+			shown: truncated,
+			words,
+			classNames
+		})]
+	});
+}
+/** A source as written, in the mono face, its long lines wrapped; never run. */
+function Source({ text, truncated, words, classNames }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("pre", {
+		className: classes(classNames, "sc-file__code"),
+		children: /* @__PURE__ */ jsx("code", { children: text })
+	}), /* @__PURE__ */ jsx(Cut, {
+		shown: truncated,
+		words,
+		classNames
+	})] });
+}
+/** A kind that can't be shown: its mark, the line that says so, and what to do instead. */
+function None({ name, words, classNames }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes(classNames, "sc-file__none"),
+		children: [/* @__PURE__ */ jsx(FileMark, {
+			name,
+			size: 44
+		}), /* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: words.noPreview }), /* @__PURE__ */ jsx("span", { children: words.noPreviewHint })] })]
+	});
+}
+/** The first `limit` bytes of a blob as words, once read; null while reading, or when not wanted. */
+function useText(blob, wanted, limit) {
+	const [text, setText] = useState(null);
+	useEffect(() => {
+		if (!wanted) return;
+		let live = true;
+		(blob.size > limit ? blob.slice(0, limit) : blob).text().then((read) => {
+			if (live) setText(read);
+		});
+		return () => {
+			live = false;
+			setText(null);
+		};
+	}, [
+		blob,
+		wanted,
+		limit
+	]);
+	return text;
+}
+/** An address for a blob while it is shown, let go when it changes or goes. */
+function useObjectUrl(blob) {
+	const [url, setUrl] = useState(null);
+	useEffect(() => {
+		if (blob === null) return;
+		const made = URL.createObjectURL(blob);
+		setUrl(made);
+		return () => {
+			URL.revokeObjectURL(made);
+			setUrl(null);
+		};
+	}, [blob]);
+	return url;
+}
+//#endregion
+export { FILE_MESSAGES, FileView };
+
+//# sourceMappingURL=FileView.js.map

package/dist/FileView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileView.js","names":[],"sources":["../src/FileView.tsx"],"sourcesContent":["import { DownloadSimpleIcon } from \"@phosphor-icons/react\";\nimport { useEffect, useMemo, useState, type ReactNode } from \"react\";\n\nimport { formatSize } from \"./about\";\nimport { classes } from \"./classes\";\nimport {\n  baseName,\n  cleanDocument,\n  extensionOf,\n  pretty,\n  previewOf,\n  tableOf,\n  typedFor,\n  type Preview,\n} from \"./files\";\nimport { AudioPlayer } from \"./kit/AudioPlayer\";\nimport { Button } from \"./kit/Button\";\nimport { KitProvider, type KitClassNames, type KitPart } from \"./kit/context\";\nimport { FileMark } from \"./kit/FileMark\";\nimport { Markdown } from \"./surface/Markdown\";\nimport type { FilePreview, PreviewSheet, PreviewSlide } from \"./types\";\n\n/** The words a file's view says; a host gives its own, in its language. */\nexport interface FileMessages {\n  /** The button that saves the file under its name. */\n  download: string;\n  /** In the preview's place, for a kind that can't be shown here. */\n  noPreview: string;\n  /** Under it: what to do instead. */\n  noPreviewHint: string;\n  /** Under a long file shown only in part. */\n  truncated: string;\n  /** In the bar, for a file whose name has no extension. */\n  file: string;\n  /** A file's size, as the host's people read it. */\n  size: (bytes: number) => string;\n  /** A PDF's pages, in the bar. */\n  pages: (count: number) => string;\n  /** The tabs of a spreadsheet's sheets, for screen readers. */\n  sheets: string;\n  /** Under a sheet shown in part: its first rows of how many. */\n  rows: (shown: number, total: number) => string;\n  /** In place of a sheet with nothing in it. */\n  emptySheet: string;\n  /** Over a slide: its number. */\n  slide: (number: number) => string;\n  /** Over a slide's speaker notes. */\n  notes: string;\n}\n\nexport const FILE_MESSAGES: FileMessages = {\n  download: \"Download\",\n  noPreview: \"This file can't be previewed here.\",\n  noPreviewHint: \"Download it to open it on your device.\",\n  truncated: \"Only the beginning is shown. Download it to see it whole.\",\n  file: \"File\",\n  size: (bytes) => formatSize(bytes),\n  pages: (count) => (count === 1 ? \"1 page\" : `${count} pages`),\n  sheets: \"Sheets\",\n  rows: (shown, total) => `The first ${shown} of ${total} rows`,\n  emptySheet: \"This sheet is empty.\",\n  slide: (number) => `Slide ${number}`,\n  notes: \"Notes\",\n};\n\n/** The parts, by the class each carries; `classNames` adds a host's own under the same keys. */\nexport type FilePart =\n  | \"sc-file\"\n  | \"sc-file__bar\"\n  | \"sc-file__meta\"\n  | \"sc-file__body\"\n  | \"sc-file__text\"\n  | \"sc-file__plain\"\n  | \"sc-file__code\"\n  | \"sc-file__table\"\n  | \"sc-file__sheet\"\n  | \"sc-file__tabs\"\n  | \"sc-file__tab\"\n  | \"sc-file__document\"\n  | \"sc-file__slides\"\n  | \"sc-file__slide\"\n  | \"sc-file__notes\"\n  | \"sc-file__frame\"\n  | \"sc-file__image\"\n  | \"sc-file__media\"\n  | \"sc-file__none\"\n  | \"sc-file__note\";\n\ntype ClassNames = Partial<Record<FilePart | KitPart, string>> | undefined;\n\nexport interface FileViewProps {\n  /** The file's bytes, as the API answers them (`Response.blob()`). */\n  blob: Blob;\n  /** Its name or path, with its extension: how it is read, and what it is saved as. */\n  name: string;\n  /**\n   * What the API made of it to draw (`client.files.preview`): a spreadsheet's sheets, a Word\n   * file as a document, a deck's slides, the words of a text, how a picture, a video or a sound\n   * is typed. Without it, what the browser can read of the bytes alone.\n   */\n  preview?: FilePreview | undefined;\n  messages?: Partial<FileMessages> | undefined;\n  classNames?: ClassNames;\n}\n\n/** The most of a file read as words: a longer one shows its beginning. */\nconst TEXT_LIMIT = 256 * 1024;\n/** The most rows a table draws. */\nconst ROW_LIMIT = 500;\n\n/**\n * One file, to see and to save, whatever its kind: a bar with its kind, its size (a PDF's pages)\n * and the button that saves it under its name, over the file as it reads. A PDF in the browser's\n * own viewer; a spreadsheet as a grid, its header kept in view, its sheets as tabs at its foot; a\n * Word file as a document at a reading measure; a deck as its slides one under another, their\n * notes under each; Markdown drawn, plain words as written, a source in the mono face, wrapped,\n * never run; a picture whole, a video and a sound in the browser's own players; any other kind\n * says it can't be shown, and is saved. What it can't read alone (a sheet, a document, slides)\n * it draws from `preview`. It fills the height it is given (a dialog's body), and scrolls inside.\n * The addresses it makes for the bytes are let go when it goes.\n */\nexport function FileView(props: FileViewProps) {\n  return (\n    <KitProvider classNames={props.classNames as KitClassNames}>\n      <View {...props} />\n    </KitProvider>\n  );\n}\n\nfunction View({ blob, name, preview, messages, classNames }: FileViewProps) {\n  const words = { ...FILE_MESSAGES, ...messages };\n  const extension = extensionOf(name);\n  // What is saved is plain bytes, so opening its address shows nothing, it only downloads.\n  const saved = useMemo(() => new Blob([blob], { type: \"application/octet-stream\" }), [blob]);\n  const save = useObjectUrl(saved);\n  const pages = preview?.kind === \"pdf\" ? preview.pages : null;\n\n  return (\n    <div className={`sc ${classes(classNames, \"sc-file\")}`}>\n      <div className={classes(classNames, \"sc-file__bar\")}>\n        <FileMark name={name} size={24} />\n        <span className={classes(classNames, \"sc-file__meta\")}>\n          <span>{extension === \"\" ? words.file : extension.toUpperCase()}</span>\n          <span>{words.size(blob.size)}</span>\n          {pages !== null && <span>{words.pages(pages)}</span>}\n        </span>\n        {save !== null && (\n          <Button size=\"sm\" icon={DownloadSimpleIcon} href={save} download={baseName(name)}>\n            {words.download}\n          </Button>\n        )}\n      </div>\n      <div className={classes(classNames, \"sc-file__body\")}>\n        {preview === undefined ? (\n          <Read blob={blob} name={name} words={words} classNames={classNames} />\n        ) : (\n          <Previewed\n            preview={preview}\n            blob={blob}\n            name={name}\n            words={words}\n            classNames={classNames}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Drawn {\n  name: string;\n  words: FileMessages;\n  classNames: ClassNames;\n}\n\n/** Under a file shown only in part: the words that say so. */\nfunction Cut({\n  shown,\n  words,\n  classNames,\n}: { shown: boolean; words: FileMessages } & Pick<Drawn, \"classNames\">) {\n  return shown ? <p className={classes(classNames, \"sc-file__note\")}>{words.truncated}</p> : null;\n}\n\n/** The file as the API made it to draw, by its kind. */\nfunction Previewed({\n  preview,\n  blob,\n  name,\n  words,\n  classNames,\n}: Drawn & { preview: FilePreview; blob: Blob }) {\n  switch (preview.kind) {\n    case \"pdf\":\n      return <Pdf blob={blob} name={name} classNames={classNames} />;\n    case \"image\":\n      return preview.media_type.includes(\"svg\") ? (\n        <Svg blob={blob} name={name} classNames={classNames} />\n      ) : (\n        <Media\n          blob={blob}\n          type={preview.media_type}\n          name={name}\n          classNames={classNames}\n          kind=\"image\"\n        />\n      );\n    case \"video\":\n    case \"audio\":\n      return (\n        <Media\n          blob={blob}\n          type={preview.media_type}\n          name={name}\n          classNames={classNames}\n          kind={preview.kind}\n        />\n      );\n    case \"sheet\":\n      return (\n        <Sheets\n          sheets={preview.sheets}\n          truncated={preview.truncated}\n          words={words}\n          classNames={classNames}\n        />\n      );\n    case \"document\":\n      return (\n        <Document\n          html={preview.html}\n          truncated={preview.truncated}\n          words={words}\n          classNames={classNames}\n        />\n      );\n    case \"slides\":\n      return (\n        <Slides\n          slides={preview.slides}\n          truncated={preview.truncated}\n          words={words}\n          classNames={classNames}\n        />\n      );\n    case \"markdown\":\n    case \"text\":\n      return (\n        <Words\n          text={preview.text}\n          markdown={preview.kind === \"markdown\"}\n          truncated={preview.truncated}\n          words={words}\n          classNames={classNames}\n        />\n      );\n    case \"code\":\n    case \"json\":\n      return (\n        <Source\n          text={preview.kind === \"json\" && !preview.truncated ? pretty(preview.text) : preview.text}\n          truncated={preview.truncated}\n          words={words}\n          classNames={classNames}\n        />\n      );\n    case \"unknown\":\n      return <None name={name} words={words} classNames={classNames} />;\n  }\n}\n\n/** The file as the browser reads its bytes alone, by its name and type. */\nfunction Read({ blob, name, words, classNames }: Drawn & { blob: Blob }) {\n  const preview: Preview = previewOf(name, blob.type);\n  const svg = extensionOf(name) === \"svg\";\n  const reads = preview === \"markdown\" || preview === \"text\" || preview === \"code\";\n  const text = useText(blob, reads || preview === \"table\", TEXT_LIMIT);\n  const cut = blob.size > TEXT_LIMIT;\n\n  if (preview === \"image\") {\n    return svg ? (\n      <Svg blob={blob} name={name} classNames={classNames} />\n    ) : (\n      <Media blob={typedFor(blob, name)} name={name} classNames={classNames} kind=\"image\" />\n    );\n  }\n  if (preview === \"pdf\") return <Pdf blob={blob} name={name} classNames={classNames} />;\n  if (preview === \"none\") return <None name={name} words={words} classNames={classNames} />;\n  if (text === null) return null;\n\n  const rows = preview === \"table\" ? tableOf(text) : null;\n  if (rows !== null) {\n    const [columns = [], ...body] = rows;\n    return (\n      <Sheets\n        sheets={[{ name: baseName(name), columns, rows: body, total_rows: body.length }]}\n        truncated={cut}\n        words={words}\n        classNames={classNames}\n      />\n    );\n  }\n  if (preview === \"markdown\" || preview === \"text\") {\n    return (\n      <Words\n        text={text}\n        markdown={preview === \"markdown\"}\n        truncated={cut}\n        words={words}\n        classNames={classNames}\n      />\n    );\n  }\n  // A source, or a CSV not simple enough for a table: as written, in the mono face.\n  return (\n    <Source\n      text={extensionOf(name) === \"json\" && !cut ? pretty(text) : text}\n      truncated={cut}\n      words={words}\n      classNames={classNames}\n    />\n  );\n}\n\n/** A PDF in the browser's own viewer. */\nfunction Pdf({ blob, name, classNames }: { blob: Blob; name: string; classNames: ClassNames }) {\n  const typed = useMemo(() => typedFor(blob, name), [blob, name]);\n  const view = useObjectUrl(typed);\n  return (\n    view !== null && (\n      <iframe src={view} title={baseName(name)} className={classes(classNames, \"sc-file__frame\")} />\n    )\n  );\n}\n\n/**\n * An SVG, from its words as a data address: one of the page's own (a blob's) would run its\n * scripts as the page if it were opened apart.\n */\nfunction Svg({ blob, name, classNames }: { blob: Blob; name: string; classNames: ClassNames }) {\n  const text = useText(blob, true, Infinity);\n  return (\n    text !== null && (\n      <div className={classes(classNames, \"sc-file__image\")}>\n        <img\n          src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(text)}`}\n          alt={baseName(name)}\n        />\n      </div>\n    )\n  );\n}\n\n/** A picture whole, a video or a sound in the browser's own player, from its bytes typed. */\nfunction Media({\n  blob,\n  type,\n  name,\n  kind,\n  classNames,\n}: {\n  blob: Blob;\n  /** The type it plays as; none: the one the bytes came with. */\n  type?: string | undefined;\n  name: string;\n  kind: \"image\" | \"video\" | \"audio\";\n  classNames: ClassNames;\n}) {\n  const typed = useMemo(\n    () => (type === undefined || blob.type === type ? blob : new Blob([blob], { type })),\n    [blob, type],\n  );\n  const src = useObjectUrl(typed);\n  if (src === null) return null;\n  if (kind === \"image\") {\n    return (\n      <div className={classes(classNames, \"sc-file__image\")}>\n        <img src={src} alt={baseName(name)} />\n      </div>\n    );\n  }\n  return (\n    <div className={classes(classNames, \"sc-file__media\")} data-kind={kind}>\n      {kind === \"video\" ? (\n        <video src={src} controls playsInline preload=\"metadata\" aria-label={baseName(name)} />\n      ) : (\n        <>\n          <FileMark name={name} size={44} />\n          <AudioPlayer src={src} label={baseName(name)} />\n        </>\n      )}\n    </div>\n  );\n}\n\n/**\n * A spreadsheet: one sheet at a time as a grid, its columns over it kept in view as it scrolls;\n * its sheets as tabs at its foot, as a spreadsheet has them. Under a\n * sheet shown in part, how many of its rows are.\n */\nfunction Sheets({\n  sheets,\n  truncated,\n  words,\n  classNames,\n}: {\n  sheets: readonly PreviewSheet[];\n  truncated: boolean;\n} & Omit<Drawn, \"name\">) {\n  const [at, setAt] = useState(0);\n  const sheet = sheets[at] ?? sheets[0];\n  if (sheet === undefined) return <None name=\"\" words={words} classNames={classNames} />;\n  const rows = sheet.rows.slice(0, ROW_LIMIT);\n  const width = Math.max(sheet.columns?.length ?? 0, ...rows.map((row) => row.length));\n  const several = sheets.length > 1;\n  return (\n    <div className={classes(classNames, \"sc-file__sheet\")}>\n      {/* Another sheet opens at its top-left corner. */}\n      <div\n        key={at}\n        role={several ? \"tabpanel\" : undefined}\n        className={classes(classNames, \"sc-file__table\")}\n      >\n        {sheet.columns === null ? (\n          <p className={classes(classNames, \"sc-file__note\")}>{words.emptySheet}</p>\n        ) : (\n          <table>\n            <thead>\n              <tr>\n                {pad(sheet.columns, width).map((cell, index) => (\n                  <th key={index} scope=\"col\">\n                    {cell}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {rows.map((row, index) => (\n                <tr key={index}>\n                  {pad(row, width).map((cell, column) => (\n                    <td key={column} title={cell.length > 36 ? cell : undefined}>\n                      {cell}\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        )}\n        {sheet.total_rows > rows.length ? (\n          <p className={classes(classNames, \"sc-file__note\")}>\n            {words.rows(rows.length, sheet.total_rows)}\n          </p>\n        ) : (\n          <Cut shown={truncated} words={words} classNames={classNames} />\n        )}\n      </div>\n      {several && (\n        <div\n          role=\"tablist\"\n          aria-label={words.sheets}\n          className={classes(classNames, \"sc-file__tabs\")}\n        >\n          {sheets.map((each, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={index === at}\n              onClick={() => {\n                setAt(index);\n              }}\n              className={classes(classNames, \"sc-file__tab\")}\n            >\n              {each.name}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A row as wide as the widest, its missing cells empty. */\nconst pad = (cells: readonly string[], width: number): string[] =>\n  cells.length >= width ? [...cells] : [...cells, ...Array<string>(width - cells.length).fill(\"\")];\n\n/**\n * A Word file as its HTML at a reading measure: headings, paragraphs, lists, tables, pictures,\n * kept to what a viewer draws (`cleanDocument`), again here after the API.\n */\nfunction Document({\n  html,\n  truncated,\n  words,\n  classNames,\n}: { html: string; truncated: boolean } & Omit<Drawn, \"name\">) {\n  const clean = useMemo(() => cleanDocument(html), [html]);\n  return (\n    <div className={classes(classNames, \"sc-file__text\")}>\n      <div\n        className={classes(classNames, \"sc-file__document\")}\n        // Kept to the API's allow-list, by the API and again by `cleanDocument`.\n        dangerouslySetInnerHTML={{ __html: clean }}\n      />\n      <Cut shown={truncated} words={words} classNames={classNames} />\n    </div>\n  );\n}\n\n/** A deck: its slides one under another, each a card with its number, its words, its notes. */\nfunction Slides({\n  slides,\n  truncated,\n  words,\n  classNames,\n}: { slides: readonly PreviewSlide[]; truncated: boolean } & Omit<Drawn, \"name\">) {\n  return (\n    <>\n      <ol className={classes(classNames, \"sc-file__slides\")}>\n        {slides.map((slide, index) => (\n          <li key={index} className={classes(classNames, \"sc-file__slide\")}>\n            <span>{words.slide(index + 1)}</span>\n            {slide.title !== null && slide.title !== \"\" && <h3>{slide.title}</h3>}\n            {slide.text !== \"\" && <p>{slide.text}</p>}\n            {slide.notes !== null && slide.notes !== \"\" && (\n              <div className={classes(classNames, \"sc-file__notes\")}>\n                <span>{words.notes}</span>\n                <p>{slide.notes}</p>\n              </div>\n            )}\n          </li>\n        ))}\n      </ol>\n      <Cut shown={truncated} words={words} classNames={classNames} />\n    </>\n  );\n}\n\n/** Words at a reading measure: Markdown drawn, plain words as written. */\nfunction Words({\n  text,\n  markdown,\n  truncated,\n  words,\n  classNames,\n}: { text: string; markdown: boolean; truncated: boolean } & Omit<Drawn, \"name\">) {\n  return (\n    <div className={classes(classNames, \"sc-file__text\")}>\n      {markdown ? (\n        <Markdown text={text} />\n      ) : (\n        <p className={classes(classNames, \"sc-file__plain\")}>{text}</p>\n      )}\n      <Cut shown={truncated} words={words} classNames={classNames} />\n    </div>\n  );\n}\n\n/** A source as written, in the mono face, its long lines wrapped; never run. */\nfunction Source({\n  text,\n  truncated,\n  words,\n  classNames,\n}: { text: string; truncated: boolean } & Omit<Drawn, \"name\">) {\n  return (\n    <>\n      <pre className={classes(classNames, \"sc-file__code\")}>\n        <code>{text}</code>\n      </pre>\n      <Cut shown={truncated} words={words} classNames={classNames} />\n    </>\n  );\n}\n\n/** A kind that can't be shown: its mark, the line that says so, and what to do instead. */\nfunction None({ name, words, classNames }: Drawn): ReactNode {\n  return (\n    <div className={classes(classNames, \"sc-file__none\")}>\n      <FileMark name={name} size={44} />\n      <p>\n        <strong>{words.noPreview}</strong>\n        <span>{words.noPreviewHint}</span>\n      </p>\n    </div>\n  );\n}\n\n/** The first `limit` bytes of a blob as words, once read; null while reading, or when not wanted. */\nfunction useText(blob: Blob, wanted: boolean, limit: number): string | null {\n  const [text, setText] = useState<string | null>(null);\n  useEffect(() => {\n    if (!wanted) return;\n    let live = true;\n    void (blob.size > limit ? blob.slice(0, limit) : blob).text().then((read) => {\n      if (live) setText(read);\n    });\n    return () => {\n      live = false;\n      setText(null);\n    };\n  }, [blob, wanted, limit]);\n  return text;\n}\n\n/** An address for a blob while it is shown, let go when it changes or goes. */\nfunction useObjectUrl(blob: Blob | null): string | null {\n  const [url, setUrl] = useState<string | null>(null);\n  useEffect(() => {\n    if (blob === null) return;\n    const made = URL.createObjectURL(blob);\n    setUrl(made);\n    return () => {\n      URL.revokeObjectURL(made);\n      setUrl(null);\n    };\n  }, [blob]);\n  return url;\n}\n"],"mappings":"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"}

package/dist/Modes.d.ts

@@ -0,0 +1,13 @@
+//#region src/Modes.d.ts
+/** How the person talks to the agent in its space: writing, or on a call. */
+export type SpaceMode = "text" | "voice";
+/** The modes' words: the group's name for screen readers, and each mode's. */
+export interface ModeMessages {
+  label: string;
+  text: string;
+  voice: string;
+}
+/** The modes' parts, by the class each carries. */
+export type ModePart = "sc-space__modes" | "sc-space__mode" | "sc-space__mode--text" | "sc-space__mode--voice";
+//#endregion
+//# sourceMappingURL=Modes.d.ts.map

package/dist/Modes.js

@@ -0,0 +1,75 @@
+import { classes } from "./classes.js";
+import { useEffect, useRef } from "react";
+import { ChatCircleTextIcon, WaveformIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Modes.tsx
+const MODES = [{
+	mode: "text",
+	glyph: ChatCircleTextIcon
+}, {
+	mode: "voice",
+	glyph: WaveformIcon
+}];
+/** Where an arrow key moves among the modes, by how many; Home and End go to either end. */
+const STEPS = {
+	ArrowRight: 1,
+	ArrowDown: 1,
+	ArrowLeft: -1,
+	ArrowUp: -1
+};
+/**
+* The two ways to talk, side by side in one small segmented control: a radio group, the mode on
+* reachable by Tab and the arrows moving to the other and choosing it (Home and End too), each
+* named by its glyph and its word. `focus` takes the keyboard as it is drawn, for a control drawn
+* anew after a switch made from it (the chat's and the call's are two).
+*/
+function Modes({ mode, onChange, words, classNames, focus = false }) {
+	const buttons = useRef([]);
+	const on = MODES.findIndex((each) => each.mode === mode);
+	useEffect(() => {
+		if (focus) buttons.current[on]?.focus();
+	}, []);
+	const onKeyDown = (event, index) => {
+		const step = STEPS[event.key];
+		const to = event.key === "Home" ? 0 : event.key === "End" ? MODES.length - 1 : step === void 0 ? null : (index + step + MODES.length) % MODES.length;
+		if (to === null) return;
+		event.preventDefault();
+		buttons.current[to]?.focus();
+		const next = MODES[to];
+		if (next && next.mode !== mode) onChange(next.mode);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": words.label,
+		part: "modes",
+		className: classes(classNames, "sc-space__modes"),
+		children: MODES.map(({ mode: each, glyph: Glyph }, index) => {
+			const chosen = index === on;
+			return /* @__PURE__ */ jsxs("button", {
+				ref: (button) => {
+					buttons.current[index] = button;
+				},
+				type: "button",
+				role: "radio",
+				"aria-checked": chosen,
+				tabIndex: chosen ? 0 : -1,
+				onClick: () => {
+					if (!chosen) onChange(each);
+				},
+				onKeyDown: (event) => {
+					onKeyDown(event, index);
+				},
+				part: chosen ? `mode mode-${each} mode-selected` : `mode mode-${each}`,
+				className: classes(classNames, "sc-space__mode", `sc-space__mode--${each}`),
+				children: [/* @__PURE__ */ jsx(Glyph, {
+					"aria-hidden": true,
+					weight: chosen ? "fill" : "regular"
+				}), /* @__PURE__ */ jsx("span", { children: words[each] })]
+			}, each);
+		})
+	});
+}
+//#endregion
+export { Modes };
+
+//# sourceMappingURL=Modes.js.map

package/dist/Modes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modes.js","names":[],"sources":["../src/Modes.tsx"],"sourcesContent":["import { ChatCircleTextIcon, WaveformIcon, type Icon } from \"@phosphor-icons/react\";\nimport { useEffect, useRef, type KeyboardEvent } from \"react\";\n\nimport { classes } from \"./classes\";\n\n/** How the person talks to the agent in its space: writing, or on a call. */\nexport type SpaceMode = \"text\" | \"voice\";\n\n/** The modes' words: the group's name for screen readers, and each mode's. */\nexport interface ModeMessages {\n  label: string;\n  text: string;\n  voice: string;\n}\n\n/** The modes' parts, by the class each carries. */\nexport type ModePart =\n  \"sc-space__modes\" | \"sc-space__mode\" | \"sc-space__mode--text\" | \"sc-space__mode--voice\";\n\nconst MODES: readonly { mode: SpaceMode; glyph: Icon }[] = [\n  { mode: \"text\", glyph: ChatCircleTextIcon },\n  { mode: \"voice\", glyph: WaveformIcon },\n];\n\n/** Where an arrow key moves among the modes, by how many; Home and End go to either end. */\nconst STEPS: Readonly<Record<string, number>> = {\n  ArrowRight: 1,\n  ArrowDown: 1,\n  ArrowLeft: -1,\n  ArrowUp: -1,\n};\n\n/**\n * The two ways to talk, side by side in one small segmented control: a radio group, the mode on\n * reachable by Tab and the arrows moving to the other and choosing it (Home and End too), each\n * named by its glyph and its word. `focus` takes the keyboard as it is drawn, for a control drawn\n * anew after a switch made from it (the chat's and the call's are two).\n */\nexport function Modes({\n  mode,\n  onChange,\n  words,\n  classNames,\n  focus = false,\n}: {\n  mode: SpaceMode;\n  onChange: (mode: SpaceMode) => void;\n  words: ModeMessages;\n  classNames?: Partial<Record<ModePart, string>> | undefined;\n  focus?: boolean | undefined;\n}) {\n  const buttons = useRef<(HTMLButtonElement | null)[]>([]);\n  const on = MODES.findIndex((each) => each.mode === mode);\n\n  useEffect(() => {\n    if (focus) buttons.current[on]?.focus();\n    // Only as it is drawn: a mode chosen later keeps the focus where the keys put it.\n  }, []);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const step = STEPS[event.key];\n    const to =\n      event.key === \"Home\"\n        ? 0\n        : event.key === \"End\"\n          ? MODES.length - 1\n          : step === undefined\n            ? null\n            : (index + step + MODES.length) % MODES.length;\n    if (to === null) return;\n    event.preventDefault();\n    buttons.current[to]?.focus();\n    const next = MODES[to];\n    if (next && next.mode !== mode) onChange(next.mode);\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={words.label}\n      part=\"modes\"\n      className={classes(classNames, \"sc-space__modes\")}\n    >\n      {MODES.map(({ mode: each, glyph: Glyph }, index) => {\n        const chosen = index === on;\n        return (\n          <button\n            key={each}\n            ref={(button) => {\n              buttons.current[index] = button;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={chosen}\n            tabIndex={chosen ? 0 : -1}\n            onClick={() => {\n              if (!chosen) onChange(each);\n            }}\n            onKeyDown={(event) => {\n              onKeyDown(event, index);\n            }}\n            part={chosen ? `mode mode-${each} mode-selected` : `mode mode-${each}`}\n            className={classes(classNames, \"sc-space__mode\", `sc-space__mode--${each}`)}\n          >\n            <Glyph aria-hidden weight={chosen ? \"fill\" : \"regular\"} />\n            <span>{words[each]}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAmBA,MAAM,QAAqD,CACzD;CAAE,MAAM;CAAQ,OAAO;AAAmB,GAC1C;CAAE,MAAM;CAAS,OAAO;AAAa,CACvC;;AAGA,MAAM,QAA0C;CAC9C,YAAY;CACZ,WAAW;CACX,WAAW;CACX,SAAS;AACX;;;;;;;AAQA,SAAgB,MAAM,EACpB,MACA,UACA,OACA,YACA,QAAQ,SAOP;CACD,MAAM,UAAU,OAAqC,CAAC,CAAC;CACvD,MAAM,KAAK,MAAM,WAAW,SAAS,KAAK,SAAS,IAAI;CAEvD,gBAAgB;EACd,IAAI,OAAO,QAAQ,QAAQ,GAAG,EAAE,MAAM;CAExC,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,OAAyC,UAAkB;EAC5E,MAAM,OAAO,MAAM,MAAM;EACzB,MAAM,KACJ,MAAM,QAAQ,SACV,IACA,MAAM,QAAQ,QACZ,MAAM,SAAS,IACf,SAAS,KAAA,IACP,QACC,QAAQ,OAAO,MAAM,UAAU,MAAM;EAChD,IAAI,OAAO,MAAM;EACjB,MAAM,eAAe;EACrB,QAAQ,QAAQ,GAAG,EAAE,MAAM;EAC3B,MAAM,OAAO,MAAM;EACnB,IAAI,QAAQ,KAAK,SAAS,MAAM,SAAS,KAAK,IAAI;CACpD;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY,MAAM;EAClB,MAAK;EACL,WAAW,QAAQ,YAAY,iBAAiB;EAE/C,UAAA,MAAM,KAAK,EAAE,MAAM,MAAM,OAAO,SAAS,UAAU;GAClD,MAAM,SAAS,UAAU;GACzB,OACE,qBAAC,UAAD;IAEE,MAAM,WAAW;KACf,QAAQ,QAAQ,SAAS;IAC3B;IACA,MAAK;IACL,MAAK;IACL,gBAAc;IACd,UAAU,SAAS,IAAI;IACvB,eAAe;KACb,IAAI,CAAC,QAAQ,SAAS,IAAI;IAC5B;IACA,YAAY,UAAU;KACpB,UAAU,OAAO,KAAK;IACxB;IACA,MAAM,SAAS,aAAa,KAAK,kBAAkB,aAAa;IAChE,WAAW,QAAQ,YAAY,kBAAkB,mBAAmB,MAAM;IAhB5E,UAAA,CAkBE,oBAAC,OAAD;KAAO,eAAA;KAAY,QAAQ,SAAS,SAAS;IAAY,CAAA,GACzD,oBAAC,QAAD,EAAA,UAAO,MAAM,MAAY,CAAA,CACnB;GAnBD,GAAA,IAmBC;EAEZ,CAAC;CACE,CAAA;AAET"}