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

package/dist/schemas/search-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-card.d.ts","sourceRoot":"","sources":["../../src/schemas/search-card.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,QAAQ,CAAC;AAavB,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;EAAiC,CAAC;AACrE,MAAM,MAAM,qBAAqB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC3E,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAEtB,CAAC;AAUb,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoBjC,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACpE,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/schemas/search-card.js

@@ -0,0 +1,46 @@
+import z from 'zod/v4';
+import { WorkspaceSearchInputSchema, WorkspaceSearchActions } from "../code-atlas/tools/workspace-search.schemas.js";
+import { AtlasSearchOutputSchema } from "../code-atlas/tools/search/schemas.js";
+import { AtlasGraphOutputSchema } from "../code-atlas/tools/graph/schemas.js";
+import { AtlasSymbolOutputSchema } from "../code-atlas/tools/symbol/schemas.js";
+import { renameOutputSchema } from "../code-atlas/tools/rename/schemas.js";
+import { WorkspaceSyncStatusOutputSchema } from "../code-atlas/tools/workspace-sync-status/schemas.js";
+import { AtlasIndexStatusOutputSchema } from "../code-atlas/tools/index-management/status/schemas.js";
+import { AtlasIndexListOutputSchema } from "../code-atlas/tools/index-management/list/schemas.js";
+import { AtlasIndexAliasOutputSchema } from "../code-atlas/tools/index-management/alias/schemas.js";
+import { AtlasJobStatusOutputSchema, AtlasJobStatusInputSchema } from "../code-atlas/tools/index-management/job-status/schemas.js";
+import { ParsedDiagnosticSchema } from '@vibesdotdev/workspace-schemas/diagnostics';
+export const SearchCardActionSchema = z.enum(WorkspaceSearchActions);
+export const SearchCardInputSchema = WorkspaceSearchInputSchema.omit({ action: true }).extend({
+    action: SearchCardActionSchema.optional()
+}).partial();
+/** A presentation projection also accepts historical envelopes with omitted metadata.
+ * Present fields retain their owner's types. A malformed field rejects the whole
+ * envelope rather than silently turning a broken result into "no matches".
+ */
+const job = AtlasJobStatusOutputSchema.shape.job.unwrap().pick({ id: true, status: true, error: true }).partial().extend({
+    jobId: AtlasJobStatusInputSchema.shape.jobId,
+    type: z.string().optional()
+});
+export const SearchCardOutputSchema = z.object({
+    ...AtlasIndexStatusOutputSchema.partial().shape,
+    ...AtlasGraphOutputSchema.partial().shape,
+    ...AtlasSymbolOutputSchema.partial().shape,
+    ...AtlasSearchOutputSchema.partial().shape,
+    ...renameOutputSchema.shape,
+    ...AtlasIndexListOutputSchema.partial().shape,
+    ...AtlasIndexAliasOutputSchema.partial().shape,
+    ...WorkspaceSyncStatusOutputSchema.partial().shape,
+    results: z.array(AtlasSearchOutputSchema.shape.results.element.partial()).optional(),
+    symbol: AtlasSymbolOutputSchema.shape.symbol.unwrap().partial().optional(),
+    matches: z.array(AtlasSymbolOutputSchema.shape.matches.unwrap().element.partial()).optional(),
+    changes: z.array(renameOutputSchema.shape.changes.unwrap().element.partial()).optional(),
+    diagnostics: z.array(ParsedDiagnosticSchema.partial()).optional(),
+    count: z.number().int().nonnegative().optional(),
+    workspaceIndex: WorkspaceSyncStatusOutputSchema.shape.workspaceIndex.partial().optional(),
+    job: job.optional(),
+    jobs: z.array(job).optional(),
+    indexJobId: z.string().optional(),
+    jobId: z.string().optional()
+});
+//# sourceMappingURL=search-card.js.map

package/dist/schemas/search-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-card.js","sourceRoot":"","sources":["../../src/schemas/search-card.ts"],"names":[],"mappings":"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"}

package/dist/svelte/DOM-TREE.md

