@vit-foundation/ui 0.11.0 → 0.13.0

package/dist/components/projects/ProjectCard.svelte

@@ -1,10 +1,19 @@
 <script module lang="ts">
-	import type { EditDescriptor } from '../../edit/types.js';
+	import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
 
-	/** Which of the card's localized fields are editable at this render site. */
+	/**
+	 * Which of the card's fields are editable at this render site: localized
+	 * text inline, the record-shaped scalars through the frame's panel.
+	 */
 	export interface ProjectEditMap {
 		title?: EditDescriptor;
 		excerpt?: EditDescriptor;
+		kind?: PropertyDescriptor;
+		publishedOn?: PropertyDescriptor;
+		externalUrl?: PropertyDescriptor;
+		image?: PropertyDescriptor;
+		/** Accessible name for the frame, e.g. the project's title. */
+		label?: string;
 	}
 </script>
 
@@ -14,7 +23,10 @@
 	import type { ProjectCardData } from '../../content/types.js';
 	import { getEditAdapter } from '../../edit/context.js';
 	import Editable from '../../edit/Editable.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import CardMedia from '../ui/CardMedia.svelte';
+	import DraftBadge from '../../edit/chrome/DraftBadge.svelte';
 	import CardTitle from '../ui/CardTitle.svelte';
 	import DateText from '../ui/DateText.svelte';
 	import Link from '../ui/Link.svelte';
@@ -35,41 +47,76 @@
 	// See WeeklieCard: an editing title renders as plain text, never inside
 	// the story link or the external anchor.
 	const titleEditing = $derived(edit?.title !== undefined && (adapter?.isEditing ?? false));
+
+	/**
+	 * Default kind options are the raw union members: no message keys exist
+	 * for them, and a host wanting worded labels passes `options` in its
+	 * descriptor, which wins over these (same spread rule as the milestone
+	 * category select).
+	 */
+	const KIND_OPTIONS = [
+		{ value: 'collaboration', label: 'Collaboration' },
+		{ value: 'passion', label: 'Passion' }
+	];
+
+	const panelRows = $derived(
+		[
+			edit?.kind && {
+				descriptor: { options: KIND_OPTIONS, ...edit.kind },
+				value: project.kind as string
+			},
+			edit?.publishedOn && { descriptor: edit.publishedOn, value: project.publishedOn },
+			edit?.externalUrl && { descriptor: edit.externalUrl, value: project.externalUrl },
+			edit?.image && { descriptor: edit.image, value: project.imageUrl }
+		].filter((row) => row !== undefined)
+	);
+	const frameSpec = $derived(
+		edit && panelRows.length > 0
+			? { label: edit.label ?? project.title, hasPanel: true }
+			: undefined
+	);
 </script>
 
 <article class={variant}>
