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

package/dist/svelte/components/EditorResourceTrail.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import type { EditorControllerState } from '../controller.js';
+	import { editorHumanStatus } from '../editor-status.js';
+
+	let {
+		state,
+		statusId
+	}: {
+		state: EditorControllerState;
+		statusId?: string;
+	} = $props();
+
+	const path = $derived(state.base.ref.path || '/');
+	const pathParts = $derived(path.split('/').filter(Boolean));
+	const resourceName = $derived(pathParts.at(-1) ?? 'Untitled');
+	const resourceLocation = $derived(
+		pathParts.length > 1 ? pathParts.slice(0, -1).join('/') : 'Home'
+	);
+	const status = $derived(editorHumanStatus(state));
+	const statusVariant = $derived(
+		status.tone === 'danger' ? 'destructive' : status.tone === 'attention' ? 'secondary' : 'outline'
+	);
+</script>
+
+<div class="resource-trail">
+	<div class="resource-trail__identity" title={path}>
+		<strong class="resource-trail__name">{resourceName}</strong>
+		{#if state.variant !== 'focused' || resourceLocation !== 'Home'}
+			<span class="resource-trail__path">{resourceLocation}</span>
+		{/if}
+	</div>
+	{#if state.variant === 'focused'}
+		<span
+			id={statusId}
+			class="resource-trail__status"
+			role="status"
+			aria-live={status.label === 'Newer version available' ? 'off' : 'polite'}
+			aria-label={`Document status: ${status.label}`}
+			data-editor-human-status={status.label}
+			data-status-tone={status.tone}
+		>
+			<span class="resource-trail__status-dot" aria-hidden="true"></span>
+			{status.label}
+		</span>
+	{:else}
+		<Badge
+			id={statusId}
+			variant={statusVariant}
+			role="status"
+			aria-live={status.label === 'Newer version available' ? 'off' : 'polite'}
+			aria-label={`Document status: ${status.label}`}
+			data-editor-human-status={status.label}
+		>
+			{status.label}
+		</Badge>
+	{/if}
+</div>
+
+<style>
+	.resource-trail {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		min-width: 0;
+	}
+
+	.resource-trail__identity {
+		display: grid;
+		gap: 0.1rem;
+		min-width: 0;
+	}
+
+	.resource-trail__name,
+	.resource-trail__path {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.resource-trail__name {
+		font-size: 0.875rem;
+		font-weight: 650;
+		line-height: 1.35;
+	}
+
+	.resource-trail__path {
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		line-height: 1.35;
+	}
+
+	.resource-trail__status {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		flex: none;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+	}
+
+	.resource-trail__status-dot {
+		width: 0.375rem;
+		height: 0.375rem;
+		border-radius: 999px;
+		background: currentColor;
+		opacity: 0.62;
+	}
+
+	.resource-trail__status[data-status-tone='attention'] {
+		color: var(--warning, var(--primary));
+	}
+
+	.resource-trail__status[data-status-tone='danger'] {
+		color: var(--destructive);
+	}
+
+	:global(.vibes-editor--focused) .resource-trail__identity {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+	}
+
+	:global(.vibes-editor--focused) .resource-trail__name {
+		font-size: 0.8125rem;
+	}
+
+	:global(.vibes-editor--focused) .resource-trail__path {
+		font-size: 0.6875rem;
+	}
+
+	@container vibes-editor (max-width: 22rem) {
+		:global(.vibes-editor--embedded) .resource-trail {
+			align-items: stretch;
+			flex-direction: column;
+		}
+
+		:global(.vibes-editor--embedded) .resource-trail :global([data-slot='badge']) {
+			align-self: flex-start;
+		}
+
+		:global(.vibes-editor--focused) .resource-trail__path {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { EditorControllerState } from '../controller.ts';
+type $$ComponentProps = {
+    state: EditorControllerState;
+    statusId?: string;
+};
+declare const EditorResourceTrail: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorResourceTrail = ReturnType<typeof EditorResourceTrail>;
+export default EditorResourceTrail;
+//# sourceMappingURL=EditorResourceTrail.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorResourceTrail.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorResourceTrail.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7D,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AA8CH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/EditorUnsupportedState.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Alert, AlertDescription, AlertTitle } from '@vibesdotdev/kit/components/ui/alert';
+
+	let {
+		title = 'Editing unavailable',
+		reason,
+		code
+	}: { title?: string; reason: string; code?: string } = $props();
+</script>
+
+<Alert data-editor-unsupported={code ?? 'unavailable'}>
+	<AlertTitle>{title}</AlertTitle>
+	<AlertDescription>{reason}</AlertDescription>
+</Alert>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    title?: string;
+    reason: string;
+    code?: string;
+};
+declare const EditorUnsupportedState: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorUnsupportedState = ReturnType<typeof EditorUnsupportedState>;
+export default EditorUnsupportedState;
+//# sourceMappingURL=EditorUnsupportedState.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorUnsupportedState.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorUnsupportedState.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAkB5E,QAAA,MAAM,sBAAsB,sDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/EditorWorkspace.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { FilesystemWorkspace } from '@vibesdotdev/filesystem/svelte';
+	import { settle, type VibesRuntime } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import {
+		isWorkspaceEnvironmentUnboundError,
+		resolveWorkspaceEnvironment
+	} from '@vibesdotdev/workspace/environment';
+	import type { ComponentProps } from 'svelte';
+	import { surfaceReporterOn } from '../surface-reporter.js';
+	import type { EditorControllerState } from '../controller.js';
+	import type { EditorClient } from '@vibesdotdev/editor';
+	import { editorWorkspaceEditorSurface } from '../editor-workspace.js';
+
+	type Props = Omit<
+		ComponentProps<typeof FilesystemWorkspace<EditorControllerState, EditorClient>>,
+		'mode' | 'editorSurface' | 'title'
+	> & {
+		title?: string;
+	};
+	type WorkspaceAuthorityState =
+		| { phase: 'loading' }
+		| { phase: 'unbound' }
+		| { phase: 'failed'; reason: 'unavailable' | 'session-mismatch' }
+		| { phase: 'ready'; sessionId: string; runtime: VibesRuntime };
+
+	let {
+		title = 'Code',
+		runtime: providedRuntime,
+		workspaceSessionId: providedWorkspaceSessionId,
+		...workspaceProps
+	}: Props = $props();
+	let workspaceAuthority = $state<WorkspaceAuthorityState>({ phase: 'loading' });
+	let mounted = $state<{
+		runtime: VibesRuntime;
+		sessionId: string;
+		props: typeof workspaceProps;
+	} | null>(null);
+	// Spread props can invalidate together when shell geometry/focus changes.
+	// Only a different session identity should replace the live document owner.
+	const requestedSessionId = $derived(providedWorkspaceSessionId?.trim());
+	// The runtime is the `runtime` prop or the host's Svelte runtime context, never an ambient one.
+	const runtimeStore = getRuntimeSvelteContext();
+
+	const runtime = $derived(providedRuntime ?? runtimeStore.runtime);
+
+	$effect(() => {
+		const sessionId = requestedSessionId;
+		const requestedRuntime = runtime;
+		const reporter = surfaceReporterOn({ load: () => requestedRuntime ? Promise.resolve(requestedRuntime) : runtimeStore.load() }, 'editor.workspace');
+		let cancelled = false;
+		workspaceAuthority = { phase: 'loading' };
+		if (!requestedRuntime) {
+			void settle(() => runtimeStore.load()).then((loaded) => {
+				if (!loaded.ok) {
+					reporter.error('Editor workspace runtime failed', { cause: loaded.cause });
+					if (!cancelled) workspaceAuthority = { phase: 'failed', reason: 'unavailable' };
+				}
+			});
+			return () => { cancelled = true; };
+		}
+		void settle(() => resolveWorkspaceEnvironment(requestedRuntime)).then((resolved) => {
+			if (!resolved.ok) {
+				reporter.error('Editor workspace authority failed', { cause: resolved.cause });
+				if (!cancelled) workspaceAuthority = isWorkspaceEnvironmentUnboundError(resolved.cause)
+					? { phase: 'unbound' } : { phase: 'failed', reason: 'unavailable' };
+				return;
+			}
+			if (cancelled) return;
+			const environment = resolved.value;
+			workspaceAuthority = sessionId && sessionId !== environment.sessionId
+				? { phase: 'failed', reason: 'session-mismatch' }
+				: { phase: 'ready', sessionId: environment.sessionId, runtime: requestedRuntime };
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+	$effect(() => {
+		const authority = workspaceAuthority;
+		if (authority.phase !== 'ready' || authority.runtime !== runtime) return;
+		mounted = { runtime: authority.runtime, sessionId: authority.sessionId, props: workspaceProps };
+	});
+</script>
+
+{#if mounted}
+	{#if workspaceAuthority.phase !== 'ready'}
+		<p role="status">{workspaceAuthority.phase === 'loading' ? 'Checking the selected workspace…' : 'The selected workspace is unavailable. Your previous draft is retained.'}</p>
+	{/if}
+	<div style="display: contents" inert={workspaceAuthority.phase !== 'ready'}>
+	<FilesystemWorkspace
+		{...mounted.props}
+		runtime={mounted.runtime}
+		{title}
+		workspaceSessionId={mounted.sessionId}
+		mode="code"
+		editorSurface={editorWorkspaceEditorSurface}
+	/>
+	</div>
+{:else if workspaceAuthority.phase === 'failed'}
+	<section
+		class="grid min-h-48 place-items-center rounded-md border border-destructive/30 bg-destructive/5 p-6 text-center"
+		role="alert"
+		data-editor-state={`workspace-authority-${workspaceAuthority.reason}`}
+	>
+		<div>
+			{#if workspaceAuthority.reason === 'session-mismatch'}
+				<p class="font-medium">Code was opened for a different workspace session.</p>
+				<p class="mt-1 text-sm text-muted-foreground">Reopen Code from the selected workspace.</p>
+			{:else}
+				<p class="font-medium">Code could not connect to this workspace.</p>
+				<p class="mt-1 text-sm text-muted-foreground">
+					Reconnect the workspace runtime and try again.
+				</p>
+			{/if}
+		</div>
+	</section>
+{:else}
+	<section
+		class="grid min-h-48 place-items-center rounded-md border border-border/70 bg-muted/20 p-6 text-center"
+		aria-live="polite"
+		data-editor-state={`workspace-authority-${workspaceAuthority.phase}`}
+	>
+		<div>
+			<p class="font-medium">
+				{workspaceAuthority.phase === 'loading'
+					? 'Connecting to this workspace...'
+					: 'Waiting for a workspace connection.'}
+			</p>
+			<p class="mt-1 text-sm text-muted-foreground">
+				{workspaceAuthority.phase === 'loading'
+					? 'Code will open when the workspace runtime is ready.'
+					: 'Select or create a workspace to continue.'}
+			</p>
+		</div>
+	</section>
+{/if}

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

@@ -0,0 +1,11 @@
+import { FilesystemWorkspace } from '@vibesdotdev/filesystem/svelte';
+import type { ComponentProps } from 'svelte';
+import type { EditorControllerState } from '../controller.ts';
+import type { EditorClient } from '@vibesdotdev/editor';
+type Props = Omit<ComponentProps<typeof FilesystemWorkspace<EditorControllerState, EditorClient>>, 'mode' | 'editorSurface' | 'title'> & {
+    title?: string;
+};
+declare const EditorWorkspace: import("svelte").Component<Props, {}, "">;
+type EditorWorkspace = ReturnType<typeof EditorWorkspace>;
+export default EditorWorkspace;
+//# sourceMappingURL=EditorWorkspace.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorWorkspace.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorWorkspace.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAOrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIvD,KAAK,KAAK,GAAG,IAAI,CAChB,cAAc,CAAC,OAAO,mBAAmB,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC,EAC/E,MAAM,GAAG,eAAe,GAAG,OAAO,CAClC,GAAG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAsHH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}