zidane-ui 9.1.13 → 9.1.14

package/dist/machines/ServerUpdatePanel.js

@@ -1,6 +1,6 @@
 import { BTN_SECONDARY } from "../components/button.js";
+import { Notice } from "../components/Notice.js";
 import { MetaChip } from "../components/Form.js";
-import { Restricted } from "../components/Restricted.js";
 import { machinesError } from "./headless/host.js";
 import { useMachinesConfirm, useMachinesHost, useMachinesLabels, usePermitted } from "./MachinesProvider.js";
 import { UPDATE_BUSY_STATES, updateStateLine } from "./headless/messages.js";
@@ -43,9 +43,9 @@ function UpdateBody({ host, updates, confirm, className = "", style }) {
 			setStatus(await action());
 			setError(null);
 		} catch (err) {
-			setError(labels.machinesError(machinesError("update", err)));
+			setError(machinesError("update", err));
 		}
-	}, [labels]);
+	}, []);
 	const readStatus = useCallback(() => run(() => updates.status(host.id)), [
 		run,
 		updates,
@@ -59,10 +59,12 @@ function UpdateBody({ host, updates, confirm, className = "", style }) {
 		const timer = setInterval(() => void readStatus(), POLL_MS);
 		return () => clearInterval(timer);
 	}, [status, readStatus]);
-	if (status === void 0) return error ? /* @__PURE__ */ jsx("p", {
-		className: `m-0 px-3 py-3 text-xs text-zg-danger ${className}`.trimEnd(),
+	if (status === void 0) return error ? /* @__PURE__ */ jsx(Notice, {
+		tone: "error",
+		detail: error.detail,
+		className: `m-3 ${className}`.trimEnd(),
 		style,
-		children: error
+		children: labels.machinesFailed(error.kind)
 	}) : null;
 	if (status === null) return /* @__PURE__ */ jsx("p", {
 		className: `m-0 px-3 py-3 text-xs text-[var(--zg-text-muted)] ${className}`.trimEnd(),
@@ -71,7 +73,6 @@ function UpdateBody({ host, updates, confirm, className = "", style }) {
 	});
 	const line = updateStateLine(status, labels);
 	const { check, install, configure } = updates;
-	const restricted = host.scope !== void 0 && host.scope !== "admin";
 	const installNow = async () => {
 		if (!install) return;
 		if (await ask({
@@ -98,43 +99,53 @@ function UpdateBody({ host, updates, confirm, className = "", style }) {
 						/* @__PURE__ */ jsx(MetaChip, { children: labels.machinesUpdateVersion(status.current) }),
 						status.updatedFrom && /* @__PURE__ */ jsx(MetaChip, { children: labels.machinesUpdateFrom(status.updatedFrom) })
 					]
-				}), status.supported && (manage || restricted) && /* @__PURE__ */ jsx(Restricted, {
-					restricted,
-					reason: labels.machinesAdminOnly,
-					inline: true,
-					children: /* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-2",
-						children: [
-							check && /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: BTN_SECONDARY,
-								disabled: UPDATE_BUSY_STATES.has(status.state),
-								onClick: () => void run(() => check(host.id)),
-								children: status.state === "checking" ? labels.machinesUpdateChecking : labels.machinesUpdateCheck
-							}),
-							(status.state === "ready" || status.state === "waiting") && install && /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: BTN_SECONDARY,
-								onClick: () => void installNow(),
-								children: labels.machinesUpdateInstall
-							}),
-							configure && /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: BTN_SECONDARY,
-								onClick: () => void run(() => configure(host.id, !status.enabled)),
-								children: status.enabled ? labels.machinesUpdateTurnOff : labels.machinesUpdateTurnOn
-							})
-						]
-					})
+				}), status.supported && manage && /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [
+						check && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: BTN_SECONDARY,
+							disabled: UPDATE_BUSY_STATES.has(status.state),
+							onClick: () => void run(() => check(host.id)),
+							children: status.state === "checking" ? labels.machinesUpdateChecking : labels.machinesUpdateCheck
+						}),
+						(status.state === "ready" || status.state === "waiting") && install && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: BTN_SECONDARY,
+							onClick: () => void installNow(),
+							children: labels.machinesUpdateInstall
+						}),
+						configure && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: BTN_SECONDARY,
+							onClick: () => void run(() => configure(host.id, !status.enabled)),
+							children: status.enabled ? labels.machinesUpdateTurnOff : labels.machinesUpdateTurnOn
+						})
+					]
 				})]
 			}),
-			/* @__PURE__ */ jsx("p", {
-				className: `m-0 text-xs ${line.tone === "danger" ? "text-zg-danger" : line.tone === "warn" ? "text-zg-warn" : line.tone === "success" ? "text-zg-success" : "text-[var(--zg-text-muted)]"}`,
+			status.state === "error" && status.error ? /* @__PURE__ */ jsx(Notice, {
+				tone: "error",
+				compact: true,
+				detail: status.error,
+				children: labels.machinesUpdateStateError
+			}) : line.tone === "danger" ? /* @__PURE__ */ jsx(Notice, {
+				tone: "error",
+				compact: true,
+				children: line.text
+			}) : line.tone === "warn" ? /* @__PURE__ */ jsx(Notice, {
+				tone: "warning",
+				compact: true,
+				children: line.text
+			}) : /* @__PURE__ */ jsx("p", {
+				className: `m-0 text-xs ${line.tone === "success" ? "text-zg-success" : "text-[var(--zg-text-muted)]"}`,
 				children: line.text
 			}),
-			error && /* @__PURE__ */ jsx("p", {
-				className: "m-0 text-xs text-zg-danger",
-				children: error
+			error && /* @__PURE__ */ jsx(Notice, {
+				tone: "error",
+				compact: true,
+				detail: error.detail,
+				children: labels.machinesFailed(error.kind)
 			})
 		]
 	});

package/dist/machines/ShareThisComputerForm.d.ts

@@ -0,0 +1,19 @@
+import { HostSummary } from "./headless/host.js";
+//#region src/machines/ShareThisComputerForm.d.ts
+/** Props for {@link ShareThisComputerForm}. */
+interface ShareThisComputerFormProps {
+  /** The server to share with. */
+  host: HostSummary;
+  /** Called once this computer is shared. */
+  onShared: () => void;
+  /** Called on Cancel. Absent: no Cancel button. */
+  onCancel?: () => void;
+}
+/**
+ * Renders the form that shares this computer with a server. Nothing without the host's `links.shareStart`.
+ *
+ * @param props - The server, and what to do once shared or cancelled.
+ */
+declare function ShareThisComputerForm({ host, onShared, onCancel }: ShareThisComputerFormProps): import("react").JSX.Element | null;
+//#endregion
+export { ShareThisComputerForm, ShareThisComputerFormProps };

package/dist/machines/ShareThisComputerForm.js

@@ -0,0 +1,133 @@
+import { BTN_PRIMARY, BTN_SECONDARY } from "../components/button.js";
+import { FIELD_LABEL_CLASS, INPUT_CLASS, OpLine } from "../components/Form.js";
+import { machinesError } from "./headless/host.js";
+import { useMachinesHost, useMachinesLabels } from "./MachinesProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/machines/ShareThisComputerForm.tsx
+/**
+* Shares this computer with a server as one of its machines (the host's
+* `links.shareStart`): a name (default: this computer's), the folders that
+* the server can use (the host's folder dialog), and a machine token when
+* the server does not make one. Add a machine's This computer tab shows it.
+*/
+/**
+* Renders the form that shares this computer with a server. Nothing without the host's `links.shareStart`.
+*
+* @param props - The server, and what to do once shared or cancelled.
+*/
+function ShareThisComputerForm({ host, onShared, onCancel }) {
+	const labels = useMachinesLabels();
+	const { links, pickFolder } = useMachinesHost();
+	const [name, setName] = useState("");
+	const [roots, setRoots] = useState([]);
+	const [token, setToken] = useState("");
+	const [needsToken, setNeedsToken] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(null);
+	const shareStart = links?.shareStart;
+	if (!shareStart) return null;
+	const addFolder = async () => {
+		const path = await pickFolder?.();
+		if (path) setRoots((current) => current.includes(path) ? current : [...current, path]);
+	};
+	const submit = async () => {
+		setBusy(true);
+		setError(null);
+		try {
+			const result = await shareStart(host.id, name.trim(), roots, token.trim() || void 0);
+			if (result.ok) {
+				links.refresh();
+				onShared();
+				return;
+			}
+			if (result.needsToken) setNeedsToken(true);
+			setError(result.message);
+		} catch (err) {
+			setError(labels.machinesError(machinesError("read", err)));
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "space-y-2",
+		"aria-label": labels.machinesShareForm,
+		onSubmit: (event) => {
+			event.preventDefault();
+			submit();
+		},
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				className: FIELD_LABEL_CLASS,
+				htmlFor: `machine-name-${host.id}`,
+				children: labels.machinesShareName(host.name)
+			}),
+			/* @__PURE__ */ jsx("input", {
+				id: `machine-name-${host.id}`,
+				className: INPUT_CLASS,
+				placeholder: labels.machinesShareNamePlaceholder,
+				value: name,
+				maxLength: 64,
+				onChange: (event) => setName(event.target.value)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: FIELD_LABEL_CLASS,
+				children: labels.machinesShareFolders
+			}),
+			roots.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "m-0 p-0 list-none space-y-1",
+				children: roots.map((root) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-2 text-xs",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate font-mono",
+						children: root
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_SECONDARY,
+						onClick: () => setRoots((current) => current.filter((r) => r !== root)),
+						children: labels.machinesRemove
+					})]
+				}, root))
+			}),
+			pickFolder && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: BTN_SECONDARY,
+				onClick: () => void addFolder(),
+				children: labels.machinesShareAddFolder
+			}),
+			needsToken && /* @__PURE__ */ jsx("input", {
+				"aria-label": labels.machinesShareToken,
+				type: "password",
+				autoComplete: "off",
+				className: "zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled",
+				placeholder: labels.machinesShareTokenPlaceholder,
+				value: token,
+				onChange: (event) => setToken(event.target.value)
+			}),
+			busy && /* @__PURE__ */ jsx(OpLine, {
+				kind: "busy",
+				children: labels.machinesSharing(host.name)
+			}),
+			error && !busy && /* @__PURE__ */ jsx(OpLine, {
+				kind: "error",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2",
+				children: [onCancel && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: BTN_SECONDARY,
+					onClick: onCancel,
+					children: labels.machinesCancel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					className: BTN_PRIMARY,
+					disabled: busy || roots.length === 0,
+					children: labels.machinesShareStart
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { ShareThisComputerForm };

package/dist/machines/SyncOutcomeBadge.js

@@ -1,7 +1,7 @@
 import { Tooltip } from "../components/Tooltip.js";
 import { MetaChip } from "../components/Form.js";
-import { syncOutcome } from "./headless/sync.js";
 import { useMachinesLabels } from "./MachinesProvider.js";
+import { syncOutcome } from "./headless/sync.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/machines/SyncOutcomeBadge.tsx
 const MAX_LINES = 12;

package/dist/machines/TokensPanel.d.ts

@@ -10,16 +10,18 @@ interface TokensPanelProps {
   confirm?: MachinesConfirm;
   /** The current time for the dates, epoch ms. Default: now. */
   now?: number;
+  /** Where the web app is, said next to a pairing code. Default: the server's URL as https. */
+  webAppUrl?: string;
   /** Extra classes on the root. */
   className?: string;
   /** Inline styles on the root. */
   style?: CSSProperties;
 }
 /**
- * Renders a server's tokens and the create form. Nothing without the host's `tokens`, or while the connection's
- * permissions are not known.
+ * Renders a server's tokens, the create form and Pair a browser. Nothing without the host's `tokens`, or when the
+ * server does not list them.
  *
- * @param props - The server, `confirm`, `className` and `style`.
+ * @param props - The server, `confirm`, `now`, `webAppUrl`, `className` and `style`.
  */
 declare function TokensPanel(props: TokensPanelProps): import("react").JSX.Element | null;
 //#endregion

package/dist/machines/TokensPanel.js

@@ -1,59 +1,44 @@
-import { BTN_DANGER, BTN_PRIMARY } from "../components/button.js";
+import { BTN_DANGER, BTN_PRIMARY, BTN_SECONDARY } from "../components/button.js";
 import { CopyButton } from "../components/CopyButton.js";
 import { ErrorNote, FIELD_LABEL_CLASS, INPUT_CLASS, MetaChip, OpLine } from "../components/Form.js";
-import { Restricted } from "../components/Restricted.js";
 import { machinesError } from "./headless/host.js";
 import { useMachinesConfirm, useMachinesHost, useMachinesLabels, usePermitted } from "./MachinesProvider.js";
 import { agoText } from "./headless/messages.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
+import { clockText } from "zidane/chat/pure";
 //#region src/machines/TokensPanel.tsx
 /**
-* A server's client tokens: each with its scope, when it was created and last
-* used, when it expires, and Revoke (asks first); a form that creates one and shows its secret
-* once. Needs the host's `tokens`; a token that may not manage them (below
-* admin) reads a note instead.
+* A server's tokens: each with its kind (client or machine), when it was
+* created and last used, when it expires, and Revoke (asks first). A form
+* creates a client token and shows its secret once. Pair a browser makes a
+* pairing code for the web app's sign-in screen. Needs the host's `tokens`.
 */
 /** Whether a token's `expiresAt` is past at `now` (default the current time). */
 function isExpired(expiresAt, now = Date.now()) {
 	return expiresAt <= now;
 }
-const SCOPES = ["chat", "admin"];
 /**
-* Renders a server's tokens and the create form. Nothing without the host's `tokens`, or while the connection's
-* permissions are not known.
+* Renders a server's tokens, the create form and Pair a browser. Nothing without the host's `tokens`, or when the
+* server does not list them.
 *
-* @param props - The server, `confirm`, `className` and `style`.
+* @param props - The server, `confirm`, `now`, `webAppUrl`, `className` and `style`.
 */
 function TokensPanel(props) {
-	const labels = useMachinesLabels();
 	const host = useMachinesHost();
 	const readable = usePermitted("tokens.list");
-	const permittedKnown = host.permitted === void 0 || host.permitted.get() !== null;
-	if (!host.tokens) return null;
-	if (!readable) return permittedKnown ? /* @__PURE__ */ jsx(Restricted, {
-		restricted: true,
-		reason: labels.machinesAdminOnly,
-		children: /* @__PURE__ */ jsx("div", {
-			className: `px-3 py-3 ${props.className ?? ""}`.trimEnd(),
-			style: props.style,
-			children: /* @__PURE__ */ jsx(TokenForm, {
-				fieldId: `tokens-${props.host.id}`,
-				name: "",
-				scope: "chat",
-				busy: false,
-				onName: () => {},
-				onScope: () => {},
-				onSubmit: () => {}
-			})
-		})
-	}) : null;
+	if (!host.tokens || !readable) return null;
 	return /* @__PURE__ */ jsx(TokensBody, {
 		...props,
 		tokens: host.tokens
 	});
 }
-function TokensBody({ host, tokens, confirm, now, className = "", style }) {
+/** The web app's address for a server's WebSocket URL: `wss://box` → `https://box`. */
+function webAppOf(url) {
+	if (!url) return void 0;
+	return url.replace(/^ws(s?):/i, "http$1:").replace(/\/+$/, "");
+}
+function TokensBody({ host, tokens, confirm, now, webAppUrl, className = "", style }) {
 	const labels = useMachinesLabels();
 	const providerConfirm = useMachinesConfirm();
 	const ask = confirm ?? providerConfirm;
@@ -62,9 +47,10 @@ function TokensBody({ host, tokens, confirm, now, className = "", style }) {
 	const [readError, setReadError] = useState(null);
 	const [error, setError] = useState(null);
 	const [name, setName] = useState("");
-	const [scope, setScope] = useState("chat");
 	const [busy, setBusy] = useState(false);
 	const [created, setCreated] = useState(null);
+	const [pairing, setPairing] = useState(null);
+	const [pairBusy, setPairBusy] = useState(false);
 	const fieldId = `tokens-${host.id}`;
 	const read = useCallback(async () => {
 		try {
@@ -86,13 +72,13 @@ function TokensBody({ host, tokens, confirm, now, className = "", style }) {
 		tokens,
 		host.id
 	]);
-	const { create, revoke } = tokens;
+	const { create, revoke, pair } = tokens;
 	const submit = async () => {
 		if (!create || !name.trim()) return;
 		setBusy(true);
 		setCreated(null);
 		try {
-			setCreated(await create(host.id, name.trim(), scope));
+			setCreated(await create(host.id, name.trim()));
 			setName("");
 			setError(null);
 		} catch (err) {
@@ -102,6 +88,20 @@ function TokensBody({ host, tokens, confirm, now, className = "", style }) {
 			read();
 		}
 	};
+	const pairBrowser = async () => {
+		if (!pair) return;
+		setPairBusy(true);
+		setPairing(null);
+		try {
+			setPairing(await pair(host.id));
+			setError(null);
+		} catch (err) {
+			setError(labels.machinesError(machinesError("tokens", err)));
+		} finally {
+			setPairBusy(false);
+			read();
+		}
+	};
 	const revokeOne = async (token) => {
 		if (!revoke) return;
 		if (!await ask({
@@ -139,10 +139,7 @@ function TokensBody({ host, tokens, confirm, now, className = "", style }) {
 								className: `font-medium ${token.revokedAt || expired ? "text-[var(--zg-text-muted)] line-through" : "text-[var(--zg-text)]"}`,
 								children: token.name
 							}),
-							/* @__PURE__ */ jsx(MetaChip, {
-								tone: token.scope === "admin" ? "warn" : "muted",
-								children: labels.machinesTokensScopes[token.scope]
-							}),
+							/* @__PURE__ */ jsx(MetaChip, { children: labels.machinesTokensScopes[token.scope] ?? token.scope }),
 							token.revokedAt && /* @__PURE__ */ jsx(MetaChip, {
 								tone: "danger",
 								children: labels.machinesTokensRevoked
@@ -152,7 +149,7 @@ function TokensBody({ host, tokens, confirm, now, className = "", style }) {
 								children: labels.machinesTokensExpired
 							}),
 							/* @__PURE__ */ jsxs("span", {
-								className: "flex-1 min-w-0 truncate text-[var(--zg-text-muted)]",
+								className: "flex-1 min-w-[12rem] truncate text-[var(--zg-text-muted)]",
 								children: [
 									token.lastUsedAt ? labels.machinesTokensUsed(agoText(token.lastUsedAt, now, labels)) : labels.machinesTokensNeverUsed,
 									" · ",
@@ -174,12 +171,52 @@ function TokensBody({ host, tokens, confirm, now, className = "", style }) {
 			create && manage && /* @__PURE__ */ jsx(TokenForm, {
 				fieldId,
 				name,
-				scope,
 				busy,
 				onName: setName,
-				onScope: setScope,
 				onSubmit: () => void submit()
 			}),
+			pair && manage && !pairing && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: BTN_SECONDARY,
+				disabled: pairBusy,
+				onClick: () => void pairBrowser(),
+				children: pairBusy ? labels.machinesPairCreating : labels.machinesPairOpen
+			}),
+			pairing && /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				role: "status",
+				"data-testid": `pairing-${host.id}`,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "block text-xs text-[var(--zg-text-muted)] mb-1",
+						children: labels.machinesPairCode
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "zg-well flex items-center gap-2 rounded-zg-md px-2.5 py-1.5",
+						children: [/* @__PURE__ */ jsx("code", {
+							className: "flex-1 min-w-0 font-mono text-sm tracking-[0.2em] text-[var(--zg-text)]",
+							children: pairing.code
+						}), /* @__PURE__ */ jsx(CopyButton, {
+							text: pairing.code,
+							label: labels.machinesPairCopy
+						})]
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "m-0 text-xs text-[var(--zg-text-muted)]",
+						children: [
+							labels.machinesPairHint(webAppUrl ?? webAppOf(host.url)),
+							" ",
+							labels.machinesPairExpires(clockText(pairing.expiresAt))
+						]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_SECONDARY,
+						onClick: () => setPairing(null),
+						children: labels.machinesPairDone
+					})
+				]
+			}),
 			created && /* @__PURE__ */ jsxs("div", {
 				className: "space-y-1",
 				role: "status",
@@ -201,8 +238,8 @@ function TokensBody({ host, tokens, confirm, now, className = "", style }) {
 		]
 	});
 }
-/** The create form: a name and a scope. */
-function TokenForm({ fieldId, name, scope, busy, onName, onScope, onSubmit }) {
+/** The create form: a name. */
+function TokenForm({ fieldId, name, busy, onName, onSubmit }) {
 	const labels = useMachinesLabels();
 	return /* @__PURE__ */ jsxs("form", {
 		className: "flex flex-wrap items-end gap-2",
@@ -210,43 +247,26 @@ function TokenForm({ fieldId, name, scope, busy, onName, onScope, onSubmit }) {
 			event.preventDefault();
 			onSubmit();
 		},
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex-1 min-w-40",
-				children: [/* @__PURE__ */ jsx("label", {
-					className: FIELD_LABEL_CLASS,
-					htmlFor: `${fieldId}-name`,
-					children: labels.machinesTokensName
-				}), /* @__PURE__ */ jsx("input", {
-					id: `${fieldId}-name`,
-					className: INPUT_CLASS,
-					placeholder: labels.machinesTokensNamePlaceholder,
-					value: name,
-					maxLength: 200,
-					onChange: (event) => onName(event.target.value)
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-40",
+			children: [/* @__PURE__ */ jsx("label", {
 				className: FIELD_LABEL_CLASS,
-				htmlFor: `${fieldId}-scope`,
-				children: labels.machinesTokensScope
-			}), /* @__PURE__ */ jsx("select", {
-				id: `${fieldId}-scope`,
+				htmlFor: `${fieldId}-name`,
+				children: labels.machinesTokensName
+			}), /* @__PURE__ */ jsx("input", {
+				id: `${fieldId}-name`,
 				className: INPUT_CLASS,
-				value: scope,
-				onChange: (event) => onScope(event.target.value),
-				children: SCOPES.map((option) => /* @__PURE__ */ jsx("option", {
-					value: option,
-					children: labels.machinesTokensScopes[option]
-				}, option))
-			})] }),
-			/* @__PURE__ */ jsx("button", {
-				type: "submit",
-				className: BTN_PRIMARY,
-				disabled: busy || !name.trim(),
-				children: busy ? labels.machinesTokensCreating : labels.machinesTokensCreate
-			})
-		]
+				placeholder: labels.machinesTokensNamePlaceholder,
+				value: name,
+				maxLength: 200,
+				onChange: (event) => onName(event.target.value)
+			})]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "submit",
+			className: BTN_PRIMARY,
+			disabled: busy || !name.trim(),
+			children: busy ? labels.machinesTokensCreating : labels.machinesTokensCreate
+		})]
 	});
 }
 //#endregion

package/dist/machines/headless/fixture-host.d.ts

@@ -1,7 +1,7 @@
 import { SessionPresence } from "./presence.js";
 import { HostSyncState } from "./sync.js";
-import { DaemonStatus, HostProviderAuth, HostSummary, MachinesAction, MachinesHost, ServerToken, ServerTokenScope } from "./host.js";
-import { DaemonHealth, HostCapabilities, MachineInfo, MachineLinksStatus, ServerUpdateStatus } from "zidane/chat/pure";
+import { DaemonStatus, HostProviderAuth, HostSummary, MachinesAction, MachinesHost, ServerToken } from "./host.js";
+import { DaemonHealth, HostCapabilities, MachineInfo, MachineJoinEvent, MachineLinksStatus, ServerUpdateStatus } from "zidane/chat/pure";
 //#region src/machines/headless/fixture-host.d.ts
 /** Options of {@link createFixtureMachinesHost}. */
 interface FixtureMachinesOptions {
@@ -70,7 +70,12 @@ interface FixtureMachinesOptions {
   /** Called when an update action reaches the fixture. */
   onUpdate?: (hostId: string, action: 'check' | 'install' | 'configure', enabled?: boolean) => void;
   /** Called when a token is created. */
-  onCreateToken?: (hostId: string, name: string, scope: ServerTokenScope) => void;
+  onCreateToken?: (hostId: string, name: string) => void;
+  /** Called when a browser pairing code is asked for. */
+  onPair?: (hostId: string, options: {
+    name?: string;
+    ttlMs?: number;
+  }) => void;
   /** Called when a token is revoked. */
   onRevokeToken?: (hostId: string, id: string) => void;
   /** Called when a link action reaches the fixture. */
@@ -91,6 +96,13 @@ interface FixtureMachinesOptions {
   signInUrl?: string;
   /** Called when a sign-in starts. */
   onSignIn?: (hostId: string, target: unknown) => void;
+  /** Called when New chat is pressed (the host's `newChat`). */
+  onNewChat?: (hostId: string, machine?: string) => void;
+  /**
+   * A machine that joins this long after each join code is made, ms (the docs' live demo of Add a machine).
+   * Default: none joins by itself (`control.joinMachine`).
+   */
+  joinAfterMs?: number;
 }
 /** Pushes the fixture can make, as a backend would. */
 interface FixtureMachinesControl {
@@ -98,6 +110,10 @@ interface FixtureMachinesControl {
   setHosts(hosts: readonly HostSummary[]): void;
   /** A machine came online or went offline: its server's list follows. */
   setMachineStatus(hostId: string, machineId: string, status: 'online' | 'offline'): void;
+  /** A new machine joined a server (it registered, online): its list follows. */
+  joinMachine(hostId: string, machine: MachineInfo): void;
+  /** What became of a join code, as the server says it (`machine:join`). */
+  pushJoin(hostId: string, event: MachineJoinEvent): void;
   /** Replaces the links (a links push). */
   setLinks(links: MachineLinksStatus): void;
   /** Sets the daemon's health. */