@vit-foundation/ui 0.10.1 → 0.11.0

package/dist/components/timeline/Timeline.svelte

@@ -2,6 +2,9 @@
 	import { getUiConfig } from '../../config/context.js';
 	import type { MilestoneData } from '../../content/types.js';
 	import type { MilestoneEditMap } from './TimelineMilestone.svelte';
+	import AddSlot from '../../edit/chrome/AddSlot.svelte';
+	import { getEditAdapter } from '../../edit/context.js';
+	import type { CollectionRef } from '../../edit/types.js';
 	import { yearOf } from '../../utils/dates.js';
 	import TimelineMilestone from './TimelineMilestone.svelte';
 
@@ -11,11 +14,30 @@
 		variant?: 'compact' | 'full';
 		/** Edit descriptors for one milestone's fields; see TimelineMilestone. */
 		editFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+		/**
+		 * Names the collection these milestones are rows of. Set alongside an
+		 * adapter with `applyOp`, it turns on the add slots and each frame's
+		 * remove. NO reorder: order derives from `occurredOn` — editing the
+		 * date IS the reorder.
+		 */
+		collection?: CollectionRef;
 	}
 
-	let { milestones, variant = 'compact', editFor }: Props = $props();
+	let { milestones, variant = 'compact', editFor, collection }: Props = $props();
 
 	const config = getUiConfig();
