@velastack/cms 0.5.0 → 0.5.1

package/dist/components/admin-bar/fields-form.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	/**
+	 * The generic structured form: one input per `FormField`, grouped into
+	 * tabs when fields name a `group`, `half` fields sharing a row with the
+	 * next one, and `list` fields rendered as cards through `ListField`.
+	 * Works over a local draft: every change emits a new whole object.
+	 */
+	import type { FormField } from '../../core/shapes/form.js';
+	import type { CmsImageValue } from '../../core/shapes/image.js';
+	import type { CmsLinkValue } from '../../core/shapes/link.js';
+	import { get, type Tree } from '../../core/path.js';
+	import { setIn } from '../../core/structured.js';
+	import FieldInput from './field-input.svelte';
+	import LinkInput from './link-input.svelte';
+	import RichTextInput from './rich-text-input.svelte';
+	import ListField from './list-field.svelte';
+	import { Button } from './ui/button/index.js';
+	import { Textarea } from './ui/textarea/index.js';
+	import * as Tabs from './ui/tabs/index.js';
+
+	type Props = {
+		fields: readonly FormField[];
+		value: Tree;
+		onChange: (next: Tree) => void;
+	};
+	let { fields, value, onChange }: Props = $props();
+
+	const GENERAL = 'General';
+
+	// Tabs: named groups in first-seen order; ungrouped fields share a
+	// "General" tab that comes first. One group means no tabs at all.
+	const groups = $derived.by(() => {
+		const names: string[] = [];
+		for (const f of fields) {
+			const g = f.group ?? GENERAL;
+			if (!names.includes(g)) names.push(g);
+		}
+		if (names.includes(GENERAL)) {
+			names.splice(names.indexOf(GENERAL), 1);
+			names.unshift(GENERAL);
+		}
+		return names.map((name) => ({
+			name,
+			rows: pairRows(fields.filter((f) => (f.group ?? GENERAL) === name))
+		}));
+	});
+	let tab = $state('');
+	$effect(() => {
+		if (!groups.some((g) => g.name === tab)) tab = groups[0]?.name ?? '';
+	});
+
+	/** A `half` field shares its row with the field after it. */
+	const pairRows = (list: readonly FormField[]): FormField[][] => {
+		const rows: FormField[][] = [];
+		for (let i = 0; i < list.length; i++) {
+			const f = list[i];
+			if (f.half && i + 1 < list.length && list[i + 1].type !== 'list') {
+				rows.push([f, list[i + 1]]);
+				i++;
+			} else rows.push([f]);
+		}
+		return rows;
+	};
+
+	const read = (key: string): unknown => get(value, key);
+	const write = (key: string, next: unknown) => onChange(setIn(value, key, next));
+
+	const str = (v: unknown): string => (typeof v === 'string' ? v : '');
+	const strings = (v: unknown): string[] =>
+		Array.isArray(v) ? v.map((s) => (typeof s === 'string' ? s : '')) : [];
+	const images = (v: unknown): CmsImageValue[] =>
+		Array.isArray(v) ? (v.filter((i) => i && typeof i === 'object') as CmsImageValue[]) : [];
+	const rating = (v: unknown): number => (typeof v === 'number' ? v : 0);
+	const asObject = (v: unknown): Tree => (v && typeof v === 'object' ? (v as Tree) : { url: null });
+</script>
+
+{#snippet input(f: FormField)}
+	{#if f.type === 'html'}
+		<RichTextInput
+			value={str(read(f.key))}
+			label={f.label}
+			onChange={(html) => write(f.key, html)}
+		/>
+	{:else if f.type === 'link'}
+		<LinkInput
+			value={(read(f.key) as CmsLinkValue | null) ?? null}
+			label={f.label}
+			onChange={(next) => write(f.key, next)}
+		/>
+	{:else if f.type === 'strings'}
+		<label class="vela:flex vela:flex-col vela:gap-1.5">
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">{f.label}</span>
+			<Textarea
+				value={strings(read(f.key)).join('\n')}
+				placeholder={f.placeholder ?? 'One per line'}
+				oninput={(e) => write(f.key, e.currentTarget.value.split('\n'))}
+			/>
+		</label>
+	{:else if f.type === 'rating'}
+		<div class="vela:flex vela:flex-col vela:gap-1.5">
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">{f.label}</span>
+			<div class="vela:flex vela:gap-0.5" role="radiogroup" aria-label={f.label}>
+				{#each [1, 2, 3, 4, 5] as n (n)}
+					<button
+						type="button"
+						role="radio"
+						aria-checked={rating(read(f.key)) === n}
+						aria-label={`${n} of 5`}
+						class="vela:cursor-pointer vela:text-[18px] vela:leading-none {n <= rating(read(f.key))
+							? 'vela:text-[var(--cms-status-warn-text)]'
+							: 'vela:text-bar-text-tertiary'}"
+						onclick={() => write(f.key, rating(read(f.key)) === n ? null : n)}
+					>
+						★
+					</button>
+				{/each}
+			</div>
+		</div>
+	{:else if f.type === 'images'}
+		{@const list = images(read(f.key))}
+		<div class="vela:flex vela:flex-col vela:gap-2">
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">{f.label}</span>
+			{#each list as img, i (i)}
+				<div class="vela:flex vela:items-start vela:gap-2">
+					<FieldInput
+						type="image"
+						value={img}
+						onChange={(next) =>
+							write(
+								f.key,
+								list.map((x, j) => (j === i ? next : x))
+							)}
+						class="vela:flex-1"
+					/>
+					<Button
+						size="icon"
+						variant="ghost"
+						class="vela:h-9 vela:w-6 vela:shrink-0 vela:text-[var(--cms-status-error-text-base)]"
+						aria-label="Remove image"
+						onclick={() =>
+							write(
+								f.key,
+								list.filter((_, j) => j !== i)
+							)}
+					>
+						×
+					</Button>
+				</div>
+			{/each}
+			<Button
+				variant="outline"
+				size="pill"
+				class="vela:self-start"
+				onclick={() => write(f.key, [...list, { url: null }])}
+			>
+				+ Add image
+			</Button>
+		</div>
+	{:else if f.type === 'image'}
+		<FieldInput
+			type="image"
+			label={f.label}
+			value={asObject(read(f.key))}
+			placeholder={f.placeholder}
+			onChange={(next) => write(f.key, next)}
+		/>
+	{:else if f.type === 'list'}
+		<ListField
+			label={f.label}
+			itemLabel={f.itemLabel ?? 'item'}
+			titleKey={f.titleKey}
+			fields={f.fields ?? []}
+			blank={f.blank ?? (() => ({}))}
+			items={(read(f.key) as Tree[] | undefined) ?? []}
+			onChange={(items) => write(f.key, items)}
+		/>
+	{:else}
+		<FieldInput
+			type={f.type}
+			label={f.label}
+			value={read(f.key)}
+			placeholder={f.placeholder}
+			values={f.values}
+			names={f.names}
+			onChange={(next) => write(f.key, next)}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet rows(list: FormField[][])}
+	{#each list as row, i (i)}
+		{#if row.length === 2}
+			<div class="vela:grid vela:grid-cols-2 vela:gap-2 vela:items-start">
+				{@render input(row[0])}
+				{@render input(row[1])}
+			</div>
+		{:else}
+			{@render input(row[0])}
+		{/if}
+	{/each}
+{/snippet}
+
+{#if groups.length > 1}
+	<Tabs.Root bind:value={tab}>
+		<Tabs.List aria-label="Sections">
+			{#each groups as g (g.name)}
+				<Tabs.Trigger value={g.name}>{g.name}</Tabs.Trigger>
+			{/each}
+		</Tabs.List>
+		{#each groups as g (g.name)}
+			<Tabs.Content value={g.name} class="vela:flex vela:flex-col vela:gap-3 vela:pt-3">
+				{@render rows(g.rows)}
+			</Tabs.Content>
+		{/each}
+	</Tabs.Root>
+{:else if groups.length === 1}
+	{@render rows(groups[0].rows)}
+{/if}

package/dist/components/admin-bar/fields-form.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+     * The generic structured form: one input per `FormField`, grouped into
+     * tabs when fields name a `group`, `half` fields sharing a row with the
+     * next one, and `list` fields rendered as cards through `ListField`.
+     * Works over a local draft: every change emits a new whole object.
+     */
+import type { FormField } from '../../core/shapes/form.js';
+import { type Tree } from '../../core/path.js';
+type Props = {
+    fields: readonly FormField[];
+    value: Tree;
+    onChange: (next: Tree) => void;
+};
+declare const FieldsForm: import("svelte").Component<Props, {}, "">;
+type FieldsForm = ReturnType<typeof FieldsForm>;
+export default FieldsForm;

package/dist/components/admin-bar/link-input.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	/**
+	 * A link field inside a structured editor: a page from the site or an
+	 * external URL, plus "open in a new tab". `value` is a `CmsLinkValue`
+	 * or `null`; `onChange(null)` clears it.
+	 */
+	import { untrack } from 'svelte';
+	import { page } from '$app/state';
+	import type { CmsLinkValue } from '../../core/shapes/link.js';
+	import { fetchPageOptions, pageOptionValue, type PageOption } from './page-options.js';
+	import { Input } from './ui/input/index.js';
+	import { Checkbox } from './ui/checkbox/index.js';
+
+	type Props = {
+		value: CmsLinkValue | null;
+		onChange: (next: CmsLinkValue | null) => void;
+		label?: string;
+	};
+	let { value, onChange, label }: Props = $props();
+
+	const endpoint = $derived(page.data.cms?.endpoint ?? '/api/cms');
+	const selectClass =
+		'vela:flex vela:h-9 vela:w-full vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)]' +
+		' vela:bg-[var(--cms-bar-bg-hover)] vela:px-3 vela:py-1 vela:text-[13px] vela:text-bar-text' +
+		' vela:focus:outline-none vela:focus:ring-2 vela:focus:ring-[var(--cms-accent)]';
+
+	let mode = $state<'page' | 'url'>(
+		untrack(() => (value?.href && !value.routeId ? 'url' : 'page'))
+	);
+	let options = $state<PageOption[] | null>(null);
+	$effect(() => {
+		if (mode === 'page' && options === null) {
+			void fetchPageOptions(endpoint).then((o) => (options = o));
+		}
+	});
+
+	const selected = $derived(
+		value?.routeId ? pageOptionValue(value.routeId, value.params ?? {}) : ''
+	);
+	const newTab = $derived(value?.newTab === true);
+
+	const emit = (next: CmsLinkValue) => {
+		onChange(next.href || next.routeId ? next : null);
+	};
+	const choosePage = (key: string) => {
+		const opt = options?.find((o) => o.value === key);
+		if (!opt) return emit({ newTab });
+		emit({ routeId: opt.routeId, params: opt.params, newTab });
+	};
+	const setUrl = (href: string) => emit({ href: href.trim(), newTab });
+	const setNewTab = (checked: boolean) => {
+		if (value) emit({ ...value, newTab: checked });
+	};
+</script>
+
+<div class="vela:flex vela:flex-col vela:gap-1.5">
+	<div class="vela:flex vela:items-center vela:justify-between">
+		<span class="vela:text-[12px] vela:text-bar-text-secondary">{label ?? 'Link'}</span>
+		<span
+			class="vela:inline-flex vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)] vela:p-0.5 vela:text-[11px]"
+			role="radiogroup"
+			aria-label="Link type"
+		>
+			{#each [['page', 'Page'], ['url', 'URL']] as const as [key, name] (key)}
+				<button
+					type="button"
+					role="radio"
+					aria-checked={mode === key}
+					class="vela:rounded vela:px-2 vela:py-0.5 vela:cursor-pointer vela:text-bar-text-secondary aria-checked:vela:bg-[var(--cms-bar-bg-hover)] aria-checked:vela:text-bar-text"
+					onclick={() => (mode = key)}
+				>
+					{name}
+				</button>
+			{/each}
+		</span>
+	</div>
+	{#if mode === 'page'}
+		<select
+			class={selectClass}
+			value={selected}
+			onchange={(e) => choosePage(e.currentTarget.value)}
+		>
+			<option value="">{options === null ? 'Loading…' : '— No link —'}</option>
+			{#each options ?? [] as opt (opt.value)}
+				<option value={opt.value}>{opt.label}</option>
+			{/each}
+		</select>
+	{:else}
+		<Input
+			type="url"
+			value={value?.href ?? ''}
+			placeholder="https://…"
+			oninput={(e) => setUrl(e.currentTarget.value)}
+		/>
+	{/if}
+	<label
+		class="vela:flex vela:items-center vela:gap-2 vela:text-[12px] vela:text-bar-text-secondary"
+	>
+		<Checkbox checked={newTab} onCheckedChange={(c) => setNewTab(c === true)} disabled={!value} />
+		Open in a new tab
+	</label>
+</div>

package/dist/components/admin-bar/link-input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CmsLinkValue } from '../../core/shapes/link.js';
+type Props = {
+    value: CmsLinkValue | null;
+    onChange: (next: CmsLinkValue | null) => void;
+    label?: string;
+};
+declare const LinkInput: import("svelte").Component<Props, {}, "">;
+type LinkInput = ReturnType<typeof LinkInput>;
+export default LinkInput;

package/dist/components/admin-bar/list-field.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	/**
+	 * A list of items inside a structured form: one collapsible card per
+	 * item, up/down/remove buttons, and an add button. Every item carries a
+	 * stable `id` (new ones get a random one), so translations and reorders
+	 * never lose track of an item.
+	 */
+	import type { FormField } from '../../core/shapes/form.js';
+	import type { Tree } from '../../core/path.js';
+	import { moveItem, newItemId } from '../../core/structured.js';
+	import FieldsForm from './fields-form.svelte';
+	import ReorderButtons from './reorder-buttons.svelte';
+	import ChevronDownIcon from './icons/chevron-down.svelte';
+	import ChevronRightIcon from './icons/chevron-right.svelte';
+	import { Button } from './ui/button/index.js';
+
+	type Props = {
+		label: string;
+		itemLabel: string;
+		titleKey?: string;
+		fields: readonly FormField[];
+		blank: () => Tree;
+		items: Tree[];
+		onChange: (items: Tree[]) => void;
+	};
+	let { label, itemLabel, titleKey, fields, blank, items, onChange }: Props = $props();
+
+	let open = $state(new Set<string>());
+	const toggle = (id: string) => {
+		const next = new Set(open);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		open = next;
+	};
+
+	const idOf = (item: Tree, i: number): string =>
+		typeof item.id === 'string' && item.id !== '' ? item.id : `item-${i}`;
+
+	const titleOf = (item: Tree, i: number): string => {
+		const t = titleKey ? item[titleKey] : undefined;
+		if (typeof t === 'string' && t.trim() !== '') return t;
+		return `${itemLabel[0].toUpperCase()}${itemLabel.slice(1)} ${i + 1}`;
+	};
+
+	const add = () => {
+		const id = newItemId();
+		onChange([...items, { id, ...blank() }]);
+		open = new Set([...open, id]);
+	};
+	const replace = (i: number, next: Tree) => onChange(items.map((it, j) => (j === i ? next : it)));
+</script>
+
+<div class="vela:flex vela:flex-col vela:gap-2">
+	<span class="vela:text-[12px] vela:text-bar-text-secondary">{label}</span>
+	{#each items as item, i (idOf(item, i))}
+		{@const id = idOf(item, i)}
+		{@const expanded = open.has(id)}
+		<div class="vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)]">
+			<div class="vela:flex vela:items-center vela:gap-1 vela:pl-1 vela:pr-1.5 vela:py-1">
+				<button
+					type="button"
+					class="vela:flex vela:flex-1 vela:min-w-0 vela:items-center vela:gap-1.5 vela:cursor-pointer vela:text-left vela:text-[13px] vela:text-bar-text"
+					aria-expanded={expanded}
+					onclick={() => toggle(id)}
+				>
+					{#if expanded}
+						<ChevronDownIcon class="vela:size-3.5 vela:shrink-0 vela:text-bar-text-tertiary" />
+					{:else}
+						<ChevronRightIcon class="vela:size-3.5 vela:shrink-0 vela:text-bar-text-tertiary" />
+					{/if}
+					<span class="vela:truncate">{titleOf(item, i)}</span>
+				</button>
+				<ReorderButtons
+					index={i}
+					count={items.length}
+					label={itemLabel}
+					onMove={(from, to) => onChange(moveItem(items, from, to))}
+					onRemove={(idx) => onChange(items.filter((_, j) => j !== idx))}
+				/>
+			</div>
+			{#if expanded}
+				<div
+					class="vela:flex vela:flex-col vela:gap-3 vela:border-t vela:border-[var(--cms-bar-divider)] vela:p-3"
+				>
+					<FieldsForm {fields} value={item} onChange={(next) => replace(i, next)} />
+				</div>
+			{/if}
+		</div>
+	{/each}
+	<Button variant="outline" size="pill" class="vela:self-start" onclick={add}>
+		+ Add {itemLabel}
+	</Button>
+</div>

package/dist/components/admin-bar/list-field.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+     * A list of items inside a structured form: one collapsible card per
+     * item, up/down/remove buttons, and an add button. Every item carries a
+     * stable `id` (new ones get a random one), so translations and reorders
+     * never lose track of an item.
+     */
+import type { FormField } from '../../core/shapes/form.js';
+import type { Tree } from '../../core/path.js';
+type Props = {
+    label: string;
+    itemLabel: string;
+    titleKey?: string;
+    fields: readonly FormField[];
+    blank: () => Tree;
+    items: Tree[];
+    onChange: (items: Tree[]) => void;
+};
+declare const ListField: import("svelte").Component<Props, {}, "">;
+type ListField = ReturnType<typeof ListField>;
+export default ListField;

package/dist/components/admin-bar/locales-panel.svelte

@@ -2,7 +2,7 @@
 	import { page } from '$app/state';
 	import { cmsStore, type ReleaseItem } from '../cms/cms-store.svelte.js';
 	import type { CmsPayload } from '../cms/scope.js';
-	import { getStructured } from '../cms/structured-registry.js';
+	import { getStructured } from '../../core/structured-registry.js';
 	import { countTranslations, extractTranslations } from '../../core/structured.js';
 	import PanelFooter from './panel-footer.svelte';
 	import PanelHeader from './panel-header.svelte';

package/dist/components/admin-bar/page-options.d.ts

@@ -0,0 +1,24 @@
+type PageEntry = {
+    params: Record<string, string>;
+    isDraft: boolean;
+    isDeletePending: boolean;
+    redirectTo?: string;
+    gone?: boolean;
+};
+type PageRoute = {
+    routeId: string;
+    ownedParams: string[];
+    entries: PageEntry[];
+};
+export type PageOption = {
+    /** `routeId::{params}` — stable key for a select. */
+    value: string;
+    /** The resolved URL, shown to the editor. */
+    label: string;
+    routeId: string;
+    params: Record<string, string>;
+};
+export declare const pageOptionValue: (routeId: string, params: Record<string, string>) => string;
+export declare const toPageOptions: (routes: PageRoute[]) => PageOption[];
+export declare const fetchPageOptions: (endpoint: string) => Promise<PageOption[]>;
+export {};

package/dist/components/admin-bar/page-options.js

@@ -0,0 +1,53 @@
+/**
+ * The site's pages as link targets, for the page picker in link editors.
+ * Fetched once per endpoint and shared by every picker on the page.
+ */
+import { resolveRouteUrl } from './resolve-route.js';
+export const pageOptionValue = (routeId, params) => `${routeId}::${JSON.stringify(params)}`;
+export const toPageOptions = (routes) => {
+    const opts = [];
+    for (const r of routes) {
+        const entries = r.entries.length > 0
+            ? r.entries
+            : [{ params: {}, isDraft: false, isDeletePending: false }];
+        for (const ent of entries) {
+            // Tombstones (redirected / gone) aren't real link targets.
+            if (ent.redirectTo || ent.gone)
+                continue;
+            let url;
+            try {
+                url = resolveRouteUrl(r.routeId, ent.params);
+            }
+            catch {
+                continue;
+            }
+            opts.push({
+                value: pageOptionValue(r.routeId, ent.params),
+                label: url,
+                routeId: r.routeId,
+                params: ent.params
+            });
+        }
+    }
+    opts.sort((a, b) => a.label.localeCompare(b.label));
+    return opts;
+};
+const cache = new Map();
+export const fetchPageOptions = (endpoint) => {
+    let p = cache.get(endpoint);
+    if (!p) {
+        p = fetch(`${endpoint}/pages`, { credentials: 'include' })
+            .then(async (res) => {
+            if (!res.ok)
+                return [];
+            const data = (await res.json());
+            return toPageOptions(data.routes);
+        })
+            .catch(() => {
+            cache.delete(endpoint);
+            return [];
+        });
+        cache.set(endpoint, p);
+    }
+    return p;
+};

package/dist/components/admin-bar/rich-text-input.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	/**
+	 * A rich text field inside a structured editor: the same TipTap setup as
+	 * the inline `CmsRichText` editor, bound to a local value instead of a
+	 * CMS path.
+	 */
+	import { onDestroy, onMount, untrack } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import Toolbar from '../cms/cms-rich-text-toolbar.svelte';
+
+	type Props = {
+		value: string;
+		onChange: (html: string) => void;
+		label?: string;
+		placeholder?: string;
+	};
+	let { value, onChange, label }: Props = $props();
+
+	let host = $state<HTMLDivElement>();
+	let wrap = $state<HTMLDivElement>();
+	let editor = $state<Editor>();
+	let focused = $state(false);
+	let tick = $state(0);
+
+	onMount(() => {
+		editor = new Editor({
+			element: host,
+			extensions: [StarterKit.configure({ heading: { levels: [2, 3] } })],
+			content: value,
+			editorProps: { attributes: { class: 'cms-rich-text-input-pm' } },
+			onUpdate: ({ editor }) => onChange(editor.isEmpty ? '' : editor.getHTML()),
+			onTransaction: () => {
+				tick++;
+			}
+		});
+	});
+	onDestroy(() => editor?.destroy());
+
+	$effect(() => {
+		if (!editor || focused) return;
+		const next = value;
+		untrack(() => {
+			if (editor && editor.getHTML() !== next) {
+				editor.commands.setContent(next, { emitUpdate: false });
+			}
+		});
+	});
+</script>
+
+<div class="vela:flex vela:flex-col vela:gap-1.5">
+	{#if label}<span class="vela:text-[12px] vela:text-bar-text-secondary">{label}</span>{/if}
+	<div
+		class="cms-rich-text-input vela:relative vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)] vela:px-3 vela:py-2 vela:text-[13px] vela:text-bar-text"
+		class:focused
+		bind:this={wrap}
+		onfocusin={() => (focused = true)}
+		onfocusout={(e) => {
+			const next = e.relatedTarget as Node | null;
+			if (next && wrap?.contains(next)) return;
+			focused = false;
+		}}
+	>
+		{#if editor && focused}
+			<div class="vela:mb-2">
+				<Toolbar {editor} {tick} />
+			</div>
+		{/if}
+		<div bind:this={host}></div>
+	</div>
+</div>
+
+<style>
+	.cms-rich-text-input.focused {
+		border-color: var(--cms-accent, #534ab7);
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm) {
+		outline: none;
+		min-height: 3em;
+		line-height: 1.5;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm > :first-child) {
+		margin-top: 0;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm > :last-child) {
+		margin-bottom: 0;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm ul),
+	.cms-rich-text-input :global(.cms-rich-text-input-pm ol) {
+		padding-left: 1.25em;
+	}
+</style>

package/dist/components/admin-bar/rich-text-input.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    value: string;
+    onChange: (html: string) => void;
+    label?: string;
+    placeholder?: string;
+};
+declare const RichTextInput: import("svelte").Component<Props, {}, "">;
+type RichTextInput = ReturnType<typeof RichTextInput>;
+export default RichTextInput;

package/dist/components/admin-bar/structured-editor-popover.svelte

@@ -24,6 +24,7 @@
 	import PencilIcon from './icons/pencil.svelte';
 	import { Button } from './ui/button/index.js';
 	import { Input } from './ui/input/index.js';
+	import { Textarea } from './ui/textarea/index.js';
 	import * as Popover from './ui/popover/index.js';
 	import * as Sheet from './ui/sheet/index.js';
 	import * as Tabs from './ui/tabs/index.js';
@@ -155,12 +156,20 @@
 						<span class="vela:text-[12px] vela:text-bar-text-secondary vela:truncate">
 							{f.source}
 						</span>
-						<Input
-							type="text"
-							value={translationValue(tab, f)}
-							placeholder={f.source}
-							oninput={(e) => setTranslation(tab, f, e.currentTarget.value)}
-						/>
+						{#if f.source.length > 80 || f.source.includes('<')}
+							<Textarea
+								value={translationValue(tab, f)}
+								placeholder={f.source}
+								oninput={(e) => setTranslation(tab, f, e.currentTarget.value)}
+							/>
+						{:else}
+							<Input
+								type="text"
+								value={translationValue(tab, f)}
+								placeholder={f.source}
+								oninput={(e) => setTranslation(tab, f, e.currentTarget.value)}
+							/>
+						{/if}
 					</label>
 				{/each}
 			{/if}