zidane-ui 9.1.6 → 9.1.9

package/dist/components/zidane-mark.js

@@ -0,0 +1,94 @@
+//#region src/components/zidane-mark.ts
+const AMPLITUDE = .45;
+const WAVE = 1.5;
+const TILT = 28 * Math.PI / 180;
+const COS = Math.cos(TILT);
+const SIN = Math.sin(TILT);
+/** The detail for a mark drawn `size` pixels wide: fewer, wider bands when small, so they stay apart. */
+function markDetail(size) {
+	if (size <= 12) return {
+		spacing: .56,
+		duty: .68,
+		steps: 32
+	};
+	if (size <= 24) return {
+		spacing: .46,
+		duty: .72,
+		steps: 48
+	};
+	return {
+		spacing: .36,
+		duty: .8,
+		steps: 96
+	};
+}
+function point(u, v) {
+	const rho = Math.hypot(u, v) || 1e-9;
+	const r = rho >= 1 ? 1 : Math.sin(rho * Math.PI / 2);
+	const x = u / rho * r;
+	const y = v / rho * r;
+	return `${(x * COS - y * SIN).toFixed(3)} ${(x * SIN + y * COS).toFixed(3)}`;
+}
+/**
+* The band paths at `phase` (0 to 1, one loop). Always the same number of
+* paths for a detail; a band out of view is an empty path.
+*/
+function markPaths(detail, phase) {
+	const { spacing, duty, steps } = detail;
+	const k = Math.ceil(1.95 / spacing);
+	const p = (phase % 1 + 1) % 1 * spacing;
+	const paths = [];
+	for (let n = -k; n <= k; n++) {
+		const c = p + n * spacing;
+		const a = [];
+		const b = [];
+		let visible = false;
+		for (let i = 0; i <= steps; i++) {
+			const v = -1 + 2 * i / steps;
+			const u = c + AMPLITUDE * Math.sin(WAVE * Math.PI * v);
+			const w = u + spacing * duty;
+			if (Math.hypot(u, v) < 1 || Math.hypot(w, v) < 1 || u < 0 && w > 0 && Math.abs(v) < 1) visible = true;
+			a.push(point(u, v));
+			b.push(point(w, v));
+		}
+		paths.push(visible ? `M${a.join("L")}L${b.reverse().join("L")}Z` : "");
+	}
+	return paths;
+}
+/** How deep the bell goes: 1 stops the bands at each lull, 0 is a steady flow. Shallow: a surge, never a stall. */
+const BELL = .35;
+/** Bands one swell carries: a slow surge, not a throb per band. */
+const MARK_SWELL = 3;
+/**
+* Where a swell's time (0 to 1) puts the bands, in loops (0 to
+* {@link MARK_SWELL}): they gather speed, peak mid-swell and settle, a
+* raised-cosine bell of speed. Its mean is one loop per loop of time, so
+* `speed` still counts loops per second, and a swell ends on a whole loop.
+*/
+function markEase(t) {
+	return 3 * (t - BELL * Math.sin(2 * Math.PI * t) / (2 * Math.PI));
+}
+/**
+* Frames kept per loop. At the fastest pace (streaming, mid-swell) a loop
+* takes about a third of a second, so 96 frames is still more than a display shows:
+* snapping to them is invisible, and every mark of a detail shares them.
+*/
+const MARK_FRAMES = 96;
+const frames = /* @__PURE__ */ new Map();
+/** The frame index (0 to {@link MARK_FRAMES} - 1) a phase snaps to. */
+function markFrameIndex(phase) {
+	return Math.round((phase % 1 + 1) % 1 * 96) % 96;
+}
+/** The band paths of frame `index` for a detail, computed once and kept. */
+function markFrame(detail, index) {
+	const key = `${detail.spacing}|${detail.duty}|${detail.steps}`;
+	let cache = frames.get(key);
+	if (!cache) frames.set(key, cache = []);
+	return cache[index] ??= markPaths(detail, index / 96);
+}
+/** The still mark (phase 0) for a detail, computed once and kept. */
+function markStill(detail) {
+	return markFrame(detail, 0);
+}
+//#endregion
+export { MARK_FRAMES, MARK_SWELL, markDetail, markEase, markFrame, markFrameIndex, markPaths, markStill };

