includio-cms 0.15.4 → 0.16.0

package/dist/inline-edit-proto/hybrid/EditableHybrid.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getEditContext } from '../context.svelte.js';
-
-	type Props = {
-		path: string;
-		tag?: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'div' | 'figcaption';
-		label?: string;
-		class?: string;
-		children?: Snippet;
-	};
-
-	let { path, tag = 'div', label, class: className = '', children }: Props = $props();
-
-	const ctx = getEditContext();
-
-	let element = $state<HTMLElement | null>(null);
-
-	let isFocused = $derived(ctx.focusedPath === path);
-	let value = $derived(ctx.getData(path) as string);
-
-	function handleClick() {
-		if (ctx.mode !== 'hybrid') return;
-		ctx.focusedPath = path;
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (ctx.mode !== 'hybrid') return;
-
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			ctx.focusedPath = path;
-		}
-	}
-
-	// Scroll into view when focused from panel
-	$effect(() => {
-		if (isFocused && element) {
-			element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-		}
-	});
-</script>
-
-{#if ctx.mode === 'hybrid'}
-	<svelte:element
-		this={tag}
-		bind:this={element}
-		class="editable-hybrid cursor-pointer rounded transition-all {className} {isFocused
-			? 'ring-2 ring-[#1e3a5f] ring-offset-2 bg-blue-50/50'
-			: 'hover:ring-2 hover:ring-[#1e3a5f]/30 hover:ring-offset-2'}"
-		onclick={handleClick}
-		onkeydown={handleKeydown}
-		role="button"
-		tabindex="0"
-		aria-label={label || `Edit ${path}`}
-		data-path={path}
-	>
-		{#if children}
-			{@render children()}
-		{:else}
-			{value}
-		{/if}
-	</svelte:element>
-{:else if children}
-	{@render children()}
-{:else}
-	<svelte:element this={tag} class={className}>
-		{value}
-	</svelte:element>
-{/if}

package/dist/inline-edit-proto/hybrid/EditableHybrid.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    path: string;
-    tag?: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'div' | 'figcaption';
-    label?: string;
-    class?: string;
-    children?: Snippet;
-};
-declare const EditableHybrid: import("svelte").Component<Props, {}, "">;
-type EditableHybrid = ReturnType<typeof EditableHybrid>;
-export default EditableHybrid;