@@ -0,0 +1,168 @@
+# Editor surface DOM map
+
+This map defines the consumer Editor experience without making Editor the
+application shell. `vibes edit` and `vibes editor` deep-link into the generic
+Vessel host with `workspace.code`; the host binds profile, workspace, cwd, and
+runtime place before any owner surface mounts.
+
+## Ownership map
+
+| Surface | Owner | Existing composition |
+| --- | --- | --- |
+| Loopback lifecycle, browser launch, active profile, cwd, runtime place | Vessel product host | `vessel-desktop` + `@vibesdotdev/bridge/svelte/vessel` |
+| Workspace selection and creation | Projects/Workspace feature placed by Vessel | Host surface; not Editor DOM |
+| Code app metadata and focused code composition | `@vibesdotdev/editor/svelte` | `EditorWorkspace.svelte` |
+| Rooted navigation, file actions, file list, file details | `@vibesdotdev/filesystem/svelte` | `FilesystemWorkspace.svelte` |
+| Transaction, draft, Monaco, save, conflict | `@vibesdotdev/editor/svelte` | `VibesEditor.svelte` and its focused children |
+| Chat, agents, models, tools | Their feature packages | Separate Vessel surfaces placed beside Code |
+| Plugin discovery/install | Generic host/Apps and Plugins owners | Separate Vessel surface; never an Editor registry fork |
+
+## View trees
+
+### Vessel launch and workspace choice
+
+Host-owned; shown before the Code surface has a bound `workspace/environment`.
+
+```text
+VesselHost
+├─ VesselChrome
+│  ├─ ProfileControl
+│  ├─ RuntimePlaceControl
+│  └─ AppsLauncher
+├─ WorkspaceChooser                      [Projects/Workspace owner]
+│  ├─ WorkspaceSearch                    [VibesKit Input]
+│  ├─ WorkspaceList
+│  │  └─ WorkspaceRow × n
+│  └─ CreateWorkspaceAction              [VibesKit Button/Dialog]
+└─ launch workspace.code
+```
+
+The launch request carries references such as the selected profile, cwd,
+runtime place, `initialAppId: 'workspace.code'`, and compact Code route state.
+The browser receives no provider credentials or feature implementation paths.
+
+### Focused Code window
+
+Editor owns the app and the thin composition. Filesystem remains the only file
+tree and workspace-navigation implementation.
+
+```text
+VesselAppWindow[workspace.code]           [Vessel host]
+└─ EditorWorkspace                       [editor/svelte; create]
+   └─ FilesystemWorkspace mode="code"     [filesystem/svelte; existing]
+      ├─ WorkspaceCommandBar
+      ├─ WorkspaceLocationBar
+      ├─ WorkspaceBody
+      │  ├─ FileExplorer
+      │  └─ DocumentRegion
+      │     └─ VibesEditor                [editor/svelte; existing injection]
+      ├─ WorkspaceStatusBar
+      ├─ DestructiveActionDialog
+      └─ PendingResourceIntentDialog
+```
+
+`EditorWorkspace` does one thing: provide Editor's canonical component/state
+port to Filesystem and force the focused `code` presentation. It does not own a
+second explorer, transport, workspace picker, terminal, or Chat implementation.
+
+### Canonical document editor
+
+```text
+VibesEditor                               [existing]
+├─ EditorUnsupportedState | Skeleton
+└─ EditorTransactionView
+   ├─ EditorHeader
+   │  ├─ EditorResourceTrail             [existing]
+   │  └─ SaveButton                      [VibesKit Button]
+   ├─ EditorNotices
+   │  ├─ EditorUnsupportedState          [existing]
+   │  └─ EditorConflictState             [existing]
+   ├─ EditorDocumentPane                 [existing]
+   │  └─ ContextMenu.Root?               [VibesKit]
+   │     └─ CodeEditor                    [VibesKit Monaco]
+   └─ EditorCapabilityRow                [existing]
+```
+
+The controller stays rune-independent TypeScript. The Svelte surface uses
+`$props`, `$state`, `$derived`, and `$effect`; optional projections remain
+conditional blocks, and async owner resolution remains in effects rather than
+duplicated route fetches.
+
+### Filesystem workbench states
+
+```text
+FilesystemWorkspace
+├─ WorkspaceCommandBar
+├─ WorkspaceLocationBar
+└─ {#if owner state}
+   ├─ WorkspaceUnavailableState
+   ├─ WorkspaceOpeningState
+   └─ WorkspaceReadyState
+      └─ Resizable.PaneGroup              [VibesKit]
+         ├─ FileExplorerPane
+         │  ├─ ResourceLocationRail?
+         │  ├─ ExplorerHeader?
+         │  └─ FileList
+         │     ├─ EmptyFolderState
+         │     ├─ EmptySearchState
+         │     └─ FileRow × n
+         ├─ Resizable.Handle
+         └─ DocumentPane
+            ├─ FileDetails                [selection only]
+            ├─ ReadOnlyPreview            [unsupported document]
+            └─ Editor slot                [active editable document]
+```
+
+Compact mode renders Explorer and Document as two presentations of the same
+mounted state. It must not remount the editor transaction when switching panes.
+
+### Code + Chat product arrangement
+
+Chat is adjacent product placement, not nested Editor DOM.
+
+```text
+VesselWorkspace
+├─ VesselAppWindow[workspace.code]
+│  └─ EditorWorkspace
+└─ VesselAppWindow[workspace.chat]        [optional host placement]
+   └─ ChatWorkspace                      [chat/svelte]
+```
+
+This keeps AI/provider/model/tool/agent custody with their owners while still
+letting `vibes editor` open an opinionated Code-and-Chat workspace layout.
+
+## Repetition pass
+
+The current `FilesystemWorkspace.svelte` repeats four responsibilities often
+enough to deserve owner-level components. They are the next extraction seam,
+not new Editor components:
+
+1. Repeated toolbar button shape -> `WorkspaceCommandBar.svelte`.
+2. Repeated resource/location navigation -> `WorkspaceLocationBar.svelte` and
+   `ResourceLocationRail.svelte`.
+3. Repeated entry identity/metadata -> `FileRow.svelte` and
+   `FileDetails.svelte` backed by existing pure helpers.
+4. Repeated async empty/error/loading presentation ->
+   `WorkspaceOwnerState.svelte` with snippets for the ready branch.
+5. Two confirmation trees -> one `WorkspaceIntentDialog.svelte` whose typed
+   intent determines copy/actions; destructive and dirty-resource policy stays
+   in the controller.
+
+After that extraction, the owner DOM becomes:
+
+```text
+FilesystemWorkspace
+├─ WorkspaceCommandBar
+├─ WorkspaceLocationBar
+├─ WorkspaceOwnerState
+│  └─ {#snippet ready()}
+│     └─ WorkspaceSplitView
+│        ├─ FileExplorer
+│        └─ DocumentRegion
+├─ WorkspaceStatusBar
+└─ WorkspaceIntentDialog
+```
+
+Each component owns one visual or interaction boundary; runtime authority,
+navigation coordination, pending-resource policy, and editor transactions stay
+in their existing pure controllers rather than leaking into leaf components.