package/dist/core.css

@@ -222,6 +222,9 @@
 .gap-6{gap:1.5rem;}
 .space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}
 .space-y-5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.25rem * var(--un-space-y-reverse));}
+.divide-y>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(1px * var(--un-divide-y-reverse));}
+.border-zg-border,
+.divide-\[var\(--zg-border\)\]>:not([hidden])~:not([hidden]){border-color:var(--zg-border);}
 .overflow-auto{overflow:auto;}
 .overflow-hidden{overflow:hidden;}
 .overflow-x-auto{overflow-x:auto;}
@@ -240,7 +243,6 @@
 .border-r{border-right-width:1px;}
 .border-\[var\(--zg-hairline\)\]{border-color:var(--zg-hairline);}
 .border-transparent{border-color:transparent;}
-.border-zg-border{border-color:var(--zg-border);}
 .\!rounded-full{border-radius:9999px !important;}
 .rounded{border-radius:0.25rem;}
 .rounded-\[1px\]{border-radius:1px;}
@@ -350,6 +352,8 @@
 .text-\[var\(--zg-accent\)\]{color:var(--zg-accent);}
 .text-\[var\(--zg-bg\)\]{color:var(--zg-bg);}
 .text-\[var\(--zg-code-fg\)\]{color:var(--zg-code-fg);}
+.text-\[var\(--zg-danger\)\],
+.text-zg-danger{color:var(--zg-danger);}
 .text-\[var\(--zg-text-muted\)\],
 .text-zg-muted{color:var(--zg-text-muted);}
 .text-\[var\(--zg-text-subtle\)\]{color:var(--zg-text-subtle);}
@@ -357,7 +361,6 @@
 .text-\[var\(--zg-warn\)\],
 .text-zg-warn{color:var(--zg-warn);}
 .text-zg-accent-fill-fg{color:var(--zg-accent-fill-fg);}
-.text-zg-danger{color:var(--zg-danger);}
 .text-zg-info{color:var(--zg-info);}
 .text-zg-success{color:var(--zg-success);}
 .hover\:\!text-zg-danger:hover{color:var(--zg-danger) !important;}
@@ -378,7 +381,6 @@
 .tracking-\[0\.12em\]{letter-spacing:0.12em;}
 .font-mono{font-family:var(--zg-font-mono);}
 .font-sans{font-family:var(--zg-font-ui);}
-.uppercase{text-transform:uppercase;}
 .italic{font-style:italic;}
 .tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}
 .underline{text-decoration-line:underline;}
@@ -474,6 +476,7 @@
   --zg-ring: #26a9f1;
 
   --zg-text-raw: #e5e8ec;
+  --zg-text-strong-raw: #ffffff;
   --zg-text-muted-raw: #9499a0;
   --zg-text-subtle-raw: #5f636a;
 
@@ -740,6 +743,11 @@ html[data-motion='off'] {
     color-mix(in oklab, var(--zg-text-raw) var(--zg-contrast-base), var(--zg-bg)),
     var(--zg-contrast-target) var(--zg-contrast-boost)
   );
