@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/code/CodeSourceFallback.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">import CodeTokenTheme from "./CodeTokenTheme.svelte";
+let { source, lineNumbers = false, title = undefined, highlightedLines = null, tone = "system" } = $props();
+const displayLines = $derived(toDisplayLines(source));
+const tokenizedLines = $derived(highlightedLines && highlightedLines.length === displayLines.length ? highlightedLines : null);
+function toDisplayLines(value) {
+	const normalized = value.endsWith("\n") ? value.slice(0, -1) : value;
+	return normalized ? normalized.split("\n") : [""];
+}
+</script>
+
+<CodeTokenTheme />
+<div class="monaco-source-fallback vibes-code-tokens vibes-code-tokens--{tone}" {title}>
+	<code class="monaco-source-fallback__content">
+		{#each displayLines as line, index (index)}
+			<span class="monaco-source-fallback__line">
+				{#if lineNumbers}
+					<span class="monaco-source-fallback__number" aria-hidden="true">{index + 1}</span>
+				{/if}
+				{#if tokenizedLines}
+					<!-- kit-generated highlight output: escapeHighlightHtml runs on every text
+					     node before span-wrapping, never raw consumer HTML (highlight.test.ts) -->
+					<span class="monaco-source-fallback__code">{@html tokenizedLines[index]}</span>
+				{:else}
+					<span class="monaco-source-fallback__code">{line}</span>
+				{/if}
+			</span>
+		{/each}
+	</code>
+</div>
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+
+	.monaco-source-fallback {
+		@apply h-full w-full overflow-auto p-2 font-mono text-[13px];
+		background: var(--monaco-fallback-background, var(--color-background, var(--background, #fff)));
+		color: var(--monaco-fallback-foreground, var(--color-foreground, var(--foreground, #111)));
+		font-variant-ligatures: contextual;
+		line-height: var(--monaco-fallback-line-height, 21px);
+		tab-size: 2;
+	}
+
+	.monaco-source-fallback__content {
+		font: inherit;
+	}
+
+	.monaco-source-fallback__line {
+		display: flex;
+		min-height: var(--monaco-fallback-line-height, 21px);
+	}
+
+	.monaco-source-fallback__number {
+		flex: 0 0 auto;
+		min-width: 3ch;
+		padding-right: 1.25ch;
+		color: var(
+			--monaco-fallback-muted,
+			var(--color-muted-foreground, var(--muted-foreground, #737373))
+		);
+		text-align: right;
+		user-select: none;
+	}
+
+	.monaco-source-fallback__code {
+		flex: 1 0 auto;
+		min-width: max-content;
+		white-space: pre;
+	}
+</style>

package/dist/lib/components/code/CodeSourceFallback.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    source: string;
+    lineNumbers?: boolean;
+    title?: string;
+    /**
+     * Optional pre-highlighted HTML per display line (produced by
+     * `highlightCodeToLines` — trusted kit output built from escaped text,
+     * never raw consumer HTML). When absent or mismatched, lines render as
+     * escaped Svelte text nodes.
+     */
+    highlightedLines?: string[] | null;
+    /** Resolved tone for token colors; 'system' follows the page theme. */
+    tone?: 'light' | 'dark' | 'system';
+}
+declare const CodeSourceFallback: import("svelte").Component<Props, {}, "">;
+type CodeSourceFallback = ReturnType<typeof CodeSourceFallback>;
+export default CodeSourceFallback;

package/dist/lib/components/code/CodeTokenTheme.svelte

@@ -0,0 +1,177 @@
+<!--
+	Render-nothing carrier for the shared token palette used by the kit's
+	READ-ONLY lezer highlight path (`highlight.ts` → `tok-*` spans from
+	classHighlighter). Any component that renders highlighted output mounts
+	this once and marks its container with
+	`vibes-code-tokens vibes-code-tokens--{tone}`.
+
+	Tones: light values are the defaults; `--dark` forces the dark palette;
+	`--system` follows the page theme (`.dark` root class or the OS
+	prefers-color-scheme). Shared semantic tokens match the Monaco palette; standalone unthemed hosts
+	retain light/dark fallback colors.
+-->
+
+<script lang="ts">// This style-only component is imported from source by downstream Svelte packages.
+</script>
+
+<style>
+	:global(.vibes-code-tokens) {
+		--code-tok-keyword: var(--primary, #007197);
+		--code-tok-name: var(--foreground, #3760bf);
+		--code-tok-function: var(--primary, #2e7de9);
+		--code-tok-type: var(--warning, #387068);
+		--code-tok-property: var(--warning, #905f36);
+		--code-tok-string: var(--success, #587539);
+		--code-tok-number: var(--info, #b15c00);
+		--code-tok-comment: var(--muted-foreground, #848cb5);
+		--code-tok-operator: var(--foreground, #006a83);
+		--code-tok-punctuation: var(--muted-foreground, #68708c);
+		--code-tok-invalid: var(--destructive, #c53b53);
+	}
+
+	:global(.vibes-code-tokens--dark),
+	:global(.dark .vibes-code-tokens--system),
+	:global(.dark.vibes-code-tokens--system) {
+		--code-tok-keyword: var(--primary, #bb9af7);
+		--code-tok-name: var(--foreground, #c0caf5);
+		--code-tok-function: var(--primary, #7aa2f7);
+		--code-tok-type: var(--warning, #2ac3de);
+		--code-tok-property: var(--warning, #73daca);
+		--code-tok-string: var(--success, #9ece6a);
+		--code-tok-number: var(--info, #ff9e64);
+		--code-tok-comment: var(--muted-foreground, #565f89);
+		--code-tok-operator: var(--foreground, #89ddff);
+		--code-tok-punctuation: var(--muted-foreground, #9aa5ce);
+		--code-tok-invalid: var(--destructive, #ff757f);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(.vibes-code-tokens--system) {
+			--code-tok-keyword: var(--primary, #bb9af7);
+			--code-tok-name: var(--foreground, #c0caf5);
+			--code-tok-function: var(--primary, #7aa2f7);
+			--code-tok-type: var(--warning, #2ac3de);
+			--code-tok-property: var(--warning, #73daca);
+			--code-tok-string: var(--success, #9ece6a);
+			--code-tok-number: var(--info, #ff9e64);
+			--code-tok-comment: var(--muted-foreground, #565f89);
+			--code-tok-operator: var(--foreground, #89ddff);
+			--code-tok-punctuation: var(--muted-foreground, #9aa5ce);
+			--code-tok-invalid: var(--destructive, #ff757f);
+		}
+	}
+
+	:global(.vibes-code-tokens .tok-keyword),
+	:global(.vibes-code-tokens .tok-modifier),
+	:global(.vibes-code-tokens .tok-controlKeyword),
+	:global(.vibes-code-tokens .tok-operatorKeyword),
+	:global(.vibes-code-tokens .tok-definitionKeyword),
+	:global(.vibes-code-tokens .tok-moduleKeyword) {
+		color: var(--code-tok-keyword);
+	}
+
+	:global(.vibes-code-tokens .tok-variableName),
+	:global(.vibes-code-tokens .tok-name),
+	:global(.vibes-code-tokens .tok-attributeName) {
+		color: var(--code-tok-name);
+	}
+
+	:global(.vibes-code-tokens .tok-function),
+	:global(.vibes-code-tokens .tok-macroName),
+	:global(.vibes-code-tokens .tok-labelName) {
+		color: var(--code-tok-function);
+	}
+
+	:global(.vibes-code-tokens .tok-typeName),
+	:global(.vibes-code-tokens .tok-className),
+	:global(.vibes-code-tokens .tok-namespace),
+	:global(.vibes-code-tokens .tok-tagName),
+	:global(.vibes-code-tokens .tok-standard) {
+		color: var(--code-tok-type);
+	}
+
+	:global(.vibes-code-tokens .tok-propertyName),
+	:global(.vibes-code-tokens .tok-definition) {
+		color: var(--code-tok-property);
+	}
+
+	:global(.vibes-code-tokens .tok-string),
+	:global(.vibes-code-tokens .tok-string2),
+	:global(.vibes-code-tokens .tok-regexp),
+	:global(.vibes-code-tokens .tok-special),
+	:global(.vibes-code-tokens .tok-character),
+	:global(.vibes-code-tokens .tok-attributeValue),
+	:global(.vibes-code-tokens .tok-inserted) {
+		color: var(--code-tok-string);
+	}
+
+	:global(.vibes-code-tokens .tok-number),
+	:global(.vibes-code-tokens .tok-integer),
+	:global(.vibes-code-tokens .tok-float),
+	:global(.vibes-code-tokens .tok-bool),
+	:global(.vibes-code-tokens .tok-atom),
+	:global(.vibes-code-tokens .tok-literal),
+	:global(.vibes-code-tokens .tok-unit),
+	:global(.vibes-code-tokens .tok-color),
+	:global(.vibes-code-tokens .tok-constant),
+	:global(.vibes-code-tokens .tok-null),
+	:global(.vibes-code-tokens .tok-self) {
+		color: var(--code-tok-number);
+	}
+
+	:global(.vibes-code-tokens .tok-comment),
+	:global(.vibes-code-tokens .tok-lineComment),
+	:global(.vibes-code-tokens .tok-blockComment),
+	:global(.vibes-code-tokens .tok-docComment),
+	:global(.vibes-code-tokens .tok-meta) {
+		color: var(--code-tok-comment);
+		font-style: italic;
+	}
+
+	:global(.vibes-code-tokens .tok-operator),
+	:global(.vibes-code-tokens .tok-derefOperator),
+	:global(.vibes-code-tokens .tok-arithmeticOperator),
+	:global(.vibes-code-tokens .tok-logicOperator),
+	:global(.vibes-code-tokens .tok-bitwiseOperator),
+	:global(.vibes-code-tokens .tok-compareOperator),
+	:global(.vibes-code-tokens .tok-updateOperator),
+	:global(.vibes-code-tokens .tok-escape) {
+		color: var(--code-tok-operator);
+	}
+
+	:global(.vibes-code-tokens .tok-punctuation),
+	:global(.vibes-code-tokens .tok-separator),
+	:global(.vibes-code-tokens .tok-bracket),
+	:global(.vibes-code-tokens .tok-paren),
+	:global(.vibes-code-tokens .tok-brace),
+	:global(.vibes-code-tokens .tok-squareBracket),
+	:global(.vibes-code-tokens .tok-angleBracket) {
+		color: var(--code-tok-punctuation);
+	}
+
+	:global(.vibes-code-tokens .tok-heading) {
+		font-weight: 600;
+	}
+
+	:global(.vibes-code-tokens .tok-emphasis) {
+		font-style: italic;
+	}
+
+	:global(.vibes-code-tokens .tok-strong) {
+		font-weight: 600;
+	}
+
+	:global(.vibes-code-tokens .tok-link),
+	:global(.vibes-code-tokens .tok-url) {
+		color: var(--code-tok-function);
+		text-decoration: underline;
+	}
+
+	:global(.vibes-code-tokens .tok-invalid) {
+		color: var(--code-tok-invalid);
+	}
+
+	:global(.vibes-code-tokens .tok-deleted) {
+		color: var(--code-tok-invalid);
+	}
+</style>

package/dist/lib/components/code/CodeTokenTheme.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CodeTokenTheme: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CodeTokenTheme = InstanceType<typeof CodeTokenTheme>;
+export default CodeTokenTheme;

package/dist/lib/components/code/CodeTokenizedLine.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">import { resolveCodeLanguage } from "./language.js";
+import { escapeHighlightHtml, highlightLineToHtml } from "./highlight.js";
+import { settle } from "../../attempt";
+import { failureClass } from "../../failure-class.js";
+import { kitLogger } from "../../kit-logger";
+import CodeTokenTheme from "./CodeTokenTheme.svelte";
+const logger = kitLogger("vibeskit-code-tokenized-line");
+let { code = "", language = "auto", filename = undefined, class: className = "", tone = "system" } = $props();
+const escapedCode = $derived(escapeHighlightHtml(code));
+// Effects do not run during SSR, so escaped source is always the derived
+// baseline. The browser effect overlays highlighted HTML when it is ready.
+let highlightedHtml = $state(null);
+const renderedHtml = $derived(highlightedHtml ?? escapedCode);
+const resolvedLanguage = $derived(resolveCodeLanguage(code, filename, language));
+let renderRun = 0;
+// Read-only tokenization never touches Monaco: the lightweight lezer path
+// (shared with CodeViewer) produces the highlight spans, keeping the editor
+// runtime out of display-only surfaces like diff lines. The escaped source
+// stays rendered while parsers load or when no parser exists.
+$effect(() => {
+	const run = ++renderRun;
+	highlightedHtml = null;
+	// A failed highlight renders the escaped source, the same as a language with no parser.
+	void settle(() => highlightLineToHtml(code, resolvedLanguage)).then((highlighted) => {
+		if (run !== renderRun) return;
+		if (!highlighted.ok) {
+			logger.warn("Line highlight failed; showing escaped source", { reason: failureClass(highlighted.error) });
+			highlightedHtml = null;
+		} else if (highlighted.value !== null) highlightedHtml = highlighted.value;
+	});
+});
+</script>
+
+<CodeTokenTheme />
+<!-- kit-generated highlight output: escapeHighlightHtml runs on every text node
+     before span-wrapping, never raw consumer HTML (highlight.test.ts) -->
+<span class={`vibes-code-tokens vibes-code-tokens--${tone} ${className}`}>{@html renderedHtml}</span
+>

package/dist/lib/components/code/CodeTokenizedLine.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    code?: string;
+    language?: string;
+    filename?: string;
+    class?: string;
+    /** Token color tone; 'system' follows the page theme. */
+    tone?: 'light' | 'dark' | 'system';
+}
+declare const CodeTokenizedLine: import("svelte").Component<Props, {}, "">;
+type CodeTokenizedLine = ReturnType<typeof CodeTokenizedLine>;
+export default CodeTokenizedLine;

package/dist/lib/components/code/CodeViewer.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">import { BROWSER } from "esm-env";
+import CodeSourceFallback from "./CodeSourceFallback.svelte";
+import { isCssColorDark } from "./appearance.js";
+import { resolveCodeLanguage } from "./language.js";
+import { highlightCodeToLines } from "./highlight.js";
+import { settle } from "../../attempt";
+import { failureClass } from "../../failure-class.js";
+import { kitLogger } from "../../kit-logger";
+const logger = kitLogger("vibeskit-code-viewer");
+let { code, language = "auto", filename = undefined, appearance = "system", showLineNumbers = false, maxHeight = "500px", minHeight = "96px", framed = true } = $props();
+function normalizeDisplayCode(value) {
+	return value.endsWith("\n") ? value.slice(0, -1) : value;
+}
+let containerEl = $state(null);
+let resolvedSystemAppearance = $state("system");
+let highlightedLines = $state(null);
+const displayCode = $derived(normalizeDisplayCode(code));
+const resolvedLanguage = $derived(resolveCodeLanguage(displayCode, filename, language));
+const viewerAppearance = $derived(appearance === "system" ? resolvedSystemAppearance : appearance);
+// Read-only display never mounts Monaco: highlighting comes from the
+// lightweight lezer path so viewers don't pull the editor runtime/workers.
+// Unhighlighted escaped source stays readable while parsers load or when
+// no parser exists for the language.
+let highlightRun = 0;
+$effect(() => {
+	const run = ++highlightRun;
+	const source = displayCode;
+	const lang = resolvedLanguage;
+	highlightedLines = null;
+	if (!BROWSER) return;
+	// A failed highlight renders the plain source fallback, the same as a language with no parser.
+	void settle(() => highlightCodeToLines(source, lang)).then((highlighted) => {
+		if (run !== highlightRun) return;
+		if (highlighted.ok) {
+			highlightedLines = highlighted.value;
+			return;
+		}
+		logger.warn("Code highlight failed; showing plain source", { reason: failureClass(highlighted.error) });
+		highlightedLines = null;
+	});
+});
+function paintedBackgroundColor(element) {
+	let current = element;
+	while (current) {
+		const color = getComputedStyle(current).backgroundColor;
+		if (isCssColorDark(color) !== null) return color;
+		current = current.parentElement;
+	}
+	return null;
+}
+function syncSystemAppearance() {
+	if (!BROWSER || appearance !== "system" || !containerEl) {
+		resolvedSystemAppearance = "system";
+		return;
+	}
+	const color = paintedBackgroundColor(containerEl);
+	const isDark = isCssColorDark(color);
+	resolvedSystemAppearance = isDark === null ? "system" : isDark ? "dark" : "light";
+}
+$effect(() => {
+	if (!BROWSER) return;
+	syncSystemAppearance();
+	if (appearance !== "system" || !containerEl) return;
+	const observed = [];
+	const observer = new MutationObserver(syncSystemAppearance);
+	let current = containerEl;
+	while (current && observed.length < 4) {
+		observer.observe(current, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"style",
+				"data-theme"
+			]
+		});
+		observed.push(current);
+		current = current.parentElement;
+	}
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: [
+			"class",
+			"style",
+			"data-theme"
+		]
+	});
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	media.addEventListener("change", syncSystemAppearance);
+	return () => {
+		observer.disconnect();
+		media.removeEventListener("change", syncSystemAppearance);
+	};
+});
+</script>
+
+<div
+	bind:this={containerEl}
+	class={`code-viewer code-viewer--${viewerAppearance}${framed ? '' : ' code-viewer--frameless'}`}
+	style="min-height: {minHeight}; max-height: {maxHeight === 'none' ? 'none' : maxHeight};"
+>
+	<CodeSourceFallback
+		source={displayCode}
+		lineNumbers={showLineNumbers}
+		{highlightedLines}
+		tone={viewerAppearance}
+	/>
+</div>
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+
+	/* Height comes from the content, clamped by min/max — it is NOT predicted.
+	   The previous `lineCount * 21px + 18px` guess paired with `overflow: hidden`,
+	   so whenever the real line box differed from the guess (font fallback, zoom,
+	   a wrapped line) the last line was silently cut off with no scrollbar to
+	   reveal it. CSS already does this clamping correctly and never disagrees with
+	   the layout it produced. */
+	.code-viewer {
+		@apply min-w-0 overflow-auto rounded-lg border border-border;
+		/* Own the box model instead of inheriting it from whichever host happens to
+		   ship Tailwind preflight: without this the 1px border sits OUTSIDE
+		   `max-height`, so the viewer overshoots its own clamp. */
+		box-sizing: border-box;
+		background-color: var(--color-background, var(--background, #fff));
+		--monaco-fallback-background: var(--color-background, var(--background, #fff));
+		--monaco-fallback-foreground: var(--color-foreground, var(--foreground, #111));
+		--monaco-fallback-muted: var(--color-muted-foreground, var(--muted-foreground, #737373));
+		--monaco-fallback-line-height: 21px;
+	}
+
+	.code-viewer--frameless {
+		border: 0;
+		border-radius: 0;
+	}
+
+	.code-viewer--dark,
+	:global(.dark) .code-viewer--system {
+		background-color: var(--color-background, var(--background, #000));
+		--monaco-fallback-background: var(--color-background, var(--background, #000));
+		--monaco-fallback-foreground: var(--foreground, #f8f8f2);
+		--monaco-fallback-muted: var(--muted-foreground, rgba(248, 248, 242, 0.45));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.code-viewer--system {
+			background-color: var(--color-background, var(--background, #000));
+			--monaco-fallback-background: var(--color-background, var(--background, #000));
+			--monaco-fallback-foreground: var(--foreground, #f8f8f2);
+			--monaco-fallback-muted: var(--muted-foreground, rgba(248, 248, 242, 0.45));
+		}
+	}
+
+	.code-viewer :global(.monaco-source-fallback) {
+		padding: 8px 12px;
+	}
+</style>

package/dist/lib/components/code/CodeViewer.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type CodeAppearance } from './appearance.ts';
+interface Props {
+    code: string;
+    language?: string;
+    filename?: string;
+    appearance?: CodeAppearance;
+    showLineNumbers?: boolean;
+    maxHeight?: string;
+    minHeight?: string;
+    framed?: boolean;
+}
+declare const CodeViewer: import("svelte").Component<Props, {}, "">;
+type CodeViewer = ReturnType<typeof CodeViewer>;
+export default CodeViewer;

package/dist/lib/components/code/EditorFullscreenDialog.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" module>import "./code-editor-surface.js";
+</script>
+
+<script lang="ts">import { Dialog as DialogPrimitive } from "bits-ui";
+import { Icon } from "../icon";
+import MonacoEditor from "./MonacoEditor.svelte";
+import EditorToolbar from "./EditorToolbar.svelte";
+import { Button } from "../ui/button";
+import { BROWSER } from "esm-env";
+let { open = $bindable(false), onOpenChange, code = $bindable(""), language = "auto", filename = undefined, model = undefined, modelUri = undefined, transactionId = undefined, ariaLabel = "Code editor", surface = "field", appearance = "system", readOnly = false, placeholder = "/* your code here */", onCodeChange, onUpdate, onSelectionChange, monacoSetup, editorOptions = undefined, title = "Editor", showAiAssist = false, aiGenerate, aiDefaultPrompt = "Help me write...", aiPlaceholder = "Describe what you want to write..." } = $props();
+function handleClose() {
+	open = false;
+	onOpenChange?.(false);
+}
+function handleCodeUpdate(value) {
+	code = value;
+	if (model && !model.isDisposed()) {
+		if (model.getValue() !== value) model.setValue(value);
+		return;
+	}
+	onCodeChange?.(value);
+	onUpdate?.(value);
+}
+function handleKeyDown(e) {
+	if (e.key === "Escape") {
+		handleClose();
+	}
+}
+</script>
+
+<DialogPrimitive.Root bind:open onOpenChange={(o) => onOpenChange?.(o)}>
+	<DialogPrimitive.Portal>
+		<DialogPrimitive.Overlay
+			class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+		/>
+		<DialogPrimitive.Content class="editor-fullscreen" onkeydown={handleKeyDown}>
+			<div class="editor-fullscreen__header">
+				<DialogPrimitive.Title class="editor-fullscreen__title">{title}</DialogPrimitive.Title>
+				<div class="editor-fullscreen__actions">
+					<Button variant="ghost" size="icon-sm" onclick={handleClose}>
+						<Icon icon="lucide:x" class="size-4" />
+						<span class="sr-only">Close</span>
+					</Button>
+				</div>
+			</div>
+			<div class="editor-fullscreen__body">
+				{#if BROWSER && open}
+					<MonacoEditor
+						bind:code
+						{language}
+						{filename}
+						{model}
+						{modelUri}
+						{transactionId}
+						{ariaLabel}
+						{surface}
+						{appearance}
+						{readOnly}
+						{placeholder}
+						{editorOptions}
+						{onSelectionChange}
+						emitModelChanges={!model}
+						onCodeChange={model ? undefined : handleCodeUpdate}
+						{monacoSetup}
+					/>
+				{/if}
+				<EditorToolbar
+					showFullscreen={true}
+					showAiAssist={showAiAssist && !readOnly}
+					{aiGenerate}
+					showCopy={true}
+					{code}
+					onCodeUpdate={handleCodeUpdate}
+					isFullscreen={true}
+					onFullscreenToggle={handleClose}
+					{aiDefaultPrompt}
+					{aiPlaceholder}
+				/>
+			</div>
+		</DialogPrimitive.Content>
+	</DialogPrimitive.Portal>
+</DialogPrimitive.Root>
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+
+	:global(.editor-fullscreen) {
+		@apply fixed inset-4 z-50 flex flex-col overflow-hidden rounded-lg border bg-background shadow-2xl;
+	}
+
+	:global(.editor-fullscreen[data-state='open']) {
+		animation: editor-fs-in 200ms ease-out;
+	}
+
+	:global(.editor-fullscreen[data-state='closed']) {
+		animation: editor-fs-out 150ms ease-in;
+	}
+
+	@keyframes editor-fs-in {
+		from {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes editor-fs-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+	}
+
+	.editor-fullscreen__header {
+		@apply flex items-center justify-between border-b border-border px-4 py-2;
+	}
+
+	:global(.editor-fullscreen__title) {
+		@apply text-sm font-medium;
+	}
+
+	.editor-fullscreen__actions {
+		@apply flex items-center gap-1;
+	}
+
+	.editor-fullscreen__body {
+		@apply relative flex min-h-0 flex-1 overflow-hidden;
+	}
+</style>