package/dist/svelte/components/EditorAgentSpotlight.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { EditorAgentPresence } from '@vibesdotdev/editor';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+
+	let {
+		presences = [],
+		followAgent = false,
+		ontogglefollow
+	}: {
+		presences?: readonly EditorAgentPresence[];
+		followAgent?: boolean;
+		ontogglefollow?: (follow: boolean) => void;
+	} = $props();
+
+	const activeAgents = $derived(presences.filter((p) => p.status !== 'reading'));
+	const primaryAgent = $derived(activeAgents[0] ?? presences[0]);
+</script>
+
+{#if primaryAgent}
+	<div
+		class="agent-spotlight"
+		role="status"
+		aria-live="polite"
+		data-agent-spotlight={primaryAgent.agentId}
+		data-agent-status={primaryAgent.status}
+	>
+		<div class="agent-spotlight__info">
+			<span class="agent-spotlight__pulse" class:agent-spotlight__pulse--active={primaryAgent.status !== 'reading'}></span>
+			<span class="agent-spotlight__name">{primaryAgent.name}</span>
+			<Badge variant="outline" class="agent-spotlight__status-badge">
+				{primaryAgent.status}
+			</Badge>
+			{#if primaryAgent.range}
+				<span class="agent-spotlight__line">
+					Line {primaryAgent.range.startLine}
+					{#if primaryAgent.range.endLine !== primaryAgent.range.startLine}
+						– {primaryAgent.range.endLine}
+					{/if}
+				</span>
+			{/if}
+			{#if presences.length > 1}
+				<span class="agent-spotlight__others">
+					+{presences.length - 1} other agent{presences.length > 2 ? 's' : ''}
+				</span>
+			{/if}
+		</div>
+
+		<div class="agent-spotlight__actions">
+			<Button
+				type="button"
+				variant={followAgent ? 'default' : 'ghost'}
+				size="sm"
+				class="agent-spotlight__follow-btn"
+				onclick={() => ontogglefollow?.(!followAgent)}
+				aria-pressed={followAgent}
+			>
+				{followAgent ? 'Following Agent' : 'Follow Agent'}
+			</Button>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.agent-spotlight {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		padding: 0.375rem 0.75rem;
+		background: color-mix(in oklab, var(--primary) 8%, var(--background));
+		border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent);
+		border-radius: 0.5rem;
+		font-size: 0.75rem;
+	}
+
+	.agent-spotlight__info {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.agent-spotlight__pulse {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background: var(--muted-foreground);
+		flex-shrink: 0;
+	}
+
+	.agent-spotlight__pulse--active {
+		background: #10b981;
+		box-shadow: 0 0 8px #10b981;
+		animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
+	@keyframes pulse-ring {
+		0%, 100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.4;
+		}
+	}
+
+	.agent-spotlight__name {
+		font-weight: 600;
+		color: var(--foreground);
+	}
+
+	:global(.agent-spotlight__status-badge) {
+		font-size: 0.6875rem;
+		padding: 0.1rem 0.35rem;
+		text-transform: capitalize;
+	}
+
+	.agent-spotlight__line {
+		color: var(--muted-foreground);
+		font-family: var(--font-mono, monospace);
+		font-size: 0.6875rem;
+	}
+
+	.agent-spotlight__others {
+		color: var(--muted-foreground);
+		font-style: italic;
+	}
+
+	.agent-spotlight__actions {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	:global(.agent-spotlight__follow-btn) {
+		height: 1.5rem;
+		padding: 0 0.5rem;
+		font-size: 0.6875rem;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { EditorAgentPresence } from '@vibesdotdev/editor';
+type $$ComponentProps = {
+    presences?: readonly EditorAgentPresence[];
+    followAgent?: boolean;
+    ontogglefollow?: (follow: boolean) => void;
+};
+declare const EditorAgentSpotlight: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorAgentSpotlight = ReturnType<typeof EditorAgentSpotlight>;
+export default EditorAgentSpotlight;
+//# sourceMappingURL=EditorAgentSpotlight.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorAgentSpotlight.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorAgentSpotlight.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAI9D,KAAK,gBAAgB,GAAI;IACxB,SAAS,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C,CAAC;AAkDH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/EditorCapabilityRow.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { buttonVariants } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		Collapsible,
+		CollapsibleContent,
+		CollapsibleTrigger
+	} from '@vibesdotdev/kit/components/ui/collapsible';
+	import type { EditorCapabilityObservation } from '@vibesdotdev/editor';
+	import type { WorkspaceDocumentAuthority } from '@vibesdotdev/workspace-schemas/document';
+
+	let {
+		observations,
+		authority
+	}: {
+		observations: readonly EditorCapabilityObservation[];
+		authority: WorkspaceDocumentAuthority;
+	} = $props();
+
+	function capabilityLabel(id: string): string {
+		const normalized = id.toLowerCase();
+		if (normalized.includes('publish') || normalized.includes('write')) return 'Save changes';
+		if (normalized.includes('reload') || normalized.includes('read')) return 'Load this file';
+		if (normalized.includes('observe') || normalized.includes('watch')) {
+			return 'Notice outside changes';
+		}
+		return id
+			.split(/[./_-]+/)
+			.filter(Boolean)
+			.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+			.join(' ');
+	}
+
+	function stateLabel(state: EditorCapabilityObservation['state']): string {
+		if (state === 'ready') return 'Ready';
+		if (state === 'denied' || state === 'unavailable') return 'Unavailable';
+		if (state === 'degraded' || state === 'recovering') return 'Limited';
+		return 'Not reported';
+	}
+
+	function badgeVariant(state: EditorCapabilityObservation['state']) {
+		if (state === 'denied' || state === 'unavailable') return 'destructive' as const;
+		if (state === 'degraded' || state === 'recovering') return 'secondary' as const;
+		return 'outline' as const;
+	}
+</script>
+
+<div class="connection-details">
+	<Collapsible>
+		<CollapsibleTrigger
+			class={`${buttonVariants({ variant: 'ghost', size: 'sm' })} text-muted-foreground px-2`}
+		>
+			Connection details
+		</CollapsibleTrigger>
+		<CollapsibleContent>
+			<div class="connection-details__content">
+				<dl class="connection-details__summary">
+					<div>
+						<dt>Location</dt>
+						<dd>{authority.target === 'local' ? 'On this device' : 'Cloud workspace'}</dd>
+					</div>
+					<div>
+						<dt>Editing</dt>
+						<dd>{authority.canWrite ? 'Changes can be saved' : 'View only'}</dd>
+					</div>
+					<div>
+						<dt>Changes from other apps</dt>
+						<dd>
+							{authority.externalWritersFenced
+								? 'Coordinated by this workspace'
+								: 'May create a conflict'}
+						</dd>
+					</div>
+				</dl>
+
+				{#if observations.length > 0}
+					<ul class="connection-details__capabilities" aria-label="Available editor actions">
+						{#each observations as observation, index (`${observation.capabilityId}:${observation.observedAt}:${index}`)}
+							<li>
+								<span>{capabilityLabel(observation.capabilityId)}</span>
+								<Badge variant={badgeVariant(observation.state)}
+									>{stateLabel(observation.state)}</Badge
+								>
+							</li>
+						{/each}
+					</ul>
+				{:else}
+					<p class="connection-details__empty">Additional connection details were not reported.</p>
+				{/if}
+			</div>
+		</CollapsibleContent>
+	</Collapsible>
+</div>
+
+<style>
+	.connection-details {
+		display: grid;
+		justify-items: start;
+		min-width: 0;
+	}
+
+	.connection-details__content {
+		width: min(100%, 36rem);
+		padding: 0.5rem 0.5rem 0;
+	}
+
+	.connection-details__summary {
+		display: grid;
+		gap: 0.5rem;
+		margin: 0;
+		font-size: 0.75rem;
+	}
+
+	.connection-details__summary > div,
+	.connection-details__capabilities li {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	.connection-details__summary dt,
+	.connection-details__empty {
+		color: var(--muted-foreground);
+	}
+
+	.connection-details__summary dd {
+		margin: 0;
+		text-align: right;
+	}
+
+	.connection-details__capabilities {
+		display: grid;
+		gap: 0.4rem;
+		margin: 0.75rem 0 0;
+		padding: 0.75rem 0 0;
+		border-top: 1px solid var(--border);
+		font-size: 0.75rem;
+		list-style: none;
+	}
+
+	.connection-details__empty {
+		margin: 0.75rem 0 0;
+		font-size: 0.75rem;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { EditorCapabilityObservation } from '@vibesdotdev/editor';
+import type { WorkspaceDocumentAuthority } from '@vibesdotdev/workspace-schemas/document';
+type $$ComponentProps = {
+    observations: readonly EditorCapabilityObservation[];
+    authority: WorkspaceDocumentAuthority;
+};
+declare const EditorCapabilityRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorCapabilityRow = ReturnType<typeof EditorCapabilityRow>;
+export default EditorCapabilityRow;
+//# sourceMappingURL=EditorCapabilityRow.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorCapabilityRow.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EditorCapabilityRow.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAEzF,KAAK,gBAAgB,GAAI;IACxB,YAAY,EAAE,SAAS,2BAA2B,EAAE,CAAC;IACrD,SAAS,EAAE,0BAA0B,CAAC;CACtC,CAAC;AAwFH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}