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

package/dist/svelte/components/EditorConflictState.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import { CaughtFailureSchema, settle } from '@vibesdotdev/kernel';
+	import { surfaceReporterOn } from '../surface-reporter.js';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import type { WorkspaceDocumentSnapshot } from '@vibesdotdev/workspace-schemas/document';
+	import * as AlertDialog from '@vibesdotdev/kit/components/ui/alert-dialog';
+	import { Button, buttonVariants } from '@vibesdotdev/kit/components/ui/button';
+
+	let {
+		current: _current,
+		draft,
+		filename,
+		dirty = true,
+		focused = false,
+		onreload,
+		onstay,
+		busy = false
+	}: {
+		/** Retained for source compatibility; technical version data is not primary interface copy. */
+		current?: WorkspaceDocumentSnapshot;
+		draft: string;
+		filename?: string;
+		dirty?: boolean;
+		focused?: boolean;
+		onreload: () => void | Promise<void>;
+		onstay?: () => void;
+		busy?: boolean;
+	} = $props();
+
+	const conflictId = $props.id();
+	const reporter = surfaceReporterOn(getRuntimeSvelteContext(), 'editor.conflict');
+	let copyState = $state<'idle' | 'copying' | 'copied' | 'error'>('idle');
+	const resourceName = $derived(filename?.split('/').filter(Boolean).at(-1) ?? 'this file');
+
+	async function copyDraft() {
+		if (copyState === 'copying') return;
+		copyState = 'copying';
+		const copied = await settle(async () => {
+			if (!globalThis.navigator?.clipboard?.writeText) {
+				throw new Error('Clipboard access is unavailable.');
+			}
+			await globalThis.navigator.clipboard.writeText(draft);
+			copyState = 'copied';
+		});
+		if (!copied.ok) {
+			reporter.error('Editor draft copy failed', { cause: copied.cause });
+			// UI-visible failure: the clipboard API can be denied or absent; `copyState` shows the error.
+			copyState = 'error';
+		}
+	}
+</script>
+
+<section
+	class="conflict"
+	class:conflict--focused={focused}
+	aria-labelledby={`${conflictId}-title`}
+	data-editor-conflict
+>
+	<div class="conflict__copy" role="alert">
+		<strong id={`${conflictId}-title`}>This file changed elsewhere.</strong>
+		{#if copyState === 'copied'}
+			<p class="conflict__feedback" role="status">Your changes were copied.</p>
+		{:else if copyState === 'error'}
+			<p class="conflict__feedback conflict__feedback--error">
+				Couldn't copy automatically. Select your changes in the editor and copy them.
+			</p>
+		{:else}
+			<p>
+				{dirty
+					? 'Your changes are still here and have not been saved.'
+					: 'The text currently shown is still here. Nothing has been replaced.'}
+			</p>
+		{/if}
+	</div>
+
+	<div class="conflict__actions">
+		<Button
+			type="button"
+			variant="outline"
+			size="sm"
+			disabled={busy || copyState === 'copying'}
+			onclick={() => void copyDraft()}
+		>
+			{copyState === 'copying' ? 'Copying…' : copyState === 'copied' ? 'Copied' : 'Copy my changes'}
+		</Button>
+		<Button type="button" size="sm" disabled={busy} onclick={onstay}>Stay here</Button>
+
+		<AlertDialog.Root>
+			<AlertDialog.Trigger
+				disabled={busy}
+				class={buttonVariants({ variant: 'outline', size: 'sm' })}
+			>
+				Load newer version…
+			</AlertDialog.Trigger>
+			<AlertDialog.Content>
+				<AlertDialog.Header>
+					<AlertDialog.Title>Load the newer version of “{resourceName}”?</AlertDialog.Title>
+					<AlertDialog.Description>
+						{dirty
+							? 'This will replace your unsaved text in the editor. Copy your changes first if you may need them.'
+							: 'This will replace the text currently shown in the editor.'}
+					</AlertDialog.Description>
+				</AlertDialog.Header>
+				<AlertDialog.Footer>
+					<AlertDialog.Cancel disabled={busy}>Stay here</AlertDialog.Cancel>
+					<AlertDialog.Action
+						disabled={busy}
+						class={buttonVariants({ variant: 'destructive' })}
+						onclick={onreload}
+					>
+						Replace my changes
+					</AlertDialog.Action>
+				</AlertDialog.Footer>
+			</AlertDialog.Content>
+		</AlertDialog.Root>
+	</div>
+</section>
+
+<style>
+	.conflict {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0.75rem;
+		border: 1px solid color-mix(in oklab, var(--destructive) 35%, var(--border));
+		border-radius: 0.625rem;
+		background: color-mix(in oklab, var(--destructive) 7%, var(--background));
+	}
+
+	.conflict__copy {
+		min-width: 0;
+	}
+
+	.conflict strong {
+		font-size: 0.875rem;
+	}
+
+	.conflict p {
+		margin: 0.2rem 0 0;
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+		line-height: 1.45;
+	}
+
+	.conflict .conflict__feedback {
+		color: var(--foreground);
+		font-weight: 550;
+	}
+
+	.conflict .conflict__feedback--error {
+		color: var(--destructive);
+	}
+
+	.conflict__actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		flex: none;
+	}
+
+	.conflict--focused {
+		gap: var(--vibes-workbench-gap, 0.5rem);
+		padding: var(--vibes-workbench-chrome-inset, 0.5rem);
+		border-inline: 0;
+		border-radius: 0;
+	}
+
+	.conflict--focused .conflict__copy {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+	}
+
+	.conflict--focused .conflict__copy > p {
+		margin: 0;
+	}
+
+	.conflict--focused .conflict__feedback {
+		white-space: nowrap;
+	}
+
+	@container vibes-editor (max-width: 44rem) {
+		.conflict:not(.conflict--focused) {
+			align-items: stretch;
+			flex-direction: column;
+		}
+
+		.conflict--focused {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr);
+			gap: var(--vibes-workbench-gap, 0.5rem);
+		}
+
+		.conflict--focused .conflict__copy {
+			min-width: 0;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+
+		.conflict--focused .conflict__copy > p {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.conflict--focused .conflict__actions {
+			justify-content: flex-start;
+			flex-wrap: nowrap;
+			overflow-x: auto;
+			scrollbar-width: none;
+		}
+
+		.conflict--focused .conflict__actions::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	@container vibes-editor (max-width: 22rem) {
+		.conflict:not(.conflict--focused) .conflict__actions {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr);
+		}
+
+		.conflict:not(.conflict--focused) .conflict__actions :global(button) {
+			width: 100%;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { WorkspaceDocumentSnapshot } from '@vibesdotdev/workspace-schemas/document';
+type $$ComponentProps = {
+    /** Retained for source compatibility; technical version data is not primary interface copy. */
+    current?: WorkspaceDocumentSnapshot;
+    draft: string;
+    filename?: string;
+    dirty?: boolean;
+    focused?: boolean;
+    onreload: () => void | Promise<void>;
+    onstay?: () => void;
+    busy?: boolean;
+};
+declare const EditorConflictState: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorConflictState = ReturnType<typeof EditorConflictState>;
+export default EditorConflictState;
+//# sourceMappingURL=EditorConflictState.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorConflictState.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorConflictState.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAIxF,KAAK,gBAAgB,GAAI;IACxB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AA+FH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/EditorDocumentPane.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { CaughtFailureSchema, settle, type CaughtFailure } from '@vibesdotdev/kernel';
+	import { surfaceReporterOn } from '../surface-reporter.js';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import z from 'zod/v4';
+	import { CodeEditor } from '@vibesdotdev/kit/components/code';
+	import * as ContextMenu from '@vibesdotdev/kit/components/ui/context-menu';
+	import type { CommandPaletteResult } from '@vibesdotdev/command-palette/schemas';
+	import type { EditorController, EditorControllerState, EditorSelection } from '../controller.js';
+	import {
+		createEditorContextActionSearch,
+		executableEditorContextActions,
+		type EditorContextActionClient
+	} from '../editor-context-actions.js';
+
+	let {
+		controller,
+		state: editorState,
+		height,
+		ariaLabel,
+		contextActionClient,
+		oncontextactionerror
+	}: {
+		controller: EditorController;
+		state: EditorControllerState;
+		height?: string | number;
+		ariaLabel?: string;
+		contextActionClient?: EditorContextActionClient;
+		oncontextactionerror?: (error: CaughtFailure) => void;
+	} = $props();
+
+	let contextActions = $state<CommandPaletteResult[]>([]);
+	let contextActionsLoading = $state(false);
+	let contextActionsError = $state<string | undefined>();
+	let contextRequestId = 0;
+	const reporter = surfaceReporterOn(getRuntimeSvelteContext(), 'editor.document-pane');
+	const heightSchema = z.union([z.number().transform((value) => value + 'px'), z.string()]);
+	function reportFailure(cause: CaughtFailure) {
+		reporter.error('Editor context action failed', { cause });
+		oncontextactionerror?.(cause);
+	}
+
+	const accessibleName = $derived(ariaLabel ?? `Vibes Editor — ${editorState.base.ref.path}`);
+	const editorHeight = $derived(
+		height ?? (editorState.variant === 'focused' ? 'min(68vh, 760px)' : '360px')
+	);
+	const paneHeight = $derived(
+		heightSchema.parse(editorHeight)
+	);
+
+	async function loadContextActions(): Promise<void> {
+		if (!contextActionClient) return;
+		const requestId = ++contextRequestId;
+		contextActionsLoading = true;
+		contextActionsError = undefined;
+		const result = await settle(() => contextActionClient!.search(createEditorContextActionSearch(editorState)));
+		if (result.ok) {
+			if (requestId === contextRequestId) contextActions = executableEditorContextActions(result.value);
+		} else {
+			if (requestId === contextRequestId) {
+				contextActions = [];
+				contextActionsError = 'Actions are unavailable right now.';
+			}
+			reportFailure(result.cause);
+		}
+		if (requestId === contextRequestId) contextActionsLoading = false;
+	}
+
+	async function executeContextAction(result: CommandPaletteResult): Promise<void> {
+		if (result.action.type !== 'execute') return;
+		const execution = await settle(() => result.action.type === 'execute' ? result.action.handler() : undefined);
+		if (!execution.ok) reportFailure(execution.cause);
+	}
+</script>
+
+{#snippet documentPlane()}
+	<div
+		class="document-pane"
+		class:document-pane--focused={editorState.focused && editorState.variant !== 'focused'}
+		class:document-pane--workbench={editorState.variant === 'focused'}
+		style:height={paneHeight}
+		data-editor-variant={editorState.variant}
+		data-editor-read-only={editorState.readOnly}
+		onfocusin={() => controller.setFocused(true)}
+		onfocusout={(event) => {
+			const related = event.relatedTarget;
+			if (!(related instanceof Node) || !event.currentTarget.contains(related)) {
+				controller.setFocused(false);
+			}
+		}}
+	>
+		<CodeEditor
+			surface={editorState.variant === 'focused' ? 'workbench' : 'field'}
+			code={editorState.draft}
+			onCodeChange={(value: string) => controller.setDraft(value)}
+			onSelectionChange={(selection: EditorSelection) => controller.setSelection(selection)}
+			filename={editorState.base.ref.path}
+			language="auto"
+			readOnly={editorState.readOnly}
+			editorOptions={contextActionClient ? { contextmenu: false } : undefined}
+			modelUri={editorState.resourceUri}
+			transactionId={editorState.transactionId}
+			ariaLabel={accessibleName}
+			showFullscreen={!editorState.narrow}
+			fullscreenTitle={accessibleName}
+			deferMount={true}
+			unmountOnHide={true}
+			minHeight={editorState.variant === 'focused' ? '18rem' : editorHeight}
+			height={editorHeight}
+			fill={editorState.variant === 'focused'}
+			data-editor-document={editorState.transactionId}
+		/>
+	</div>
+{/snippet}
+
+{#if contextActionClient}
+	<ContextMenu.Root>
+		<ContextMenu.Trigger class="document-context-trigger" oncontextmenu={loadContextActions}>
+			{@render documentPlane()}
+		</ContextMenu.Trigger>
+		<ContextMenu.Content class="min-w-52">
+			{#if contextActionsLoading}
+				<ContextMenu.Item disabled>Loading actions…</ContextMenu.Item>
+			{:else if contextActionsError}
+				<ContextMenu.Item disabled>{contextActionsError}</ContextMenu.Item>
+			{:else if contextActions.length === 0}
+				<ContextMenu.Item disabled>No actions available</ContextMenu.Item>
+			{:else}
+				{#each contextActions as action (action.sourceId + ':' + action.id)}
+					<ContextMenu.Item
+						data-editor-context-action={action.id}
+						onSelect={() => void executeContextAction(action)}
+					>
+						<span class="context-action-title">{action.title}</span>
+						{#if action.shortcut}
+							<ContextMenu.Shortcut>{action.shortcut}</ContextMenu.Shortcut>
+						{/if}
+					</ContextMenu.Item>
+				{/each}
+			{/if}
+		</ContextMenu.Content>
+	</ContextMenu.Root>
+{:else}
+	{@render documentPlane()}
+{/if}
+
+<style>
+	.document-pane {
+		min-width: 0;
+		min-height: 0;
+		border-radius: 0.5rem;
+		overflow: hidden;
+	}
+
+	.document-pane--focused {
+		box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 18%, transparent);
+	}
+
+	.document-pane--workbench {
+		border-radius: 0;
+	}
+
+	:global(.document-context-trigger) {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.context-action-title {
+		min-width: 0;
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import { type CaughtFailure } from '@vibesdotdev/kernel';
+import type { EditorController, EditorControllerState } from '../controller.ts';
+import { type EditorContextActionClient } from '../editor-context-actions.ts';
+type $$ComponentProps = {
+    controller: EditorController;
+    state: EditorControllerState;
+    height?: string | number;
+    ariaLabel?: string;
+    contextActionClient?: EditorContextActionClient;
+    oncontextactionerror?: (error: CaughtFailure) => void;
+};
+declare const EditorDocumentPane: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorDocumentPane = ReturnType<typeof EditorDocumentPane>;
+export default EditorDocumentPane;
+//# sourceMappingURL=EditorDocumentPane.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorDocumentPane.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorDocumentPane.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAOtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAmB,MAAM,kBAAkB,CAAC;AACjG,OAAO,EAGL,KAAK,yBAAyB,EAC9B,MAAM,8BAA8B,CAAC;AAEtC,KAAK,gBAAgB,GAAI;IACxB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACtD,CAAC;AA4GH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}