ankka-console 0.10.0 → 0.11.0

package/dist/testing/index.d.ts

@@ -1,5 +1,5 @@
 export { fakeControlPlane } from "./fake-control-plane.ts";
-export type { FakeClaims, FakeControlPlane, FakeControlPlaneOptions, FakeSeed } from "./fake-control-plane.ts";
+export type { FakeClaims, FakeControlPlane, FakeControlPlaneOptions, FakeSeed, FakeTopology } from "./fake-control-plane.ts";
 export { fakeIssuer, fakeUsers } from "./fake-issuer.ts";
 export type { FakeIssuer, FakeIssuerOptions, FakeUser } from "./fake-issuer.ts";
 export { scenarios } from "./scenarios.ts";

package/dist/testing/scenarios.js

@@ -27,8 +27,14 @@ export const scenarios = {
     "US3-4a": "a service page and a listing follow the control plane's changes live",
     "US3-5": "an exposed service's hostname is a link",
     "US3-6": "logs with the CLI's choices, followed live",
+    "TOPO-1": "a member reads a deployed service's topology, merged across its instances, followed live",
+    "TOPO-2": "an instance that did not answer leaves the topology partial and is named",
     "US3-7": "a deleted service is gone, and applying the name again continues its generation",
     "US3-8": "a suspended service reads Suspended and its operations are refused, not hidden",
+    "RB-1": "a member rolls a service back from the console",
+    "RB-2": "the console offers a roll back only to a generation that can be rolled back to",
+    "RB-3": "the console shows a refused roll back as the control plane refused it",
+    "RB-4": "the console shows the image of each generation that was applied",
     "US4-1": "an owner sees members and pending invitations",
     "US4-2": "an invitation is claimed when the invited person signs in",
     "US4-3": "roles change and members are removed; the last owner cannot be",

package/dist/theme.css

@@ -0,0 +1,66 @@
+/* Generated from src/ui/tokens.ts by scripts/build.ts. Do not edit. */
+@theme static {
+  --*: initial;
+  --spacing: 0.25rem;
+  --color-mesh-base: #111f26;
+  --color-mesh-slate: #1e2e3a;
+  --color-glow: rgba(212, 128, 88, 0.34);
+  --color-peach: rgba(222, 170, 132, 0.16);
+  --color-dot: rgba(255, 255, 255, 0.08);
+  --color-glass: rgba(255, 255, 255, 0.05);
+  --color-glass-strong: rgba(255, 255, 255, 0.09);
+  --color-glass-line: rgba(255, 255, 255, 0.2);
+  --color-tile: rgba(255, 255, 255, 0.06);
+  --color-tile-line: rgba(255, 255, 255, 0.14);
+  --color-node: rgba(255, 255, 255, 0.1);
+  --color-node-line: rgba(255, 255, 255, 0.38);
+  --color-inset: rgba(0, 0, 0, 0.2);
+  --color-edge: rgba(255, 255, 255, 0.7);
+  --color-ink: #f5f8f7;
+  --color-ink-2: #dfe8e6;
+  --color-ink-3: #ccd9d6;
+  --color-amber: #f0b83c;
+  --color-amber-ink: #13343b;
+  --color-green: #8fe0ad;
+  --color-red: #ffc4bc;
+  --color-red-wash: rgba(255, 138, 128, 0.16);
+  --shadow-part: 0 18px 50px rgba(5, 15, 18, 0.28);
+  --radius-panel: 20px;
+  --radius-card: 14px;
+  --radius-control: 10px;
+  --radius-node: 18px;
+  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --size-rail: 56px;
+  --size-panel: 232px;
+  --size-inspector: 300px;
+  --size-bar: 64px;
+}
+
+@layer theme {
+  :root:has(.ac-light) {
+      --ac-color-mesh-base: #e6eeee;
+      --ac-color-mesh-slate: #cfe0dc;
+      --ac-color-glow: rgba(224, 165, 38, 0.30);
+      --ac-color-peach: rgba(241, 213, 194, 0.80);
+      --ac-color-dot: rgba(19, 52, 59, 0.10);
+      --ac-color-glass: rgba(255, 255, 255, 0.50);
+      --ac-color-glass-strong: rgba(255, 255, 255, 0.85);
+      --ac-color-glass-line: rgba(19, 52, 59, 0.14);
+      --ac-color-tile: rgba(255, 255, 255, 0.50);
+      --ac-color-tile-line: rgba(19, 52, 59, 0.10);
+      --ac-color-node: rgba(255, 255, 255, 0.62);
+      --ac-color-node-line: rgba(19, 52, 59, 0.22);
+      --ac-color-inset: rgba(19, 52, 59, 0.06);
+      --ac-color-edge: rgba(19, 52, 59, 0.55);
+      --ac-color-ink: #13343b;
+      --ac-color-ink-2: #33504f;
+      --ac-color-ink-3: #4a6465;
+      --ac-color-amber: #e0a526;
+      --ac-color-amber-ink: #13343b;
+      --ac-color-green: #1f6b3a;
+      --ac-color-red: #a8231b;
+      --ac-color-red-wash: #fbe9e7;
+      --ac-shadow-part: 0 18px 50px rgba(19, 52, 59, 0.10);
+  }
+}

package/dist/ui/console.d.ts

@@ -6,7 +6,7 @@
 import { type ReactNode } from "react";
 import { type FormProps, type LinkProps } from "react-router";
 import type { ConsoleExtensions, Operation } from "../extensions/types.ts";
-import type { ConsolePageData } from "../context.ts";
+import type { ConsolePageData, Crumb, ShellData } from "../context.ts";
 /**
  * Hands the host's extensions to the pages. Rendered in the host's layout, around its `<Outlet />`,
  * with the same `extensions` object given to `consoleMiddleware`, so panels render in the browser as
@@ -18,6 +18,8 @@ export declare function ConsoleProvider({ extensions, children }: {
 }): import("react").JSX.Element;
 export interface UseConsole extends ConsolePageData {
     extensions: ConsoleExtensions;
+    /** The shell around the page; empty on a host's own page that supplies none. */
+    shell: ShellData;
     href(path?: string): string;
     shows(operation: Operation): boolean;
 }