+	const adapter = getEditAdapter();
+
+	const structural = $derived(
+		collection !== undefined && (adapter?.isEditing ?? false) && adapter?.applyOp !== undefined
+	);
+
+	/** The map the host gave, plus removal — the list owns identity and order. */
+	function editMapFor(milestone: MilestoneData): MilestoneEditMap | undefined {
+		const map = editFor?.(milestone);
+		if (!structural || !collection) return map;
+		return { ...map, removeOp: { kind: 'remove', collection, id: milestone.id } };
+	}
 
 	interface TimelineEntry {
 		milestone: MilestoneData;
@@ -46,13 +68,29 @@
 >
 	<ol>
 		{#each entries as entry (entry.milestone.id)}
+			{#if structural && collection}
+				<li class="add-slot">
+					<AddSlot
+						op={{
+							kind: 'create',
+							collection,
+							anchor: { id: entry.milestone.id, placement: 'before' }
+						}}
+					/>
+				</li>
+			{/if}
 			<li>
 				{#if entry.yearMarker}
 					<span class="year">{entry.yearMarker}</span>
 				{/if}
-				<TimelineMilestone milestone={entry.milestone} edit={editFor?.(entry.milestone)} />
+				<TimelineMilestone milestone={entry.milestone} edit={editMapFor(entry.milestone)} />
 			</li>
 		{/each}
+		{#if structural && collection}
+			<li class="add-slot">
+				<AddSlot op={{ kind: 'create', collection }} />
+			</li>
+		{/if}
 	</ol>
 </div>
 
@@ -92,6 +130,13 @@
 		flex-basis: 18rem;
 	}
 
+	/* The add affordances sit between the cards without taking a card's slot. */
+	li.add-slot,
+	.full li.add-slot {
+		flex: 0 0 auto;
+		align-self: center;
+	}
+
 	.year {
 		position: absolute;
 		top: -2.4rem;

package/dist/components/timeline/Timeline.svelte.d.ts

@@ -1,11 +1,19 @@
 import type { MilestoneData } from '../../content/types.js';
 import type { MilestoneEditMap } from './TimelineMilestone.svelte';
+import type { CollectionRef } from '../../edit/types.js';
 interface Props {
     milestones: MilestoneData[];
     /** 'compact' = homepage slice; 'full' = transparency history with year markers. */
     variant?: 'compact' | 'full';
     /** Edit descriptors for one milestone's fields; see TimelineMilestone. */
     editFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+    /**
+     * Names the collection these milestones are rows of. Set alongside an
+     * adapter with `applyOp`, it turns on the add slots and each frame's
+     * remove. NO reorder: order derives from `occurredOn` — editing the
+     * date IS the reorder.
+     */
+    collection?: CollectionRef;
 }
 declare const Timeline: import("svelte").Component<Props, {}, "">;
 type Timeline = ReturnType<typeof Timeline>;

package/dist/components/timeline/TimelineMilestone.svelte

@@ -1,17 +1,31 @@
 <script module lang="ts">
-	import type { EditDescriptor } from '../../edit/types.js';
+	import type { EditDescriptor, EntityOp, PropertyDescriptor } from '../../edit/types.js';
 
-	/** Which of the milestone's localized fields are editable at this render site. */
+	/**
+	 * Which of the milestone's fields are editable at this render site:
+	 * localized text inline (EditDescriptor), scalars through the frame's
+	 * property panel (PropertyDescriptor), and removal from the collection.
+	 */
 	export interface MilestoneEditMap {
 		title?: EditDescriptor;
 		body?: EditDescriptor;
+		occurredOn?: PropertyDescriptor;
+		category?: PropertyDescriptor;
+		linkUrl?: PropertyDescriptor;
+		image?: PropertyDescriptor;
+		/** Accessible name for the frame, e.g. "Fita: Neix la fundació". */
+		label?: string;
+		/** Set by Timeline from its `collection` — removal of this milestone. */
+		removeOp?: Extract<EntityOp, { kind: 'remove' }>;
 	}
 </script>
 
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
-	import type { MilestoneData } from '../../content/types.js';
+	import type { MilestoneCategory, MilestoneData } from '../../content/types.js';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import Editable from '../../edit/Editable.svelte';
 	import { MILESTONE_CATEGORY_COLOR, milestoneCategoryLabel } from '../../utils/milestones.js';
 	import CardMedia from '../ui/CardMedia.svelte';
@@ -28,6 +42,41 @@
 
 	const config = getUiConfig();
 
+	const CATEGORIES = Object.keys(MILESTONE_CATEGORY_COLOR) as MilestoneCategory[];
+
+	/**
+	 * The panel rows, zipped from the map's descriptors and this milestone's
+	 * values. The category select's options come from the same labels the chip
+	 * renders — filled here so the host never re-derives them.
+	 */
+	const panelRows = $derived(
+		[
+			edit?.occurredOn && { descriptor: edit.occurredOn, value: milestone.occurredOn },
+			edit?.category && {
+				descriptor: {
+					options: CATEGORIES.map((category) => ({
+						value: category,
+						label: milestoneCategoryLabel(category, config.messages)
+					})),
+					...edit.category
+				},
+				value: milestone.category
+			},
+			edit?.linkUrl && { descriptor: edit.linkUrl, value: milestone.linkUrl },
+			edit?.image && { descriptor: edit.image, value: milestone.imageUrls[0] ?? null }
+		].filter((row) => row !== undefined)
+	);
+
+	const frameSpec = $derived(
+		edit && (panelRows.length > 0 || edit.removeOp)
+			? {
+					label: edit.label ?? milestone.title,
+					hasPanel: panelRows.length > 0,
+					removeOp: edit.removeOp
+				}
+			: undefined
+	);
+
 	const color = $derived(MILESTONE_CATEGORY_COLOR[milestone.category]);
 	/**
 	 * `link_url` is an unconstrained editable column, and the `press` category
@@ -48,42 +97,49 @@
 
 <article style={`--milestone-color: ${color}`}>
 	<span class="dot" aria-hidden="true"></span>
-	<Editable
-		edit={config.messageEdit?.(`category_${milestone.category}`)}
-		value={milestoneCategoryLabel(milestone.category, config.messages)}
-	>
-		{#snippet children(text, attrs)}<p class="category" {...attrs}>{text}</p>{/snippet}
-	</Editable>
-	<DateText value={milestone.occurredOn} />
-	<Editable edit={edit?.title} value={milestone.title}>
-		{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
-	</Editable>
-	{#if milestone.body}
-		<Editable edit={edit?.body} value={milestone.body}>
-			{#snippet children(text, attrs)}<p class="body" {...attrs}>{text}</p>{/snippet}
+	<!-- The frame sits INSIDE the article so the timeline's flex row never
+	     gains an unexpected child; inactive it renders the content alone. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			<EditPanel rows={panelRows} />
+		{/snippet}
+		<Editable
+			edit={config.messageEdit?.(`category_${milestone.category}`)}
+			value={milestoneCategoryLabel(milestone.category, config.messages)}
+		>
+			{#snippet children(text, attrs)}<p class="category" {...attrs}>{text}</p>{/snippet}
+		</Editable>
+		<DateText value={milestone.occurredOn} />
+		<Editable edit={edit?.title} value={milestone.title}>
+			{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
 		</Editable>
-	{/if}
-	{#if milestone.imageUrls.length > 0}
-		<CardMedia src={milestone.imageUrls[0]} alt="" width="1200" height="675" />
-	{/if}
-	{#if milestone.linkUrl}
-		<p class="more">
-			<ActionLabel
-				edit={config.messageEdit?.('common_readMore')}
-				value={config.messages.common_readMore()}
-			>
-				{#snippet control()}
-					{#if isExternal}
-						<a href={milestone.linkUrl} rel="external noopener"
-							>{config.messages.common_readMore()}</a
-						>
-					{:else if milestone.linkUrl}
-						<Link href={milestone.linkUrl}>{config.messages.common_readMore()}</Link>
-					{/if}
-				{/snippet}
-			</ActionLabel>
-		</p>
-	{/if}
+		{#if milestone.body}
+			<Editable edit={edit?.body} value={milestone.body}>
+				{#snippet children(text, attrs)}<p class="body" {...attrs}>{text}</p>{/snippet}
+			</Editable>
+		{/if}
+		{#if milestone.imageUrls.length > 0}
+			<CardMedia src={milestone.imageUrls[0]} alt="" width="1200" height="675" />
+		{/if}
+		{#if milestone.linkUrl}
+			<p class="more">
+				<ActionLabel
+					edit={config.messageEdit?.('common_readMore')}
+					value={config.messages.common_readMore()}
+				>
+					{#snippet control()}
+						{#if isExternal}
+							<a href={milestone.linkUrl} rel="external noopener"
+								>{config.messages.common_readMore()}</a
+							>
+						{:else if milestone.linkUrl}
+							<Link href={milestone.linkUrl}>{config.messages.common_readMore()}</Link>
+						{/if}
+					{/snippet}
+				</ActionLabel>
+			</p>
+		{/if}
+	</EditFrame>
 </article>
 
 <style>

package/dist/components/timeline/TimelineMilestone.svelte.d.ts

@@ -1,8 +1,22 @@
-import type { EditDescriptor } from '../../edit/types.js';
-/** Which of the milestone's localized fields are editable at this render site. */
+import type { EditDescriptor, EntityOp, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * Which of the milestone's fields are editable at this render site:
+ * localized text inline (EditDescriptor), scalars through the frame's
+ * property panel (PropertyDescriptor), and removal from the collection.
+ */
 export interface MilestoneEditMap {
     title?: EditDescriptor;
     body?: EditDescriptor;
+    occurredOn?: PropertyDescriptor;
+    category?: PropertyDescriptor;
+    linkUrl?: PropertyDescriptor;
+    image?: PropertyDescriptor;
+    /** Accessible name for the frame, e.g. "Fita: Neix la fundació". */
+    label?: string;
+    /** Set by Timeline from its `collection` — removal of this milestone. */
+    removeOp?: Extract<EntityOp, {
+        kind: 'remove';
+    }>;
 }
 import type { MilestoneData } from '../../content/types.js';
 interface Props {

package/dist/components/ui/RichText.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
 	import { renderBody } from '../../content/richtext.js';
 	import { getEditAdapter } from '../../edit/context.js';
 	import type { EditDescriptor } from '../../edit/types.js';
@@ -23,6 +24,7 @@
 	let { body, edit }: Props = $props();
 
 	const adapter = getEditAdapter();
+	const config = getUiConfig();
 	const canEdit = $derived(edit !== undefined && (adapter?.isEditing ?? false));
 
 	/** Last persisted body: what renders, and what Cancel·la returns to. */
@@ -79,16 +81,18 @@
 			class="control"
 			bind:value={draft}
 			rows={Math.max(6, draft.split('\n').length + 1)}
-			aria-label={edit?.label ?? 'Edita el contingut'}
+			aria-label={edit?.label ?? config.editMessages.edit_editBody()}
 		></textarea>
 		<div class="actions">
-			<Button pending={status === 'saving' ? 1 : 0} onclick={() => void save()}>Desa</Button>
-			<GhostButton onclick={cancel}>Cancel·la</GhostButton>
+			<Button pending={status === 'saving' ? 1 : 0} onclick={() => void save()}>
+				{config.editMessages.edit_save()}
+			</Button>
+			<GhostButton onclick={cancel}>{config.editMessages.edit_cancel()}</GhostButton>
 			{#if status === 'error'}
-				<p class="error" role="alert">Error en desar. Torna-ho a provar.</p>
+				<p class="error" role="alert">{config.editMessages.edit_saveError()}. Torna-ho a provar.</p>
 			{/if}
 		</div>
-		<div class="richtext preview" aria-label="Vista prèvia">
+		<div class="richtext preview" aria-label={config.editMessages.edit_preview()}>
 			{#each preview as block, index (index)}
 				{#if block.type === 'h2'}
 					<h2>{block.text}</h2>
@@ -108,7 +112,9 @@
 			{/if}
 		{/each}
 		{#if canEdit}
-			<p class="edit-row"><GhostButton onclick={open}>Edita</GhostButton></p>
+			<p class="edit-row">
+				<GhostButton onclick={open}>{config.editMessages.edit_edit()}</GhostButton>
+			</p>
 		{/if}
 	</div>
 {/if}

package/dist/config/context.js

@@ -1,4 +1,5 @@
 import { getContext, setContext } from 'svelte';
+import { defaultEditMessages } from './edit-messages.js';
 import { defaultMessages } from './messages.js';
 import { BASE_LOCALE, LOCALES } from './types.js';
 const KEY = Symbol.for('@vit-foundation/ui:config');
@@ -14,7 +15,8 @@ export const DEFAULT_UI_CONFIG = {
     url: () => undefined,
     canonicalPathname: (url) => url.pathname,
     siteName: 'ViT',
-    messages: defaultMessages
+    messages: defaultMessages,
+    editMessages: defaultEditMessages
 };
 /**
  * Installs the app's config for the subtree. Takes a *thunk* so a provider
@@ -38,6 +40,9 @@ export function setUiConfig(input) {
         get messages() {
             return input().messages ?? defaultMessages;
         },
+        get editMessages() {
+            return input().editMessages ?? defaultEditMessages;
+        },
         // Undefined means inert: components render their message strings as
         // plain text, which is every app but the CMS.
         messageEdit: (key) => input().messageEdit?.(key)

package/dist/config/edit-messages.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The editor chrome's own strings — status announcements, panel labels, the
+ * confirm-delete wording. A separate object from `UiMessages` on purpose:
+ * that interface mirrors the website's wording catalog (its keys are
+ * `ui_messages` rows a CMS edits), while these strings belong to the EDITOR
+ * a CMS host renders — they must never leak into the site's catalog, and
+ * they must never themselves become editable chrome.
+ *
+ * Same message-function style as `UiMessages`, and the same all-or-nothing
+ * override: a host replaces the whole object or keeps the Catalan defaults.
+ */
+export interface EditMessages {
+    /** Inline + panel status announcements. */
+    edit_saving(): string;
+    edit_saved(): string;
+    edit_saveError(): string;
+    /** RichText's source editor. */
+    edit_save(): string;
+    edit_cancel(): string;
+    edit_edit(): string;
+    edit_preview(): string;
+    edit_editBody(): string;
+    /** The frame toolbar and its panel. */
+    edit_properties(params: {
+        label: string;
+    }): string;
+    edit_remove(): string;
+    edit_removeConfirm(params: {
+        label: string;
+    }): string;
+    edit_close(): string;
+    /** Collections. */
+    edit_add(params: {
+        label: string;
+    }): string;
+    edit_addFailed(): string;
+    /** Property rows. */
+    edit_uploadImage(): string;
+    edit_clearValue(): string;
+    edit_emptyRequired(): string;
+}
+/**
+ * Catalan defaults. The first three and the RichText strings reproduce the
+ * previously hardcoded copy byte-identically — swapping the source of a
+ * string must not repaint a single test or page.
+ */
+export declare const defaultEditMessages: EditMessages;

package/dist/config/edit-messages.js

@@ -0,0 +1,24 @@
+/**
+ * Catalan defaults. The first three and the RichText strings reproduce the
+ * previously hardcoded copy byte-identically — swapping the source of a
+ * string must not repaint a single test or page.
+ */
+export const defaultEditMessages = {
+    edit_saving: () => 'Desant…',
+    edit_saved: () => 'Desat',
+    edit_saveError: () => 'Error en desar',
+    edit_save: () => 'Desa',
+    edit_cancel: () => 'Cancel·la',
+    edit_edit: () => 'Edita',
+    edit_preview: () => 'Vista prèvia',
+    edit_editBody: () => 'Edita el contingut',
+    edit_properties: ({ label }) => `Propietats: ${label}`,
+    edit_remove: () => 'Elimina',
+    edit_removeConfirm: ({ label }) => `Segur que vols eliminar «${label}»? Es pot desfer des de l’historial.`,
+    edit_close: () => 'Tanca',
+    edit_add: ({ label }) => `Afegeix ${label}`,
+    edit_addFailed: () => 'No s’ha pogut afegir',
+    edit_uploadImage: () => 'Puja una imatge',
+    edit_clearValue: () => 'Buida el valor',
+    edit_emptyRequired: () => 'Aquest camp no pot quedar buit'
+};

package/dist/config/index.d.ts

@@ -1,4 +1,6 @@
 export { DEFAULT_UI_CONFIG, getUiConfig, setUiConfig } from './context.js';
+export { defaultEditMessages } from './edit-messages.js';
+export type { EditMessages } from './edit-messages.js';
 export { defaultMessages } from './messages.js';
 export { default as UiProvider } from './UiProvider.svelte';
 export { BASE_LOCALE, LOCALES } from './types.js';

package/dist/config/index.js

@@ -1,4 +1,5 @@
 export { DEFAULT_UI_CONFIG, getUiConfig, setUiConfig } from './context.js';
+export { defaultEditMessages } from './edit-messages.js';
 export { defaultMessages } from './messages.js';
 export { default as UiProvider } from './UiProvider.svelte';
 export { BASE_LOCALE, LOCALES } from './types.js';

package/dist/config/types.d.ts

@@ -1,4 +1,5 @@
 import type { EditDescriptor } from '../edit/types.js';
+import type { EditMessages } from './edit-messages.js';
 /**
  * The site's locales and their canonical member. Fixed rather than generic:
  * `ca` is load-bearing — it is the required key of every localized column
@@ -157,6 +158,12 @@ export interface UiConfig {
     /** Appended to document titles and shown as the wordmark. */
     siteName: string;
     messages: UiMessages;
+    /**
+     * The editor chrome's own strings (status announcements, panel wording) —
+     * resolved, Catalan by default. NOT part of `messages`: see
+     * `./edit-messages.js` for why the two catalogs must not mix.
+     */
+    editMessages: EditMessages;
     /**
      * Edit descriptor for one of THIS config's message strings, by catalog
      * key — the interface-wording half of edit mode. Optional and undefined by
@@ -175,5 +182,6 @@ export interface UiConfigInput {
     canonicalPathname?: UiConfig['canonicalPathname'];
     siteName?: string;
     messages?: UiMessages;
+    editMessages?: EditMessages;
     messageEdit?: UiConfig['messageEdit'];
 }

package/dist/edit/Editable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { getUiConfig } from '../config/context.js';
 	import { getEditAdapter } from './context.js';
 	import type { EditDescriptor } from './types.js';
 
@@ -55,6 +56,7 @@
 	let { edit, value, children }: Props = $props();
 
 	const adapter = getEditAdapter();
+	const config = getUiConfig();
 
 	let status = $state<'idle' | 'dirty' | 'saving' | 'error'>('idle');
 	/** Last persisted value: what Escape restores and blur diffs against. */
@@ -121,16 +123,16 @@
 			return;
 		}
 		status = 'saving';
-		announcement = 'Desant…';
+		announcement = config.editMessages.edit_saving();
 		try {
 			await adapter.save(edit, draft);
 			savedValue = draft;
 			status = 'idle';
-			announcement = 'Desat';
+			announcement = config.editMessages.edit_saved();
 		} catch {
 			// Draft stays in the DOM; the reader decides whether to retry.
 			status = 'error';
-			announcement = 'Error en desar';
+			announcement = config.editMessages.edit_saveError();
 		}
 	}
 

package/dist/edit/chrome/AddSlot.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Icon from '../../components/ui/Icon.svelte';
+	import { getUiConfig } from '../../config/context.js';
+	import { getEditAdapter } from '../context.js';
+	import type { EntityOp } from '../types.js';
+
+	/**
+	 * The "+" affordance of an editable collection. Renders ONLY while the
+	 * adapter is editing AND implements `applyOp` — otherwise nothing, the
+	 * byte-identical invariant. The op resolves server-side and the host's
+	 * refresh brings the new row in; this control only shows pending/error.
+	 */
+	interface Props {
+		op: Extract<EntityOp, { kind: 'create' }>;
+		/** The entity noun for the label, e.g. "una fita". */
+		label?: string;
+	}
+
+	let { op, label = '' }: Props = $props();
+
+	const adapter = getEditAdapter();
+	const config = getUiConfig();
+
+	let pending = $state(false);
+	let announcement = $state('');
+
+	const active = $derived((adapter?.isEditing ?? false) && adapter?.applyOp !== undefined);
+	const text = $derived(config.editMessages.edit_add({ label }).trim());
+
+	async function add(): Promise<void> {
+		if (!adapter?.applyOp || pending) return;
+		pending = true;
+		announcement = '';
+		try {
+			await adapter.applyOp(op);
+		} catch {
+			announcement = config.editMessages.edit_addFailed();
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+{#if active}
+	<button type="button" class="add" disabled={pending} onclick={() => void add()}>
+		<Icon name="plus" size={16} />
+		{text}
+	</button>
+	<span class="status" role="status">{announcement}</span>
+{/if}
+
+<style>
+	.add {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		padding: var(--space-1) var(--space-3);
+		border: 1px dashed var(--color-ink-muted);
+		border-radius: 999px;
+		background: transparent;
+		color: var(--color-ink);
+		font: inherit;
+		font-size: var(--text-sm);
+		cursor: pointer;
+		transition: border-color var(--transition-fast);
+	}
+
+	.add:hover:not(:disabled) {
+		border-color: var(--color-brand);
+		color: var(--color-brand);
+	}
+
+	.add:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.status {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>

package/dist/edit/chrome/AddSlot.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { EntityOp } from '../types.js';
+/**
+ * The "+" affordance of an editable collection. Renders ONLY while the
+ * adapter is editing AND implements `applyOp` — otherwise nothing, the
+ * byte-identical invariant. The op resolves server-side and the host's
+ * refresh brings the new row in; this control only shows pending/error.
+ */
+interface Props {
+    op: Extract<EntityOp, {
+        kind: 'create';
+    }>;
+    /** The entity noun for the label, e.g. "una fita". */
+    label?: string;
+}
+declare const AddSlot: import("svelte").Component<Props, {}, "">;
+type AddSlot = ReturnType<typeof AddSlot>;
+export default AddSlot;