visual-comments 0.0.0-stage → 0.2.0

package/dist/server/variables.d.ts

@@ -0,0 +1,28 @@
+/** The variables `commentsFromEnv` reads. */
+export type CommentsEnvName = 'VISUAL_COMMENTS_ENABLED' | 'VISUAL_COMMENTS_SERVER' | 'VISUAL_COMMENTS_SPACE' | 'VISUAL_COMMENTS_SECRET' | 'VISUAL_COMMENTS_PATH' | 'VISUAL_COMMENTS_AUTH' | 'VISUAL_COMMENTS_OIDC_ISSUER' | 'VISUAL_COMMENTS_OIDC_CLIENT_ID' | 'VISUAL_COMMENTS_OIDC_CLIENT_SECRET' | 'VISUAL_COMMENTS_SESSION_SECRET';
+/**
+ * Where the variables come from: `process.env`, SvelteKit's `$app/env/private`
+ * (`import * as env from '$app/env/private'`) or `$env/dynamic/private` before
+ * SvelteKit 3. Values that are not strings count as unset.
+ */
+export type CommentsEnv = {
+    readonly [K in CommentsEnvName]?: unknown;
+};
+export declare function invalid(name: CommentsEnvName, message: string): Error;
+/** A variable's value, checked; undefined when unset or empty. */
+export declare function read(env: CommentsEnv, name: CommentsEnvName): string | undefined;
+/**
+ * The variables for SvelteKit's `src/env.ts`, all private and read when the
+ * app starts, so one build serves every deployment:
+ *
+ * ```ts
+ * import { defineEnvVars } from '@sveltejs/kit/env';
+ * import { commentsVariables } from 'visual-comments/server';
+ *
+ * export const variables = defineEnvVars({ ...commentsVariables });
+ * ```
+ */
+export declare const commentsVariables: { readonly [K in CommentsEnvName]: {
+    description: string;
+    schema: (value: string | undefined) => string | undefined;
+}; };

package/dist/server/variables.js

@@ -0,0 +1,73 @@
+// The variables `commentsFromEnv` reads, with their checks. Kept apart from it, so a build
+// without the comments (`visual-comments/vite`) still declares them.
+const isPath = (value) => (value.startsWith('/') ? undefined : 'must be a path that starts with /, e.g. /_comments');
+const isUrl = (value) => (URL.canParse(value) && /^https?:$/.test(new URL(value).protocol) ? undefined : 'must be an http(s) URL');
+const isSecret = (value) => (value.length >= 32 ? undefined : 'must be at least 32 characters');
+const CHECKS = {
+    VISUAL_COMMENTS_ENABLED: {
+        description: 'Whether comments are on: `true`, `false` or `dev` (only while the dev server runs). Default `false`.',
+        check: (value) => (['true', 'false', 'dev'].includes(value) ? undefined : 'must be true, false or dev')
+    },
+    VISUAL_COMMENTS_SERVER: {
+        description: 'The comment server, e.g. `https://comments.convex.works`. Required while comments are on.',
+        check: isUrl
+    },
+    VISUAL_COMMENTS_SPACE: {
+        description: "The site's space on the comment server. Required while comments are on."
+    },
+    VISUAL_COMMENTS_SECRET: {
+        description: "The space's secret, at least 32 characters. Required while comments are on. Never sent to browsers.",
+        check: isSecret
+    },
+    VISUAL_COMMENTS_PATH: {
+        description: 'Where the site answers comment requests, base path included. Default `/_comments`.',
+        check: isPath
+    },
+    VISUAL_COMMENTS_AUTH: {
+        description: "Where the site's sign-in routes are, base path included. Default `/auth`.",
+        check: isPath
+    },
+    VISUAL_COMMENTS_OIDC_ISSUER: {
+        description: "With the comments' own sign-in: the OpenID Connect provider, e.g. `https://id.convex.works`.",
+        check: isUrl
+    },
+    VISUAL_COMMENTS_OIDC_CLIENT_ID: {
+        description: "With the comments' own sign-in: their confidential client at the provider."
+    },
+    VISUAL_COMMENTS_OIDC_CLIENT_SECRET: {
+        description: "With the comments' own sign-in: that client's secret."
+    },
+    VISUAL_COMMENTS_SESSION_SECRET: {
+        description: "With the comments' own sign-in: encrypts their session cookie. At least 32 characters. Optional under the dev server.",
+        check: isSecret
+    }
+};
+export function invalid(name, message) {
+    return new Error(`${name} ${message}.`);
+}
+/** A variable's value, checked; undefined when unset or empty. */
+export function read(env, name) {
+    const value = env[name];
+    if (typeof value !== 'string' || value === '')
+        return undefined;
+    const problem = CHECKS[name].check?.(value);
+    if (problem)
+        throw invalid(name, problem);
+    return value;
+}
+/**
+ * The variables for SvelteKit's `src/env.ts`, all private and read when the
+ * app starts, so one build serves every deployment:
+ *
+ * ```ts
+ * import { defineEnvVars } from '@sveltejs/kit/env';
+ * import { commentsVariables } from 'visual-comments/server';
+ *
+ * export const variables = defineEnvVars({ ...commentsVariables });
+ * ```
+ */
+export const commentsVariables = Object.fromEntries(Object.entries(CHECKS).map(([name, { description }]) => [name, {
+        description,
+        // Optional, and checked when the app starts.
+        schema: (value) => read({ [name]: value }, name)
+    }]));