+  --zg-text-strong: color-mix(
+    in oklab,
+    color-mix(in oklab, var(--zg-text-strong-raw, var(--zg-text-raw)) var(--zg-contrast-base), var(--zg-bg)),
+    var(--zg-contrast-target) var(--zg-contrast-boost)
+  );
   --zg-text-muted: color-mix(
     in oklab,
     color-mix(in oklab, var(--zg-text-muted-raw) var(--zg-contrast-base), var(--zg-bg)),
@@ -881,6 +889,16 @@ html[data-motion='off'] {
   scale: 0.985;
 }
 
+/* Restricted (`Restricted.tsx`): what a connection may read but not change,
+   dimmed by tone and opacity together; its tooltip says why. */
+.zg-restricted {
+  cursor: not-allowed;
+}
+.zg-restricted > [inert] {
+  opacity: 0.55;
+  filter: saturate(0.6);
+}
+
 /* Tooltip (`Tooltip.tsx`): visibility, the fade + 2px rise and the show
    delay are driven inline by the component (one timing model for inline and
    portalled bubbles). This is the hidden state before it renders. */
@@ -1111,12 +1129,10 @@ html[data-motion='off'] {
   background: var(--zg-row-hover);
 }
 
-/* The one uppercase section label. */
+/* The section label: sentence case, as written. */
 .zg-section-label {
   font-size: var(--zg-font-size-badge);
   font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
   /* A real label, read like any text: the muted tone (subtle is for decoration). */
   color: var(--zg-text-muted);
 }
@@ -1520,6 +1536,16 @@ html[data-motion='reduced'] .zg-shimmer {
   white-space: nowrap;
 }
 
+/* SmoothHeight: eases between two contents' heights while `data-easing`, then lets go. */
+.zg-smooth-height[data-easing] {
+  overflow: hidden;
+  transition: height var(--zg-motion-settle);
+}
+/* The content's own margins stay inside what is measured. */
+.zg-smooth-height-inner {
+  display: flow-root;
+}
+
 /* HeldWidth: a trailing slot held to its widest content; content sits on
    the right edge and is revealed from the left as the slot grows. */
 .zg-held-width {
@@ -1942,6 +1968,33 @@ html[data-motion='reduced'] :is(.animate-spin, .zg-spin-ring, .zg-sendstop-ring)
    `running`, Timeline `tool-running`). Applied to an absolutely positioned
    ring sibling, never to the dot itself. */
 
+/* The zidane mark spinning in and out (`ZidaneMark`): a quarter turn the way
+   its bands flow, from `--zg-mark-from` of its size (the dot it grows out
+   of in `StatusDot`). `.zg-mark-in` plays on mount; `.zg-mark-swap` on a
+   `Presence` plays both ways. Turn and scale ride `snap` in and `exit`
+   out, opacity `fade` / `fade-out`. */
+.zg-mark-in,
+.zg-presence.zg-mark-swap[data-state='enter'] {
+  animation:
+    zg-mark-in var(--zg-motion-snap) both,
+    zg-fade-in var(--zg-motion-fade) both;
+}
+.zg-presence.zg-mark-swap[data-state='exit'] {
+  animation:
+    zg-mark-out var(--zg-motion-exit) both,
+    zg-fade-out var(--zg-motion-fade-out) both;
+}
+@keyframes zg-mark-in {
+  from {
+    transform: scale(var(--zg-mark-from, 0.6)) rotate(-90deg);
+  }
+}
+@keyframes zg-mark-out {
+  to {
+    transform: scale(var(--zg-mark-from, 0.6)) rotate(45deg);
+  }
+}
+
 @keyframes zg-orbit {
   to {
     transform: rotate(360deg);

package/dist/dist/{index-DqCio7Nd.d.ts → index-Bq87OcGy.d.ts}

@@ -6,7 +6,7 @@ import "../node_modules/.bun/@earendil-works_pi-ai@1.3.0_bff1df87cb190f90/node_m
 import "../node_modules/.bun/@anthropic-ai_sdk@0.104.2_fff7ddf946fac095/node_modules/@anthropic-ai/sdk/index.js";
 import "../node_modules/.bun/@anthropic-ai_sdk@0.104.2_fff7ddf946fac095/node_modules/@anthropic-ai/sdk/resources2.js";
 import { ReactNode } from "react";
-//#region ../dist/index-DqCio7Nd.d.ts
+//#region ../dist/index-Bq87OcGy.d.ts
 //#endregion
 //#region src/thinking-levels.d.ts
 /**
@@ -112,16 +112,18 @@ interface OutputLine {
 }
 //#endregion
 //#region src/chat/script-progress.d.ts
-/** How the latest call of a script line stands. */
-type ScriptCallStatus = 'running' | 'ok' | 'error';
+/** How the latest call of a script line stands: `waiting` is a `sleep(ms)` in progress. */
+type ScriptCallStatus = 'running' | 'waiting' | 'ok' | 'error';
 /** A script line that made calls. */
 interface ScriptLineProgress {
   /** 1-based line in the script as the model wrote it. */
   line: number;
   /** State of the latest call made from this line. */
   status: ScriptCallStatus;
-  /** Calls made from this line so far. */
+  /** Calls made from this line so far, its `sleep`s included. */
   calls: number;
+  /** While it waits (`waiting`): when the wait ends, epoch milliseconds. */
+  until?: number;
 }
 /** One line of what a script printed or its shell calls wrote. */
 type ScriptOutputLine = OutputLine;
@@ -139,6 +141,8 @@ interface ScriptProgress {
   output: ScriptOutputLine[];
   /** How the script ended, once it did: its last line shows done when it ended without error. */
   ended?: 'ok' | 'error';
+  /** The line of the latest call or wait to start: where the script is (in a loop, which round's lines are behind it). */
+  at?: number;
 }
 //#endregion
 //#region src/chat/secrets/protocol.d.ts
@@ -175,7 +179,7 @@ type QueryBound = number | string;
  * session without an environment. `projectName` is computed: the folder name
  * (last path segment) of `projectRoot`, or of `cwd` without one.
  */
-type SessionFieldName = 'id' | 'title' | 'projectRoot' | 'projectName' | 'cwd' | 'agentId' | 'status' | 'createdAt' | 'updatedAt' | 'runStartedAt' | 'archived' | 'favorite' | 'isMain' | 'spaceId' | 'scheduleId' | 'providerKey' | 'modelId' | 'account' | 'effort' | 'hostId' | 'repoKey' | 'environment.kind' | 'environment.state' | 'environment.branch';
+type SessionFieldName = 'id' | 'title' | 'projectRoot' | 'projectName' | 'cwd' | 'agentId' | 'status' | 'createdAt' | 'updatedAt' | 'runStartedAt' | 'archived' | 'favorite' | 'isMain' | 'spaceId' | 'scheduleId' | 'providerKey' | 'modelId' | 'account' | 'effort' | 'hostId' | 'repoKey' | 'environment.kind' | 'environment.state' | 'environment.branch' | 'wakes';
 /**
  * A facet an extension computes for each session: `facet.<extensionId>.<key>`,
  * optionally followed by `.<property>` steps into an object value (a number
@@ -331,6 +335,8 @@ type ToolCallDisplay = 'hidden' | 'formatted' | 'full';
 type InteractionMode = 'ask' | 'skip' | 'disabled';
 /** Who approves tool calls: `ask` the user, `decide` the decision model (unsure calls still ask), `off` nobody (full access). */
 type ApprovalMode = 'ask' | 'decide' | 'off';
+/** What happens to a message sent while a run works: it goes into the run (`steer`), or waits for the run to end (`queue`). */
+type MessageDelivery = 'steer' | 'queue';
 /** Network policy for sandboxed shell commands — see {@link Settings.sandboxNetwork}. */
 type SandboxNetwork = 'allow' | 'deny';
 /**
@@ -584,13 +590,14 @@ interface Settings {
    */
   maxParallelSubagents: number;
   /**
-   * Hold prompts submitted while a run is in flight in the queue and send
-   * them in order at run end. Off steers them into the live run instead
-   * (`agent.steer()`, delivered at the next tool boundary). Attachments and
-   * extension `/` commands still queue, and so does a steer the run refuses.
-   * Default: on.
+   * What happens to a message that you send while a run works.
+   * `'queue'`: it waits in the queue and is sent when the run ends.
+   * `'steer'`: it goes into the run (`agent.steer()`), and the model reads
+   * it after the current step. A `/` command always waits in the queue, and
+   * so does a message that the run refuses. A client can ask for the other
+   * delivery for one message (Alt+Enter). Default: `'queue'`.
    */
-  queueMessages: boolean;
+  messageDelivery: MessageDelivery;
   /**
    * Active theme id — looked up in `BUILTIN_THEMES` to resolve the palette,
    * select styling, syntax highlight tokens, etc. Default: `'default'`.
@@ -1482,4 +1489,4 @@ interface Settings {
   activeIcon: string;
 }
 //#endregion
-export { ScriptCallStatus as Bw, Space as Cf, SessionSort as Eb, ThinkingLevel as FR, ScriptProgress as Gw, DurabilityMode as LD, EditDiffDisplay as Qd, ScriptLineProgress as Vw, SecretTtl as WC, EnvironmentSettings as WE, ScriptOutputLine as Ww, ApprovalMode as Zd, TranscriptDensity as _f, OutputStream as aT, SessionQueryAny as bb, AnsiColor as cT, FacetPath as cb, AnsiStyle as dT, SessionCondition as db, SessionFieldName as fb, SessionGroupOrder as gb, ToolCallDisplay as gf, SessionGroupBy as hb, OutputLine as iT, EnvironmentConfigValue as lD, QueryBound as lb, OpenInTarget as of, SessionFieldPath as pb, Settings as pf, InteractionMode as rf, AnsiSpan as uT, QueryValue as ub, SessionQuery as vb, SessionQueryNot as wb, SpaceIcon as wf, SessionQueryAll as yb };
+export { EditDiffDisplay as $d, SessionQueryNot as Eb, SpaceIcon as Ef, ScriptCallStatus as Hw, ScriptOutputLine as Jw, SecretTtl as KC, SessionSort as Ob, ApprovalMode as Qd, SessionQueryAny as Sb, Space as Tf, DurabilityMode as UD, ScriptLineProgress as Uw, ThinkingLevel as WR, EnvironmentSettings as XE, ScriptProgress as Yw, AnsiStyle as _T, SessionGroupBy as _b, MessageDelivery as af, SessionQuery as bb, OpenInTarget as cf, OutputStream as dT, QueryBound as db, QueryValue as fb, AnsiSpan as gT, EnvironmentConfigValue as hD, SessionFieldPath as hb, Settings as hf, InteractionMode as if, AnsiColor as mT, SessionFieldName as mb, SessionCondition as pb, OutputLine as uT, FacetPath as ub, SessionGroupOrder as vb, ToolCallDisplay as vf, SessionQueryAll as xb, TranscriptDensity as yf };

package/dist/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { d as AuthFailureKind, u as AuthFailure } from "./timeout-B5pO5I5a.js";
 import "./types-2HrgolQz.js";
 import "./oauth-callback-page-DMxIgurj.js";
-import { Eb as SessionSort, FR as ThinkingLevel, bb as SessionQueryAny, cb as FacetPath, db as SessionCondition, fb as SessionFieldName, gb as SessionGroupOrder, hb as SessionGroupBy, lb as QueryBound, pb as SessionFieldPath, ub as QueryValue, vb as SessionQuery, wb as SessionQueryNot, yb as SessionQueryAll } from "./index-DqCio7Nd.js";
+import { Eb as SessionQueryNot, Ob as SessionSort, Sb as SessionQueryAny, WR as ThinkingLevel, _b as SessionGroupBy, bb as SessionQuery, db as QueryBound, fb as QueryValue, hb as SessionFieldPath, mb as SessionFieldName, pb as SessionCondition, ub as FacetPath, vb as SessionGroupOrder, xb as SessionQueryAll } from "./index-Bq87OcGy.js";
 import "./index-f-XWIoYo.js";
 import "./sandbox-B4OW6oNx.js";

package/dist/extensions/ExtensionSettingsSection.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from "react";
+//#region src/extensions/ExtensionSettingsSection.d.ts
+/** Props for {@link ExtensionSettingsSection}. */
+interface ExtensionSettingsSectionProps {
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Renders the extensions' locked settings, catalog changes and integrations for the folder in view, over
+ * the nearest extensions host (`settings`, `integrations`; one left out shows nothing of its part).
+ *
+ * @param props - `className` and `style`.
+ */
+declare function ExtensionSettingsSection({ className, style }: ExtensionSettingsSectionProps): import("react").JSX.Element | null;
+//#endregion
+export { ExtensionSettingsSection, ExtensionSettingsSectionProps };

package/dist/extensions/ExtensionSettingsSection.js

@@ -0,0 +1,227 @@
+import { useReadable } from "../chat/headless/store.js";
+import { extensionsErrorOf } from "./headless/host.js";
+import { useExtensionsLabels } from "./useExtensionsLabels.js";
+import { useExtensionsHost } from "./ExtensionsProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/extensions/ExtensionSettingsSection.tsx
+/**
+* Settings › Extensions, the extension host part. The settings rows
+* themselves show above it, in the options section (the runtime projects them
+* onto the config schema, and writes land in the same `extensionConfig` bag
+* the extension settings port reads); this part adds what that section lacks:
+* the values a declarative config entry locks, the catalog items extensions
+* added, changed or hid, and each integration's connected accounts
+* (Disconnect, Make default) and the ways to add one. The extensions' own
+* settings pages and the `settings.section` slot follow, drawn by the
+* Extensions page (`ExtensionsSection`, `ExtensionSettingsPages`).
+* Everything goes through the nearest extensions host; nothing shows without
+* one, or when it has nothing to show.
+*/
+const EMPTY_SETTINGS = {
+	schema: {
+		categories: [],
+		items: []
+	},
+	actions: [],
+	values: {},
+	locked: []
+};
+const NO_INTEGRATIONS = [];
+const noop = {
+	get: () => EMPTY_SETTINGS,
+	subscribe: () => () => {}
+};
+const noIntegrations = {
+	get: () => NO_INTEGRATIONS,
+	subscribe: () => () => {}
+};
+/** One integration: its connected accounts, the default first, and the ways to add one. */
+function IntegrationRow({ integration }) {
+	const host = useExtensionsHost();
+	const l = useExtensionsLabels();
+	const [keys, setKeys] = useState({});
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(null);
+	const run = (work) => {
+		setBusy(true);
+		setError(null);
+		Promise.resolve(work()).catch((err) => setError(l.extensionIntegrationError(extensionsErrorOf(err)))).finally(() => setBusy(false));
+	};
+	const connections = integration.connections ?? (integration.connection ? [integration.connection] : []);
+	const connected = connections.length > 0;
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-col gap-1.5 py-2",
+		"data-integration": integration.id,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-zg-ui font-medium",
+					children: integration.name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-zg-label text-[var(--zg-text-muted)]",
+					children: !connected ? l.extensionIntegrationNotConnected : connections.length === 1 ? l.extensionIntegrationConnected : l.extensionIntegrationAccountCount(connections.length)
+				})]
+			}),
+			integration.description && /* @__PURE__ */ jsx("p", {
+				className: "text-zg-label text-[var(--zg-text-muted)]",
+				children: integration.description
+			}),
+			connected && /* @__PURE__ */ jsx("ul", {
+				"aria-label": l.extensionIntegrationAccounts(integration.name),
+				className: "flex flex-col gap-1",
+				children: connections.map((c) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-2 text-zg-label",
+					"data-connection": c.account,
+					children: [
+						/* @__PURE__ */ jsx("span", { children: c.label ?? c.account }),
+						c.isDefault ? /* @__PURE__ */ jsx("span", {
+							className: "zg-meta",
+							children: l.extensionIntegrationDefault
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "text-zg-label underline",
+							disabled: busy,
+							"aria-label": l.extensionIntegrationMakeDefaultLabel(c.label ?? c.account),
+							onClick: () => run(() => host?.integrations?.setDefault(integration.id, c.account)),
+							children: l.extensionIntegrationMakeDefault
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "ml-auto text-zg-label underline",
+							disabled: busy,
+							"aria-label": l.extensionIntegrationDisconnectLabel(c.label ?? c.account),
+							onClick: () => run(() => host?.integrations?.disconnect(integration.id, { account: c.account })),
+							children: l.extensionIntegrationDisconnect
+						})
+					]
+				}, c.account))
+			}),
+			integration.methods.map((method) => method.type === "apiKey" ? /* @__PURE__ */ jsxs("form", {
+				className: "flex items-center gap-2",
+				onSubmit: (e) => {
+					e.preventDefault();
+					run(() => host?.integrations?.connect(integration.id, {
+						methodId: method.id,
+						key: keys[method.id] ?? ""
+					}).then(() => setKeys((k) => ({
+						...k,
+						[method.id]: ""
+					}))));
+				},
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "password",
+					"aria-label": method.label,
+					placeholder: method.placeholder ?? method.label,
+					value: keys[method.id] ?? "",
+					onChange: (e) => setKeys((k) => ({
+						...k,
+						[method.id]: e.target.value
+					})),
+					className: "zg-well flex-1 min-w-0 rounded px-2 py-1 text-zg-label"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: busy || !keys[method.id],
+					className: "text-zg-label underline",
+					children: connected ? l.extensionIntegrationAddAccount : l.extensionIntegrationConnect
+				})]
+			}, method.id) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: busy,
+				className: "self-start text-zg-label underline",
+				onClick: () => run(() => host?.integrations?.connect(integration.id, { methodId: method.id })),
+				children: connected ? l.extensionIntegrationAddAccountWith(method.label) : method.label
+			}, method.id)),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-zg-label text-[var(--zg-danger)]",
+				children: error
+			})
+		]
+	});
+}
+/**
+* Renders the extensions' locked settings, catalog changes and integrations for the folder in view, over
+* the nearest extensions host (`settings`, `integrations`; one left out shows nothing of its part).
+*
+* @param props - `className` and `style`.
+*/
+function ExtensionSettingsSection({ className, style }) {
+	const host = useExtensionsHost();
+	const l = useExtensionsLabels();
+	const wire = useReadable(host?.settings?.wire ?? noop);
+	const integrations = useReadable(host?.integrations?.list ?? noIntegrations);
+	if (!host) return null;
+	const locked = wire.locked;
+	const changes = wire.provenance ?? [];
+	if (locked.length === 0 && changes.length === 0 && integrations.length === 0) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": l.extensionSettingsSection,
+		className: ["flex flex-col gap-4", className].filter(Boolean).join(" "),
+		style,
+		children: [
+			locked.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-zg-label text-[var(--zg-text-muted)]",
+				children: l.extensionSettingsLockedHeading
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "text-zg-label",
+				children: locked.map((id) => {
+					const [extension = "", key = ""] = id.split(":");
+					const value = wire.values[extension]?.[key];
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex gap-2 py-0.5",
+						"data-locked-setting": id,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "font-mono",
+								children: id
+							}),
+							value !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: "text-[var(--zg-text-muted)]",
+								children: String(value)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "ml-auto text-[var(--zg-text-muted)]",
+								children: l.extensionSettingsLockedTag
+							})
+						]
+					}, id);
+				})
+			})] }),
+			changes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-zg-label text-[var(--zg-text-muted)]",
+				children: l.extensionSettingsChangesHeading
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "text-zg-label",
+				children: changes.map((p) => /* @__PURE__ */ jsxs("li", {
+					className: "flex gap-2 py-0.5",
+					"data-catalog-change": `${p.kind}:${p.id}`,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-[var(--zg-text-muted)]",
+							children: l.extensionCatalogKind(p.kind)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono",
+							children: p.id
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "ml-auto text-[var(--zg-text-muted)]",
+							children: l.extensionProvenance(p)
+						})
+					]
+				}, `${p.kind}:${p.id}`))
+			})] }),
+			integrations.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-zg-label text-[var(--zg-text-muted)]",
+				children: l.extensionSettingsIntegrationsHeading
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "divide-y divide-[var(--zg-border)]",
+				children: integrations.map((integration) => /* @__PURE__ */ jsx(IntegrationRow, { integration }, integration.id))
+			})] })
+		]
+	});
+}
+//#endregion
+export { ExtensionSettingsSection };

