@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/BrowserView.js

@@ -0,0 +1,328 @@
+import { classes } from "./classes.js";
+import { Button } from "./kit/Button.js";
+import { capture, handOverWaiting, painterOn, siteOf } from "./browser.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ArrowsInSimpleIcon, ArrowsOutSimpleIcon, HandIcon, LockSimpleIcon, XIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/BrowserView.tsx
+const BROWSER_MESSAGES = {
+	agent: (name) => `${name} is browsing`,
+	agentMine: (name) => `${name}, in your Chrome`,
+	person: "You're in control",
+	take: "Take control",
+	giveBack: "Give it back",
+	handedOver: (name) => `${name} hands you the browser`,
+	done: "Done, go on",
+	closed: "The browser closed while it waited for you.",
+	expand: "Enlarge",
+	shrink: "Shrink",
+	close: "Close the browser",
+	blank: "Blank page",
+	screen: (where) => `Browser: ${where}`
+};
+/**
+* The browser the agent drives, live, while the conversation has one: a compact tile while the
+* agent works (its screen small, where it is, who holds it), which the person can enlarge or
+* take over. Taken, or handed over by the agent, it glides open large and the person's pointer
+* and keys go to the page; a hand-over says why, ringed in the accent, and "done" gives the
+* browser back, the panel gliding small again, and lets the agent go on. Draws nothing when
+* there is no browser, unless a hand-over still waits for one that closed: then the person can
+* go on without it.
+*/
+function BrowserView({ live, name, messages, classNames }) {
+	const words = {
+		...BROWSER_MESSAGES,
+		...messages
+	};
+	const { browser } = live;
+	const [answered, setAnswered] = useState(null);
+	const answer = (wait) => {
+		if (answered === wait) return;
+		if (live.act({
+			surface: wait,
+			name: "done",
+			data: {},
+			label: words.done
+		})) setAnswered(wait);
+	};
+	if (browser === null) {
+		const waiting = handOverWaiting(live.messages, live.awaiting);
+		if (waiting === null || waiting === answered) return null;
+		return /* @__PURE__ */ jsx("section", {
+			className: classes(classNames, "sc-browser", "sc-browser--closed"),
+			children: /* @__PURE__ */ jsxs("p", {
+				className: classes(classNames, "sc-browser__handover"),
+				children: [
+					/* @__PURE__ */ jsx(HandIcon, {
+						"aria-hidden": true,
+						weight: "fill"
+					}),
+					/* @__PURE__ */ jsx("span", { children: words.closed }),
+					/* @__PURE__ */ jsx(Button, {
+						tone: "primary",
+						size: "sm",
+						onClick: () => answer(waiting),
+						children: words.done
+					})
+				]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(Panel, {
+		live,
+		browser,
+		name,
+		words,
+		classNames,
+		answered,
+		onDone: answer
+	});
+}
+function Panel({ live, browser, name, words, classNames, answered, onDone }) {
+	const [expanded, setExpanded] = useState(false);
+	const settling = browser.wait !== null && browser.wait === answered;
+	const yours = browser.control === "person" && !settling;
+	const panel = useRef(null);
+	const bar = useRef(null);
+	const canvas = useRef(null);
+	const look = useGlide(browser.wait !== null && !settling ? {
+		shape: "handed",
+		wait: browser.wait,
+		reason: browser.reason
+	} : { shape: yours || expanded ? "large" : "small" }, panel, bar, canvas);
+	const large = look.shape !== "small";
+	const { host, rest } = siteOf(browser.url);
+	const where = browser.title || host || words.blank;
+	const looks = [];
+	if (large) looks.push("sc-browser--large");
+	if (yours) looks.push("sc-browser--yours");
+	if (look.shape === "handed") looks.push("sc-browser--handed");
+	return /* @__PURE__ */ jsxs("section", {
+		ref: panel,
+		"aria-label": words.screen(where),
+		className: classes(classNames, "sc-browser", ...looks),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				ref: bar,
+				className: classes(classNames, "sc-browser__bar"),
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: classes(classNames, "sc-browser__who"),
+						children: [/* @__PURE__ */ jsx("i", { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children: yours ? words.person : browser.where === "mine" ? words.agentMine(name) : words.agent(name) })]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						title: browser.url,
+						className: classes(classNames, "sc-browser__address"),
+						children: host ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsx(LockSimpleIcon, {
+								"aria-hidden": true,
+								weight: "bold"
+							}),
+							/* @__PURE__ */ jsx("strong", { children: host }),
+							/* @__PURE__ */ jsx("span", { children: rest })
+						] }) : /* @__PURE__ */ jsx("span", { children: words.blank })
+					}),
+					!large && browser.title !== "" && /* @__PURE__ */ jsx("p", {
+						className: classes(classNames, "sc-browser__title"),
+						children: browser.title
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: classes(classNames, "sc-browser__controls"),
+						children: [
+							look.shape !== "handed" && !settling && (yours ? /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								onClick: () => live.control("agent"),
+								children: words.giveBack
+							}) : /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								onClick: () => live.control("person"),
+								children: words.take
+							})),
+							!yours && /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								tone: "ghost",
+								icon: expanded ? ArrowsInSimpleIcon : ArrowsOutSimpleIcon,
+								"aria-label": expanded ? words.shrink : words.expand,
+								title: expanded ? words.shrink : words.expand,
+								onClick: () => setExpanded((open) => !open)
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								tone: "ghost",
+								icon: XIcon,
+								"aria-label": words.close,
+								title: words.close,
+								onClick: () => live.closeBrowser()
+							})
+						]
+					})
+				]
+			}),
+			look.shape === "handed" && /* @__PURE__ */ jsxs("div", {
+				className: classes(classNames, "sc-browser__handover"),
+				children: [
+					/* @__PURE__ */ jsx(HandIcon, {
+						"aria-hidden": true,
+						weight: "fill"
+					}),
+					/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: words.handedOver(name) }), look.reason && /* @__PURE__ */ jsx("span", { children: look.reason })] }),
+					/* @__PURE__ */ jsx(Button, {
+						tone: "primary",
+						size: "sm",
+						onClick: () => onDone(look.wait),
+						children: words.done
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Screen, {
+				live,
+				browser,
+				canvas,
+				interactive: yours,
+				label: words.screen(where),
+				classNames,
+				onOpen: large ? void 0 : () => setExpanded(true)
+			})
+		]
+	});
+}
+/** v2's expand: half a second, quick to leave and slow to land. */
+const GLIDE = {
+	duration: 500,
+	easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+};
+/** The words around the screen, laid out anew, come in once it is under way. */
+const ARRIVE = {
+	duration: 240,
+	delay: 140,
+	easing: "ease-out",
+	fill: "backwards"
+};
+function layoutOf(panel, screen) {
+	const outer = panel.getBoundingClientRect();
+	const inner = screen.getBoundingClientRect();
+	return {
+		height: outer.height,
+		x: inner.left - outer.left,
+		y: inner.top - outer.top,
+		width: inner.width,
+		tall: inner.height
+	};
+}
+/** Whoever asked their system for less motion gets none. */
+function still() {
+	return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* The look the panel shows: `wanted`, one layout later when its shape changes, so the panel is
+* measured as it stands before it changes and glides from there to where it lands (its height,
+* so the conversation above gives way smoothly, and its screen's place and size, by a
+* transform) instead of jumping; its words come in over the move. A change midway starts from
+* wherever the glide had got to. The same shape shows what is wanted at once.
+*/
+function useGlide(wanted, panel, bar, canvas) {
+	const [shown, setShown] = useState(wanted);
+	const from = useRef(null);
+	const moving = useRef([]);
+	const changing = shown.shape !== wanted.shape;
+	useLayoutEffect(() => {
+		if (!changing) return;
+		const outer = panel.current;
+		const screen = canvas.current;
+		const glides = outer !== null && screen !== null && typeof outer.animate === "function";
+		from.current = glides && !still() ? layoutOf(outer, screen) : null;
+		for (const animation of moving.current) animation.cancel();
+		moving.current = [];
+		setShown(wanted);
+	});
+	useLayoutEffect(() => {
+		const first = from.current;
+		from.current = null;
+		const outer = panel.current;
+		const screen = canvas.current;
+		if (first === null || outer === null || screen === null) return;
+		const last = layoutOf(outer, screen);
+		if (last.width === 0 || last.tall === 0) return;
+		const shift = `translate(${first.x - last.x}px, ${first.y - last.y}px)`;
+		const scale = `scale(${first.width / last.width}, ${first.tall / last.tall})`;
+		moving.current = [outer.animate([{ height: `${first.height}px` }, { height: `${last.height}px` }], GLIDE), screen.animate([{ transform: `${shift} ${scale}` }, { transform: "none" }], GLIDE)];
+		if (bar.current) moving.current.push(bar.current.animate([{ opacity: 0 }, { opacity: 1 }], ARRIVE));
+	}, [
+		shown.shape,
+		panel,
+		bar,
+		canvas
+	]);
+	return changing ? shown : wanted;
+}
+/**
+* The screen: the browser's pictures painted on a canvas as they come, the latest only. While
+* the person holds the browser it takes their pointer and keys (and the focus, so they can type
+* at once); otherwise it is only watched, and the small one opens large on a click. Until the
+* first picture lands, a quiet light sweeps where it will be.
+*/
+function Screen({ live, browser, canvas, interactive, label, classNames, onOpen }) {
+	const { watchScreen, input } = live;
+	const { width, height } = browser;
+	const [painted, setPainted] = useState(false);
+	useEffect(() => {
+		const element = canvas.current;
+		if (!element) return void 0;
+		let first = true;
+		const painter = painterOn(element, () => {
+			if (!first) return;
+			first = false;
+			setPainted(true);
+		});
+		const stop = watchScreen((frame) => {
+			painter.paint(frame.jpeg);
+		});
+		return () => {
+			stop();
+			painter.dispose();
+		};
+	}, [
+		watchScreen,
+		width,
+		height,
+		canvas
+	]);
+	const send = useRef(input);
+	useLayoutEffect(() => {
+		send.current = input;
+	});
+	useEffect(() => {
+		const element = canvas.current;
+		if (!element || !interactive) return void 0;
+		element.focus({ preventScroll: true });
+		return capture(element, {
+			width,
+			height
+		}, (event) => send.current(event));
+	}, [
+		interactive,
+		width,
+		height,
+		canvas
+	]);
+	const parts = ["sc-browser__screen"];
+	if (!painted) parts.push("sc-browser__screen--waiting");
+	return /* @__PURE__ */ jsx("div", {
+		className: classes(classNames, ...parts),
+		children: /* @__PURE__ */ jsx("canvas", {
+			ref: canvas,
+			role: "img",
+			"aria-label": label,
+			width,
+			height,
+			tabIndex: interactive ? 0 : void 0,
+			style: { "--_ratio": String(width / height) },
+			onClick: onOpen,
+			className: classes(classNames, "sc-browser__canvas")
+		})
+	});
+}
+//#endregion
+export { BROWSER_MESSAGES, BrowserView };
+
+//# sourceMappingURL=BrowserView.js.map

package/dist/BrowserView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserView.js","names":[],"sources":["../src/BrowserView.tsx"],"sourcesContent":["import {\n  ArrowsInSimpleIcon,\n  ArrowsOutSimpleIcon,\n  HandIcon,\n  LockSimpleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\nimport {\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type RefObject,\n} from \"react\";\n\nimport { capture, handOverWaiting, painterOn, siteOf } from \"./browser\";\nimport { classes } from \"./classes\";\nimport { Button } from \"./kit/Button\";\nimport type { BrowserState } from \"./types\";\nimport type { LiveConversation } from \"./useConversation\";\n\n/** The words the browser says; a host gives its own, in its language. */\nexport interface BrowserMessages {\n  /** Who holds it: the agent, by its name. */\n  agent: (name: string) => string;\n  /** Who holds it: the agent, in the owner's own Chrome. */\n  agentMine: (name: string) => string;\n  /** Who holds it: the person. */\n  person: string;\n  /** Take it from the agent. */\n  take: string;\n  /** Give it back to the agent, after taking it. */\n  giveBack: string;\n  /** The agent handed it over: what heads its reason. */\n  handedOver: (name: string) => string;\n  /** The person is done with what the agent handed over: the agent goes on. */\n  done: string;\n  /** A hand-over waits, but the browser closed meanwhile (nobody used it for a while). */\n  closed: string;\n  expand: string;\n  shrink: string;\n  /** The way to close it now: it stops running, and being billed. */\n  close: string;\n  /** Where the browser is when it shows no web page. */\n  blank: string;\n  /** The screen's name, for those who cannot see it. */\n  screen: (where: string) => string;\n}\n\nexport const BROWSER_MESSAGES: BrowserMessages = {\n  agent: (name) => `${name} is browsing`,\n  agentMine: (name) => `${name}, in your Chrome`,\n  person: \"You're in control\",\n  take: \"Take control\",\n  giveBack: \"Give it back\",\n  handedOver: (name) => `${name} hands you the browser`,\n  done: \"Done, go on\",\n  closed: \"The browser closed while it waited for you.\",\n  expand: \"Enlarge\",\n  shrink: \"Shrink\",\n  close: \"Close the browser\",\n  blank: \"Blank page\",\n  screen: (where) => `Browser: ${where}`,\n};\n\n/** The browser's parts, by the class each carries; `classNames` adds a host's own under the same keys. */\nexport type BrowserPart =\n  | \"sc-browser\"\n  | \"sc-browser--large\"\n  | \"sc-browser--yours\"\n  | \"sc-browser--handed\"\n  | \"sc-browser--closed\"\n  | \"sc-browser__bar\"\n  | \"sc-browser__who\"\n  | \"sc-browser__address\"\n  | \"sc-browser__title\"\n  | \"sc-browser__controls\"\n  | \"sc-browser__handover\"\n  | \"sc-browser__screen\"\n  | \"sc-browser__screen--waiting\"\n  | \"sc-browser__canvas\";\n\nexport interface BrowserViewProps {\n  /** The conversation the browser is of (`useConversation`). */\n  live: LiveConversation;\n  /** The agent's name, for the words that say it holds the browser. */\n  name: string;\n  messages?: Partial<BrowserMessages> | undefined;\n  classNames?: Partial<Record<BrowserPart, string>> | undefined;\n}\n\n/**\n * The browser the agent drives, live, while the conversation has one: a compact tile while the\n * agent works (its screen small, where it is, who holds it), which the person can enlarge or\n * take over. Taken, or handed over by the agent, it glides open large and the person's pointer\n * and keys go to the page; a hand-over says why, ringed in the accent, and \"done\" gives the\n * browser back, the panel gliding small again, and lets the agent go on. Draws nothing when\n * there is no browser, unless a hand-over still waits for one that closed: then the person can\n * go on without it.\n */\nexport function BrowserView({ live, name, messages, classNames }: BrowserViewProps) {\n  const words = { ...BROWSER_MESSAGES, ...messages };\n  const { browser } = live;\n  // The hand-over answered here, so it is never answered twice while its echo is on its way.\n  const [answered, setAnswered] = useState<string | null>(null);\n  const answer = (wait: string) => {\n    if (answered === wait) return;\n    if (live.act({ surface: wait, name: \"done\", data: {}, label: words.done })) setAnswered(wait);\n  };\n\n  if (browser === null) {\n    const waiting = handOverWaiting(live.messages, live.awaiting);\n    if (waiting === null || waiting === answered) return null;\n    return (\n      <section className={classes(classNames, \"sc-browser\", \"sc-browser--closed\")}>\n        <p className={classes(classNames, \"sc-browser__handover\")}>\n          <HandIcon aria-hidden weight=\"fill\" />\n          <span>{words.closed}</span>\n          <Button tone=\"primary\" size=\"sm\" onClick={() => answer(waiting)}>\n            {words.done}\n          </Button>\n        </p>\n      </section>\n    );\n  }\n  return (\n    <Panel\n      live={live}\n      browser={browser}\n      name={name}\n      words={words}\n      classNames={classNames}\n      answered={answered}\n      onDone={answer}\n    />\n  );\n}\n\n/**\n * How the panel is laid out: small, its screen beside its words; large, under them; or handed\n * over, large with why the agent stopped and the way to go on.\n */\ntype Look = { shape: \"small\" | \"large\" } | { shape: \"handed\"; wait: string; reason: string | null };\n\nfunction Panel({\n  live,\n  browser,\n  name,\n  words,\n  classNames,\n  answered,\n  onDone,\n}: {\n  live: LiveConversation;\n  browser: BrowserState;\n  name: string;\n  words: BrowserMessages;\n  classNames: Partial<Record<BrowserPart, string>> | undefined;\n  answered: string | null;\n  onDone: (wait: string) => void;\n}) {\n  const [expanded, setExpanded] = useState(false);\n  // A hand-over the person answered here is over for them at once: the panel goes back while\n  // the word that the agent holds the browser again is on its way.\n  const settling = browser.wait !== null && browser.wait === answered;\n  const yours = browser.control === \"person\" && !settling;\n  const panel = useRef<HTMLElement>(null);\n  const bar = useRef<HTMLElement>(null);\n  const canvas = useRef<HTMLCanvasElement>(null);\n  const look = useGlide(\n    browser.wait !== null && !settling\n      ? { shape: \"handed\", wait: browser.wait, reason: browser.reason }\n      : { shape: yours || expanded ? \"large\" : \"small\" },\n    panel,\n    bar,\n    canvas,\n  );\n  const large = look.shape !== \"small\";\n  const { host, rest } = siteOf(browser.url);\n  const where = browser.title || host || words.blank;\n  const looks: BrowserPart[] = [];\n  if (large) looks.push(\"sc-browser--large\");\n  if (yours) looks.push(\"sc-browser--yours\");\n  if (look.shape === \"handed\") looks.push(\"sc-browser--handed\");\n\n  return (\n    <section\n      ref={panel}\n      aria-label={words.screen(where)}\n      className={classes(classNames, \"sc-browser\", ...looks)}\n    >\n      <header ref={bar} className={classes(classNames, \"sc-browser__bar\")}>\n        <p className={classes(classNames, \"sc-browser__who\")}>\n          <i aria-hidden />\n          <span>\n            {yours\n              ? words.person\n              : browser.where === \"mine\"\n                ? words.agentMine(name)\n                : words.agent(name)}\n          </span>\n        </p>\n        <p title={browser.url} className={classes(classNames, \"sc-browser__address\")}>\n          {host ? (\n            <>\n              <LockSimpleIcon aria-hidden weight=\"bold\" />\n              <strong>{host}</strong>\n              <span>{rest}</span>\n            </>\n          ) : (\n            <span>{words.blank}</span>\n          )}\n        </p>\n        {!large && browser.title !== \"\" && (\n          <p className={classes(classNames, \"sc-browser__title\")}>{browser.title}</p>\n        )}\n        <div className={classes(classNames, \"sc-browser__controls\")}>\n          {look.shape !== \"handed\" &&\n            !settling &&\n            (yours ? (\n              <Button size=\"sm\" onClick={() => live.control(\"agent\")}>\n                {words.giveBack}\n              </Button>\n            ) : (\n              <Button size=\"sm\" onClick={() => live.control(\"person\")}>\n                {words.take}\n              </Button>\n            ))}\n          {!yours && (\n            <Button\n              size=\"sm\"\n              tone=\"ghost\"\n              icon={expanded ? ArrowsInSimpleIcon : ArrowsOutSimpleIcon}\n              aria-label={expanded ? words.shrink : words.expand}\n              title={expanded ? words.shrink : words.expand}\n              onClick={() => setExpanded((open) => !open)}\n            />\n          )}\n          <Button\n            size=\"sm\"\n            tone=\"ghost\"\n            icon={XIcon}\n            aria-label={words.close}\n            title={words.close}\n            onClick={() => live.closeBrowser()}\n          />\n        </div>\n      </header>\n      {look.shape === \"handed\" && (\n        <div className={classes(classNames, \"sc-browser__handover\")}>\n          <HandIcon aria-hidden weight=\"fill\" />\n          <p>\n            <strong>{words.handedOver(name)}</strong>\n            {look.reason && <span>{look.reason}</span>}\n          </p>\n          <Button tone=\"primary\" size=\"sm\" onClick={() => onDone(look.wait)}>\n            {words.done}\n          </Button>\n        </div>\n      )}\n      <Screen\n        live={live}\n        browser={browser}\n        canvas={canvas}\n        interactive={yours}\n        label={words.screen(where)}\n        classNames={classNames}\n        onOpen={large ? undefined : () => setExpanded(true)}\n      />\n    </section>\n  );\n}\n\n/** v2's expand: half a second, quick to leave and slow to land. */\nconst GLIDE: KeyframeAnimationOptions = {\n  duration: 500,\n  easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n};\n/** The words around the screen, laid out anew, come in once it is under way. */\nconst ARRIVE: KeyframeAnimationOptions = {\n  duration: 240,\n  delay: 140,\n  easing: \"ease-out\",\n  fill: \"backwards\",\n};\n\n/** How tall the panel stands, and where its screen is within it, as shown. */\ninterface Layout {\n  height: number;\n  x: number;\n  y: number;\n  width: number;\n  tall: number;\n}\n\nfunction layoutOf(panel: HTMLElement, screen: HTMLElement): Layout {\n  const outer = panel.getBoundingClientRect();\n  const inner = screen.getBoundingClientRect();\n  return {\n    height: outer.height,\n    x: inner.left - outer.left,\n    y: inner.top - outer.top,\n    width: inner.width,\n    tall: inner.height,\n  };\n}\n\n/** Whoever asked their system for less motion gets none. */\nfunction still(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n/**\n * The look the panel shows: `wanted`, one layout later when its shape changes, so the panel is\n * measured as it stands before it changes and glides from there to where it lands (its height,\n * so the conversation above gives way smoothly, and its screen's place and size, by a\n * transform) instead of jumping; its words come in over the move. A change midway starts from\n * wherever the glide had got to. The same shape shows what is wanted at once.\n */\nfunction useGlide(\n  wanted: Look,\n  panel: RefObject<HTMLElement | null>,\n  bar: RefObject<HTMLElement | null>,\n  canvas: RefObject<HTMLCanvasElement | null>,\n): Look {\n  const [shown, setShown] = useState(wanted);\n  const from = useRef<Layout | null>(null);\n  const moving = useRef<Animation[]>([]);\n  const changing = shown.shape !== wanted.shape;\n\n  useLayoutEffect(() => {\n    if (!changing) return;\n    const outer = panel.current;\n    const screen = canvas.current;\n    const glides = outer !== null && screen !== null && typeof outer.animate === \"function\";\n    from.current = glides && !still() ? layoutOf(outer, screen) : null;\n    for (const animation of moving.current) animation.cancel();\n    moving.current = [];\n    setShown(wanted);\n  });\n\n  useLayoutEffect(() => {\n    const first = from.current;\n    from.current = null;\n    const outer = panel.current;\n    const screen = canvas.current;\n    if (first === null || outer === null || screen === null) return;\n    const last = layoutOf(outer, screen);\n    if (last.width === 0 || last.tall === 0) return;\n    const shift = `translate(${first.x - last.x}px, ${first.y - last.y}px)`;\n    const scale = `scale(${first.width / last.width}, ${first.tall / last.tall})`;\n    moving.current = [\n      outer.animate([{ height: `${first.height}px` }, { height: `${last.height}px` }], GLIDE),\n      screen.animate([{ transform: `${shift} ${scale}` }, { transform: \"none\" }], GLIDE),\n    ];\n    if (bar.current) {\n      moving.current.push(bar.current.animate([{ opacity: 0 }, { opacity: 1 }], ARRIVE));\n    }\n  }, [shown.shape, panel, bar, canvas]);\n\n  return changing ? shown : wanted;\n}\n\n/**\n * The screen: the browser's pictures painted on a canvas as they come, the latest only. While\n * the person holds the browser it takes their pointer and keys (and the focus, so they can type\n * at once); otherwise it is only watched, and the small one opens large on a click. Until the\n * first picture lands, a quiet light sweeps where it will be.\n */\nfunction Screen({\n  live,\n  browser,\n  canvas,\n  interactive,\n  label,\n  classNames,\n  onOpen,\n}: {\n  live: LiveConversation;\n  browser: BrowserState;\n  canvas: RefObject<HTMLCanvasElement | null>;\n  interactive: boolean;\n  label: string;\n  classNames: Partial<Record<BrowserPart, string>> | undefined;\n  onOpen: (() => void) | undefined;\n}) {\n  const { watchScreen, input } = live;\n  const { width, height } = browser;\n  const [painted, setPainted] = useState(false);\n\n  useEffect(() => {\n    const element = canvas.current;\n    if (!element) return undefined;\n    let first = true;\n    const painter = painterOn(element, () => {\n      if (!first) return;\n      first = false;\n      setPainted(true);\n    });\n    const stop = watchScreen((frame) => {\n      painter.paint(frame.jpeg);\n    });\n    return () => {\n      stop();\n      painter.dispose();\n    };\n  }, [watchScreen, width, height, canvas]);\n\n  // `input` is new each render; the capture reads the latest without starting over.\n  const send = useRef(input);\n  useLayoutEffect(() => {\n    send.current = input;\n  });\n  useEffect(() => {\n    const element = canvas.current;\n    if (!element || !interactive) return undefined;\n    element.focus({ preventScroll: true });\n    return capture(element, { width, height }, (event) => send.current(event));\n  }, [interactive, width, height, canvas]);\n\n  const parts: BrowserPart[] = [\"sc-browser__screen\"];\n  if (!painted) parts.push(\"sc-browser__screen--waiting\");\n  return (\n    <div className={classes(classNames, ...parts)}>\n      <canvas\n        ref={canvas}\n        role=\"img\"\n        aria-label={label}\n        width={width}\n        height={height}\n        tabIndex={interactive ? 0 : undefined}\n        style={{ \"--_ratio\": String(width / height) } as CSSProperties}\n        onClick={onOpen}\n        className={classes(classNames, \"sc-browser__canvas\")}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/FileView.d.ts

@@ -0,0 +1,63 @@
+import { FilePreview } from "./types.js";
+import { KitPart } from "./kit/context.js";
+//#region src/FileView.d.ts
+/** The words a file's view says; a host gives its own, in its language. */
+export interface FileMessages {
+  /** The button that saves the file under its name. */
+  download: string;
+  /** In the preview's place, for a kind that can't be shown here. */
+  noPreview: string;
+  /** Under it: what to do instead. */
+  noPreviewHint: string;
+  /** Under a long file shown only in part. */
+  truncated: string;
+  /** In the bar, for a file whose name has no extension. */
+  file: string;
+  /** A file's size, as the host's people read it. */
+  size: (bytes: number) => string;
+  /** A PDF's pages, in the bar. */
+  pages: (count: number) => string;
+  /** The tabs of a spreadsheet's sheets, for screen readers. */
+  sheets: string;
+  /** Under a sheet shown in part: its first rows of how many. */
+  rows: (shown: number, total: number) => string;
+  /** In place of a sheet with nothing in it. */
+  emptySheet: string;
+  /** Over a slide: its number. */
+  slide: (number: number) => string;
+  /** Over a slide's speaker notes. */
+  notes: string;
+}
+export declare const FILE_MESSAGES: FileMessages;
+/** The parts, by the class each carries; `classNames` adds a host's own under the same keys. */
+export type FilePart = "sc-file" | "sc-file__bar" | "sc-file__meta" | "sc-file__body" | "sc-file__text" | "sc-file__plain" | "sc-file__code" | "sc-file__table" | "sc-file__sheet" | "sc-file__tabs" | "sc-file__tab" | "sc-file__document" | "sc-file__slides" | "sc-file__slide" | "sc-file__notes" | "sc-file__frame" | "sc-file__image" | "sc-file__media" | "sc-file__none" | "sc-file__note";
+type ClassNames = Partial<Record<FilePart | KitPart, string>> | undefined;
+export interface FileViewProps {
+  /** The file's bytes, as the API answers them (`Response.blob()`). */
+  blob: Blob;
+  /** Its name or path, with its extension: how it is read, and what it is saved as. */
+  name: string;
+  /**
+   * What the API made of it to draw (`client.files.preview`): a spreadsheet's sheets, a Word
+   * file as a document, a deck's slides, the words of a text, how a picture, a video or a sound
+   * is typed. Without it, what the browser can read of the bytes alone.
+   */
+  preview?: FilePreview | undefined;
+  messages?: Partial<FileMessages> | undefined;
+  classNames?: ClassNames;
+}
+/**
+ * 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.
+ */
+export declare function FileView(props: FileViewProps): import("react").JSX.Element;
+//#endregion
+export {};
+//# sourceMappingURL=FileView.d.ts.map