-	<CardMedia src={project.imageUrl} alt="" ratio="16 / 9" width="1200" height="675" />
-	<div class="text">
-		<DateText value={project.publishedOn} />
-		<CardTitle>
-			{#if titleEditing}
-				<Editable edit={edit?.title} value={project.title}>
-					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
-				</Editable>
-			{:else if project.hasStory}
-				<Link href={`/what-we-do/${project.slug}`}>{project.title}</Link>
-			{:else if project.externalUrl}
-				<a href={project.externalUrl} rel="external noopener">{project.title}</a>
-			{:else}
-				{project.title}
+	<!-- Inside the article — see WeeklieCard. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			<EditPanel rows={panelRows} />
+		{/snippet}
+		<CardMedia src={project.imageUrl} alt="" ratio="16 / 9" width="1200" height="675" />
+		<div class="text">
+			{#if project.draft}<DraftBadge />{/if}
+			<DateText value={project.publishedOn} />
+			<CardTitle>
+				{#if titleEditing}
+					<Editable edit={edit?.title} value={project.title}>
+						{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+					</Editable>
+				{:else if project.hasStory}
+					<Link href={`/what-we-do/${project.slug}`}>{project.title}</Link>
+				{:else if project.externalUrl}
+					<a href={project.externalUrl} rel="external noopener">{project.title}</a>
+				{:else}
+					{project.title}
+				{/if}
+			</CardTitle>
+			<Editable edit={edit?.excerpt} value={project.excerpt}>
+				{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+			</Editable>
+			{#if project.hasStory}
+				<ActionLabel
+					edit={config.messageEdit?.('common_readMore')}
+					value={config.messages.common_readMore()}
+				>
+					{#snippet control()}
+						<Link href={`/what-we-do/${project.slug}`} class="more">
+							{config.messages.common_readMore()}
+						</Link>
+					{/snippet}
+				</ActionLabel>
 			{/if}
-		</CardTitle>
-		<Editable edit={edit?.excerpt} value={project.excerpt}>
-			{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
-		</Editable>
-		{#if project.hasStory}
-			<ActionLabel
-				edit={config.messageEdit?.('common_readMore')}
-				value={config.messages.common_readMore()}
-			>
-				{#snippet control()}
-					<Link href={`/what-we-do/${project.slug}`} class="more">
-						{config.messages.common_readMore()}
-					</Link>
-				{/snippet}
-			</ActionLabel>
-		{/if}
-	</div>
+		</div>
+	</EditFrame>
 </article>
 
 <style>

package/dist/components/projects/ProjectCard.svelte.d.ts

@@ -1,8 +1,17 @@
-import type { EditDescriptor } from '../../edit/types.js';
-/** Which of the card's localized fields are editable at this render site. */
+import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * Which of the card's fields are editable at this render site: localized
+ * text inline, the record-shaped scalars through the frame's panel.
+ */
 export interface ProjectEditMap {
     title?: EditDescriptor;
     excerpt?: EditDescriptor;
+    kind?: PropertyDescriptor;
+    publishedOn?: PropertyDescriptor;
+    externalUrl?: PropertyDescriptor;
+    image?: PropertyDescriptor;
+    /** Accessible name for the frame, e.g. the project's title. */
+    label?: string;
 }
 import type { ProjectCardData } from '../../content/types.js';
 interface Props {

package/dist/components/team/CollaboratorList.svelte

@@ -1,25 +1,99 @@
+<script module lang="ts">
+	import type { EntityOp, PropertyDescriptor } from '../../edit/types.js';
+
+	/**
+	 * A collaborator is three plain (non-localized) columns, so everything
+	 * edits through the frame's PANEL — the per-locale inline contract does
+	 * not apply to any of it.
+	 */
+	export interface CollaboratorEditMap {
+		personName?: PropertyDescriptor;
+		affiliation?: PropertyDescriptor;
+		url?: PropertyDescriptor;
+		/** Accessible name for the frame — usually the person's name. */
+		label?: string;
+		/** Set by the list from its `collection` — removal of this row. */
+		removeOp?: Extract<EntityOp, { kind: 'remove' }>;
+	}
+</script>
+
 <script lang="ts">
 	import type { CollaboratorData } from '../../content/types.js';
+	import AddSlot from '../../edit/chrome/AddSlot.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import { getEditAdapter } from '../../edit/context.js';
+	import type { CollectionRef } from '../../edit/types.js';
 
 	interface Props {
 		collaborators: CollaboratorData[];
+		/** Edit descriptors per row; returning undefined leaves it read-only. */
+		editFor?: (collaborator: CollaboratorData) => CollaboratorEditMap | undefined;
+		/**
+		 * Names the collection these rows belong to. Set alongside an adapter
+		 * with `applyOp`, it turns on the add slot and each frame's remove —
+		 * for rows that carry an `id` (removal needs an identity).
+		 */
+		collection?: CollectionRef;
 	}
 
-	let { collaborators }: Props = $props();
+	let { collaborators, editFor, collection }: Props = $props();
+
+	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. */
+	function editMapFor(collaborator: CollaboratorData): CollaboratorEditMap | undefined {
+		const map = editFor?.(collaborator);
+		if (!structural || !collection || collaborator.id === undefined) return map;
+		return { ...map, removeOp: { kind: 'remove', collection, id: collaborator.id } };
+	}
+
+	function rowsFor(collaborator: CollaboratorData, map: CollaboratorEditMap | undefined) {
+		return [
+			map?.personName && { descriptor: map.personName, value: collaborator.personName },
+			map?.affiliation && { descriptor: map.affiliation, value: collaborator.affiliation },
+			map?.url && { descriptor: map.url, value: collaborator.url }
+		].filter((row) => row !== undefined);
+	}
 </script>
 
 <ul>
-	{#each collaborators as collaborator (collaborator.personName + collaborator.affiliation)}
+	{#each collaborators as collaborator (collaborator.id ?? collaborator.personName + collaborator.affiliation)}
+		{@const map = editMapFor(collaborator)}
+		{@const rows = rowsFor(collaborator, map)}
 		<li>
-			<strong>{collaborator.personName}</strong>
-			·
-			{#if collaborator.url}
-				<a href={collaborator.url} rel="external noopener">{collaborator.affiliation}</a>
-			{:else}
-				{collaborator.affiliation}
-			{/if}
+			<!-- Inside the li, so the list's own layout never gains a child. -->
+			<EditFrame
+				spec={map && (rows.length > 0 || map.removeOp)
+					? {
+							label: map.label ?? collaborator.personName,
+							hasPanel: rows.length > 0,
+							removeOp: map.removeOp
+						}
+					: undefined}
+			>
+				{#snippet panel()}
+					<EditPanel {rows} />
+				{/snippet}
+				<strong>{collaborator.personName}</strong>
+				·
+				{#if collaborator.url}
+					<a href={collaborator.url} rel="external noopener">{collaborator.affiliation}</a>
+				{:else}
+					{collaborator.affiliation}
+				{/if}
+			</EditFrame>
 		</li>
 	{/each}
+	{#if structural && collection}
+		<li class="add-slot">
+			<AddSlot op={{ kind: 'create', collection }} />
+		</li>
+	{/if}
 </ul>
 
 <style>
@@ -34,4 +108,8 @@
 	a {
 		color: var(--color-brand);
 	}
+
+	li.add-slot {
+		list-style: none;
+	}
 </style>

package/dist/components/team/CollaboratorList.svelte.d.ts

@@ -1,6 +1,32 @@
+import type { EntityOp, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * A collaborator is three plain (non-localized) columns, so everything
+ * edits through the frame's PANEL — the per-locale inline contract does
+ * not apply to any of it.
+ */
+export interface CollaboratorEditMap {
+    personName?: PropertyDescriptor;
+    affiliation?: PropertyDescriptor;
+    url?: PropertyDescriptor;
+    /** Accessible name for the frame — usually the person's name. */
+    label?: string;
+    /** Set by the list from its `collection` — removal of this row. */
+    removeOp?: Extract<EntityOp, {
+        kind: 'remove';
+    }>;
+}
 import type { CollaboratorData } from '../../content/types.js';
+import type { CollectionRef } from '../../edit/types.js';
 interface Props {
     collaborators: CollaboratorData[];
+    /** Edit descriptors per row; returning undefined leaves it read-only. */
+    editFor?: (collaborator: CollaboratorData) => CollaboratorEditMap | undefined;
+    /**
+     * Names the collection these rows belong to. Set alongside an adapter
+     * with `applyOp`, it turns on the add slot and each frame's remove —
+     * for rows that carry an `id` (removal needs an identity).
+     */
+    collection?: CollectionRef;
 }
 declare const CollaboratorList: import("svelte").Component<Props, {}, "">;
 type CollaboratorList = ReturnType<typeof CollaboratorList>;

package/dist/components/team/TeamMemberCard.svelte

@@ -1,20 +1,26 @@
 <script module lang="ts">
-	import type { EditDescriptor } from '../../edit/types.js';
+	import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
 
 	/**
-	 * Which of the card's localized fields are editable at this render site.
-	 * `name` is deliberately absent: it is a plain-text column, not a
-	 * localized one, so the per-locale save contract does not apply to it.
+	 * Which of the card's fields are editable at this render site. `name` and
+	 * `photo` are plain (non-localized) columns, so they edit through the
+	 * frame's PANEL — the per-locale inline contract does not apply to them.
 	 */
 	export interface TeamMemberEditMap {
 		role?: EditDescriptor;
 		bio?: EditDescriptor;
+		name?: PropertyDescriptor;
+		photo?: PropertyDescriptor;
+		/** Accessible name for the frame — usually the member's name. */
+		label?: string;
 	}
 </script>
 
 <script lang="ts">
 	import type { TeamMemberData } from '../../content/types.js';
 	import Editable from '../../edit/Editable.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import CardMedia from '../ui/CardMedia.svelte';
 
 	interface Props {
@@ -26,25 +32,41 @@
 	}
 
 	let { member, variant = 'board', edit }: Props = $props();
+
+	const panelRows = $derived(
+		[
+			edit?.name && { descriptor: edit.name, value: member.name },
+			edit?.photo && { descriptor: edit.photo, value: member.photoUrl }
+		].filter((row) => row !== undefined)
+	);
+	const frameSpec = $derived(
+		edit && panelRows.length > 0 ? { label: edit.label ?? member.name, hasPanel: true } : undefined
+	);
 </script>
 
 <article class={variant}>
-	<CardMedia
-		src={member.photoUrl}
-		alt={member.name}
-		ratio={variant === 'featured' ? '4 / 5' : '1 / 1'}
-		width="400"
-		height="500"
-	/>
-	<h3>{member.name}</h3>
-	<Editable edit={edit?.role} value={member.role}>
-		{#snippet children(text, attrs)}<p class="role" {...attrs}>{text}</p>{/snippet}
-	</Editable>
-	{#if member.bio}
-		<Editable edit={edit?.bio} value={member.bio}>
-			{#snippet children(text, attrs)}<p class="bio" {...attrs}>{text}</p>{/snippet}
+	<!-- Inside the article — see WeeklieCard. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			<EditPanel rows={panelRows} />
+		{/snippet}
+		<CardMedia
+			src={member.photoUrl}
+			alt={member.name}
+			ratio={variant === 'featured' ? '4 / 5' : '1 / 1'}
+			width="400"
+			height="500"
+		/>
+		<h3>{member.name}</h3>
+		<Editable edit={edit?.role} value={member.role}>
+			{#snippet children(text, attrs)}<p class="role" {...attrs}>{text}</p>{/snippet}
 		</Editable>
-	{/if}
+		{#if member.bio}
+			<Editable edit={edit?.bio} value={member.bio}>
+				{#snippet children(text, attrs)}<p class="bio" {...attrs}>{text}</p>{/snippet}
+			</Editable>
+		{/if}
+	</EditFrame>
 </article>
 
 <style>

package/dist/components/team/TeamMemberCard.svelte.d.ts

@@ -1,12 +1,16 @@
-import type { EditDescriptor } from '../../edit/types.js';
+import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
 /**
- * Which of the card's localized fields are editable at this render site.
- * `name` is deliberately absent: it is a plain-text column, not a
- * localized one, so the per-locale save contract does not apply to it.
+ * Which of the card's fields are editable at this render site. `name` and
+ * `photo` are plain (non-localized) columns, so they edit through the
+ * frame's PANEL — the per-locale inline contract does not apply to them.
  */
 export interface TeamMemberEditMap {
     role?: EditDescriptor;
     bio?: EditDescriptor;
+    name?: PropertyDescriptor;
+    photo?: PropertyDescriptor;
+    /** Accessible name for the frame — usually the member's name. */
+    label?: string;
 }
 import type { TeamMemberData } from '../../content/types.js';
 interface Props {

package/dist/components/timeline/TimelineMilestone.svelte

@@ -29,6 +29,7 @@
 	import Editable from '../../edit/Editable.svelte';
 	import { MILESTONE_CATEGORY_COLOR, milestoneCategoryLabel } from '../../utils/milestones.js';
 	import CardMedia from '../ui/CardMedia.svelte';
+	import DraftBadge from '../../edit/chrome/DraftBadge.svelte';
 	import DateText from '../ui/DateText.svelte';
 	import Link from '../ui/Link.svelte';
 
@@ -110,6 +111,7 @@
 			{#snippet children(text, attrs)}<p class="category" {...attrs}>{text}</p>{/snippet}
 		</Editable>
 		<DateText value={milestone.occurredOn} />
+		{#if milestone.draft}<DraftBadge />{/if}
 		<Editable edit={edit?.title} value={milestone.title}>
 			{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
 		</Editable>
@@ -119,7 +121,7 @@
 			</Editable>
 		{/if}
 		{#if milestone.imageUrls.length > 0}
-			<CardMedia src={milestone.imageUrls[0]} alt="" width="1200" height="675" />
+			<CardMedia src={milestone.imageUrls[0] ?? null} alt="" width="1200" height="675" />
 		{/if}
 		{#if milestone.linkUrl}
 			<p class="more">

package/dist/components/ui/CardMedia.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLImgAttributes {
-		src: string;
+	interface Props extends Omit<HTMLImgAttributes, 'src'> {
+		/**
+		 * Null/undefined renders the placeholder directly — a row may simply
+		 * have no image yet (the CMS creates rows before anyone uploads one).
+		 */
+		src: string | null | undefined;
 		/** Empty string for decorative images (the surrounding card carries the text). */
 		alt: string;
 		/** CSS aspect-ratio (e.g. '16 / 9'); omit to keep the image's natural height. */
@@ -10,9 +14,54 @@
 	}
 
 	let { src, alt, ratio, ...rest }: Props = $props();
+
+	/**
+	 * The src that 404'd, so a broken path degrades to the placeholder instead
+	 * of the browser's broken-image box. Keyed by value, not a boolean: a NEW
+	 * src (an editor fixing the path) gets a fresh attempt.
+	 */
+	let failedSrc = $state<string | null>(null);
+	const showImage = $derived(Boolean(src) && src !== failedSrc);
+
+	// The placeholder must hold the image's footprint: the ratio prop when
+	// given, else the intrinsic width/height the caller passed, else square.
+	const placeholderRatio = $derived(
+		ratio ?? (rest.width && rest.height ? `${rest.width} / ${rest.height}` : '1 / 1')
+	);
 </script>
 
-<img {src} {alt} loading="lazy" style:aspect-ratio={ratio} {...rest} />
+{#if showImage}
+	<img
+		{src}
+		{alt}
+		loading="lazy"
+		style:aspect-ratio={ratio}
+		onerror={() => (failedSrc = src ?? null)}
+		{...rest}
+	/>
+{:else}
+	<!-- Same accessibility contract as the img: named when alt has text,
+	     invisible to readers when the image was decorative. -->
+	<div
+		class="placeholder"
+		style:aspect-ratio={placeholderRatio}
+		role={alt ? 'img' : undefined}
+		aria-label={alt || undefined}
+		aria-hidden={alt ? undefined : true}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.5"
+			aria-hidden="true"
+		>
+			<rect x="3" y="4" width="18" height="16" rx="2" />
+			<circle cx="9" cy="10" r="1.8" />
+			<path d="M3.5 17.5 9 13l4 3.2 4-4.2 3.5 4" />
+		</svg>
+	</div>
+{/if}
 
 <style>
 	img {
@@ -20,4 +69,18 @@
 		background: var(--color-band-grey);
 		object-fit: cover;
 	}
+
+	.placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		border-radius: var(--radius);
+		background: var(--color-band-grey);
+		color: var(--color-ink-muted);
+	}
+
+	.placeholder svg {
+		width: clamp(1.5rem, 18%, 3rem);
+	}
 </style>

package/dist/components/ui/CardMedia.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { HTMLImgAttributes } from 'svelte/elements';
-interface Props extends HTMLImgAttributes {
-    src: string;
+interface Props extends Omit<HTMLImgAttributes, 'src'> {
+    /**
+     * Null/undefined renders the placeholder directly — a row may simply
+     * have no image yet (the CMS creates rows before anyone uploads one).
+     */
+    src: string | null | undefined;
     /** Empty string for decorative images (the surrounding card carries the text). */
     alt: string;
     /** CSS aspect-ratio (e.g. '16 / 9'); omit to keep the image's natural height. */

package/dist/components/ui/SearchInput.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import type { PropertyDescriptor } from '../../edit/types.js';
+
 	interface Props {
 		/** Ties the label to the input; override when a page renders two. */
 		id?: string;
@@ -8,6 +12,12 @@
 		/** Called after the debounce delay with the trimmed query. */
 		onsearch: (query: string) => void;
 		debounceMs?: number;
+		/**
+		 * A placeholder cannot hold a caret, so it edits through the frame's
+		 * panel: one text row over whatever the host's descriptor names
+		 * (a chrome key on the foundation site). Inert without an adapter.
+		 */
+		placeholderEdit?: PropertyDescriptor;
 	}
 
 	const DEFAULT_DEBOUNCE_MS = 300;
@@ -18,9 +28,12 @@
 		placeholder,
 		label,
 		onsearch,
-		debounceMs = DEFAULT_DEBOUNCE_MS
+		debounceMs = DEFAULT_DEBOUNCE_MS,
+		placeholderEdit
 	}: Props = $props();
 
+	const frameSpec = $derived(placeholderEdit !== undefined ? { label, hasPanel: true } : undefined);
+
 	// svelte-ignore state_referenced_locally
 	let query = $state(value);
 	let timer: ReturnType<typeof setTimeout> | undefined;
@@ -70,15 +83,23 @@
 </script>
 
 <form role="search" onsubmit={handleSubmit}>
-	<label class="visually-hidden" for={id}>{label}</label>
-	<input
-		{id}
-		class="control"
-		type="search"
-		{placeholder}
-		bind:value={query}
-		oninput={handleInput}
-	/>
+	<!-- Inside the form, so the host's toolbar layout never gains a child. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			{#if placeholderEdit}
+				<EditPanel rows={[{ descriptor: placeholderEdit, value: placeholder }]} />
+			{/if}
+		{/snippet}
+		<label class="visually-hidden" for={id}>{label}</label>
+		<input
+			{id}
+			class="control"
+			type="search"
+			{placeholder}
+			bind:value={query}
+			oninput={handleInput}
+		/>
+	</EditFrame>
 </form>
 
 <style>

package/dist/components/ui/SearchInput.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { PropertyDescriptor } from '../../edit/types.js';
 interface Props {
     /** Ties the label to the input; override when a page renders two. */
     id?: string;
@@ -7,6 +8,12 @@ interface Props {
     /** Called after the debounce delay with the trimmed query. */
     onsearch: (query: string) => void;
     debounceMs?: number;
+    /**
+     * A placeholder cannot hold a caret, so it edits through the frame's
+     * panel: one text row over whatever the host's descriptor names
+     * (a chrome key on the foundation site). Inert without an adapter.
+     */
+    placeholderEdit?: PropertyDescriptor;
 }
 declare const SearchInput: import("svelte").Component<Props, {}, "">;
 type SearchInput = ReturnType<typeof SearchInput>;