@velastack/cms 0.1.0

package/dist/components/cms/cms-markdown.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    name: string;
+    fallback?: string;
+    value?: unknown;
+    children?: Snippet;
+};
+declare const CmsMarkdown: import("svelte").Component<Props, {}, "">;
+type CmsMarkdown = ReturnType<typeof CmsMarkdown>;
+export default CmsMarkdown;

package/dist/components/cms/cms-media-picker.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import UploadIcon from '../admin-bar/icons/upload.svelte';
+	import LoaderIcon from '../admin-bar/icons/loader-circle.svelte';
+	import AlertIcon from '../admin-bar/icons/triangle-alert.svelte';
+	import { Button } from '../admin-bar/ui/button/index.js';
+	import { cmsStore, type MediaItem } from './cms-store.svelte.js';
+
+	type Props = {
+		endpoint: string;
+		onSelect: (item: MediaItem) => void;
+	};
+	let { endpoint, onSelect }: Props = $props();
+
+	const PAGE_SIZE = 24;
+
+	let items = $state<MediaItem[]>([]);
+	let total = $state(0);
+	let offset = $state(0);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let uploading = $state(false);
+	let fileInputEl: HTMLInputElement | null = $state(null);
+
+	const fetchPage = async () => {
+		loading = true;
+		try {
+			const res = await cmsStore.listMedia(endpoint, { offset, limit: PAGE_SIZE });
+			items = res.items;
+			total = res.total;
+			error = null;
+		} catch {
+			error = 'Could not load media.';
+		} finally {
+			loading = false;
+		}
+	};
+
+	$effect(() => {
+		void offset;
+		void fetchPage();
+	});
+
+	const upload = async (file: File) => {
+		if (!file.type.startsWith('image/')) {
+			error = 'Only image files are supported.';
+			return;
+		}
+		error = null;
+		uploading = true;
+		try {
+			const item = await cmsStore.uploadMedia(endpoint, file);
+			onSelect(item);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Upload failed';
+		} finally {
+			uploading = false;
+		}
+	};
+
+	const onPickerChange = () => {
+		const file = fileInputEl?.files?.[0];
+		if (file) void upload(file);
+		if (fileInputEl) fileInputEl.value = '';
+	};
+
+	const rangeLabel = $derived.by(() => {
+		if (total === 0) return '';
+		const start = offset + 1;
+		const end = Math.min(offset + items.length, total);
+		return `${start}–${end} of ${total}`;
+	});
+
+	const canPrev = $derived(offset > 0);
+	const canNext = $derived(offset + items.length < total);
+</script>
+
+<div class="vela:flex vela:flex-col vela:gap-2 vela:w-[420px]">
+	<div class="vela:flex vela:items-center vela:justify-between vela:gap-2">
+		<Button size="xs" variant="default" onclick={() => fileInputEl?.click()}>
+			<UploadIcon class="vela:size-3.5" />
+			Upload &amp; use
+		</Button>
+		<span class="vela:text-[11px] vela:text-bar-text-tertiary">{rangeLabel}</span>
+	</div>
+
+	<input bind:this={fileInputEl} type="file" accept="image/*" hidden onchange={onPickerChange} />
+
+	{#if error}
+		<div
+			class="vela:flex vela:items-center vela:gap-2 vela:px-2 vela:py-1 vela:rounded-md vela:text-[12px]"
+			style:background="var(--cms-status-error-bg-hover)"
+			style:color="var(--cms-status-error-text-base)"
+			role="alert"
+		>
+			<AlertIcon class="vela:size-3.5" />
+			<span>{error}</span>
+		</div>
+	{/if}
+
+	{#if (loading && items.length === 0) || uploading}
+		<div
+			class="vela:flex vela:items-center vela:justify-center vela:py-8 vela:text-bar-text-tertiary"
+		>
+			<LoaderIcon class="vela:size-5 vela:animate-spin" />
+		</div>
+	{:else if items.length === 0}
+		<div class="vela:py-8 vela:text-center vela:text-[12px] vela:text-bar-text-tertiary">
+			No media yet — upload an image to get started.
+		</div>
+	{:else}
+		<div class="vela:grid vela:grid-cols-4 vela:gap-1.5 vela:max-h-[280px] vela:overflow-y-auto">
+			{#each items as item (item.id)}
+				<button
+					type="button"
+					class="vela:relative vela:aspect-square vela:rounded vela:overflow-hidden vela:bg-[var(--cms-bar-bg-hover)] vela:border-0 vela:p-0 vela:cursor-pointer vela:hover:ring-2 vela:hover:ring-[var(--cms-accent,#534ab7)]"
+					title={item.originalName}
+					onclick={() => onSelect(item)}
+				>
+					<img
+						src={item.url}
+						alt={item.originalName}
+						loading="lazy"
+						class="vela:size-full vela:object-cover"
+					/>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	{#if canPrev || canNext}
+		<div class="vela:flex vela:items-center vela:justify-end vela:gap-1 vela:pt-1">
+			<Button
+				size="xs"
+				variant="ghost"
+				disabled={!canPrev}
+				onclick={() => (offset = Math.max(0, offset - PAGE_SIZE))}
+			>
+				Prev
+			</Button>
+			<Button
+				size="xs"
+				variant="ghost"
+				disabled={!canNext}
+				onclick={() => (offset = offset + PAGE_SIZE)}
+			>
+				Next
+			</Button>
+		</div>
+	{/if}
+</div>

package/dist/components/cms/cms-media-picker.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type MediaItem } from './cms-store.svelte.js';
+type Props = {
+    endpoint: string;
+    onSelect: (item: MediaItem) => void;
+};
+declare const CmsMediaPicker: import("svelte").Component<Props, {}, "">;
+type CmsMediaPicker = ReturnType<typeof CmsMediaPicker>;
+export default CmsMediaPicker;

package/dist/components/cms/cms-number-editable.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+
+	type Props = {
+		scope: CmsScopeRef;
+		name: string;
+		initial?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		integer?: boolean;
+	};
+
+	let { scope, name, initial, min, max, step, integer }: Props = $props();
+
+	const live = $derived(cmsStore.getValue(scope, name));
+	const display = $derived.by(() => {
+		const v = typeof live === 'number' ? live : initial;
+		return typeof v === 'number' && Number.isFinite(v) ? String(v) : '';
+	});
+
+	let el = $state<HTMLInputElement>();
+
+	// Keep the DOM in sync with the resolved draft when the user isn't actively
+	// typing into this instance. Mirrors `cms-text`'s effect-based sync —
+	// without it, an external change (revert, locale switch, sibling write)
+	// wouldn't be reflected in the input.
+	$effect(() => {
+		if (!el) return;
+		if (document.activeElement === el) return;
+		if (el.value === display) return;
+		el.value = display;
+	});
+
+	const onInput = (e: Event) => {
+		const raw = (e.currentTarget as HTMLInputElement).value;
+		if (raw === '') return;
+		const n = Number(raw);
+		if (!Number.isFinite(n)) return;
+		cmsStore.setValue(scope, name, integer ? Math.trunc(n) : n);
+	};
+</script>
+
+<input
+	bind:this={el}
+	class="cms-number-editable"
+	type="number"
+	{min}
+	{max}
+	step={step ?? (integer ? 1 : undefined)}
+	data-cms-name={name}
+	data-cms-scope={scope.scopeId}
+	aria-label={name}
+	oninput={onInput}
+/>
+
+<style>
+	.cms-number-editable {
+		display: inline-block;
+		padding: 0.125rem 0.375rem;
+		margin: 0 0.125rem;
+		font: inherit;
+		font-family: ui-monospace, monospace;
+		font-size: 0.875em;
+		line-height: 1;
+		background: var(--cms-bar-bg, #1f1f1f);
+		color: var(--cms-bar-text, #f5f5f5);
+		border: 1px solid var(--cms-bar-divider, #3a3a3a);
+		border-radius: 0.25rem;
+		vertical-align: middle;
+		width: 6rem;
+	}
+	.cms-number-editable:focus {
+		outline: 2px solid var(--cms-accent, #534ab7);
+		outline-offset: 1px;
+	}
+</style>

package/dist/components/cms/cms-number-editable.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type CmsScopeRef } from './cms-store.svelte.js';
+type Props = {
+    scope: CmsScopeRef;
+    name: string;
+    initial?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    integer?: boolean;
+};
+declare const CmsNumberEditable: import("svelte").Component<Props, {}, "">;
+type CmsNumberEditable = ReturnType<typeof CmsNumberEditable>;
+export default CmsNumberEditable;

package/dist/components/cms/cms-number.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export type CmsNumberProps = {
+		name: string;
+		fallback?: number;
+		/** Per-item override used by `CmsRepeater`. */
+		value?: unknown;
+		min?: number;
+		max?: number;
+		step?: number;
+		/** When true, decimals are truncated on commit and the input's step defaults to 1. */
+		integer?: boolean;
+		children?: Snippet<[number]>;
+	};
+</script>
+
+<script lang="ts">
+	import { getCmsScope } from './scope.js';
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+
+	let { name, fallback, value, min, max, step, integer, children }: CmsNumberProps = $props();
+
+	const scope = getCmsScope();
+	const ref = $derived<CmsScopeRef | null>(
+		scope ? { scopeId: scope.scopeId, routeId: scope.routeId, params: scope.params } : null
+	);
+
+	const resolved = $derived.by(() => {
+		if (value !== undefined) return value;
+		return ref ? cmsStore.getValue(ref, name) : undefined;
+	});
+
+	const current = $derived(typeof resolved === 'number' ? resolved : fallback);
+	const editable = $derived(cmsStore.isEditing && value === undefined && !!ref);
+</script>
+
+{#if editable && ref}
+	{#await import('./cms-number-editable.svelte') then { default: Editable }}
+		<Editable scope={ref} {name} initial={current} {min} {max} {step} {integer} />
+	{/await}
+{:else if current !== undefined && children}
+	{@render children(current)}
+{:else if current !== undefined}
+	{current}
+{:else if children}
+	{@render children(0)}
+{:else}
+	<span class="cms-missing" data-cms-name={name} data-cms-scope={scope?.scopeId ?? '?'}>{name}</span
+	>
+{/if}
+
+<style>
+	.cms-missing {
+		display: inline-block;
+		padding: 0 0.25rem;
+		border: 1px dashed rgba(127, 127, 127, 0.6);
+		border-radius: 0.25rem;
+		font-family: ui-monospace, monospace;
+		font-size: 0.85em;
+		color: rgba(127, 127, 127, 0.9);
+	}
+</style>

package/dist/components/cms/cms-number.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export type CmsNumberProps = {
+    name: string;
+    fallback?: number;
+    /** Per-item override used by `CmsRepeater`. */
+    value?: unknown;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** When true, decimals are truncated on commit and the input's step defaults to 1. */
+    integer?: boolean;
+    children?: Snippet<[number]>;
+};
+declare const CmsNumber: import("svelte").Component<CmsNumberProps, {}, "">;
+type CmsNumber = ReturnType<typeof CmsNumber>;
+export default CmsNumber;

package/dist/components/cms/cms-repeater-editable.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+
+	type Props = {
+		scope: CmsScopeRef;
+		name: string;
+		items: T[];
+		children: Snippet<[T, number]>;
+	};
+
+	let { scope, name, items, children }: Props = $props();
+
+	/** Build a blank item from the keys of the first existing item. */
+	const blankItem = (): T => {
+		const template = items[0];
+		const out: Record<string, unknown> = {};
+		if (template) for (const k of Object.keys(template)) out[k] = '';
+		return out as T;
+	};
+
+	const commit = (next: T[]) => cmsStore.setValue(scope, name, next);
+
+	const removeItem = (index: number) => commit(items.filter((_, i) => i !== index));
+	const addItem = () => commit([...items, blankItem()]);
+	const updateItem = (index: number, patch: Partial<T>) =>
+		commit(items.map((item, i) => (i === index ? ({ ...item, ...patch } as T) : item)));
+</script>
+
+<ul class="cms-repeater-editable">
+	{#each items as item, i (i)}
+		<li class="cms-repeater-editable__item">
+			<div class="cms-repeater-editable__preview">
+				{@render children(item, i)}
+			</div>
+			<details class="cms-repeater-editable__fields">
+				<summary>Fields</summary>
+				{#each Object.keys(item) as key}
+					<label>
+						<span>{key}</span>
+						<input
+							type="text"
+							value={String(item[key] ?? '')}
+							oninput={(e) =>
+								updateItem(i, { [key]: (e.target as HTMLInputElement).value } as Partial<T>)}
+						/>
+					</label>
+				{/each}
+			</details>
+			<button
+				type="button"
+				class="cms-repeater-editable__remove"
+				aria-label="Remove item"
+				onclick={() => removeItem(i)}
+			>
+				×
+			</button>
+		</li>
+	{/each}
+</ul>
+<button type="button" class="cms-repeater-editable__add" onclick={addItem}>+ Add item</button>
+
+<style>
+	.cms-repeater-editable {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.cms-repeater-editable__item {
+		position: relative;
+		padding: 0.5rem;
+		border: 1px dashed rgba(127, 127, 127, 0.6);
+		border-radius: 0.25rem;
+		background: rgba(127, 127, 127, 0.06);
+	}
+	.cms-repeater-editable__remove {
+		position: absolute;
+		top: 0.25rem;
+		right: 0.25rem;
+		width: 1.5rem;
+		height: 1.5rem;
+		border: 0;
+		border-radius: 9999px;
+		background: rgba(220, 38, 38, 0.1);
+		color: rgb(220, 38, 38);
+		cursor: pointer;
+		font-size: 1rem;
+		line-height: 1;
+	}
+	.cms-repeater-editable__remove:hover {
+		background: rgba(220, 38, 38, 0.2);
+	}
+	.cms-repeater-editable__fields {
+		margin-top: 0.5rem;
+		font-size: 0.85em;
+	}
+	.cms-repeater-editable__fields summary {
+		cursor: pointer;
+		color: rgba(127, 127, 127, 0.9);
+	}
+	.cms-repeater-editable__fields label {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 0.375rem;
+	}
+	.cms-repeater-editable__fields label span {
+		flex: 0 0 6rem;
+		font-family: ui-monospace, monospace;
+		color: rgba(127, 127, 127, 0.9);
+	}
+	.cms-repeater-editable__fields input {
+		flex: 1;
+		padding: 0.25rem 0.5rem;
+		border: 1px solid rgba(127, 127, 127, 0.4);
+		border-radius: 0.25rem;
+		background: canvas;
+		color: inherit;
+		font: inherit;
+	}
+	.cms-repeater-editable__add {
+		margin-top: 0.5rem;
+		padding: 0.375rem 0.75rem;
+		border: 1px dashed rgba(127, 127, 127, 0.6);
+		border-radius: 0.25rem;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		font: inherit;
+	}
+	.cms-repeater-editable__add:hover {
+		background: rgba(127, 127, 127, 0.06);
+	}
+</style>

package/dist/components/cms/cms-repeater-editable.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import { type CmsScopeRef } from './cms-store.svelte.js';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        scope: CmsScopeRef;
+        name: string;
+        items: T[];
+        children: Snippet<[T, number]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CmsRepeaterEditable: $$IsomorphicComponent;
+type CmsRepeaterEditable<T extends Record<string, unknown>> = InstanceType<typeof CmsRepeaterEditable<T>>;
+export default CmsRepeaterEditable;

package/dist/components/cms/cms-repeater.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" generics="T extends Record<string, unknown> = Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import { getCmsScope } from './scope.js';
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+
+	type Props = {
+		name: string;
+		fallback?: T[];
+		value?: unknown;
+		children: Snippet<[T, number]>;
+	};
+
+	let { name, fallback, value, children }: Props = $props();
+
+	const scope = getCmsScope();
+	const ref = $derived<CmsScopeRef | null>(
+		scope ? { scopeId: scope.scopeId, routeId: scope.routeId, params: scope.params } : null
+	);
+
+	const resolved = $derived.by(() => {
+		if (value !== undefined) return value;
+		return ref ? cmsStore.getValue(ref, name) : undefined;
+	});
+
+	const items = $derived(
+		Array.isArray(resolved) ? (resolved as T[]) : Array.isArray(fallback) ? fallback : []
+	);
+	const editable = $derived(cmsStore.isEditing && value === undefined && !!ref);
+</script>
+
+{#if editable && ref}
+	{#await import('./cms-repeater-editable.svelte') then { default: Editable }}
+		<Editable scope={ref} {name} {items} {children} />
+	{/await}
+{:else if items.length}
+	{#each items as item, i}
+		{@render children(item, i)}
+	{/each}
+{:else}
+	<span class="cms-missing" data-cms-name={name} data-cms-scope={scope?.scopeId ?? '?'}>
+		{name}
+	</span>
+{/if}
+
+<style>
+	.cms-missing {
+		display: inline-block;
+		padding: 0 0.25rem;
+		border: 1px dashed rgba(127, 127, 127, 0.6);
+		border-radius: 0.25rem;
+		font-family: ui-monospace, monospace;
+		font-size: 0.85em;
+		color: rgba(127, 127, 127, 0.9);
+	}
+</style>

package/dist/components/cms/cms-repeater.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, unknown> = Record<string, unknown>>(): {
+    props: {
+        name: string;
+        fallback?: T[];
+        value?: unknown;
+        children: Snippet<[T, number]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown> = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown> = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown> = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CmsRepeater: $$IsomorphicComponent;
+type CmsRepeater<T extends Record<string, unknown> = Record<string, unknown>> = InstanceType<typeof CmsRepeater<T>>;
+export default CmsRepeater;