package/dist/inline-edit-proto/hybrid/FieldRenderer.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-	import Input from '../../components/ui/input/input.svelte';
-	import Textarea from '../../components/ui/textarea/textarea.svelte';
-	import Label from '../../components/ui/label/label.svelte';
-	import { getEditContext } from '../context.svelte.js';
-	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
-
-	type FieldType = 'text' | 'textarea' | 'url' | 'alt';
-
-	type Props = {
-		path: string;
-		label: string;
-		type?: FieldType;
-		required?: boolean;
-		isFocused?: boolean;
-	};
-
-	let { path, label, type = 'text', required = false, isFocused = false }: Props = $props();
-
-	const ctx = getEditContext();
-
-	let inputRef = $state<HTMLInputElement | HTMLTextAreaElement | null>(null);
-	let value = $derived(ctx.getData(path) as string);
-
-	// A11y validation for alt text
-	let altWarning = $derived.by(() => {
-		if (type !== 'alt') return null;
-		if (!value || value.trim() === '') return 'Alt text is required for accessibility';
-		const genericAlts = ['image', 'picture', 'photo', 'img', 'graphic'];
-		if (genericAlts.includes(value.toLowerCase().trim())) {
-			return 'Alt text should be descriptive, not generic';
-		}
-		return null;
-	});
-
-	function handleInput(e: Event) {
-		const target = e.currentTarget as HTMLInputElement | HTMLTextAreaElement;
-		ctx.updateData(path, target.value);
-	}
-
-	// Auto-focus when this field becomes focused
-	$effect(() => {
-		if (isFocused && inputRef) {
-			inputRef.focus();
-			inputRef.scrollIntoView({ behavior: 'smooth', block: 'center' });
-		}
-	});
-</script>
-
-<div
-	class="field-renderer flex flex-col gap-1.5 rounded-lg p-3 transition-colors {isFocused
-		? 'bg-blue-50 ring-2 ring-[#1e3a5f]/20'
-		: ''}"
-	data-path={path}
->
-	<Label for={path} class="text-sm font-medium text-slate-700">
-		{label}
-		{#if required}
-			<span class="text-red-500">*</span>
-		{/if}
-	</Label>
-
-	{#if type === 'textarea'}
-		<Textarea
-			id={path}
-			bind:ref={inputRef}
-			{value}
-			oninput={handleInput}
-			rows={4}
-			class="resize-none"
-			aria-describedby={altWarning ? `${path}-warning` : undefined}
-		/>
-	{:else}
-		<Input
-			id={path}
-			bind:ref={inputRef}
-			type={type === 'url' ? 'url' : 'text'}
-			{value}
-			oninput={handleInput}
-			aria-describedby={altWarning ? `${path}-warning` : undefined}
-		/>
-	{/if}
-
-	{#if altWarning}
-		<div
-			id="{path}-warning"
-			class="flex items-center gap-1.5 text-xs text-amber-600"
-			role="alert"
-		>
-			<AlertTriangle class="h-3.5 w-3.5" />
-			{altWarning}
-		</div>
-	{/if}
-</div>

package/dist/inline-edit-proto/hybrid/FieldRenderer.svelte.d.ts

@@ -1,11 +0,0 @@
-type FieldType = 'text' | 'textarea' | 'url' | 'alt';
-type Props = {
-    path: string;
-    label: string;
-    type?: FieldType;
-    required?: boolean;
-    isFocused?: boolean;
-};
-declare const FieldRenderer: import("svelte").Component<Props, {}, "">;
-type FieldRenderer = ReturnType<typeof FieldRenderer>;
-export default FieldRenderer;

package/dist/inline-edit-proto/hybrid/HybridEditor.svelte

@@ -1,107 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getEditContext } from '../context.svelte.js';
-	import SyncPanel from './SyncPanel.svelte';
-
-	type Props = {
-		children: Snippet;
-	};
-
-	let { children }: Props = $props();
-
-	const ctx = getEditContext();
-
-	let panelWidth = $state(380);
-	let isResizing = $state(false);
-	let containerRef = $state<HTMLElement | null>(null);
-
-	function startResize(e: MouseEvent) {
-		isResizing = true;
-		e.preventDefault();
-	}
-
-	function handleResize(e: MouseEvent) {
-		if (!isResizing || !containerRef) return;
-		const rect = containerRef.getBoundingClientRect();
-		const newWidth = rect.right - e.clientX;
-		panelWidth = Math.max(280, Math.min(600, newWidth));
-	}
-
-	function stopResize() {
-		isResizing = false;
-	}
-
-	// Keyboard shortcuts
-	function handleKeydown(e: KeyboardEvent) {
-		if (ctx.mode !== 'hybrid') return;
-
-		// Ctrl+Z = Undo
-		if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
-			e.preventDefault();
-			ctx.undo();
-		}
-		// Ctrl+Shift+Z or Ctrl+Y = Redo
-		if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
-			e.preventDefault();
-			ctx.redo();
-		}
-		// Escape = Clear focus
-		if (e.key === 'Escape') {
-			ctx.focusedPath = null;
-		}
-	}
-</script>
-
-<svelte:window
-	onmousemove={handleResize}
-	onmouseup={stopResize}
-	onkeydown={handleKeydown}
-/>
-
-{#if ctx.mode === 'hybrid'}
-	<div
-		bind:this={containerRef}
-		class="hybrid-editor flex h-full min-h-screen"
-		class:cursor-col-resize={isResizing}
-	>
-		<!-- Preview area -->
-		<div
-			class="flex-1 overflow-auto"
-			style="margin-right: {panelWidth}px"
-		>
-			{@render children()}
-		</div>
-
-		<!-- Resizer -->
-		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-		<div
-			class="fixed top-0 z-40 h-full w-1 cursor-col-resize bg-slate-200 transition-colors hover:bg-[#1e3a5f]/50"
-			style="right: {panelWidth}px"
-			onmousedown={startResize}
-			role="separator"
-			aria-orientation="vertical"
-			aria-valuenow={panelWidth}
-			aria-valuemin={280}
-			aria-valuemax={600}
-			tabindex="0"
-		></div>
-
-		<!-- Sync Panel -->
-		<div
-			class="fixed right-0 top-0 z-30 h-full overflow-hidden border-l border-slate-200 bg-white shadow-lg"
-			style="width: {panelWidth}px"
-		>
-			<SyncPanel />
-		</div>
-	</div>
-{:else}
-	{@render children()}
-{/if}
-
-<style>
-	.hybrid-editor :global(.editable-hybrid:focus-within) {
-		outline: 2px solid #1e3a5f;
-		outline-offset: 2px;
-	}
-</style>

package/dist/inline-edit-proto/hybrid/HybridEditor.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-};
-declare const HybridEditor: import("svelte").Component<Props, {}, "">;
-type HybridEditor = ReturnType<typeof HybridEditor>;
-export default HybridEditor;