package/dist/shared/limits.d.ts

@@ -0,0 +1,9 @@
+/** Per image. A proxy in front of the server must allow request bodies this large. */
+export declare const MAX_IMAGE_BYTES: number;
+export declare const MAX_IMAGES = 6;
+/** No SVG: it can carry script. */
+export declare const IMAGE_TYPES: string[];
+export declare const MAX_BODY = 5000;
+/** Context entries a thread keeps, and the length of each value. */
+export declare const MAX_CONTEXT = 20;
+export declare const MAX_CONTEXT_VALUE = 200;

package/dist/shared/limits.js

@@ -0,0 +1,10 @@
+// Limits shared by the browser and the server.
+/** Per image. A proxy in front of the server must allow request bodies this large. */
+export const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+export const MAX_IMAGES = 6;
+/** No SVG: it can carry script. */
+export const IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+export const MAX_BODY = 5000;
+/** Context entries a thread keeps, and the length of each value. */
+export const MAX_CONTEXT = 20;
+export const MAX_CONTEXT_VALUE = 200;

package/dist/shared/protocol.d.ts

@@ -0,0 +1,6 @@
+/** The header with who is signed in on the site: their `Viewer` as base64url-encoded JSON. */
+export declare const USER_HEADER = "visual-comments-user";
+/** The header with an agent's token, passed on by the site's server instead of `USER_HEADER`. */
+export declare const AGENT_HEADER = "visual-comments-agent";
+/** Agent tokens start with this, so the site's server can tell them from other bearer tokens. */
+export declare const AGENT_TOKEN_PREFIX = "vca_";

package/dist/shared/protocol.js

@@ -0,0 +1,7 @@
+// How a site's server talks to the comment server.
+/** The header with who is signed in on the site: their `Viewer` as base64url-encoded JSON. */
+export const USER_HEADER = 'visual-comments-user';
+/** The header with an agent's token, passed on by the site's server instead of `USER_HEADER`. */
+export const AGENT_HEADER = 'visual-comments-agent';
+/** Agent tokens start with this, so the site's server can tell them from other bearer tokens. */
+export const AGENT_TOKEN_PREFIX = 'vca_';

package/dist/shared/types.d.ts