@@ -37,10 +39,24 @@ export declare function ConsoleForm({ to, intent, children, ...rest }: Omit<Form
     intent?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function Submit({ intent, children, danger }: {
+export declare function Submit({ intent, children, danger, primary, className, label, }: {
     intent?: string;
     children: ReactNode;
     danger?: boolean;
+    primary?: boolean;
+    /** Replaces the button's own classes, for a control drawn differently (the shape's tab). */
+    className?: string;
+    /** The control's accessible name, when its content is an icon. */
+    label?: string;
+}): import("react").JSX.Element;
+/** One operation as a form with one button, posting its intent to the page it is on. */
+export declare function OperationForm({ intent, children, danger, primary, className, label, }: {
+    intent: string;
+    children: ReactNode;
+    danger?: boolean;
+    primary?: boolean;
+    className?: string;
+    label?: string;
 }): import("react").JSX.Element;
 /** A labelled field; a refusal about it is announced with it. */
 export declare function Field({ label, name, hint, error, ...input }: {
@@ -49,10 +65,7 @@ export declare function Field({ label, name, hint, error, ...input }: {
     hint?: string;
     error?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;
-export interface Crumb {
-    label: string;
-    to?: string;
-}
+export type { Crumb };
 /** Where the page sits in the installation: organization, project, service. */
 export declare function Breadcrumbs({ trail }: {
     trail: Crumb[];

package/dist/ui/console.js

@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { createContext, useContext } from "react";
 import { Form, Link, useMatches, useNavigation } from "react-router";
+import { button } from "./primitives/button.js";
 const ExtensionsContext = createContext({});
 /**
  * Hands the host's extensions to the pages. Rendered in the host's layout, around its `<Outlet />`,
@@ -31,6 +32,7 @@ export function useConsole() {
         mount,
         principal: page?.principal ?? null,
         hidden: [...hidden],
+        shell: page?.shell ?? { crumbs: [] },
         extensions,
         href: (path = "") => mount + path.replace(/^\/+/, ""),
         shows: (operation) => !hidden.has(operation),
@@ -50,10 +52,15 @@ export function ConsoleForm({ to, intent, children, ...rest }) {
     const { href } = useConsole();
     return (_jsxs(Form, { method: "post", action: to === undefined ? undefined : href(to), ...rest, children: [intent ? _jsx("input", { type: "hidden", name: "intent", value: intent }) : null, children] }));
 }
-export function Submit({ intent, children, danger }) {
+export function Submit({ intent, children, danger, primary, className, label, }) {
     const navigation = useNavigation();
     const busy = navigation.state === "submitting" && (intent === undefined || navigation.formData?.get("intent") === intent);
-    return (_jsx("button", { type: "submit", className: danger ? "ac-button ac-button-danger" : "ac-button", disabled: busy, "aria-busy": busy || undefined, children: children }));
+    const classes = className ?? button({ variant: danger ? "danger" : primary ? "primary" : "default" });
+    return (_jsx("button", { type: "submit", className: classes, disabled: busy, "aria-busy": busy || undefined, "aria-label": label, title: label, children: children }));
+}
+/** One operation as a form with one button, posting its intent to the page it is on. */
+export function OperationForm({ intent, children, danger, primary, className, label, }) {
+    return (_jsx(ConsoleForm, { intent: intent, children: _jsx(Submit, { intent: intent, danger: danger, primary: primary, className: className, label: label, children: children }) }));
 }
 /** A labelled field; a refusal about it is announced with it. */
 export function Field({ label, name, hint, error, ...input }) {

package/dist/ui/errors.js

@@ -5,6 +5,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 import { isRouteErrorResponse, useRouteError } from "react-router";
 import { ConsoleLink } from "./console.js";
+import { Page } from "./shell.js";
+import { button } from "./primitives/button.js";
 /** A refusal from the control plane, shown beside the thing refused, in the control plane's words. */
 export function Refusal({ reason, problems }) {
     if (!reason && (!problems || problems.length === 0))
@@ -16,15 +18,15 @@ export function ConsoleErrorBoundary() {
     if (isRouteErrorResponse(error) && error.data && typeof error.data === "object" && "kind" in error.data) {
         const failure = error.data;
         if (failure.kind === "lost") {
-            return (_jsxs("section", { className: "ac-page ac-failure", children: [_jsx("h1", { children: "You no longer have access to this" }), _jsx("p", { children: "It was deleted, or you are no longer a member of the organization it belongs to." }), _jsx("p", { children: _jsx(ConsoleLink, { to: "", children: "Go to your organizations" }) })] }));
+            return (_jsx(Page, { children: _jsxs("section", { className: "ac-card ac-failure", children: [_jsx("h1", { children: "You no longer have access to this" }), _jsx("p", { children: "It was deleted, or you are no longer a member of the organization it belongs to." }), _jsx("p", { children: _jsx(ConsoleLink, { to: "", children: "Go to your organizations" }) })] }) }));
         }
         if (failure.kind === "unavailable") {
-            return (_jsxs("section", { className: "ac-page ac-failure", children: [_jsxs("h1", { children: ["The ", failure.what, " is not answering"] }), _jsx("p", { children: "Your session is kept. Try again in a few seconds." }), _jsx("p", { className: "ac-hint", children: failure.reason }), _jsx("p", { children: _jsx("a", { className: "ac-button", href: "", children: "Try again" }) })] }));
+            return (_jsx(Page, { children: _jsxs("section", { className: "ac-card ac-failure", children: [_jsxs("h1", { children: ["The ", failure.what, " is not answering"] }), _jsx("p", { children: "Your session is kept. Try again in a few seconds." }), _jsx("p", { className: "ac-hint", children: failure.reason }), _jsx("p", { children: _jsx("a", { className: button(), href: "", children: "Try again" }) })] }) }));
         }
-        return (_jsxs("section", { className: "ac-page ac-failure", children: [_jsx("h1", { children: "This was refused" }), _jsx(Refusal, { reason: failure.reason }), _jsx("p", { children: _jsx(ConsoleLink, { to: "", children: "Go to your organizations" }) })] }));
+        return (_jsx(Page, { children: _jsxs("section", { className: "ac-card ac-failure", children: [_jsx("h1", { children: "This was refused" }), _jsx(Refusal, { reason: failure.reason }), _jsx("p", { children: _jsx(ConsoleLink, { to: "", children: "Go to your organizations" }) })] }) }));
     }
     if (isRouteErrorResponse(error) && error.status === 404) {
-        return (_jsxs("section", { className: "ac-page ac-failure", children: [_jsx("h1", { children: "There is no page here" }), _jsx("p", { children: _jsx(ConsoleLink, { to: "", children: "Go to your organizations" }) })] }));
+        return (_jsx(Page, { children: _jsxs("section", { className: "ac-card ac-failure", children: [_jsx("h1", { children: "There is no page here" }), _jsx("p", { children: _jsx(ConsoleLink, { to: "", children: "Go to your organizations" }) })] }) }));
     }
-    return (_jsxs("section", { className: "ac-page ac-failure", children: [_jsx("h1", { children: "The console could not show this page" }), _jsx("p", { children: "Reload to try again. If it keeps happening, the console's own log says why." })] }));
+    return (_jsx(Page, { children: _jsxs("section", { className: "ac-card ac-failure", children: [_jsx("h1", { children: "The console could not show this page" }), _jsx("p", { children: "Reload to try again. If it keeps happening, the console's own log says why." })] }) }));
 }

package/dist/ui/hosting.d.ts

@@ -0,0 +1,11 @@
+/** How a deployed service's own code is hosted, in words: the facts list and the shape both say it. */
+export declare function runsAs(s: {
+    hosting: string;
+    protocol?: string;
+    processPort?: number;
+}): string;
+/** The same, short enough for a part of the shape. */
+export declare function hostedAs(s: {
+    hosting: string;
+    processPort?: number;
+}): string;

package/dist/ui/hosting.js

@@ -0,0 +1,20 @@
+/** How a deployed service's own code is hosted, in words: the facts list and the shape both say it. */
+export function runsAs(s) {
+    if (s.hosting === "web")
+        return `Your program beside the platform's proxy${s.processPort ? `, on port ${s.processPort}` : ""}`;
+    if (s.hosting === "process")
+        return `A process beside the platform's sidecar${s.protocol ? `, protocol ${s.protocol}` : ""}`;
+    if (s.hosting === "wasm")
+        return `A module loaded into the platform's runtime${s.protocol ? `, protocol ${s.protocol}` : ""}`;
+    return "Embedded in the platform's runtime";
+}
+/** The same, short enough for a part of the shape. */
+export function hostedAs(s) {
+    if (s.hosting === "web")
+        return s.processPort ? `Your program, port ${s.processPort}` : "Your program";
+    if (s.hosting === "process")
+        return "A process beside the sidecar";
+    if (s.hosting === "wasm")
+        return "A module in the runtime";
+    return "In the platform's runtime";
+}

package/dist/ui/primitives/button.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The button recipe: the classes for a button, or a link drawn as one, by variant and size. In the
+ * shape of shadcn's recipes, drawn on the console's own `ac-` component classes so a host keeps the
+ * class names the documentation promises.
+ */
+import { type VariantProps } from "class-variance-authority";
+export declare const button: (props?: ({
+    variant?: "danger" | "default" | "primary" | "quiet" | null | undefined;
+    size?: "default" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof button>;

package/dist/ui/primitives/button.js

@@ -0,0 +1,21 @@
+/**
+ * The button recipe: the classes for a button, or a link drawn as one, by variant and size. In the
+ * shape of shadcn's recipes, drawn on the console's own `ac-` component classes so a host keeps the
+ * class names the documentation promises.
+ */
+import { cva } from "class-variance-authority";
+export const button = cva("ac-button", {
+    variants: {
+        variant: {
+            default: "",
+            primary: "ac-button-primary",
+            danger: "ac-button-danger",
+            quiet: "ac-button-quiet",
+        },
+        size: {
+            default: "",
+            small: "ac-button-small",
+        },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+});

package/dist/ui/primitives/select.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A choice: the browser's own select, labelled. A choice drawn by script cannot be made without it;
+ * this one can, and it submits with its form.
+ */
+import type { ReactNode, SelectHTMLAttributes } from "react";
+export declare function Select({ label, id, children, ...select }: {
+    label: string;
+    id: string;
+    children: ReactNode;
+} & SelectHTMLAttributes<HTMLSelectElement>): import("react").JSX.Element;

package/dist/ui/primitives/select.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Select({ label, id, children, ...select }) {
+    return (_jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: id, children: label }), _jsx("select", { id: id, ...select, children: children })] }));
+}

package/dist/ui/primitives/switch.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A switch: the browser's own checkbox, drawn as a track. It is a form control, so it submits with
+ * its form when no script runs, which a switch drawn as a button and toggled by script cannot.
+ */
+import type { InputHTMLAttributes } from "react";
+export declare function Switch({ label, id, ...input }: {
+    label: string;
+    id: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "id">): import("react").JSX.Element;

package/dist/ui/primitives/switch.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Switch({ label, id, ...input }) {
+    return (_jsxs("label", { className: "ac-switch", htmlFor: id, children: [_jsx("span", { children: label }), _jsx("input", { type: "checkbox", id: id, ...input }), _jsx("span", { className: "ac-switch-track", "aria-hidden": "true" })] }));
+}

package/dist/ui/shape.d.ts

@@ -0,0 +1,4 @@
+import type { ServiceStatus } from "../client/schemas.ts";
+export declare function Shape({ service: s }: {
+    service: ServiceStatus;
+}): import("react").JSX.Element;

package/dist/ui/shape.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Database, FileText, Globe, Layers, Pause, Play, RotateCw, Route } from "lucide-react";
+import { ConsoleLink, OperationForm, useConsole } from "./console.js";
+import { Lifecycle } from "./status.js";
+import { hostedAs } from "./hosting.js";
+const icon = { strokeWidth: 1.25, "aria-hidden": true };
+/** The joins from one part to `to` parts side by side below it, each arriving at its part's centre. */
+function Join({ to }) {
+    if (to <= 1)
+        return (_jsx("svg", { className: "ac-edge", viewBox: "0 0 100 48", preserveAspectRatio: "none", "aria-hidden": "true", children: _jsx("path", { d: "M50 0 V48" }) }));
+    const xs = Array.from({ length: to }, (_x, i) => ((2 * i + 1) / (2 * to)) * 100);
+    return (_jsx("svg", { className: "ac-edge ac-edge-split", viewBox: "0 0 100 48", preserveAspectRatio: "none", "aria-hidden": "true", children: xs.map((x) => (_jsx("path", { d: `M50 0 C50 28 ${x} 20 ${x} 48` }, x))) }));
+}
+const mountTrouble = {
+    "no service": "No service of that name",
+    "serves no HTTP": "Serves no HTTP",
+    paused: "Paused",
+};
+export function Shape({ service: s }) {
+    const { shows } = useConsole();
+    const path = `projects/${encodeURIComponent(s.projectId)}/services/${encodeURIComponent(s.name)}`;
+    const address = s.hostname?.replace(/^https?:\/\//, "");
+    const web = s.hosting === "web";
+    const project = `projects/${encodeURIComponent(s.projectId)}/services/`;
+    const children = [
+        _jsxs("div", { className: "ac-part ac-part-up", "data-part": "instances", children: [_jsx("span", { className: "ac-part-icon", children: _jsx(Layers, { ...icon }) }), _jsx("span", { className: "ac-part-title", children: "Instances" }), _jsxs("span", { className: "ac-part-sub", children: [s.readyInstances, " of ", s.desiredInstances, " ready"] })] }, "instances"),
+        ...(web
+            ? s.mounts.map((m) => (_jsxs("div", { className: "ac-part ac-part-up", "data-part": "mount", "data-mount": m.path, children: [_jsx("span", { className: "ac-part-icon", children: _jsx(Route, { ...icon }) }), _jsx("span", { className: "ac-part-title", title: m.service, children: m.state === "no service" ? m.service : _jsx(ConsoleLink, { to: project + encodeURIComponent(m.service), children: m.service }) }), _jsx("span", { className: "ac-part-sub", title: m.path, children: m.path }), m.state && m.state !== "ok" ? (_jsx("span", { className: "ac-part-inset", children: _jsxs("span", { className: "ac-status ac-status-trouble", children: [_jsx("span", { className: "ac-status-mark", "aria-hidden": "true", children: "\u25B2" }), mountTrouble[m.state] ?? m.state] }) })) : null] }, m.path)))
+            : [
+                _jsxs("div", { className: "ac-part ac-part-up", "data-part": "database", children: [_jsx("span", { className: "ac-part-icon", children: _jsx(Database, { ...icon }) }), _jsx("span", { className: "ac-part-title", title: s.database, children: s.database ?? "Not reported yet" }), _jsx("span", { className: "ac-part-sub", children: s.database ? "Kept if the service is deleted" : "The cluster has not reported it" })] }, "database"),
+            ]),
+    ];
+    return (_jsx("figure", { className: "ac-shape", "aria-label": `What the platform runs for ${s.name}`, children: _jsxs("div", { className: "ac-tree", children: [s.exposed ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "ac-row", children: _jsxs("div", { className: "ac-part ac-part-down", "data-part": "hostname", children: [_jsx("span", { className: "ac-part-icon", children: _jsx(Globe, { ...icon }) }), _jsx("span", { className: "ac-part-title", title: address, children: address ?? "No address yet" }), _jsx("span", { className: "ac-part-sub", children: address ? "On the installation's gateway" : "Exposed; no address reported yet" })] }) }), _jsx(Join, { to: 1 })] })) : null, _jsx("div", { className: "ac-row", children: _jsxs("div", { className: `ac-part ac-part-self ac-part-tabbed ac-part-down${s.exposed ? " ac-part-up" : ""}`, "data-part": "service", children: [_jsxs("span", { className: "ac-part-tab", "aria-label": `Controls of ${s.name}`, role: "group", children: [shows("service.logs") ? (_jsx(ConsoleLink, { to: `${path}/logs`, className: "ac-tab-control", "aria-label": "Logs", title: "Logs", children: _jsx(FileText, { "aria-hidden": "true" }) })) : null, s.paused
+                                        ? shows("service.resume") && (_jsx(OperationForm, { intent: "resume", className: "ac-tab-control", label: "Resume", children: _jsx(Play, { "aria-hidden": "true" }) }))
+                                        : shows("service.pause") && (_jsx(OperationForm, { intent: "pause", className: "ac-tab-control", label: "Pause", children: _jsx(Pause, { "aria-hidden": "true" }) })), shows("service.restart") ? (_jsx(OperationForm, { intent: "restart", className: "ac-tab-control", label: "Restart", children: _jsx(RotateCw, { "aria-hidden": "true" }) })) : null] }), _jsx("span", { className: "ac-part-icon", children: _jsx(Box, { ...icon }) }), _jsx("span", { className: "ac-part-title", children: s.name }), _jsxs("span", { className: "ac-part-sub", title: s.image, children: ["Generation ", s.generation, ", ", s.image] }), _jsxs("span", { className: "ac-part-inset", children: [_jsx("span", { children: hostedAs(s) }), _jsx(Lifecycle, { lifecycle: s.lifecycle, confirmed: s.confirmed })] })] }) }), children.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Join, { to: children.length }), _jsx("div", { className: "ac-row ac-row-many", style: { gridTemplateColumns: `repeat(${children.length}, minmax(0, 1fr))` }, children: children })] })) : null] }) }));
+}

