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

package/dist/svelte/components/EditorPreviewPane.svelte

@@ -0,0 +1,323 @@
+<script lang="ts">
+	import type { EditorPreviewState } from '../controller.js';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { getLogger } from '@vibesdotdev/logging';
+	import { CaughtFailureSchema, valueFreeFailure, settle } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { EditorConfigSchema } from '../../config/editor.config.descriptor.js';
+	import { loadEditorConfig } from '../../config/load.js';
+
+	let {
+		previewState,
+		onmodechange,
+		onurlchange,
+		onclose
+	}: {
+		previewState: EditorPreviewState;
+		onmodechange?: (mode: 'webapp' | 'applet' | 'genui') => void;
+		onurlchange?: (url: string) => void;
+		onclose?: () => void;
+	} = $props();
+
+	type DevicePreset = 'mobile' | 'tablet' | 'desktop';
+	let devicePreset = $state<DevicePreset>('desktop');
+	let iframeRef = $state<HTMLIFrameElement | null>(null);
+	let reloadKey = $state(0);
+	let inputUrl = $state<string>(EditorConfigSchema.parse({}).previewUrl);
+	const runtimeStore = getRuntimeSvelteContext();
+
+	$effect(() => {
+		if (previewState.targetUri) {
+			inputUrl = previewState.targetUri;
+			return;
+		}
+		const runtime = runtimeStore.runtime;
+		if (!runtime) {
+			// A failed load stays on `runtimeStore.error`; with no runtime there is no logger to bind,
+			// and the preview keeps its schema default.
+			void runtimeStore.load().then(
+				() => undefined,
+				(error) => valueFreeFailure(CaughtFailureSchema.parse(error))
+			);
+			return;
+		}
+		let cancelled = false;
+		const logger = getLogger('editor.preview-pane', runtime);
+		void settle(() => loadEditorConfig(runtime)).then((result) => {
+			if (result.ok) {
+				if (!cancelled && !previewState.targetUri) inputUrl = result.value.previewUrl;
+			} else {
+				logger.error('Editor preview configuration failed', { cause: result.cause });
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	function handleReload() {
+		if (iframeRef) {
+			reloadKey += 1;
+		}
+	}
+
+	function handleUrlSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		onurlchange?.(inputUrl);
+		if (iframeRef) {
+			iframeRef.src = inputUrl;
+		}
+	}
+</script>
+
+{#if previewState.open}
+	<div
+		class="editor-preview-pane"
+		role="complementary"
+		aria-label="Live preview pane"
+		data-preview-mode={previewState.mode}
+		data-device-preset={devicePreset}
+	>
+		<header class="editor-preview-pane__toolbar">
+			<div class="editor-preview-pane__mode-group">
+				<Button
+					type="button"
+					variant={previewState.mode === 'webapp' ? 'secondary' : 'ghost'}
+					size="sm"
+					class="editor-preview-pane__btn"
+					onclick={() => onmodechange?.('webapp')}
+				>
+					Web App
+				</Button>
+				<Button
+					type="button"
+					variant={previewState.mode === 'applet' ? 'secondary' : 'ghost'}
+					size="sm"
+					class="editor-preview-pane__btn"
+					onclick={() => onmodechange?.('applet')}
+				>
+					Applet
+				</Button>
+				<Button
+					type="button"
+					variant={previewState.mode === 'genui' ? 'secondary' : 'ghost'}
+					size="sm"
+					class="editor-preview-pane__btn"
+					onclick={() => onmodechange?.('genui')}
+				>
+					Generative UI
+				</Button>
+			</div>
+
+			{#if previewState.mode === 'webapp'}
+				<div class="editor-preview-pane__device-group">
+					<Button
+						type="button"
+						variant={devicePreset === 'mobile' ? 'secondary' : 'ghost'}
+						size="sm"
+						class="editor-preview-pane__btn"
+						onclick={() => (devicePreset = 'mobile')}
+						title="Mobile (375px)"
+					>
+						Mobile
+					</Button>
+					<Button
+						type="button"
+						variant={devicePreset === 'tablet' ? 'secondary' : 'ghost'}
+						size="sm"
+						class="editor-preview-pane__btn"
+						onclick={() => (devicePreset = 'tablet')}
+						title="Tablet (768px)"
+					>
+						Tablet
+					</Button>
+					<Button
+						type="button"
+						variant={devicePreset === 'desktop' ? 'secondary' : 'ghost'}
+						size="sm"
+						class="editor-preview-pane__btn"
+						onclick={() => (devicePreset = 'desktop')}
+						title="Desktop (Full)"
+					>
+						Desktop
+					</Button>
+				</div>
+
+				<form class="editor-preview-pane__url-form" onsubmit={handleUrlSubmit}>
+					<input
+						type="text"
+						bind:value={inputUrl}
+						class="editor-preview-pane__url-input"
+						placeholder="Preview URL"
+					/>
+					<Button
+						type="button"
+						variant="ghost"
+						size="sm"
+						class="editor-preview-pane__btn"
+						onclick={handleReload}
+						title="Reload preview"
+					>
+						Reload
+					</Button>
+				</form>
+			{/if}
+
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				class="editor-preview-pane__btn editor-preview-pane__close-btn"
+				onclick={onclose}
+				title="Close preview"
+			>
+				✕
+			</Button>
+		</header>
+
+		<div class="editor-preview-pane__viewport-wrapper">
+			<div
+				class="editor-preview-pane__viewport"
+				class:editor-preview-pane__viewport--mobile={devicePreset === 'mobile'}
+				class:editor-preview-pane__viewport--tablet={devicePreset === 'tablet'}
+				class:editor-preview-pane__viewport--desktop={devicePreset === 'desktop'}
+			>
+				{#if previewState.mode === 'webapp'}
+					{#key reloadKey}
+						<iframe
+						bind:this={iframeRef}
+						src={inputUrl}
+						title="Live application preview"
+						class="editor-preview-pane__iframe"
+						sandbox="allow-scripts allow-same-origin allow-forms allow-modals"
+					></iframe>
+					{/key}
+				{:else if previewState.mode === 'applet'}
+					<div class="editor-preview-pane__placeholder">
+						<Badge variant="outline">Applet Runner</Badge>
+						<p>Mounting applet bundle for active component...</p>
+					</div>
+				{:else}
+					<div class="editor-preview-pane__placeholder">
+						<Badge variant="outline">Generative UI Canvas</Badge>
+						<p>Ready to render agent-generated UI widgets.</p>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.editor-preview-pane {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-width: 0;
+		background: var(--background);
+		border-left: 1px solid var(--border);
+	}
+
+	.editor-preview-pane__toolbar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.375rem 0.5rem;
+		background: color-mix(in oklab, var(--card) 75%, var(--background));
+		border-bottom: 1px solid var(--border);
+		flex-shrink: 0;
+		font-size: 0.75rem;
+	}
+
+	.editor-preview-pane__mode-group,
+	.editor-preview-pane__device-group {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	:global(.editor-preview-pane__btn) {
+		height: 1.5rem;
+		padding: 0 0.5rem;
+		font-size: 0.6875rem;
+	}
+
+	:global(.editor-preview-pane__close-btn) {
+		margin-left: auto;
+		width: 1.5rem;
+		padding: 0;
+	}
+
+	.editor-preview-pane__url-form {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.editor-preview-pane__url-input {
+		flex: 1;
+		min-width: 0;
+		height: 1.5rem;
+		padding: 0 0.375rem;
+		font-size: 0.6875rem;
+		font-family: var(--font-mono, monospace);
+		background: var(--background);
+		border: 1px solid var(--border);
+		border-radius: 0.25rem;
+		color: var(--foreground);
+	}
+
+	.editor-preview-pane__viewport-wrapper {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+		background: color-mix(in oklab, var(--muted) 20%, var(--background));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem;
+	}
+
+	.editor-preview-pane__viewport {
+		height: 100%;
+		background: #ffffff;
+		border-radius: 0.375rem;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		transition: width 0.2s ease;
+	}
+
+	.editor-preview-pane__viewport--desktop {
+		width: 100%;
+	}
+
+	.editor-preview-pane__viewport--tablet {
+		width: 768px;
+		max-width: 100%;
+	}
+
+	.editor-preview-pane__viewport--mobile {
+		width: 375px;
+		max-width: 100%;
+	}
+
+	.editor-preview-pane__iframe {
+		width: 100%;
+		height: 100%;
+		border: 0;
+	}
+
+	.editor-preview-pane__placeholder {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		gap: 0.5rem;
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { EditorPreviewState } from '../controller.ts';
+type $$ComponentProps = {
+    previewState: EditorPreviewState;
+    onmodechange?: (mode: 'webapp' | 'applet' | 'genui') => void;
+    onurlchange?: (url: string) => void;
+    onclose?: () => void;
+};
+declare const EditorPreviewPane: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorPreviewPane = ReturnType<typeof EditorPreviewPane>;
+export default EditorPreviewPane;
+//# sourceMappingURL=EditorPreviewPane.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorPreviewPane.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorPreviewPane.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAW1D,KAAK,gBAAgB,GAAI;IACxB,YAAY,EAAE,kBAAkB,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;IAC7D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAuIH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/EditorProposalReview.svelte

@@ -0,0 +1,326 @@
+<script lang="ts">
+	import type { EditorProposal } from '@vibesdotdev/editor';
+	import { Alert, AlertDescription, AlertTitle } from '@vibesdotdev/kit/components/ui/alert';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+
+	let {
+		proposals = [],
+		onapprove,
+		onreject
+	}: {
+		proposals?: readonly EditorProposal[];
+		onapprove?: (proposalId: string) => Promise<void> | void;
+		onreject?: (proposalId: string, reason?: string) => void;
+	} = $props();
+
+	let selectedProposalId = $state<string | undefined>();
+	let constitutionalConfirmed = $state<boolean>(false);
+	let isApproving = $state<boolean>(false);
+
+	const pendingProposals = $derived(proposals.filter((p) => p.status === 'pending'));
+	const activeProposal = $derived(
+		proposals.find((p) => p.proposalId === selectedProposalId) ?? pendingProposals[0] ?? proposals[0]
+	);
+
+	const diffLines = $derived.by(() => {
+		if (!activeProposal?.patch) return [];
+		return activeProposal.patch.split('\n').map((line, index) => {
+			let type: 'header' | 'add' | 'del' | 'context' | 'info' = 'context';
+			if (line.startsWith('---') || line.startsWith('+++')) {
+				type = 'header';
+			} else if (line.startsWith('@@')) {
+				type = 'info';
+			} else if (line.startsWith('+')) {
+				type = 'add';
+			} else if (line.startsWith('-')) {
+				type = 'del';
+			}
+			return { id: index, raw: line, type };
+		});
+	});
+
+	async function handleApprove() {
+		if (!activeProposal || isApproving) return;
+		isApproving = true;
+		try {
+			await onapprove?.(activeProposal.proposalId);
+		} finally {
+			isApproving = false;
+			constitutionalConfirmed = false;
+		}
+	}
+
+	function handleReject() {
+		if (!activeProposal) return;
+		onreject?.(activeProposal.proposalId);
+		constitutionalConfirmed = false;
+	}
+</script>
+
+{#if activeProposal}
+	<div
+		class="proposal-review"
+		role="region"
+		aria-label="Agent change proposal review"
+		data-proposal-id={activeProposal.proposalId}
+		data-proposal-status={activeProposal.status}
+	>
+		<header class="proposal-review__header">
+			<div class="proposal-review__agent-meta">
+				<div class="proposal-review__title-row">
+					<strong class="proposal-review__intent">{activeProposal.intent}</strong>
+					<Badge
+						variant={activeProposal.status === 'pending'
+							? 'secondary'
+							: activeProposal.status === 'approved'
+								? 'default'
+								: 'outline'}
+					>
+						{activeProposal.status}
+					</Badge>
+				</div>
+				<div class="proposal-review__subline">
+					<span>Proposed by <strong>{activeProposal.authorName ?? activeProposal.agentId}</strong></span>
+					{#if proposals.length > 1}
+						<div class="proposal-review__switcher">
+							{#each proposals as p (p.proposalId)}
+								<button
+									type="button"
+									class="proposal-review__tab"
+									class:proposal-review__tab--active={p.proposalId === activeProposal.proposalId}
+									onclick={() => {
+										selectedProposalId = p.proposalId;
+										constitutionalConfirmed = false;
+									}}
+								>
+									{p.intent.slice(0, 20)}...
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</div>
+		</header>
+
+		{#if activeProposal.rationale}
+			<p class="proposal-review__rationale">{activeProposal.rationale}</p>
+		{/if}
+
+		{#if activeProposal.isConstitutional}
+			<Alert variant="destructive" class="proposal-review__constitutional-alert">
+				<AlertTitle>Constitutional Governance Document Review</AlertTitle>
+				<AlertDescription>
+					This change modifies a constitutional authority document (such as Constitution, SPEC, or AGENTS.md).
+					Explicit human review and confirmation is required to proceed.
+				</AlertDescription>
+			</Alert>
+		{/if}
+
+		<div class="proposal-review__diff-container">
+			<div class="proposal-review__diff-header">
+				<span>Proposed Diff</span>
+			</div>
+			<div class="proposal-review__diff-body">
+				{#each diffLines as line (line.id)}
+					<div
+						class="proposal-review__diff-line"
+						class:proposal-review__diff-line--add={line.type === 'add'}
+						class:proposal-review__diff-line--del={line.type === 'del'}
+						class:proposal-review__diff-line--info={line.type === 'info'}
+						class:proposal-review__diff-line--header={line.type === 'header'}
+					>
+						<code>{line.raw}</code>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		{#if activeProposal.status === 'pending'}
+			<footer class="proposal-review__footer">
+				{#if activeProposal.isConstitutional}
+					<label class="proposal-review__confirm-checkbox">
+						<input
+							type="checkbox"
+							bind:checked={constitutionalConfirmed}
+						/>
+						<span>I confirm this constitutional policy update</span>
+					</label>
+				{/if}
+
+				<div class="proposal-review__buttons">
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						onclick={handleReject}
+					>
+						Reject
+					</Button>
+					<Button
+						type="button"
+						variant="default"
+						size="sm"
+						disabled={isApproving || (activeProposal.isConstitutional && !constitutionalConfirmed)}
+						onclick={handleApprove}
+					>
+						{isApproving ? 'Applying...' : 'Approve & Apply'}
+					</Button>
+				</div>
+			</footer>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.proposal-review {
+		display: grid;
+		gap: 0.75rem;
+		padding: 0.875rem;
+		background: color-mix(in oklab, var(--card) 95%, var(--background));
+		border: 1px solid var(--border);
+		border-radius: 0.75rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+	}
+
+	.proposal-review__header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.proposal-review__agent-meta {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.proposal-review__title-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.proposal-review__intent {
+		font-size: 0.875rem;
+		color: var(--foreground);
+	}
+
+	.proposal-review__subline {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+	}
+
+	.proposal-review__switcher {
+		display: flex;
+		gap: 0.25rem;
+	}
+
+	.proposal-review__tab {
+		background: none;
+		border: 1px solid var(--border);
+		border-radius: 0.25rem;
+		padding: 0.125rem 0.375rem;
+		font-size: 0.6875rem;
+		color: var(--muted-foreground);
+		cursor: pointer;
+	}
+
+	.proposal-review__tab--active {
+		background: var(--secondary);
+		color: var(--secondary-foreground);
+		font-weight: 600;
+	}
+
+	.proposal-review__rationale {
+		margin: 0;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+		line-height: 1.4;
+	}
+
+	:global(.proposal-review__constitutional-alert) {
+		margin-top: 0.25rem;
+	}
+
+	.proposal-review__diff-container {
+		border: 1px solid var(--border);
+		border-radius: 0.375rem;
+		overflow: hidden;
+		background: var(--background);
+		max-height: 16rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.proposal-review__diff-header {
+		padding: 0.25rem 0.5rem;
+		background: color-mix(in oklab, var(--muted) 40%, var(--background));
+		border-bottom: 1px solid var(--border);
+		font-size: 0.6875rem;
+		font-weight: 600;
+		color: var(--muted-foreground);
+	}
+
+	.proposal-review__diff-body {
+		overflow-y: auto;
+		font-family: var(--font-mono, monospace);
+		font-size: 0.75rem;
+		line-height: 1.35;
+	}
+
+	.proposal-review__diff-line {
+		padding: 0.125rem 0.5rem;
+		white-space: pre-wrap;
+		word-break: break-all;
+	}
+
+	.proposal-review__diff-line--add {
+		background: rgba(16, 185, 129, 0.15);
+		color: #059669;
+	}
+
+	.proposal-review__diff-line--del {
+		background: rgba(239, 68, 68, 0.15);
+		color: #dc2626;
+	}
+
+	.proposal-review__diff-line--info {
+		background: rgba(59, 130, 246, 0.1);
+		color: #2563eb;
+	}
+
+	.proposal-review__diff-line--header {
+		color: var(--muted-foreground);
+		font-weight: 600;
+	}
+
+	.proposal-review__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		padding-top: 0.5rem;
+		border-top: 1px solid var(--border);
+	}
+
+	.proposal-review__confirm-checkbox {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-size: 0.75rem;
+		color: var(--foreground);
+		cursor: pointer;
+	}
+
+	.proposal-review__buttons {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-left: auto;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { EditorProposal } from '@vibesdotdev/editor';
+type $$ComponentProps = {
+    proposals?: readonly EditorProposal[];
+    onapprove?: (proposalId: string) => Promise<void> | void;
+    onreject?: (proposalId: string, reason?: string) => void;
+};
+declare const EditorProposalReview: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorProposalReview = ReturnType<typeof EditorProposalReview>;
+export default EditorProposalReview;
+//# sourceMappingURL=EditorProposalReview.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorProposalReview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorProposalReview.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKzD,KAAK,gBAAgB,GAAI;IACxB,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD,CAAC;AA8IH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}