@@ -0,0 +1,157 @@
+/** Who wrote a comment. From the site's sign-in, saved by the server. */
+export interface Author {
+    sub: string;
+    name: string;
+    picture?: string;
+    /** Set when the author is an agent: it joined the space when a person approved it. */
+    agent?: {
+        addedBy: {
+            sub: string;
+            name: string;
+        };
+    };
+}
+/** The person signed in on the site. */
+export interface Viewer extends Author {
+    email?: string;
+}
+/** An image in a comment, served at `<endpoint>/images/<id>/<key>`. */
+export interface CommentImage {
+    id: number;
+    /** Part of its address, so addresses cannot be guessed from ids. */
+    key: string;
+    /** Its size in pixels, so it can be laid out before it loads. */
+    width: number;
+    height: number;
+}
+export interface Comment {
+    id: number;
+    author: Author;
+    /** Empty when the comment is only images. */
+    body: string;
+    images: CommentImage[];
+    /** Milliseconds since the epoch. */
+    createdAt: number;
+    editedAt: number | null;
+    /** Sent but not yet confirmed by the server. */
+    pending?: boolean;
+}
+/** The element a pin was placed on, as it was then. */
+export interface CommentAnchor {
+    /** A CSS selector for it in its document. */
+    selector: string;
+    /** What it is and what it says, e.g. `button “Add prompts”`. */
+    label: string;
+    /** Its visible text, shortened. */
+    text: string;
+    /** Its box in the surface's CSS pixels. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** A pin and the conversation under it. The first comment opens the thread. */
+export interface CommentThread {
+    /** Its number in the space, shown as #id. Never reused. */
+    id: number;
+    /** The page it is on: by default the URL's origin and path. */
+    page: string;
+    /** The address it was placed at. */
+    url: string;
+    /** The surface on the page, or '' for the page itself. */
+    surface: string;
+    /** The surface's title, or the page's, when the thread was placed. */
+    title: string;
+    /** Pin position in the surface's CSS pixels, from its top-left corner. */
+    x: number;
+    y: number;
+    /** Null for a pin in open space. */
+    anchor: CommentAnchor | null;
+    /** What the host said about where the thread was placed, e.g. the viewport size. */
+    context: Record<string, string>;
+    createdAt: number;
+    resolvedAt: number | null;
+    resolvedBy: Author | null;
+    /** Someone else has written in the thread since the viewer last opened it. */
+    unread: boolean;
+    comments: Comment[];
+}
+export interface CommentsSnapshot {
+    space: {
+        id: string;
+        name: string;
+    };
+    /** Null when signed out. */
+    viewer: Viewer | null;
+    threads: CommentThread[];
+}
+/** What a client sends to start a thread. */
+export interface NewThreadInput {
+    page: string;
+    url: string;
+    surface: string;
+    title: string;
+    x: number;
+    y: number;
+    anchor?: CommentAnchor | null;
+    context?: Record<string, string>;
+    body: string;
+    images?: number[];
+}
+/** What someone present is doing. */
+export type PresenceState = 'viewing' | 'typing' | 'working';
+/** Someone in the space right now: one per browser tab, or one per task of an agent. */
+export interface Participant {
+    /** Stable while they stay. */
+    id: string;
+    author: Author;
+    state: PresenceState;
+    page?: string;
+    surface?: string;
+    thread?: number;
+    /** What they are doing, in their words, e.g. `Tightening the table`. */
+    note?: string;
+    /** When the state last changed, in milliseconds since the epoch. */
+    since: number;
+}
+/** What a client sends to `POST /presence`. */
+export interface PresenceUpdate {
+    /** A browser's connection, from the event stream's `hello` event. Agents leave it out. */
+    connection?: string;
+    /** Agents only: one participant per key, so one agent can work on several things at once. Default `''`. */
+    key?: string;
+    /** `gone` removes the participant. */
+    state: PresenceState | 'gone';
+    page?: string;
+    surface?: string;
+    thread?: number;
+    note?: string;
+}
+/** An agent of the space. */
+export interface Agent {
+    id: string;
+    name: string;
+    addedBy: {
+        sub: string;
+        name: string;
+    };
+    createdAt: number;
+    lastSeenAt: number | null;
+}
+/** An agent asking to join the space, waiting for a person to approve it. */
+export interface AgentRequest {
+    id: string;
+    name: string;
+    /** Shown to the agent and to the person approving, so both know it is the same request. */
+    code: string;
+    expiresAt: number;
+}
+/** The request as the agent that asked gets it: with the secret it collects its token with. */
+export interface NewAgentRequest extends AgentRequest {
+    secret: string;
+}
+/** What `GET /agent/next` answers: the threads with something new for the agent. */
+export interface AgentInbox {
+    threads: CommentThread[];
+    participants: Participant[];
+}

package/dist/shared/types.js

@@ -0,0 +1,2 @@
+// Shapes shared by the browser client and the server.
+export {};

package/dist/sveltekit/CommentTools.svelte

@@ -0,0 +1,98 @@
+<!--
+  The comments' part of the toolbar, while they are on: the comment button and the account (who
+  is here, and the viewer's avatar or Sign in), after a divider when the app's tools come first.
+  Left out of builds without the comments (visual-comments/vite).
+-->
+<script lang="ts">
+	import { page } from '$app/state';
+	import { useComments } from './context.js';
+	import ToolbarButton from './ToolbarButton.svelte';
+
+	let { divider = false }: { divider?: boolean } = $props();
+
+	const comments = useComments();
+	const shortcut = $derived(comments?.current?.options.shortcut ?? 'c');
+	const viewer = $derived(comments?.viewer);
+	const initial = $derived(Array.from(viewer?.name.trim() || '?')[0].toLocaleUpperCase());
+	const signIn = $derived(`${comments?.auth.replace(/\/$/, '')}/login?${new URLSearchParams({ returnTo: `${page.url.pathname}${page.url.search}` })}`);
+</script>
+
+{#if comments?.enabled}
+	{#if divider}<span class="vc-toolbar-divider" aria-hidden="true"></span>{/if}
+	<!-- The comments find this button by `data-vc-toggle`: clicks turn comment mode on and off, and they set `aria-pressed` and `data-vc-unread`. -->
+	<ToolbarButton
+		data-vc-toggle
+		label={shortcut === false ? 'Comments' : `Comments (${shortcut.toUpperCase()})`}
+		disabled={!comments.current}
+	>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<path d="M12 3.5a8.5 8.5 0 1 1 0 17H3.5V12A8.5 8.5 0 0 1 12 3.5z" />
+		</svg>
+	</ToolbarButton>
+	<!-- The comments put the account button here once they have started; until then, it shows who the server said is signed in. -->
+	<span class="vc-toolbar-account" data-vc-account>
+		{#if !comments.current && viewer}
+			<span class="vc-toolbar-tool vc-toolbar-me" title={viewer.name}>
+				<span class="vc-toolbar-avatar" aria-hidden="true">
+					{#if viewer.picture}<img src={viewer.picture} alt="" referrerpolicy="no-referrer" />{:else}{initial}{/if}
+				</span>
+				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<path d="m6 9 6 6 6-6" />
+				</svg>
+			</span>
+		{:else if !comments.current && viewer === null}
+			<a class="vc-toolbar-tool vc-toolbar-sign-in" href={signIn}>Sign in</a>
+		{/if}
+	</span>
+{/if}
+
+<style>
+	.vc-toolbar-divider {
+		width: 1px;
+		height: 1.25rem;
+		margin: 0 0.25rem;
+		background: currentColor;
+		opacity: 0.25;
+	}
+	/* The account draws in its own shadow root and takes the toolbar's text colour. */
+	.vc-toolbar-account {
+		display: inline-flex;
+	}
+	/* Until then, the same sizes as the account button. */
+	.vc-toolbar-tool {
+		display: inline-flex;
+		height: 2rem;
+		align-items: center;
+		gap: 0.375rem;
+		border-radius: 9999px;
+		color: inherit;
+		text-decoration: none;
+	}
+	.vc-toolbar-me {
+		padding: 0 0.5rem 0 0.125rem;
+	}
+	.vc-toolbar-sign-in {
+		padding: 0 0.875rem;
+		font-weight: 500;
+	}
+	.vc-toolbar-sign-in:hover {
+		background: color-mix(in srgb, currentColor 14%, transparent);
+	}
+	.vc-toolbar-avatar {
+		display: grid;
+		width: 28px;
+		height: 28px;
+		place-items: center;
+		overflow: hidden;
+		border-radius: 9999px;
+		background: var(--vc-avatar, #009aaa);
+		color: #fff;
+		font-size: 14px;
+		line-height: 1;
+	}
+	.vc-toolbar-avatar img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+</style>

package/dist/sveltekit/CommentTools.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    divider?: boolean;
+};
+declare const CommentTools: import("svelte").Component<$$ComponentProps, {}, "">;
+type CommentTools = ReturnType<typeof CommentTools>;
+export default CommentTools;

package/dist/sveltekit/Comments.svelte

@@ -0,0 +1,104 @@
+<!--
+  Adds comments to a SvelteKit app. Put it in the root layout, around the
+  pages, with the config the server's `commentsFromEnv` gives the layout's
+  `load`. With no config, comments are off: it renders only the pages, and the
+  browser never loads the comments' code.
+-->
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { CommentsClientConfig } from '../server/env.js';
+	import type { VisualComments, VisualCommentsOptions } from '../visual-comments.svelte.js';
+
+	export interface CommentsProps extends Omit<VisualCommentsOptions, 'endpoint' | 'auth' | 'page'> {
+		/** Where the comments and sign-in are, from `commentsFromEnv(...).client`. Null or undefined: comments are off. */
+		config: CommentsClientConfig | null | undefined;
+		/**
+		 * Which threads a page shows. `path` (default): each address's own, by
+		 * origin and path. `route`: every address of a route shares them, so
+		 * `/projects/1` and `/projects/2` show the threads of `/projects/[id]`.
+		 * A string: one set for every page. A function: a key for each address.
+		 */
+		page?: 'path' | 'route' | (string & {}) | ((url: URL) => string);
+		/** Signs in and out another way than the sign-in routes of `config.auth`. */
+		auth?: { signIn(): void; signOut(): void };
+		/** The comments while they run, to bind to. */
+		comments?: VisualComments;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page as current } from '$app/state';
+	import { setAppComments } from './context.js';
+
+	let { config, page = 'path', auth, comments = $bindable(), children, ...rest }: CommentsProps = $props();
+
+	// Started again only when where the comments are changes, not whenever `load` runs again.
+	const endpoint = $derived(config?.endpoint);
+	const authPath = $derived(config?.auth);
+
+	setAppComments({
+		get enabled() { return Boolean(endpoint); },
+		get current() { return comments; },
+		get viewer() { return config?.viewer; },
+		get auth() { return authPath ?? '/auth'; }
+	});
+
+	/** The page key of an address: its origin and path, without a trailing slash. */
+	function pathKey(url: URL) {
+		const path = url.pathname.length > 1 ? url.pathname.replace(/\/+$/, '') : url.pathname;
+		return `${url.origin}${path}`;
+	}
+
+	function pageOption(option: NonNullable<CommentsProps['page']>): VisualCommentsOptions['page'] {
+		if (option === 'path') return undefined;
+		// Read when the comments measure the page, by when the router has updated `page`.
+		if (option === 'route') return (url) => (current.route.id ? `${url.origin}${current.route.id}` : pathKey(url));
+		return option;
+	}
+
+	/** Goes to a thread on another page of the app with the router, so the comments stay open. */
+	function navigate(link: string) {
+		const url = new URL(link, location.href);
+		if (url.origin !== location.origin) return location.assign(link);
+		// The thread is already open; its link's `#vc=<id>` is only for addresses opened anew.
+		const hash = url.hash.slice(1).split('&').filter((part) => part && !part.startsWith('vc=')).join('&');
+		void goto(`${url.pathname}${url.search}${hash ? `#${hash}` : ''}`).then(() => comments?.relayout());
+	}
+
+	const options = $derived<VisualCommentsOptions>({
+		navigate,
+		...rest,
+		page: pageOption(page),
+		...(auth ? { auth } : {})
+	});
+
+	$effect(() => {
+		if (!endpoint) return;
+		const start = { endpoint, auth: authPath ?? '/auth' };
+		let stopped = false;
+		let instance: VisualComments | undefined;
+		// Loaded only when comments are on, so an app without them never downloads their code.
+		void import('../index.js').then(({ createVisualComments }) => {
+			if (stopped) return;
+			// Who the page was loaded for, so the account shows without waiting for the server.
+			instance = createVisualComments({ ...untrack(() => options), ...start, viewer: untrack(() => config?.viewer) });
+			comments = instance;
+		});
+		return () => {
+			stopped = true;
+			instance?.destroy();
+			if (untrack(() => comments) === instance) comments = undefined;
+		};
+	});
+
+	// Options the app changes later, e.g. a `show` that depends on its state.
+	$effect(() => {
+		const next = options;
+		untrack(() => comments)?.configure(next);
+	});
+</script>
+
+{@render children?.()}

package/dist/sveltekit/Comments.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { CommentsClientConfig } from '../server/env.js';
+import type { VisualComments, VisualCommentsOptions } from '../visual-comments.svelte.js';
+export interface CommentsProps extends Omit<VisualCommentsOptions, 'endpoint' | 'auth' | 'page'> {
+    /** Where the comments and sign-in are, from `commentsFromEnv(...).client`. Null or undefined: comments are off. */
+    config: CommentsClientConfig | null | undefined;
+    /**
+     * Which threads a page shows. `path` (default): each address's own, by
+     * origin and path. `route`: every address of a route shares them, so
+     * `/projects/1` and `/projects/2` show the threads of `/projects/[id]`.
+     * A string: one set for every page. A function: a key for each address.
+     */
+    page?: 'path' | 'route' | (string & {}) | ((url: URL) => string);
+    /** Signs in and out another way than the sign-in routes of `config.auth`. */
+    auth?: {
+        signIn(): void;
+        signOut(): void;
+    };
+    /** The comments while they run, to bind to. */
+    comments?: VisualComments;
+    children?: Snippet;
+}
+declare const Comments: import("svelte").Component<CommentsProps, {}, "comments">;
+type Comments = ReturnType<typeof Comments>;
+export default Comments;

package/dist/sveltekit/Toolbar.svelte

@@ -0,0 +1,64 @@
+<!--
+  A toolbar in the style of Figma's and Vercel's: a pill of dark glass,
+  centred at the bottom of the window (or the top, or wherever the app puts it
+  with `position="inline"`). The app's own tools go first, as its content,
+  e.g. `ToolbarButton`s; then, while comments are on, the comment button and
+  the account (who is here, and the viewer's avatar or Sign in). It replaces
+  the comments' own floating toolbar. With comments off and no tools of its
+  own, it is not shown.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import CommentTools from './CommentTools.svelte';
+	import { useComments } from './context.js';
+
+	let { position = 'bottom', label = 'Toolbar', class: className, children }: {
+		/** `bottom` or `top` of the window, centred; `inline` where the app places it. Default `bottom`. */
+		position?: 'bottom' | 'top' | 'inline';
+		/** The toolbar's name for screen readers. */
+		label?: string;
+		class?: string;
+		/** The app's own tools. */
+		children?: Snippet;
+	} = $props();
+
+	const comments = useComments();
+</script>
+
+{#if comments?.enabled || children}
+	<!-- Never takes comments itself, even over a surface. -->
+	<div role="toolbar" aria-label={label} data-vc-ignore class={['vc-toolbar', position, className]}>
+		{@render children?.()}
+		<CommentTools divider={Boolean(children)} />
+	</div>
+{/if}
+
+<style>
+	.vc-toolbar {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		border-radius: 9999px;
+		padding: 0.25rem;
+		background: var(--vc-island, rgb(50 50 50 / 0.72));
+		color: var(--vc-island-ink, #fff);
+		font: 13px var(--vc-font, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
+		box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
+		backdrop-filter: blur(5px);
+		-webkit-backdrop-filter: blur(5px);
+	}
+	.vc-toolbar.bottom,
+	.vc-toolbar.top {
+		position: fixed;
+		left: 50%;
+		translate: -50% 0;
+		/* Under the comments' own layer, so their cards and menus open over it. */
+		z-index: 2147483000;
+	}
+	.vc-toolbar.bottom {
+		bottom: 1rem;
+	}
+	.vc-toolbar.top {
+		top: 1rem;
+	}
+</style>

package/dist/sveltekit/Toolbar.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** `bottom` or `top` of the window, centred; `inline` where the app places it. Default `bottom`. */
+    position?: 'bottom' | 'top' | 'inline';
+    /** The toolbar's name for screen readers. */
+    label?: string;
+    class?: string;
+    /** The app's own tools. */
+    children?: Snippet;
+};
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;