package/dist/extensions/headless/host.d.ts

@@ -381,7 +381,7 @@ interface ExtensionLinkRequest {
  * The least client token scope that may run something (`chat` ⊂ `approve` ⊂ `admin`): zidane's
  * `AccessScope`, the scope of an action setting.
  */
-type ExtensionAccessScope = 'chat' | 'approve' | 'admin';
+type ExtensionAccessScope = 'chat' | 'admin';
 /** Options of {@link ExtensionsHost.rpc}. */
 interface ExtensionRpcOptions {
   /** The extension whose UI calls: its own contracts count as local (internal methods allowed). */

package/dist/extensions/headless/labels.d.ts

@@ -1,4 +1,4 @@
-import { ExtensionsError } from "./host.js";
+import { ExtensionProvenanceWire, ExtensionsError } from "./host.js";
 //#region src/extensions/headless/labels.d.ts
 /** The default English strings of the extensions components. */
 declare const DEFAULT_EXTENSIONS_LABELS: {
@@ -30,6 +30,46 @@ declare const DEFAULT_EXTENSIONS_LABELS: {
   extensionSettingRunning: string;
   /** A settings page or form with no rows. */
   extensionSettingsNone: string;
+  /** Settings › Extensions' extension host part (`ExtensionSettingsSection`), for assistive tech. */
+  extensionSettingsSection: string;
+  /** Its heading over the values a declarative config entry locks. */
+  extensionSettingsLockedHeading: string;
+  /** A locked value's tag. */
+  extensionSettingsLockedTag: string;
+  /** Its heading over the catalog items extensions added, changed or hid. */
+  extensionSettingsChangesHeading: string;
+  /** Its heading over the integrations. */
+  extensionSettingsIntegrationsHeading: string;
+  /** A changed catalog item's kind. */
+  extensionCatalogKind: (kind: ExtensionProvenanceWire["kind"]) => string;
+  /** Who added, changed or hid a catalog item (the TUI's wording). */
+  extensionProvenance: (p: ExtensionProvenanceWire) => string;
+  /** An integration with no account connected. */
+  extensionIntegrationNotConnected: string;
+  /** An integration with one account connected. */
+  extensionIntegrationConnected: string;
+  /** An integration with several accounts connected. */
+  extensionIntegrationAccountCount: (count: number) => string;
+  /** The list of an integration's accounts. */
+  extensionIntegrationAccounts: (integration: string) => string;
+  /** The default account's tag. */
+  extensionIntegrationDefault: string;
+  /** Makes an account the default. */
+  extensionIntegrationMakeDefault: string;
+  /** Makes an account the default, for assistive tech. */
+  extensionIntegrationMakeDefaultLabel: (account: string) => string;
+  /** Removes an account. */
+  extensionIntegrationDisconnect: string;
+  /** Removes an account, for assistive tech. */
+  extensionIntegrationDisconnectLabel: (account: string) => string;
+  /** Connects the first account (an API key method's submit). */
+  extensionIntegrationConnect: string;
+  /** Connects another account with an API key. */
+  extensionIntegrationAddAccount: string;
+  /** Connects another account through a method. */
+  extensionIntegrationAddAccountWith: (method: string) => string;
+  /** Words a failed integration action. */
+  extensionIntegrationError: (error: ExtensionsError) => string;
   /** A screen whose id no extension offers (any more). */
   extensionScreenMissing: string;
   /** Closes a screen. */