package/dist/ui/shell.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The shell every console page is shown inside: the backdrop, a rail of areas, a bar saying where
+ * the member is, a listing of what sits beside the page, the page, and an inspector holding what the
+ * page offers to be done. A host composes the parts it has content for; the backdrop and the bar are
+ * the least it mounts. The installation's console mounts them all:
+ *
+ * ```tsx
+ * <Shell><Backdrop /><Rail /><Bar /><Listing /><Outlet /></Shell>
+ * ```
+ *
+ * The rail, the bar and the listing read the shell's data from whichever package page is matched;
+ * each page renders its own body and inspector through `Page`, so its forms, refusals and busy
+ * states stay where they are and work without scripts.
+ */
+import type { ReactNode } from "react";
+/**
+ * The grid that lays out whichever parts it is given. It is the console's root. The console is
+ * dark; a host that wants the light theme says so here.
+ */
+export declare function Shell({ children, className, theme }: {
+    children: ReactNode;
+    className?: string;
+    theme?: "dark" | "light";
+}): import("react").JSX.Element;
+/** The mesh behind every surface: slate, the glow at the centre of the screen, the dot grid. */
+export declare function Backdrop(): import("react").JSX.Element;
+/**
+ * The bar: the wordmark and anything a host adds beside it (its own navigation), where the member
+ * is, the page's primary operation, and who is signed in. `end` replaces the last of these, for a
+ * host whose visitors may not be signed in.
+ */
+export declare function Bar({ wordmark, children, end }: {
+    wordmark?: ReactNode;
+    children?: ReactNode;
+    end?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The rail: the console's areas, the one the page belongs to marked. Members and deploy tokens open
+ * those of the organization the page belongs to; with no organization in view they are shown and
+ * unavailable. Signing out is at its foot.
+ */
+export declare function Rail(): import("react").JSX.Element;
+/** The listing beside the page: a project's services or an organization's projects. */
+export declare function Listing(): import("react").JSX.Element | null;
+/** The column of what a page offers to be done. */
+export declare function Inspector({ children, label }: {
+    children: ReactNode;
+    label?: string;
+}): import("react").JSX.Element;
+/** A page: its body, and the inspector beside it when it offers anything. */
+export declare function Page({ children, inspector, className }: {
+    children: ReactNode;
+    inspector?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** A heading for a group in a side column. */
+export declare function SectionTitle({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface SegmentLink {
+    label: string;
+    to: string;
+    current?: boolean;
+}
+/** A page's sections, as links: each is a page of its own. */
+export declare function SegmentedLinks({ label, links }: {
+    label: string;
+    links: SegmentLink[];
+}): import("react").JSX.Element;
+export type ServiceSection = "overview" | "topology" | "logs" | "history";
+/** A service's four sections. */
+export declare function ServiceSections({ projectId, name, current }: {
+    projectId: string;
+    name: string;
+    current: ServiceSection;
+}): import("react").JSX.Element;

package/dist/ui/shell.js

@@ -0,0 +1,107 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Box, Building2, Folder, KeyRound, LogOut, Plus, Users } from "lucide-react";
+import { Breadcrumbs, ConsoleForm, ConsoleLink, useConsole } from "./console.js";
+import { Lifecycle } from "./status.js";
+import { button } from "./primitives/button.js";
+/**
+ * The grid that lays out whichever parts it is given. It is the console's root. The console is
+ * dark; a host that wants the light theme says so here.
+ */
+export function Shell({ children, className, theme = "dark" }) {
+    return _jsx("div", { className: clsx("ac-root ac-shell", theme === "light" && "ac-light", className), children: children });
+}
+/** The mesh behind every surface: slate, the glow at the centre of the screen, the dot grid. */
+export function Backdrop() {
+    return _jsx("div", { className: "ac-backdrop", "aria-hidden": "true" });
+}
+function Mark() {
+    return (_jsxs("svg", { viewBox: "0 0 36 36", width: "32", height: "32", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M8 24c0-7 5-12 10-12s10 5 10 12", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("path", { d: "M14 24h8", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("circle", { cx: "18", cy: "9", r: "2.2", fill: "var(--ac-color-amber)" })] }));
+}
+const initials = (name) => name
+    .split(/[\s@.]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0].toUpperCase())
+    .join("");
+/**
+ * The bar: the wordmark and anything a host adds beside it (its own navigation), where the member
+ * is, the page's primary operation, and who is signed in. `end` replaces the last of these, for a
+ * host whose visitors may not be signed in.
+ */
+export function Bar({ wordmark, children, end }) {
+    const { shell, principal, shows } = useConsole();
+    const name = principal ? (principal.name ?? principal.email ?? principal.subject) : null;
+    const primary = shell.primary && (!shell.primary.operation || shows(shell.primary.operation)) ? shell.primary : null;
+    return (_jsxs("header", { className: "ac-bar", children: [_jsxs("div", { className: "ac-bar-start", children: [wordmark ?? (_jsxs(ConsoleLink, { to: "", className: "ac-wordmark", children: ["ankka ", _jsx("span", { children: "console" })] })), children] }), shell.crumbs.length > 0 ? _jsx(Breadcrumbs, { trail: shell.crumbs }) : _jsx("span", {}), _jsxs("div", { className: "ac-bar-end", children: [primary ? (_jsxs(ConsoleLink, { to: primary.to, className: button({ variant: "primary" }), "data-primary": true, children: [_jsx(Plus, { "aria-hidden": "true" }), primary.label] })) : null, end ??
+                        (name ? (_jsxs("span", { className: "ac-person", title: name, children: [_jsx("span", { "aria-hidden": "true", children: initials(name) }), _jsxs("span", { className: "ac-visually-hidden", children: ["You are ", name] })] })) : null)] })] }));
+}
+/**
+ * The rail: the console's areas, the one the page belongs to marked. Members and deploy tokens open
+ * those of the organization the page belongs to; with no organization in view they are shown and
+ * unavailable. Signing out is at its foot.
+ */
+export function Rail() {
+    const { shell } = useConsole();
+    const org = shell.organization;
+    const project = shell.project;
+    const orgPath = org ? `organizations/${encodeURIComponent(org.id)}` : undefined;
+    const entries = [
+        { area: "organizations", label: "Organizations", icon: Building2, to: "", unavailable: "" },
+        { area: "projects", label: org ? `Projects of ${org.name}` : "Projects", icon: Folder, to: orgPath, unavailable: "Projects: open an organization first" },
+        {
+            area: "services",
+            label: project ? `Services of ${project.name}` : "Services",
+            icon: Box,
+            to: project ? `projects/${encodeURIComponent(project.id)}` : undefined,
+            unavailable: "Services: open a project first",
+        },
+        { area: "members", label: org ? `Members of ${org.name}` : "Members", icon: Users, to: orgPath && `${orgPath}/members`, unavailable: "Members: open an organization first" },
+        {
+            area: "tokens",
+            label: org ? `Deploy tokens of ${org.name}` : "Deploy tokens",
+            icon: KeyRound,
+            to: orgPath && org?.manages ? `${orgPath}/tokens` : undefined,
+            unavailable: org ? "Deploy tokens: only an owner manages them" : "Deploy tokens: open an organization first",
+        },
+    ];
+    return (_jsxs("nav", { className: "ac-rail", "aria-label": "Console", children: [_jsx(ConsoleLink, { to: "", className: "ac-mark", "aria-label": "ankka console", title: "ankka console", children: _jsx(Mark, {}) }), _jsx("ul", { className: "ac-rail-areas", children: entries.map((e) => {
+                    const Icon = e.icon;
+                    return (_jsx("li", { "data-area": e.area, children: e.to !== undefined ? (_jsx(ConsoleLink, { to: e.to, className: "ac-rail-item", "aria-label": e.label, title: e.label, "aria-current": shell.area === e.area ? "true" : undefined, children: _jsx(Icon, { "aria-hidden": "true" }) })) : (_jsx("span", { className: "ac-rail-item", role: "link", "aria-disabled": "true", "aria-label": e.unavailable, title: e.unavailable, children: _jsx(Icon, { "aria-hidden": "true" }) })) }, e.area));
+                }) }), _jsx("div", { className: "ac-rail-foot", children: _jsx(ConsoleForm, { to: "auth/sign-out", children: _jsx("button", { type: "submit", className: "ac-rail-item", "aria-label": "Sign out", title: "Sign out", children: _jsx(LogOut, { "aria-hidden": "true" }) }) }) })] }));
+}
+/** The listing beside the page: a project's services or an organization's projects. */
+export function Listing() {
+    const { shell } = useConsole();
+    const l = shell.listing;
+    if (!l)
+        return null;
+    return (_jsxs("nav", { className: "ac-listing", "aria-label": l.label, children: [_jsxs("p", { className: "ac-section-title", children: [_jsx("span", { children: l.title }), _jsx("span", { children: l.items.length })] }), l.items.length === 0 ? _jsx("p", { className: "ac-hint", children: "Nothing here yet." }) : null, _jsx("ul", { className: "ac-listing-items", children: l.items.map((i) => (_jsx("li", { "data-item": i.key, children: _jsxs(ConsoleLink, { to: i.to, className: "ac-listing-item", "aria-current": i.key === l.current ? "page" : undefined, children: [_jsx("span", { className: "ac-listing-name", children: i.name }), i.kind === "service" ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "ac-listing-count", children: [i.ready, " of ", i.desired] }), _jsx(Lifecycle, { lifecycle: i.lifecycle, confirmed: i.confirmed })] })) : (_jsxs("span", { className: "ac-listing-count", children: [i.services, " service", i.services === 1 ? "" : "s"] }))] }) }, i.key))) })] }));
+}
+/** The column of what a page offers to be done. */
+export function Inspector({ children, label = "Operations" }) {
+    return (_jsx("aside", { className: "ac-inspector", "aria-label": label, children: children }));
+}
+/** A page: its body, and the inspector beside it when it offers anything. */
+export function Page({ children, inspector, className }) {
+    return (_jsxs("div", { className: "ac-page", children: [_jsx("main", { className: clsx("ac-body", className), id: "main", children: children }), inspector ? _jsx(Inspector, { children: inspector }) : null] }));
+}
+/** A heading for a group in a side column. */
+export function SectionTitle({ children }) {
+    return _jsx("h2", { className: "ac-section-title", children: children });
+}
+/** A page's sections, as links: each is a page of its own. */
+export function SegmentedLinks({ label, links }) {
+    return (_jsx("nav", { className: "ac-seg", "aria-label": label, children: links.map((l) => (_jsx(ConsoleLink, { to: l.to, "aria-current": l.current ? "page" : undefined, children: l.label }, l.to))) }));
+}
+/** A service's four sections. */
+export function ServiceSections({ projectId, name, current }) {
+    const path = `projects/${encodeURIComponent(projectId)}/services/${encodeURIComponent(name)}`;
+    const links = [
+        ["overview", "Overview", path],
+        ["topology", "Topology", `${path}/topology`],
+        ["logs", "Logs", `${path}/logs`],
+        ["history", "History", `${path}/history`],
+    ];
+    return _jsx(SegmentedLinks, { label: "Sections of the service", links: links.map(([s, label, to]) => ({ label, to, current: s === current })) });
+}

package/dist/ui/tokens.d.ts

@@ -0,0 +1,82 @@
+/**
+ * The console's look as values: the one source the stylesheet is generated from, the contrast test
+ * reads, and the documentation's table of properties is written from. Each becomes a `--ac-*`
+ * custom property a host may set; the names are a contract, the values are not.
+ *
+ * Text sits on translucent surfaces, so its contrast depends on what is behind it. The backdrop is
+ * brightest where the glow peaks, and every ink must keep 4.5:1 on every surface there, in both
+ * themes. The glow's alpha is therefore a limit: `test/contrast.test.ts` fails if it is raised past
+ * what the inks can stand.
+ */
+export type Rgba = string;
+export interface Theme {
+    mesh: {
+        base: Rgba;
+        slate: Rgba;
+        glow: Rgba;
+        peach: Rgba;
+        dot: Rgba;
+    };
+    surface: {
+        glass: Rgba;
+        glassStrong: Rgba;
+        glassLine: Rgba;
+        tile: Rgba;
+        tileLine: Rgba;
+        node: Rgba;
+        nodeLine: Rgba;
+        inset: Rgba;
+        edge: Rgba;
+    };
+    ink: {
+        ink: Rgba;
+        ink2: Rgba;
+        ink3: Rgba;
+    };
+    accent: {
+        amber: Rgba;
+        amberInk: Rgba;
+        green: Rgba;
+        red: Rgba;
+        redWash: Rgba;
+    };
+    shadow: string;
+}
+export interface Tokens {
+    dark: Theme;
+    light: Theme;
+    radius: {
+        panel: string;
+        card: string;
+        control: string;
+        node: string;
+    };
+    font: {
+        sans: string;
+        mono: string;
+    };
+    size: {
+        rail: string;
+        panel: string;
+        inspector: string;
+        bar: string;
+    };
+}
+export declare const tokens: Tokens;
+/** Every colour property of a theme, by its CSS name without the `--ac-` prefix. */
+export declare function colours(theme: Theme): [string, Rgba][];
+/** The properties that are the same in both themes. */
+export declare function constants(t: Tokens): [string, string][];
+/**
+ * The stylesheet's theme. The console is dark; its values are the theme itself. Light redefines the
+ * same properties when a host chooses it, by putting `ac-light` on the shell. Browsers report a
+ * preference for light when nobody has stated one, so the browser's preference is not followed.
+ * Both sit on `:root` and inside the `theme` layer, so a host's own, unlayered declaration of any of
+ * them wins in either theme, on any element.
+ *
+ * Tailwind prefixes the `@theme` names (`--color-ink` becomes `--ac-color-ink`); the light block is
+ * plain CSS and names the prefixed property itself.
+ */
+export declare function toCss(t: Tokens): string;
+/** What each property is for, by its name without the `--ac-` prefix: the documentation's table. */
+export declare const roles: Record<string, string>;