package/dist/inline-edit-proto/hybrid/SyncPanel.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-	import { getEditContext } from '../context.svelte.js';
-	import FieldRenderer from './FieldRenderer.svelte';
-	import ArrowBackUp from '@tabler/icons-svelte/icons/arrow-back-up';
-	import ArrowForwardUp from '@tabler/icons-svelte/icons/arrow-forward-up';
-	import DeviceFloppy from '@tabler/icons-svelte/icons/device-floppy';
-	import Check from '@tabler/icons-svelte/icons/check';
-	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
-
-	const ctx = getEditContext();
-
-	// Field configs for each section
-	type FieldConfig = {
-		key: string;
-		label: string;
-		type: 'text' | 'textarea' | 'url' | 'alt';
-		required?: boolean;
-	};
-
-	type SectionConfig = {
-		label: string;
-		fields: FieldConfig[];
-	};
-
-	const sectionConfigs: Record<string, SectionConfig> = {
-		hero: {
-			label: 'Hero Section',
-			fields: [
-				{ key: 'title', label: 'Title', type: 'text', required: true },
-				{ key: 'subtitle', label: 'Subtitle', type: 'textarea' },
-				{ key: 'cta', label: 'CTA Button', type: 'text' }
-			]
-		},
-		content: {
-			label: 'Content Section',
-			fields: [
-				{ key: 'title', label: 'Title', type: 'text', required: true },
-				{ key: 'body', label: 'Body', type: 'textarea' }
-			]
-		},
-		image: {
-			label: 'Image',
-			fields: [
-				{ key: 'src', label: 'Image URL', type: 'url', required: true },
-				{ key: 'alt', label: 'Alt Text', type: 'alt', required: true },
-				{ key: 'caption', label: 'Caption', type: 'text' }
-			]
-		}
-	};
-
-	function getFeatureConfig(index: number): SectionConfig {
-		return {
-			label: `Feature ${index + 1}`,
-			fields: [
-				{ key: 'icon', label: 'Icon', type: 'text' },
-				{ key: 'title', label: 'Title', type: 'text', required: true },
-				{ key: 'description', label: 'Description', type: 'textarea' }
-			]
-		};
-	}
-
-	// Derive current section and focused field
-	let currentSection = $derived.by(() => {
-		const path = ctx.focusedPath;
-		if (!path) return null;
-
-		// Get root section (hero, content, image, or features.N)
-		const parts = path.split('.');
-		const root = parts[0];
-
-		// Check for feature item
-		if (root === 'features' && parts[1]) {
-			const featureMatch = path.match(/^features\.(\d+)/);
-			if (featureMatch) {
-				return {
-					path: `features.${featureMatch[1]}`,
-					config: getFeatureConfig(parseInt(featureMatch[1])),
-					focusedField: parts.length > 2 ? parts.slice(2).join('.') : null
-				};
-			}
-		}
-
-		const config = sectionConfigs[root];
-		if (!config) return null;
-
-		return {
-			path: root,
-			config,
-			focusedField: parts.length > 1 ? parts.slice(1).join('.') : null
-		};
-	});
-
-	function handleFieldClick(fieldPath: string) {
-		ctx.focusedPath = fieldPath;
-	}
-</script>
-
-<div class="flex h-full flex-col">
-	<!-- Header -->
-	<div class="flex items-center justify-between border-b border-slate-200 px-4 py-3">
-		<h2 class="text-sm font-semibold text-slate-900">
-			{currentSection?.config.label || 'Properties'}
-		</h2>
-
-		<div class="flex items-center gap-1">
-			<!-- Undo/Redo -->
-			<button
-				onclick={() => ctx.undo()}
-				disabled={!ctx.canUndo}
-				class="rounded p-1.5 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30 disabled:cursor-not-allowed"
-				title="Undo (Ctrl+Z)"
-				aria-label="Undo"
-			>
-				<ArrowBackUp class="h-4 w-4" />
-			</button>
-			<button
-				onclick={() => ctx.redo()}
-				disabled={!ctx.canRedo}
-				class="rounded p-1.5 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30 disabled:cursor-not-allowed"
-				title="Redo (Ctrl+Y)"
-				aria-label="Redo"
-			>
-				<ArrowForwardUp class="h-4 w-4" />
-			</button>
-
-			<!-- Save status -->
-			<div class="ml-2 flex items-center gap-1.5 text-xs">
-				{#if ctx.saveStatus === 'saving'}
-					<Loader2 class="h-3.5 w-3.5 animate-spin text-slate-400" />
-					<span class="text-slate-500">Saving...</span>
-				{:else if ctx.saveStatus === 'saved'}
-					<Check class="h-3.5 w-3.5 text-green-500" />
-					<span class="text-green-600">Saved</span>
-				{:else if ctx.isDirty}
-					<DeviceFloppy class="h-3.5 w-3.5 text-amber-500" />
-					<span class="text-amber-600">Unsaved</span>
-				{/if}
-			</div>
-		</div>
-	</div>
-
-	<!-- Content -->
-	<div class="flex-1 overflow-auto p-4">
-		{#if currentSection}
-			<div class="flex flex-col gap-2">
-				{#each currentSection.config.fields as field}
-					{@const fieldPath = `${currentSection.path}.${field.key}`}
-					<button
-						class="text-left w-full"
-						onclick={() => handleFieldClick(fieldPath)}
-					>
-						<FieldRenderer
-							path={fieldPath}
-							label={field.label}
-							type={field.type}
-							required={field.required}
-							isFocused={ctx.focusedPath === fieldPath}
-						/>
-					</button>
-				{/each}
-			</div>
-		{:else}
-			<div class="flex h-full items-center justify-center text-center">
-				<div class="text-slate-400">
-					<p class="text-sm">Click an element in the preview</p>
-					<p class="mt-1 text-xs">or use Tab to navigate</p>
-				</div>
-			</div>
-		{/if}
-	</div>
-
-	<!-- Keyboard shortcuts hint -->
-	<div class="border-t border-slate-200 px-4 py-2">
-		<div class="flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-slate-400">
-			<span><kbd class="rounded bg-slate-100 px-1">Tab</kbd> Navigate</span>
-			<span><kbd class="rounded bg-slate-100 px-1">Enter</kbd> Select</span>
-			<span><kbd class="rounded bg-slate-100 px-1">Esc</kbd> Deselect</span>
-			<span><kbd class="rounded bg-slate-100 px-1">Ctrl+Z</kbd> Undo</span>
-		</div>
-	</div>
-</div>

package/dist/inline-edit-proto/hybrid/SyncPanel.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const SyncPanel: import("svelte").Component<Record<string, never>, {}, "">;
-type SyncPanel = ReturnType<typeof SyncPanel>;
-export default SyncPanel;

package/dist/inline-edit-proto/inline/EditableInline.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getEditContext } from '../context.svelte.js';
-	import InlineToolbar from './InlineToolbar.svelte';
-
-	type Props = {
-		path: string;
-		tag?: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'div';
-		richtext?: boolean;
-		class?: string;
-		children?: Snippet;
-	};
-
-	let { path, tag = 'div', richtext = false, class: className = '', children }: Props = $props();
-
-	const ctx = getEditContext();
-
-	let element = $state<HTMLElement | null>(null);
-	let isEditing = $state(false);
-	let isHovered = $state(false);
-	let showToolbar = $state(false);
-
-	let value = $derived(ctx.getData(path) as string);
-
-	function startEdit() {
-		if (ctx.mode !== 'inline') return;
-		isEditing = true;
-		showToolbar = richtext;
-		// Focus at end
-		setTimeout(() => {
-			if (element) {
-				element.focus();
-				// Move cursor to end
-				const range = document.createRange();
-				range.selectNodeContents(element);
-				range.collapse(false);
-				const sel = window.getSelection();
-				sel?.removeAllRanges();
-				sel?.addRange(range);
-			}
-		}, 0);
-	}
-
-	function stopEdit() {
-		if (!isEditing) return;
-		isEditing = false;
-		showToolbar = false;
-		if (element) {
-			const newValue = richtext ? element.innerHTML : element.textContent || '';
-			if (newValue !== value) {
-				ctx.updateData(path, newValue);
-			}
-		}
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' && !richtext) {
-			e.preventDefault();
-			stopEdit();
-		}
-		if (e.key === 'Escape') {
-			// Revert
-			if (element) {
-				if (richtext) {
-					element.innerHTML = value;
-				} else {
-					element.textContent = value;
-				}
-			}
-			isEditing = false;
-			showToolbar = false;
-		}
-	}
-</script>
-
-{#if ctx.mode === 'inline'}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="editable-inline relative"
-		onmouseenter={() => (isHovered = true)}
-		onmouseleave={() => (isHovered = false)}
-	>
-		{#if showToolbar}
-			<InlineToolbar {element} />
-		{/if}
-
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<svelte:element
-			this={tag}
-			bind:this={element}
-			class="{className} {isHovered || isEditing
-				? 'outline outline-2 outline-[#1e3a5f]/30 outline-offset-2'
-				: ''} {isEditing
-				? 'outline-[#1e3a5f] bg-white/50'
-				: ''} rounded transition-all cursor-text"
-			contenteditable={isEditing}
-			onclick={startEdit}
-			onblur={stopEdit}
-			onkeydown={handleKeydown}
-			role="textbox"
-			tabindex="0"
-		>
-			{#if richtext}
-				{@html value}
-			{:else}
-				{value}
-			{/if}
-		</svelte:element>
-	</div>
-{:else if children}
-	{@render children()}
-{:else}
-	<svelte:element this={tag} class={className}>
-		{#if richtext}
-			{@html value}
-		{:else}
-			{value}
-		{/if}
-	</svelte:element>
-{/if}

package/dist/inline-edit-proto/inline/EditableInline.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    path: string;
-    tag?: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'div';
-    richtext?: boolean;
-    class?: string;
-    children?: Snippet;
-};
-declare const EditableInline: import("svelte").Component<Props, {}, "">;
-type EditableInline = ReturnType<typeof EditableInline>;
-export default EditableInline;

package/dist/inline-edit-proto/inline/InlineToolbar.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import Bold from '@tabler/icons-svelte/icons/bold';
-	import Italic from '@tabler/icons-svelte/icons/italic';
-	import Strikethrough from '@tabler/icons-svelte/icons/strikethrough';
-	import List from '@tabler/icons-svelte/icons/list';
-
-	type Props = {
-		element: HTMLElement | null;
-	};
-
-	let { element }: Props = $props();
-
-	function execCommand(cmd: string, value?: string) {
-		document.execCommand(cmd, false, value);
-		element?.focus();
-	}
-
-	function toggleBold() {
-		execCommand('bold');
-	}
-
-	function toggleItalic() {
-		execCommand('italic');
-	}
-
-	function toggleStrike() {
-		execCommand('strikeThrough');
-	}
-
-	function toggleList() {
-		execCommand('insertUnorderedList');
-	}
-</script>
-
-<div
-	class="absolute -top-10 left-0 z-20 flex items-center gap-1 rounded-lg bg-slate-900 p-1 shadow-xl"
->
-	<button
-		type="button"
-		onclick={toggleBold}
-		class="rounded p-1.5 text-slate-300 transition-colors hover:bg-slate-700 hover:text-white"
-		title="Bold"
-	>
-		<Bold class="h-4 w-4" />
-	</button>
-	<button
-		type="button"
-		onclick={toggleItalic}
-		class="rounded p-1.5 text-slate-300 transition-colors hover:bg-slate-700 hover:text-white"
-		title="Italic"
-	>
-		<Italic class="h-4 w-4" />
-	</button>
-	<button
-		type="button"
-		onclick={toggleStrike}
-		class="rounded p-1.5 text-slate-300 transition-colors hover:bg-slate-700 hover:text-white"
-		title="Strikethrough"
-	>
-		<Strikethrough class="h-4 w-4" />
-	</button>
-	<div class="mx-1 h-4 w-px bg-slate-600"></div>
-	<button
-		type="button"
-		onclick={toggleList}
-		class="rounded p-1.5 text-slate-300 transition-colors hover:bg-slate-700 hover:text-white"
-		title="Bullet List"
-	>
-		<List class="h-4 w-4" />
-	</button>
-</div>