includio-cms 0.15.4 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "includio-cms",
-	"version": "0.15.4",
+	"version": "0.16.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/demo/seed.d.ts

@@ -1 +0,0 @@
-export declare function seedDemoData(): Promise<void>;

package/dist/demo/seed.js

@@ -1,117 +0,0 @@
-import { getCMS } from '../core/cms.js';
-const blogPosts = [
-    {
-        title: 'Getting Started with Includio CMS',
-        slug: 'getting-started',
-        category: 'tutorial',
-        content: '<p>Includio CMS is a modern, headless content management system built with SvelteKit. It provides a flexible and developer-friendly way to manage content for your web applications.</p><p>In this tutorial, we will walk through the basic setup and configuration of Includio CMS.</p>',
-        publishedAt: '2024-12-01'
-    },
-    {
-        title: 'Building Modern Web Applications',
-        slug: 'modern-web-apps',
-        category: 'technology',
-        content: '<p>The landscape of web development is constantly evolving. With frameworks like SvelteKit, developers can build fast, modern applications with great developer experience.</p><p>This post explores the key principles behind modern web application architecture.</p>',
-        publishedAt: '2024-12-15'
-    },
-    {
-        title: 'Design Systems for Content Management',
-        slug: 'design-systems-cms',
-        category: 'design',
-        content: '<p>A well-designed content management interface can make all the difference in editorial productivity. Learn how design systems help create consistent, usable admin panels.</p>',
-        publishedAt: '2025-01-05'
-    },
-    {
-        title: 'Scaling Your Content Strategy',
-        slug: 'scaling-content-strategy',
-        category: 'business',
-        content: '<p>As your business grows, so does your content needs. This post discusses strategies for scaling content operations while maintaining quality and consistency.</p>',
-        publishedAt: '2025-01-20'
-    }
-];
-const projects = [
-    {
-        title: 'E-commerce Platform',
-        description: 'A full-featured online store built with SvelteKit and Includio CMS.',
-        url: 'https://example.com/ecommerce',
-        techStack: [{ name: 'SvelteKit' }, { name: 'PostgreSQL' }, { name: 'Stripe' }]
-    },
-    {
-        title: 'Corporate Website',
-        description: 'Multi-language corporate site with dynamic content management.',
-        url: 'https://example.com/corporate',
-        techStack: [{ name: 'SvelteKit' }, { name: 'Includio CMS' }, { name: 'Tailwind CSS' }]
-    },
-    {
-        title: 'Blog Platform',
-        description: 'A performant blogging platform with SEO optimization.',
-        url: 'https://example.com/blog',
-        techStack: [{ name: 'SvelteKit' }, { name: 'MDsveX' }, { name: 'Vercel' }]
-    }
-];
-const settingsData = {
-    siteName: 'Includio Demo',
-    description: 'A demo instance of Includio CMS showcasing its features.',
-    socialLinks: [
-        { platform: 'GitHub', url: 'https://github.com/includio' },
-        { platform: 'Twitter', url: 'https://twitter.com/includio' }
-    ]
-};
-export async function seedDemoData() {
-    const cms = getCMS();
-    const db = cms.databaseAdapter;
-    // Seed blog posts
-    for (const post of blogPosts) {
-        const entry = await db.createEntry({
-            slug: 'blog-post',
-            type: 'collection'
-        });
-        await db.createEntryVersion({
-            entryId: entry.id,
-            versionNumber: 1,
-            data: {
-                en: {
-                    title: post.title,
-                    slug: post.slug,
-                    category: post.category,
-                    content: post.content,
-                    publishedAt: post.publishedAt
-                }
-            },
-            publishedAt: new Date(post.publishedAt)
-        });
-    }
-    // Seed projects
-    for (const project of projects) {
-        const entry = await db.createEntry({
-            slug: 'project',
-            type: 'collection'
-        });
-        await db.createEntryVersion({
-            entryId: entry.id,
-            versionNumber: 1,
-            data: {
-                en: {
-                    title: project.title,
-                    description: project.description,
-                    url: project.url,
-                    techStack: project.techStack
-                }
-            },
-            publishedAt: new Date()
-        });
-    }
-    // Seed settings single
-    const settingsEntry = await db.createEntry({
-        slug: 'settings',
-        type: 'singleton'
-    });
-    await db.createEntryVersion({
-        entryId: settingsEntry.id,
-        versionNumber: 1,
-        data: {
-            en: settingsData
-        },
-        publishedAt: new Date()
-    });
-}

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

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import { getEditContext, type EditMode } from './context.svelte.js';
-
-	const ctx = getEditContext();
-
-	const modes: { value: EditMode; label: string; desc: string }[] = [
-		{ value: 'panel', label: 'A', desc: 'Panel' },
-		{ value: 'inline', label: 'B', desc: 'Inline' },
-		{ value: 'blocks', label: 'C', desc: 'Blocks' },
-		{ value: 'hybrid', label: 'D', desc: 'Hybrid' }
-	];
-</script>
-
-<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2">
-	<div class="flex items-center gap-1 rounded-full bg-slate-900 p-1.5 shadow-xl">
-		{#each modes as m}
-			<button
-				onclick={() => (ctx.mode = m.value)}
-				class="flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all {ctx.mode ===
-				m.value
-					? 'bg-white text-slate-900'
-					: 'text-slate-400 hover:text-white'}"
-			>
-				<span
-					class="flex h-5 w-5 items-center justify-center rounded-full text-xs font-bold {ctx.mode ===
-					m.value
-						? 'bg-slate-900 text-white'
-						: 'bg-slate-700 text-slate-400'}"
-				>
-					{m.label}
-				</span>
-				<span class="hidden sm:inline">{m.desc}</span>
-			</button>
-		{/each}
-	</div>
-</div>

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

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ModeToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ModeToggle = InstanceType<typeof ModeToggle>;
-export default ModeToggle;

