@vibesdotdev/editor 0.0.0-stage → 1.0.0-rc.2

package/dist/svelte/components/VibesEditor.svelte

@@ -0,0 +1,612 @@
+<script lang="ts">
+	import { CaughtFailureSchema, settleNow, settle, type CaughtFailure } from '@vibesdotdev/kernel';
+	import { tick, untrack } from 'svelte';
+	import type { EditorClient, EditorContextRef, EditorTransaction } from '@vibesdotdev/editor';
+	import type { WorkspaceDocumentRef } from '@vibesdotdev/workspace-schemas/document';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import type { EditorContextActionClient } from '../editor-context-actions.js';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Skeleton } from '@vibesdotdev/kit/components/ui/skeleton';
+	import {
+		createEditorController,
+		invokeEditorSurfaceObserver,
+		type EditorController,
+		type EditorControllerState,
+		type EditorSurfaceVariant
+	} from '../controller.js';
+	import EditorConflictState from './EditorConflictState.svelte';
+	import EditorDocumentPane from './EditorDocumentPane.svelte';
+	import EditorResourceTrail from './EditorResourceTrail.svelte';
+	import EditorUnsupportedState from './EditorUnsupportedState.svelte';
+	import EditorAgentSpotlight from './EditorAgentSpotlight.svelte';
+	import EditorProposalReview from './EditorProposalReview.svelte';
+	import EditorPreviewPane from './EditorPreviewPane.svelte';
+	import { surfaceReporterOn } from '../surface-reporter.js';
+
+	let {
+		controller: providedController,
+		transaction,
+		client,
+		context,
+		document,
+		documentId,
+		variant = 'embedded',
+		reviewOnly = false,
+		narrow = false,
+		height,
+		ariaLabel,
+		class: className = '',
+		oncontrollerready,
+		onstatechange,
+		onoperationerror,
+		contextActionClient
+	}: {
+		controller?: EditorController;
+		transaction?: EditorTransaction;
+		client?: EditorClient;
+		context?: EditorContextRef;
+		document?: WorkspaceDocumentRef;
+		documentId?: string;
+		variant?: EditorSurfaceVariant;
+		reviewOnly?: boolean;
+		narrow?: boolean;
+		height?: string | number;
+		ariaLabel?: string;
+		class?: string;
+		oncontrollerready?: (controller: EditorController) => void;
+		onstatechange?: (state: EditorControllerState) => void;
+		onoperationerror?: (error: CaughtFailure) => void;
+		contextActionClient?: EditorContextActionClient;
+	} = $props();
+
+	// Captured at component init: Svelte context is unavailable after mount.
+	const runtimeStore = getRuntimeSvelteContext();
+	const surfaceReporter = $derived(surfaceReporterOn(client ? { load: () => Promise.resolve(client.runtime) } : runtimeStore, 'editor.svelte'));
+
+	const surfaceId = $props.id();
+	let activeController = $state<EditorController | undefined>();
+	let surfaceState = $state<EditorControllerState | undefined>();
+	let openError = $state<string | undefined>();
+	let surfaceElement = $state<HTMLElement | null>(null);
+	let showProposals = $state<boolean>(true);
+	const pendingProposals = $derived(
+		surfaceState?.proposals.filter((p) => p.status === 'pending') ?? []
+	);
+	const surfaceLabel = $derived(
+		ariaLabel ?? (surfaceState ? `Vibes Editor — ${surfaceState.base.ref.path}` : 'Vibes Editor')
+	);
+	// Host layout updates replace spread props and reference objects. Reopen only
+	// when the document's source or reference values actually change.
+	const controllerSource = $derived(providedController);
+	const transactionSource = $derived(transaction);
+	const clientSource = $derived(client);
+	const documentRequest = $derived(JSON.stringify([
+		context?.workspaceSessionId, context?.projectId, context?.developerSessionId,
+		context?.codeSessionId, document?.workspaceSessionId, document?.path, documentId
+	]));
+
+	$effect(() => {
+		const providedController = controllerSource;
+		const transaction = transactionSource;
+		const client = clientSource;
+		// Subscribe to scalar request identity, not newly allocated reference props.
+		void documentRequest;
+		const request = untrack(() => ({ context, document, documentId }));
+		const { context: requestedContext, document: requestedDocument, documentId: requestedDocumentId } = request;
+		let cancelled = false;
+		let surfaceController: EditorController | undefined;
+		let ownedTransaction: EditorTransaction | undefined;
+		let openAbort: AbortController | undefined;
+		openError = undefined;
+		activeController = undefined;
+
+		function accept(next: EditorController) {
+			if (cancelled) {
+				next.dispose();
+				return;
+			}
+			surfaceController = next;
+			activeController = next;
+			notifyControllerReady(next);
+		}
+
+		const hasClient = client !== undefined;
+		const hasDocument = requestedDocument !== undefined;
+		if (hasClient !== hasDocument) {
+			openError = 'This editor is missing its file source. Open the file again to continue.';
+			return;
+		}
+		const ownershipForms =
+			Number(providedController !== undefined) +
+			Number(transaction !== undefined) +
+			Number(hasClient && hasDocument);
+		if (ownershipForms !== 1) {
+			openError = 'This editor has an invalid configuration. Provide one document source.';
+			return;
+		}
+
+		if (providedController) {
+			if (providedController.state().disposed) {
+				openError = 'This editor is closed. Open the file again to continue.';
+				return;
+			}
+			activeController = providedController;
+			notifyControllerReady(providedController);
+			return () => {
+				cancelled = true;
+				activeController = undefined;
+			};
+		}
+
+		if (transaction) {
+			const created = settleNow(() => accept(createEditorController(transaction, { reporter: surfaceReporter })));
+			if (!created.ok) {
+				openError = 'This file could not be opened for editing.';
+				notifyOperationError(created.cause);
+			}
+		} else if (client && requestedDocument) {
+			const resolvedContext = requestedContext ?? { workspaceSessionId: requestedDocument.workspaceSessionId };
+			const opening = new AbortController();
+			openAbort = opening;
+			void settle(() => client.open({
+				context: resolvedContext, document: requestedDocument, documentId: requestedDocumentId
+			}, opening.signal)).then((opened) => {
+				if (!opened.ok) {
+					if (!cancelled) {
+						openError = 'This file could not be opened for editing.';
+						notifyOperationError(opened.cause);
+					} else surfaceReporter.error('Editor open ended after cancellation', { cause: opened.cause });
+					return;
+				}
+				if (cancelled) { opened.value.dispose(); return; }
+				ownedTransaction = opened.value;
+				const created = settleNow(() => accept(createEditorController(opened.value, { reporter: surfaceReporter })));
+				if (!created.ok) {
+					opened.value.dispose();
+					ownedTransaction = undefined;
+					openError = 'This file could not be opened for editing.';
+					notifyOperationError(created.cause);
+				}
+			});
+		}
+
+		return () => {
+			cancelled = true;
+			openAbort?.abort();
+			surfaceController?.dispose();
+			ownedTransaction?.dispose();
+			activeController = undefined;
+		};
+	});
+
+	$effect(() => {
+		if (!activeController) return;
+		if (activeController.state().disposed) return;
+		activeController.setVariant(variant);
+		activeController.setReviewMode({ reviewOnly, narrow });
+	});
+
+	$effect(() => {
+		const current = activeController;
+		if (!current) {
+			surfaceState = undefined;
+			return;
+		}
+		if (current.state().disposed) {
+			surfaceState = current.state();
+			return;
+		}
+		return current.subscribe((next) => {
+			surfaceState = next;
+			notifyStateChange(next);
+		});
+	});
+
+	const publicationAvailable = $derived(
+		Boolean(
+			surfaceState &&
+			!surfaceState.readOnly &&
+			surfaceState.dirty &&
+			!surfaceState.conflict &&
+			surfaceState.phase !== 'publishing' &&
+			surfaceState.phase !== 'reloading'
+		)
+	);
+
+	function notifyControllerReady(readyController: EditorController) {
+		untrack(() =>
+			invokeEditorSurfaceObserver(oncontrollerready, readyController, {
+				boundary: 'host.controller-ready',
+				transactionId: readyController.state().transactionId,
+				resourceUri: readyController.state().resourceUri,
+				phase: readyController.state().phase
+			}, surfaceReporter)
+		);
+	}
+
+	function notifyStateChange(next: EditorControllerState) {
+		untrack(() =>
+			invokeEditorSurfaceObserver(onstatechange, next, {
+				boundary: 'host.state-change',
+				transactionId: next.transactionId,
+				resourceUri: next.resourceUri,
+				phase: next.phase
+			}, surfaceReporter)
+		);
+	}
+
+	function notifyOperationError(error: CaughtFailure) {
+		surfaceReporter.error('Editor surface operation failed', { cause: error });
+		untrack(() => {
+			const current = activeController?.state();
+			invokeEditorSurfaceObserver(onoperationerror, error, {
+				boundary: 'host.operation-error',
+				transactionId: current?.transactionId,
+				resourceUri: current?.resourceUri,
+				phase: current?.phase
+			}, surfaceReporter);
+		});
+	}
+
+	async function publish() {
+		const controller = activeController;
+		if (!controller || !publicationAvailable) return;
+		const result = await settle(() => controller.publish());
+		if (!result.ok) notifyOperationError(result.cause);
+	}
+
+	async function reload() {
+		const controller = activeController;
+		if (!controller || !surfaceState?.conflict) return;
+		const result = await settle(() => controller.reload());
+		if (!result.ok) { notifyOperationError(result.cause); return; }
+		await tick();
+		focusDocument();
+	}
+
+	function focusDocument() {
+		const editorInput =
+			surfaceElement?.querySelector<HTMLElement>('.monaco-editor textarea') ??
+			surfaceElement?.querySelector<HTMLElement>('[data-editor-document] [role="textbox"]');
+		(editorInput ?? surfaceElement)?.focus();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {
+			event.preventDefault();
+			void publish();
+		}
+	}
+
+	function localKeyboardShortcuts(node: HTMLElement) {
+		node.addEventListener('keydown', handleKeydown);
+		return {
+			destroy() {
+				node.removeEventListener('keydown', handleKeydown);
+			}
+		};
+	}
+</script>
+
+<section
+	bind:this={surfaceElement}
+	id={surfaceId}
+	class="vibes-editor {className}"
+	class:vibes-editor--embedded={(surfaceState?.variant ?? variant) === 'embedded'}
+	class:vibes-editor--focused={(surfaceState?.variant ?? variant) === 'focused'}
+	aria-labelledby={`${surfaceId}-label`}
+	aria-busy={(!surfaceState && !openError) ||
+		surfaceState?.phase === 'publishing' ||
+		surfaceState?.phase === 'reloading'}
+	tabindex="-1"
+	data-editor-transaction={surfaceState?.transactionId}
+	data-editor-state={surfaceState?.phase ?? (openError ? 'unavailable' : 'opening')}
+	data-editor-variant={surfaceState?.variant ?? variant}
+	use:localKeyboardShortcuts
+>
+	<h2 id={`${surfaceId}-label`} class="vibes-editor__a11y-label">{surfaceLabel}</h2>
+	{#if openError}
+		<EditorUnsupportedState title="Editor unavailable" reason={openError} code="open-unavailable" />
+	{:else if !surfaceState || !activeController}
+		<div class="vibes-editor__loading" aria-label="Opening editor">
+			<Skeleton class="h-5 w-2/3" />
+			<Skeleton class="h-4 w-full" />
+			<Skeleton class="h-64 w-full" />
+		</div>
+	{:else if surfaceState.disposed}
+		<EditorUnsupportedState
+			title="Editor closed"
+			reason="Open the file again to continue."
+			code="transaction-disposed"
+		/>
+	{:else}
+		<header class="vibes-editor__header">
+			<EditorResourceTrail state={surfaceState} statusId={`${surfaceId}-status`} />
+			<div class="vibes-editor__header-actions">
+				{#if pendingProposals.length > 0}
+					<Button
+						type="button"
+						variant={showProposals ? 'secondary' : 'outline'}
+						size="sm"
+						class="vibes-editor__toolbar-btn"
+						onclick={() => (showProposals = !showProposals)}
+						aria-label={`Toggle proposals review (${pendingProposals.length} pending)`}
+					>
+						Proposals ({pendingProposals.length})
+					</Button>
+				{/if}
+				<Button
+					type="button"
+					variant={surfaceState.previewState.open ? 'secondary' : 'ghost'}
+					size="sm"
+					class="vibes-editor__toolbar-btn"
+					onclick={() => activeController?.togglePreview()}
+					aria-label="Toggle live preview"
+					title="Toggle live preview"
+				>
+					Preview
+				</Button>
+				<Button
+					id={`${surfaceId}-save`}
+					type="button"
+					variant={surfaceState.variant === 'focused' ? 'ghost' : 'default'}
+					size="sm"
+					class={surfaceState.variant === 'focused' ? 'vibes-editor__save--focused' : undefined}
+					disabled={!publicationAvailable}
+					aria-label={`Save ${surfaceState.base.ref.path}`}
+					aria-describedby={`${surfaceId}-status`}
+					title="Save (Mod+S)"
+					onclick={publish}
+				>
+					Save
+				</Button>
+			</div>
+		</header>
+
+		<div class="vibes-editor__notices">
+			{#if surfaceState.agentPresences.length > 0}
+				<EditorAgentSpotlight
+					presences={surfaceState.agentPresences}
+					followAgent={surfaceState.followAgent}
+					ontogglefollow={(follow) => activeController?.setFollowAgent(follow)}
+				/>
+			{/if}
+
+			{#if pendingProposals.length > 0 && showProposals}
+				<EditorProposalReview
+					proposals={surfaceState.proposals}
+					onapprove={async (id) => {
+      const result = await settle(async () => { await activeController?.approveProposal(id); });
+      if (!result.ok) notifyOperationError(result.cause);
+     }}
+     onreject={(id, reason) => {
+      const result = settleNow(() => activeController?.rejectProposal(id, reason));
+      if (!result.ok) notifyOperationError(result.cause);
+     }}
+				/>
+			{/if}
+
+			{#if surfaceState.readOnlyReason}
+				<EditorUnsupportedState
+					title="View only"
+					reason={surfaceState.narrow
+						? 'Editing is available in a larger window. You can still review and copy this file.'
+						: 'You can review and copy this file, but changes cannot be saved here.'}
+					code={surfaceState.narrow ? 'narrow-review' : 'read-only'}
+				/>
+			{/if}
+
+			{#if surfaceState.conflict}
+				<EditorConflictState
+					current={surfaceState.conflict}
+					draft={surfaceState.draft}
+					filename={surfaceState.base.ref.path}
+					dirty={surfaceState.dirty}
+					focused={surfaceState.variant === 'focused'}
+					onreload={reload}
+					onstay={focusDocument}
+					busy={surfaceState.phase === 'reloading'}
+				/>
+			{/if}
+
+			{#if surfaceState.error}
+				<EditorUnsupportedState
+					title={surfaceState.conflict
+						? "Couldn't load the newer version"
+						: surfaceState.dirty
+							? "Couldn't save"
+							: 'Editing unavailable'}
+					reason={surfaceState.conflict || surfaceState.dirty
+						? 'Your changes are still here. Check your connection, then try again.'
+						: 'This file is not available right now. Your current view has not been replaced.'}
+					code="operation-error"
+				/>
+			{/if}
+		</div>
+
+		<div class="vibes-editor__main" class:vibes-editor__main--split={surfaceState.previewState.open}>
+			<div class="vibes-editor__document">
+				<EditorDocumentPane
+					controller={activeController}
+					state={surfaceState}
+					{height}
+					ariaLabel={`${surfaceLabel} document`}
+					{contextActionClient}
+					oncontextactionerror={notifyOperationError}
+				/>
+			</div>
+			{#if surfaceState.previewState.open}
+				<div class="vibes-editor__preview">
+					<EditorPreviewPane
+						previewState={surfaceState.previewState}
+						onmodechange={(mode) => activeController?.togglePreview(true, mode)}
+						onurlchange={(url) =>
+							activeController?.togglePreview(true, surfaceState?.previewState.mode, url)}
+						onclose={() => activeController?.togglePreview(false)}
+					/>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</section>
+
+<style>
+	.vibes-editor {
+		container-name: vibes-editor;
+		container-type: inline-size;
+		display: grid;
+		width: 100%;
+		min-width: 0;
+		box-sizing: border-box;
+		background: var(--background);
+		color: var(--foreground);
+	}
+
+	.vibes-editor--embedded {
+		gap: 0.75rem;
+		padding: 0.75rem;
+		border: 1px solid var(--border);
+		border-radius: 0.75rem;
+	}
+
+	.vibes-editor--focused {
+		grid-template-rows: auto auto minmax(0, 1fr);
+		gap: 0;
+		height: 100%;
+		min-height: 0;
+		padding: 0;
+		border: 0;
+		border-radius: 0;
+	}
+
+	.vibes-editor__a11y-label {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.vibes-editor__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		min-width: 0;
+		gap: 0.75rem;
+	}
+
+	.vibes-editor__header :global(.resource-trail) {
+		min-width: 0;
+		flex: 1;
+	}
+
+	.vibes-editor--focused .vibes-editor__header {
+		min-height: var(--vibes-workbench-chrome-height, 2rem);
+		padding-inline: var(--vibes-workbench-chrome-inset, 0.5rem);
+		border-bottom: 1px solid var(--vibes-workbench-hairline, var(--border));
+		background: color-mix(in oklab, var(--card) 72%, var(--background));
+	}
+
+	.vibes-editor__save--focused {
+		height: 1.75rem;
+		flex: none;
+		padding-inline: 0.625rem;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+	}
+
+	.vibes-editor__save--focused:not(:disabled) {
+		color: var(--foreground);
+	}
+
+	.vibes-editor__loading {
+		display: grid;
+		gap: 0.65rem;
+	}
+
+	.vibes-editor--focused .vibes-editor__loading {
+		padding: 0.75rem;
+	}
+
+	.vibes-editor__notices {
+		display: grid;
+		gap: 0.5rem;
+	}
+
+	.vibes-editor__notices:empty {
+		display: none;
+	}
+
+	.vibes-editor__header-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		flex-shrink: 0;
+		min-width: 0;
+	}
+
+	.vibes-editor__toolbar-btn {
+		height: 1.75rem;
+		padding-inline: 0.5rem;
+		font-size: 0.75rem;
+	}
+
+	.vibes-editor__document {
+		min-width: 0;
+		min-height: 0;
+		height: 100%;
+	}
+
+	.vibes-editor__main {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		min-width: 0;
+		min-height: 0;
+		height: 100%;
+	}
+
+	.vibes-editor__main--split {
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+	}
+
+	.vibes-editor__preview {
+		min-width: 0;
+		min-height: 0;
+		height: 100%;
+	}
+
+	.vibes-editor--focused .vibes-editor__header {
+		grid-row: 1;
+	}
+
+	.vibes-editor--focused .vibes-editor__notices {
+		grid-row: 2;
+	}
+
+	.vibes-editor--focused .vibes-editor__main {
+		grid-row: 3;
+		height: 100%;
+	}
+
+	.vibes-editor--focused :global([data-editor-unsupported]) {
+		border-inline: 0;
+		border-radius: 0;
+	}
+
+	@container vibes-editor (max-width: 22rem) {
+		.vibes-editor--embedded .vibes-editor__header {
+			align-items: stretch;
+			flex-direction: column;
+		}
+
+		.vibes-editor--embedded .vibes-editor__header :global(button) {
+			align-self: stretch;
+			width: 100%;
+		}
+	}
+</style>

package/dist/svelte/components/VibesEditor.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type CaughtFailure } from '@vibesdotdev/kernel';
+import type { EditorClient, EditorContextRef, EditorTransaction } from '@vibesdotdev/editor';
+import type { WorkspaceDocumentRef } from '@vibesdotdev/workspace-schemas/document';
+import type { EditorContextActionClient } from '../editor-context-actions.ts';
+import { type EditorController, type EditorControllerState, type EditorSurfaceVariant } from '../controller.ts';
+type $$ComponentProps = {
+    controller?: EditorController;
+    transaction?: EditorTransaction;
+    client?: EditorClient;
+    context?: EditorContextRef;
+    document?: WorkspaceDocumentRef;
+    documentId?: string;
+    variant?: EditorSurfaceVariant;
+    reviewOnly?: boolean;
+    narrow?: boolean;
+    height?: string | number;
+    ariaLabel?: string;
+    class?: string;
+    oncontrollerready?: (controller: EditorController) => void;
+    onstatechange?: (state: EditorControllerState) => void;
+    onoperationerror?: (error: CaughtFailure) => void;
+    contextActionClient?: EditorContextActionClient;
+};
+declare const VibesEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type VibesEditor = ReturnType<typeof VibesEditor>;
+export default VibesEditor;
+//# sourceMappingURL=VibesEditor.svelte.d.ts.map

package/dist/svelte/components/VibesEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VibesEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/VibesEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEjG,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAEpF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAG9E,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,MAAM,kBAAkB,CAAC;AAU1B,KAAK,gBAAgB,GAAI;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;CAChD,CAAC;AAkWH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}