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

package/dist/svelte/components/AccountSettingsField.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import * as Command from '@vibesdotdev/kit/components/ui/command';
+	import * as Popover from '@vibesdotdev/kit/components/ui/popover';
+	import { RadioGroup, RadioGroupItem } from '@vibesdotdev/kit/components/ui/radio-group';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import * as Slider from '@vibesdotdev/kit/components/ui/slider';
+	import { Switch } from '@vibesdotdev/kit/components/ui/switch';
+	import { Textarea } from '@vibesdotdev/kit/components/ui/textarea';
+	import type { AccountSettingsFieldProps } from '../manifest-form.js';
+	import type { JsonValue } from '../json.js';
+
+	let { field, value, error, readOnly = false, onchange }: AccountSettingsFieldProps = $props();
+	let comboboxOpen = $state(false);
+
+	const ui = $derived(field.meta.ui);
+	const options = $derived(field.meta.options ?? []);
+	const component = $derived(field.component);
+	const isDisabled = $derived(field.disabled || readOnly);
+	const numericValue = $derived(Number(value));
+	const stringValue = $derived(value === undefined || value === null ? '' : String(value));
+	const sliderMin = $derived(ui.min ?? 0);
+	const sliderMax = $derived(ui.max ?? 100);
+	const sliderStep = $derived(ui.step ?? 1);
+	const sliderValue = $derived(Number.isFinite(numericValue) ? numericValue : sliderMin);
+	const selectedOption = $derived(options.find((option) => option.value === stringValue) ?? null);
+	const describedBy = $derived(error ? `${field.key}-error` : undefined);
+
+	function handleChange(next: JsonValue | undefined): void {
+		onchange?.(field.key, next);
+	}
+
+	function formatNumericValue(next: number): string {
+		const formatted =
+			Number.isInteger(next) || sliderStep >= 1
+				? String(next)
+				: next.toFixed(2).replace(/0+$/, '').replace(/\.$/, '');
+		return `${ui.valuePrefix ?? ''}${formatted}${ui.valueSuffix ? ` ${ui.valueSuffix}` : ''}`;
+	}
+</script>
+
+{#snippet fieldHelp()}
+	{#if ui.description && !error}
+		<p class="text-sm text-muted-foreground">{ui.description}</p>
+	{/if}
+	{#if ui.helpText && !error}
+		<p class="text-xs text-muted-foreground">{ui.helpText}</p>
+	{/if}
+{/snippet}
+
+<div class="flex flex-col gap-1.5">
+	{#if component === 'switch'}
+		<div class="flex items-center justify-between gap-4">
+			<div class="space-y-0.5">
+				<Label for={field.key}>{ui.label}</Label>
+				{@render fieldHelp()}
+			</div>
+			<Switch
+				id={field.key}
+				checked={Boolean(value)}
+				disabled={isDisabled}
+				onCheckedChange={(checked) => handleChange(checked)}
+				aria-describedby={describedBy}
+			/>
+		</div>
+	{:else if component === 'select'}
+		{#if !ui.hideLabel}
+			<Label for={field.key}>{ui.label}</Label>
+		{/if}
+		<Select.Root
+			type="single"
+			value={stringValue}
+			disabled={isDisabled}
+			onValueChange={(selected: string) => handleChange(selected)}
+		>
+			<Select.Trigger id={field.key} aria-describedby={describedBy}>
+				<span>{options.find((option) => option.value === stringValue)?.label ?? 'Select...'}</span>
+			</Select.Trigger>
+			<Select.Content>
+				{#each options as option (option.value)}
+					<Select.Item value={option.value}>{option.label}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+		{@render fieldHelp()}
+	{:else if component === 'combobox'}
+		{#if !ui.hideLabel}
+			<Label for={field.key}>{ui.label}</Label>
+		{/if}
+		<Popover.Root bind:open={comboboxOpen}>
+			<Popover.Trigger asChild>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						id={field.key}
+						type="button"
+						variant="outline"
+						role="combobox"
+						aria-expanded={comboboxOpen}
+						aria-describedby={describedBy}
+						disabled={isDisabled || options.length === 0}
+						class="w-full justify-between overflow-hidden"
+					>
+						<span class="min-w-0 flex-1 truncate text-left">
+							{selectedOption?.label ?? ui.placeholder ?? 'Select...'}
+						</span>
+						<Icon icon="lucide:chevrons-up-down" class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+					</Button>
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content class="w-[var(--bits-popover-anchor-width)] min-w-[18rem] p-0" align="start">
+				<Command.Root>
+					<Command.Input placeholder={ui.placeholder ?? `Search ${ui.label.toLowerCase()}...`} />
+					<Command.Empty>No matching option.</Command.Empty>
+					<Command.Group>
+						{#each options as option (option.value)}
+							<Command.Item
+								value={option.value}
+								keywords={[option.label, option.description ?? '']}
+								onSelect={() => {
+									handleChange(option.value);
+									comboboxOpen = false;
+								}}
+								class="items-start gap-2 py-3"
+							>
+								<Icon
+									icon="lucide:check"
+									class={`mt-0.5 h-4 w-4 shrink-0 ${option.value === stringValue ? 'opacity-100' : 'opacity-0'}`}
+								/>
+								<span class="min-w-0 flex-1">
+									<span class="block truncate font-medium">{option.label}</span>
+									{#if option.description}
+										<span class="block text-xs text-muted-foreground">{option.description}</span>
+									{/if}
+								</span>
+							</Command.Item>
+						{/each}
+					</Command.Group>
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
+		{@render fieldHelp()}
+	{:else if component === 'radio-group'}
+		{#if !ui.hideLabel}
+			<Label>{ui.label}</Label>
+		{/if}
+		<RadioGroup
+			value={(value as string | undefined) ?? ''}
+			disabled={isDisabled}
+			onValueChange={(selected: string) => handleChange(selected)}
+			aria-describedby={describedBy}
+		>
+			{#each options as option (option.value)}
+				<div class="flex items-center gap-2">
+					<RadioGroupItem value={option.value} id={`${field.key}-${option.value}`} />
+					<Label for={`${field.key}-${option.value}`} class="cursor-pointer">
+						{option.label}
+						{#if option.description}
+							<span class="block text-xs text-muted-foreground">{option.description}</span>
+						{/if}
+					</Label>
+				</div>
+			{/each}
+		</RadioGroup>
+		{@render fieldHelp()}
+	{:else if component === 'checkbox'}
+		<div class="flex items-center gap-3">
+			<input
+				type="checkbox"
+				id={field.key}
+				checked={Boolean(value)}
+				disabled={isDisabled}
+				class="h-4 w-4 rounded border-input"
+				onchange={(event) => handleChange(event.currentTarget.checked)}
+				aria-describedby={describedBy}
+			/>
+			<Label for={field.key}>{ui.label}</Label>
+		</div>
+		{@render fieldHelp()}
+	{:else if component === 'textarea'}
+		{#if !ui.hideLabel}
+			<Label for={field.key}>{ui.label}</Label>
+		{/if}
+		<Textarea
+			id={field.key}
+			value={(value as string | undefined) ?? ''}
+			placeholder={ui.placeholder ?? ''}
+			disabled={isDisabled}
+			rows={4}
+			oninput={(event) => handleChange(event.currentTarget.value)}
+			aria-describedby={describedBy}
+		/>
+		{@render fieldHelp()}
+	{:else if component === 'number'}
+		{#if !ui.hideLabel}
+			<Label for={field.key}>{ui.label}</Label>
+		{/if}
+		<Input
+			id={field.key}
+			type="number"
+			value={value === undefined || value === null ? '' : String(value)}
+			placeholder={ui.placeholder ?? ''}
+			min={typeof ui.min === 'number' ? ui.min : undefined}
+			max={typeof ui.max === 'number' ? ui.max : undefined}
+			step={typeof ui.step === 'number' ? ui.step : undefined}
+			disabled={isDisabled}
+			oninput={(event) => {
+				const raw = event.currentTarget.value;
+				if (raw === '') {
+					handleChange(undefined);
+					return;
+				}
+				const parsed = Number(raw);
+				handleChange(Number.isNaN(parsed) ? raw : parsed);
+			}}
+			aria-describedby={describedBy}
+		/>
+		{@render fieldHelp()}
+	{:else if component === 'slider'}
+		{#if !ui.hideLabel}
+			<div class="flex items-center justify-between gap-3">
+				<Label for={field.key}>{ui.label}</Label>
+				<span class="text-sm tabular-nums text-muted-foreground">{formatNumericValue(sliderValue)}</span>
+			</div>
+		{/if}
+		<Slider.Root
+			type="single"
+			value={sliderValue}
+			min={sliderMin}
+			max={sliderMax}
+			step={sliderStep}
+			disabled={isDisabled}
+			aria-describedby={describedBy}
+			onValueChange={(next: number) => handleChange(next)}
+		/>
+		<div class="flex justify-between text-xs text-muted-foreground">
+			<span>{formatNumericValue(sliderMin)}</span>
+			<span>{formatNumericValue(sliderMax)}</span>
+		</div>
+		{@render fieldHelp()}
+	{:else}
+		{#if !ui.hideLabel}
+			<Label for={field.key}>{ui.label}</Label>
+		{/if}
+		<Input
+			id={field.key}
+			type={component === 'password' || component === 'secret'
+				? 'password'
+				: component === 'email'
+					? 'email'
+					: component === 'url'
+						? 'url'
+						: 'text'}
+			value={(value as string | undefined) ?? ''}
+			placeholder={ui.placeholder ?? ''}
+			disabled={isDisabled}
+			oninput={(event) => handleChange(event.currentTarget.value)}
+			aria-describedby={describedBy}
+		/>
+		{@render fieldHelp()}
+	{/if}
+
+	{#if error}
+		<p id={`${field.key}-error`} class="text-sm text-destructive">{error}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,5 @@
+import type { AccountSettingsFieldProps } from '../manifest-form.ts';
+declare const AccountSettingsField: import("svelte").Component<AccountSettingsFieldProps, {}, "">;
+type AccountSettingsField = ReturnType<typeof AccountSettingsField>;
+export default AccountSettingsField;
+//# sourceMappingURL=AccountSettingsField.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSettingsField.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountSettingsField.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAqMrE,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/AccountSettingsForm.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { settle } from '@vibesdotdev/kernel';
+	import { stableJson, type JsonValue, type SettingsValues } from '../json.js';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import {
+		buildAccountManifestInitialValues,
+		createAccountManifestFormStore
+	} from '../manifest-form-store.svelte.js';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import AccountSettingsField from './AccountSettingsField.svelte';
+	import AccountSettingsGroup from './AccountSettingsGroup.svelte';
+	import type {
+		AccountSettingsFieldMeta,
+		AccountSettingsFormController,
+		AccountSettingsFormProps,
+		AccountSettingsResolvedField,
+		AccountSettingsResolvedGroup,
+		AccountSettingsSaveResult
+	} from '../manifest-form.js';
+
+	let {
+		manifest,
+		initialValues = {},
+		toPatch,
+		onsave,
+		onsaved,
+		onerror,
+		submitLabel = 'Save',
+		cardLayout = false,
+		showHeader = true,
+		disabled = false,
+		actions,
+		class: className = ''
+	}: AccountSettingsFormProps = $props();
+
+	const initialFormState = createInitialFormState();
+	const form = initialFormState.form;
+	const values = $derived(form.values);
+	const errors = $derived(form.errors);
+	const isSubmitting = $derived(form.isSubmitting);
+	let errorMessage = $state<string | null>(null);
+
+	function inferComponent(meta: AccountSettingsFieldMeta): string {
+		if (meta.ui.component) return meta.ui.component;
+		if (meta.options && meta.options.length > 0) {
+			return meta.options.length <= 4 ? 'radio-group' : 'select';
+		}
+		return 'input';
+	}
+
+	const fields = $derived.by((): AccountSettingsResolvedField[] => {
+		const resolved: AccountSettingsResolvedField[] = [];
+		for (const [key, meta] of Object.entries(manifest.fields ?? {})) {
+			resolved.push({
+				key,
+				meta,
+				component: inferComponent(meta),
+				visible: true,
+				disabled: false,
+				required: false,
+				error: errors[key]
+			});
+		}
+		resolved.sort((a, b) => (a.meta.ui.order ?? 999) - (b.meta.ui.order ?? 999));
+		return resolved;
+	});
+
+	const groups = $derived.by((): AccountSettingsResolvedGroup[] => {
+		const definedGroups = manifest.groups ?? [];
+		const fieldsByGroup = new Map<string | undefined, AccountSettingsResolvedField[]>();
+
+		for (const field of fields) {
+			const groupId = field.meta.ui.group;
+			if (!fieldsByGroup.has(groupId)) fieldsByGroup.set(groupId, []);
+			fieldsByGroup.get(groupId)?.push(field);
+		}
+
+		const resolved: AccountSettingsResolvedGroup[] = [];
+		const sortedGroups = [...definedGroups].sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+		for (const group of sortedGroups) {
+			const groupFields = fieldsByGroup.get(group.id) ?? [];
+			if (groupFields.length === 0) continue;
+			resolved.push({ group, fields: groupFields, visible: true });
+			fieldsByGroup.delete(group.id);
+		}
+
+		const ungrouped = fieldsByGroup.get(undefined) ?? [];
+		if (ungrouped.length > 0) {
+			resolved.push({
+				group: { id: '_ungrouped', label: 'Other Settings', order: 9999 },
+				fields: ungrouped,
+				visible: true
+			});
+		}
+		return resolved;
+	});
+
+	let lastManifest: typeof manifest | null = initialFormState.manifest;
+	let lastExternalInitialValuesKey = initialFormState.key;
+	let baselineValuesKey = initialFormState.key;
+	const valuesKey = $derived(stableJson(values));
+	const isDirty = $derived(valuesKey !== baselineValuesKey);
+	const canSubmit = $derived(!disabled && !isSubmitting && isDirty);
+
+	$effect(() => {
+		const nextInitialValues = buildAccountManifestInitialValues(manifest, initialValues);
+		const nextKey = stableJson(nextInitialValues);
+		if (manifest === lastManifest && nextKey === lastExternalInitialValuesKey) return;
+		lastManifest = manifest;
+		lastExternalInitialValuesKey = nextKey;
+		baselineValuesKey = nextKey;
+		form.replaceDefinition(manifest, initialValues);
+		errorMessage = null;
+	});
+
+	const controller = $derived<AccountSettingsFormController>({
+		values,
+		errors,
+		isSubmitting,
+		isDirty,
+		reset: () => {
+			errorMessage = null;
+			form.reset();
+		}
+	});
+
+	function createInitialFormState() {
+		const nextValues = buildAccountManifestInitialValues(manifest, initialValues);
+		return {
+			form: createAccountManifestFormStore({ manifest, initialValues }),
+			key: stableJson(nextValues),
+			manifest
+		};
+	}
+
+	function handleFieldChange(key: string, value: JsonValue | undefined): void {
+		form.setValue(key, value);
+	}
+
+	async function defaultSave(currentValues: SettingsValues): Promise<AccountSettingsSaveResult> {
+		if (!toPatch) {
+			throw new Error('AccountSettingsForm requires either onsave or toPatch.');
+		}
+		return await accountState.patchUserSettings(toPatch(currentValues));
+	}
+
+	async function handleSubmit(): Promise<void> {
+		if (disabled || form.isSubmitting) return;
+		errorMessage = null;
+		const valid = await form.validate();
+		if (!valid) return;
+
+		form.isSubmitting = true;
+		const currentValues = form.getValues();
+		const saved = await settle(async () => {
+			const patch = toPatch ? toPatch(currentValues) : null;
+			const result = onsave ? await onsave(currentValues, patch) : await defaultSave(currentValues);
+			baselineValuesKey = stableJson(currentValues);
+			form.replaceDefinition(manifest, currentValues);
+			onsaved?.(currentValues, result);
+		});
+		if (!saved.ok) {
+			errorMessage = failureMessage(saved.cause, 'Failed to save settings');
+			onerror?.(saved.cause);
+		}
+		form.isSubmitting = false;
+	}
+</script>
+
+{#snippet formContent()}
+	{#each groups as group (group.group.id)}
+		<AccountSettingsGroup {group}>
+			{#each group.fields as field (field.key)}
+				{#if field.visible}
+					<AccountSettingsField
+						{field}
+						value={values[field.key]}
+						error={errors[field.key]}
+						readOnly={disabled || isSubmitting}
+						onchange={handleFieldChange}
+					/>
+				{/if}
+			{/each}
+		</AccountSettingsGroup>
+	{/each}
+
+	{#if errorMessage}
+		<div role="alert" class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm">
+			{errorMessage}
+		</div>
+	{/if}
+
+	{#if actions}
+		{@render actions(controller)}
+	{:else}
+		<div class="flex justify-end gap-2 pt-4">
+			<Button
+				type="button"
+				variant="outline"
+				disabled={disabled || isSubmitting || !isDirty}
+				onclick={controller.reset}
+			>
+				Reset
+			</Button>
+			<Button type="submit" disabled={!canSubmit}>
+				{isSubmitting ? 'Saving...' : submitLabel}
+			</Button>
+		</div>
+	{/if}
+{/snippet}
+
+<form
+	onsubmit={(event) => {
+		event.preventDefault();
+		handleSubmit();
+	}}
+	class={`account-settings-form ${className}`}
+>
+	{#if cardLayout}
+		<Card>
+			{#if showHeader}
+				<CardHeader>
+					<CardTitle>{manifest.name}</CardTitle>
+					{#if manifest.description}
+						<CardDescription>{manifest.description}</CardDescription>
+					{/if}
+				</CardHeader>
+			{/if}
+			<CardContent class="flex flex-col gap-6">
+				{@render formContent()}
+			</CardContent>
+		</Card>
+	{:else}
+		<div class="flex flex-col gap-6">
+			{@render formContent()}
+		</div>
+	{/if}
+</form>

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

@@ -0,0 +1,5 @@
+import type { AccountSettingsFormProps } from '../manifest-form.ts';
+declare const AccountSettingsForm: import("svelte").Component<AccountSettingsFormProps, {}, "">;
+type AccountSettingsForm = ReturnType<typeof AccountSettingsForm>;
+export default AccountSettingsForm;
+//# sourceMappingURL=AccountSettingsForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSettingsForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountSettingsForm.svelte.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAGV,wBAAwB,EAIxB,MAAM,qBAAqB,CAAC;AA8N9B,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/AccountSettingsGroup.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import type { AccountSettingsGroupProps } from '../manifest-form.js';
+	import { normalizeDirectoryIcon } from '../settings-directory.js';
+
+	let { group, children }: AccountSettingsGroupProps = $props();
+	const groupMeta = $derived(group.group);
+	const groupIcon = $derived(resolveGroupIcon(groupMeta.id, groupMeta.icon));
+
+	const GROUP_ICON_BY_ID = new Map<string, string>(Object.entries({
+		activity: 'lucide:clipboard-list',
+		appearance: 'lucide:palette',
+		behavior: 'lucide:sliders-horizontal',
+		defaults: 'lucide:settings-2',
+		discovery: 'lucide:search',
+		email: 'lucide:mail',
+		files: 'lucide:file',
+		configuration: 'lucide:settings-2',
+		input: 'lucide:message-square-text',
+		locale: 'lucide:globe',
+		model: 'lucide:bot',
+		notifications: 'lucide:bell',
+		privacy: 'lucide:shield',
+		realtime: 'lucide:bell-ring',
+		retention: 'lucide:archive',
+		visibility: 'lucide:eye'
+	}));
+
+	function resolveGroupIcon(id: string, icon: string | null | undefined): string {
+		const normalized = normalizeDirectoryIcon(icon);
+		if (normalized !== 'lucide:settings') return normalized;
+		return GROUP_ICON_BY_ID.get(id) ?? 'lucide:settings';
+	}
+</script>
+
+{#if group.visible}
+	<div class="space-y-4 border-t pt-6 first:border-t-0 first:pt-0">
+		{#if groupMeta.label || groupMeta.description || groupMeta.icon}
+			<div class="flex items-start gap-3">
+				<span class="rounded-md border bg-muted/40 p-2 text-muted-foreground" aria-hidden="true">
+					<Icon icon={groupIcon} class="h-4 w-4" />
+				</span>
+				<div>
+					{#if groupMeta.label}
+						<h3 class="text-sm font-medium">{groupMeta.label}</h3>
+					{/if}
+					{#if groupMeta.description}
+						<p class="text-xs text-muted-foreground">{groupMeta.description}</p>
+					{/if}
+				</div>
+			</div>
+		{/if}
+		<div class="space-y-4">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,5 @@
+import type { AccountSettingsGroupProps } from '../manifest-form.ts';
+declare const AccountSettingsGroup: import("svelte").Component<AccountSettingsGroupProps, {}, "">;
+type AccountSettingsGroup = ReturnType<typeof AccountSettingsGroup>;
+export default AccountSettingsGroup;
+//# sourceMappingURL=AccountSettingsGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSettingsGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountSettingsGroup.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAiErE,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}