package/dist/inline-edit-proto/blocks/AddBlockButton.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-	import Plus from '@tabler/icons-svelte/icons/plus';
-	import { getEditContext } from '../context.svelte.js';
-
-	type Props = {
-		arrayPath: string;
-		index: number;
-		itemTemplate: () => Record<string, unknown>;
-	};
-
-	let { arrayPath, index, itemTemplate }: Props = $props();
-
-	const ctx = getEditContext();
-
-	let isHovered = $state(false);
-
-	function addBlock() {
-		const arr = ctx.getData(arrayPath) as unknown[];
-		if (Array.isArray(arr)) {
-			const newItem = { ...itemTemplate(), _id: crypto.randomUUID() };
-			arr.splice(index, 0, newItem);
-		}
-	}
-</script>
-
-{#if ctx.mode === 'blocks'}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="add-block-zone relative my-2 flex h-8 items-center justify-center"
-		onmouseenter={() => (isHovered = true)}
-		onmouseleave={() => (isHovered = false)}
-	>
-		{#if isHovered}
-			<div class="absolute inset-x-0 top-1/2 h-px bg-[#1e3a5f]/30"></div>
-			<button
-				type="button"
-				onclick={addBlock}
-				class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-[#1e3a5f] text-white shadow-lg transition-transform hover:scale-110"
-				title="Add block"
-			>
-				<Plus class="h-4 w-4" />
-			</button>
-		{:else}
-			<div class="h-1 w-full cursor-pointer rounded bg-transparent transition-colors hover:bg-[#1e3a5f]/10"></div>
-		{/if}
-	</div>
-{/if}

package/dist/inline-edit-proto/blocks/AddBlockButton.svelte.d.ts

@@ -1,8 +0,0 @@
-type Props = {
-    arrayPath: string;
-    index: number;
-    itemTemplate: () => Record<string, unknown>;
-};
-declare const AddBlockButton: import("svelte").Component<Props, {}, "">;
-type AddBlockButton = ReturnType<typeof AddBlockButton>;
-export default AddBlockButton;

package/dist/inline-edit-proto/blocks/BlockToolbar.svelte

@@ -1,80 +0,0 @@
-<script lang="ts">
-	import ArrowUp from '@tabler/icons-svelte/icons/arrow-up';
-	import ArrowDown from '@tabler/icons-svelte/icons/arrow-down';
-	import Trash from '@tabler/icons-svelte/icons/trash';
-	import Settings from '@tabler/icons-svelte/icons/settings';
-	import GripVertical from '@tabler/icons-svelte/icons/grip-vertical';
-
-	type Props = {
-		label: string;
-		canMoveUp: boolean;
-		canMoveDown: boolean;
-		canDelete: boolean;
-		onMoveUp: () => void;
-		onMoveDown: () => void;
-		onDelete: () => void;
-		onSettings: () => void;
-	};
-
-	let { label, canMoveUp, canMoveDown, canDelete, onMoveUp, onMoveDown, onDelete, onSettings }: Props = $props();
-</script>
-
-<div class="absolute -left-12 top-1/2 z-20 flex -translate-y-1/2 flex-col items-center gap-1">
-	<div class="flex flex-col rounded-lg bg-slate-900 p-1 shadow-xl">
-		<button
-			type="button"
-			class="cursor-grab rounded p-1.5 text-slate-400 transition-colors hover:bg-slate-700 hover:text-white"
-			title="Drag to reorder"
-		>
-			<GripVertical class="h-4 w-4" />
-		</button>
-
-		<div class="my-1 h-px bg-slate-700"></div>
-
-		<button
-			type="button"
-			onclick={onMoveUp}
-			disabled={!canMoveUp}
-			class="rounded p-1.5 text-slate-400 transition-colors hover:bg-slate-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
-			title="Move up"
-		>
-			<ArrowUp class="h-4 w-4" />
-		</button>
-
-		<button
-			type="button"
-			onclick={onMoveDown}
-			disabled={!canMoveDown}
-			class="rounded p-1.5 text-slate-400 transition-colors hover:bg-slate-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
-			title="Move down"
-		>
-			<ArrowDown class="h-4 w-4" />
-		</button>
-
-		<div class="my-1 h-px bg-slate-700"></div>
-
-		<button
-			type="button"
-			onclick={onSettings}
-			class="rounded p-1.5 text-slate-400 transition-colors hover:bg-slate-700 hover:text-white"
-			title="Edit settings"
-		>
-			<Settings class="h-4 w-4" />
-		</button>
-
-		{#if canDelete}
-			<button
-				type="button"
-				onclick={onDelete}
-				class="rounded p-1.5 text-red-400 transition-colors hover:bg-red-900/50 hover:text-red-300"
-				title="Delete"
-			>
-				<Trash class="h-4 w-4" />
-			</button>
-		{/if}
-	</div>
-</div>
-
-<div class="absolute -top-3 left-4 z-20 rounded bg-slate-900 px-2 py-0.5 text-xs font-medium text-slate-300 shadow">
-	{label}
-</div>

package/dist/inline-edit-proto/blocks/BlockToolbar.svelte.d.ts

@@ -1,13 +0,0 @@
-type Props = {
-    label: string;
-    canMoveUp: boolean;
-    canMoveDown: boolean;
-    canDelete: boolean;
-    onMoveUp: () => void;
-    onMoveDown: () => void;
-    onDelete: () => void;
-    onSettings: () => void;
-};
-declare const BlockToolbar: import("svelte").Component<Props, {}, "">;
-type BlockToolbar = ReturnType<typeof BlockToolbar>;
-export default BlockToolbar;

package/dist/inline-edit-proto/blocks/BlockWrapper.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getEditContext } from '../context.svelte.js';
-	import BlockToolbar from './BlockToolbar.svelte';
-
-	type Props = {
-		path: string;
-		index?: number;
-		arrayPath?: string;
-		label?: string;
-		children: Snippet;
-	};
-
-	let { path, index, arrayPath, label = 'Block', children }: Props = $props();
-
-	const ctx = getEditContext();
-
-	let isHovered = $state(false);
-	let isExpanded = $state(false);
-
-	function handleMoveUp() {
-		if (arrayPath !== undefined && index !== undefined && index > 0) {
-			ctx.moveArrayItem(arrayPath, index, index - 1);
-		}
-	}
-
-	function handleMoveDown() {
-		if (arrayPath !== undefined && index !== undefined) {
-			const arr = ctx.getData(arrayPath) as unknown[];
-			if (arr && index < arr.length - 1) {
-				ctx.moveArrayItem(arrayPath, index, index + 1);
-			}
-		}
-	}
-
-	function handleDelete() {
-		if (arrayPath !== undefined && index !== undefined) {
-			ctx.removeArrayItem(arrayPath, index);
-		}
-	}
-
-	function handleSettings() {
-		// Open panel edit for this block
-		ctx.editingPath = path;
-	}
-
-	let canMoveUp = $derived(index !== undefined && index > 0);
-	let canMoveDown = $derived.by(() => {
-		if (index === undefined || !arrayPath) return false;
-		const arr = ctx.getData(arrayPath) as unknown[];
-		return arr && index < arr.length - 1;
-	});
-	let canDelete = $derived(arrayPath !== undefined && index !== undefined);
-</script>
-
-{#if ctx.mode === 'blocks'}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="block-wrapper group relative"
-		onmouseenter={() => (isHovered = true)}
-		onmouseleave={() => (isHovered = false)}
-	>
-		{#if isHovered}
-			<BlockToolbar
-				{label}
-				{canMoveUp}
-				{canMoveDown}
-				{canDelete}
-				onMoveUp={handleMoveUp}
-				onMoveDown={handleMoveDown}
-				onDelete={handleDelete}
-				onSettings={handleSettings}
-			/>
-			<div class="pointer-events-none absolute inset-0 rounded-xl ring-2 ring-[#1e3a5f]/30"></div>
-		{/if}
-
-		<div class="relative">
-			{@render children()}
-		</div>
-	</div>
-{:else}
-	{@render children()}
-{/if}

package/dist/inline-edit-proto/blocks/BlockWrapper.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    path: string;
-    index?: number;
-    arrayPath?: string;
-    label?: string;
-    children: Snippet;
-};
-declare const BlockWrapper: import("svelte").Component<Props, {}, "">;
-type BlockWrapper = ReturnType<typeof BlockWrapper>;
-export default BlockWrapper;

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

@@ -1,65 +0,0 @@
-export type EditMode = 'panel' | 'inline' | 'blocks' | 'hybrid';
-export type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
-export type ContentBlock = {
-    _id: string;
-    type: 'hero' | 'features' | 'text' | 'image' | 'cta';
-    data: Record<string, unknown>;
-};
-export type DemoData = {
-    hero: {
-        title: string;
-        subtitle: string;
-        cta: string;
-    };
-    features: Array<{
-        _id: string;
-        title: string;
-        description: string;
-        icon: string;
-    }>;
-    content: {
-        title: string;
-        body: string;
-    };
-    image: {
-        src: string;
-        alt: string;
-        caption: string;
-    };
-};
-export declare function createEditContext(initialData: DemoData): {
-    mode: EditMode;
-    readonly data: DemoData;
-    editingPath: string | null;
-    readonly isDirty: boolean;
-    focusedPath: string | null;
-    readonly saveStatus: SaveStatus;
-    readonly canUndo: boolean;
-    readonly canRedo: boolean;
-    updateData(path: string, value: unknown, recordHistory?: boolean): void;
-    undo(): void;
-    redo(): void;
-    getData(path: string): unknown;
-    reset(): void;
-    addArrayItem(path: string, item: unknown): void;
-    removeArrayItem(path: string, index: number): void;
-    moveArrayItem(path: string, fromIndex: number, toIndex: number): void;
-};
-export declare function getEditContext(): {
-    mode: EditMode;
-    readonly data: DemoData;
-    editingPath: string | null;
-    readonly isDirty: boolean;
-    focusedPath: string | null;
-    readonly saveStatus: SaveStatus;
-    readonly canUndo: boolean;
-    readonly canRedo: boolean;
-    updateData(path: string, value: unknown, recordHistory?: boolean): void;
-    undo(): void;
-    redo(): void;
-    getData(path: string): unknown;
-    reset(): void;
-    addArrayItem(path: string, item: unknown): void;
-    removeArrayItem(path: string, index: number): void;
-    moveArrayItem(path: string, fromIndex: number, toIndex: number): void;
-};

package/dist/inline-edit-proto/context.svelte.js

@@ -1,194 +0,0 @@
-import { getContext, setContext } from 'svelte';
-const CONTEXT_KEY = Symbol('inline-edit-context');
-export function createEditContext(initialData) {
-    let mode = $state('panel');
-    let data = $state(structuredClone(initialData));
-    let editingPath = $state(null);
-    let isDirty = $state(false);
-    // Hybrid mode state
-    let focusedPath = $state(null);
-    let saveStatus = $state('idle');
-    // Undo/redo stack
-    let undoStack = $state([]);
-    let redoStack = $state([]);
-    const MAX_HISTORY = 50;
-    // Auto-save timer
-    let saveTimeout = null;
-    const AUTO_SAVE_DELAY = 2000;
-    function pushHistory() {
-        undoStack.push({
-            data: structuredClone(data),
-            timestamp: Date.now()
-        });
-        if (undoStack.length > MAX_HISTORY) {
-            undoStack.shift();
-        }
-        redoStack = [];
-    }
-    function triggerAutoSave() {
-        if (saveTimeout)
-            clearTimeout(saveTimeout);
-        saveStatus = 'idle';
-        saveTimeout = setTimeout(async () => {
-            saveStatus = 'saving';
-            // Simulate save (replace with real API call)
-            await new Promise((r) => setTimeout(r, 500));
-            saveStatus = 'saved';
-            setTimeout(() => {
-                if (saveStatus === 'saved')
-                    saveStatus = 'idle';
-            }, 2000);
-        }, AUTO_SAVE_DELAY);
-    }
-    const ctx = {
-        get mode() {
-            return mode;
-        },
-        set mode(value) {
-            mode = value;
-            // Reset focus when changing modes
-            if (value !== 'hybrid') {
-                focusedPath = null;
-            }
-        },
-        get data() {
-            return data;
-        },
-        get editingPath() {
-            return editingPath;
-        },
-        set editingPath(value) {
-            editingPath = value;
-        },
-        get isDirty() {
-            return isDirty;
-        },
-        // Hybrid mode getters/setters
-        get focusedPath() {
-            return focusedPath;
-        },
-        set focusedPath(value) {
-            focusedPath = value;
-        },
-        get saveStatus() {
-            return saveStatus;
-        },
-        get canUndo() {
-            return undoStack.length > 0;
-        },
-        get canRedo() {
-            return redoStack.length > 0;
-        },
-        // Update data at path
-        updateData(path, value, recordHistory = true) {
-            if (recordHistory) {
-                pushHistory();
-            }
-            const parts = path.split('.');
-            let obj = data;
-            for (let i = 0; i < parts.length - 1; i++) {
-                const part = parts[i];
-                if (part.match(/^\d+$/)) {
-                    obj = obj[parseInt(part)];
-                }
-                else {
-                    obj = obj[part];
-                }
-            }
-            const lastKey = parts[parts.length - 1];
-            if (lastKey.match(/^\d+$/)) {
-                obj[parseInt(lastKey)] = value;
-            }
-            else {
-                obj[lastKey] = value;
-            }
-            isDirty = true;
-            if (mode === 'hybrid') {
-                triggerAutoSave();
-            }
-        },
-        // Undo last change
-        undo() {
-            if (undoStack.length === 0)
-                return;
-            const entry = undoStack.pop();
-            redoStack.push({
-                data: structuredClone(data),
-                timestamp: Date.now()
-            });
-            data = entry.data;
-        },
-        // Redo last undone change
-        redo() {
-            if (redoStack.length === 0)
-                return;
-            const entry = redoStack.pop();
-            undoStack.push({
-                data: structuredClone(data),
-                timestamp: Date.now()
-            });
-            data = entry.data;
-        },
-        // Get data at path
-        getData(path) {
-            const parts = path.split('.');
-            let obj = data;
-            for (const part of parts) {
-                if (obj === undefined || obj === null)
-                    return undefined;
-                if (part.match(/^\d+$/)) {
-                    obj = obj[parseInt(part)];
-                }
-                else {
-                    obj = obj[part];
-                }
-            }
-            return obj;
-        },
-        // Reset to initial
-        reset() {
-            pushHistory();
-            data = structuredClone(initialData);
-            isDirty = false;
-            editingPath = null;
-            focusedPath = null;
-        },
-        // Array operations
-        addArrayItem(path, item) {
-            pushHistory();
-            const arr = this.getData(path);
-            if (Array.isArray(arr)) {
-                arr.push(item);
-                isDirty = true;
-                if (mode === 'hybrid')
-                    triggerAutoSave();
-            }
-        },
-        removeArrayItem(path, index) {
-            pushHistory();
-            const arr = this.getData(path);
-            if (Array.isArray(arr)) {
-                arr.splice(index, 1);
-                isDirty = true;
-                if (mode === 'hybrid')
-                    triggerAutoSave();
-            }
-        },
-        moveArrayItem(path, fromIndex, toIndex) {
-            pushHistory();
-            const arr = this.getData(path);
-            if (Array.isArray(arr) && fromIndex >= 0 && toIndex >= 0 && fromIndex < arr.length && toIndex < arr.length) {
-                const [item] = arr.splice(fromIndex, 1);
-                arr.splice(toIndex, 0, item);
-                isDirty = true;
-                if (mode === 'hybrid')
-                    triggerAutoSave();
-            }
-        }
-    };
-    setContext(CONTEXT_KEY, ctx);
-    return ctx;
-}
-export function getEditContext() {
-    return getContext(CONTEXT_KEY);
-}