includio-cms 0.6.1 → 0.7.0

package/dist/admin/client/admin/admin-layout.svelte

@@ -4,16 +4,30 @@
 	import { Toaster } from '../../../components/ui/sonner/index.js';
 	import { MediaSort, setMediaSort } from '../../state/media-sort.svelte.js';
 	import AdminPreloader from './admin-preloader.svelte';
+	import { onMount } from 'svelte';
 
 	setMediaSort(new MediaSort());
 
 	let { children }: { children: Snippet } = $props();
+
+	let mounted = $state(false);
+	onMount(() => {
+		mounted = true;
+	});
 </script>
 
 <Toaster richColors />
 
-<svelte:boundary>
-	{#snippet pending()}<AdminPreloader />{/snippet}
+{#if !mounted}
+	<AdminPreloader />
+{/if}
+
+<div class:hidden={!mounted}>
+	<svelte:boundary>
+		{#snippet failed(error)}
+			<pre style="color:red;padding:2rem">{error?.message ?? error}</pre>
+		{/snippet}
 
-	{@render children()}
-</svelte:boundary>
+		{@render children()}
+	</svelte:boundary>
+</div>

package/dist/admin/components/fields/blocks-field.svelte

@@ -299,9 +299,9 @@
 						{@const objectField = field.of.find((option) => option.slug === item.slug)}
 
 						{#if objectField}
-							<Accordion.Item value={index.toString()} class="border-0" data-depth={depth + 1}>
+							<Accordion.Item value={index.toString()} class="overflow-hidden rounded-md border-0" data-depth={depth + 1}>
 								<Accordion.Trigger
-									class="items-center border px-4 text-base font-normal data-[state=open]:rounded-b-none"
+									class="items-center rounded-md border bg-card/60 px-4 text-base font-normal data-[state=open]:rounded-b-none"
 								>
 									<div class="flex grow items-center justify-between gap-4">
 										<div class="flex items-center gap-4">
@@ -373,7 +373,7 @@
 										{/if}
 									</div>
 								</Accordion.Trigger>
-								<Accordion.Content class="space-y-4 rounded-b-md border border-t-0 p-4">
+								<Accordion.Content class="space-y-4 rounded-b-md border border-t-0 bg-card/80 p-4">
 									{@const itemPath = joinPath(path, index)}
 									<div data-field-path={itemPath}>
 										<FieldRenderer

package/dist/admin/components/fields/image-field.svelte

@@ -114,7 +114,7 @@
 									</button>
 								</div>
 								<!-- Counter -->
-								<div class="absolute top-2 right-2 rounded-full bg-black/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur">
+								<div class="absolute top-2 right-2 rounded-full bg-plum-darker/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur">
 									{currentIndex + 1} / {valueArr.length}
 								</div>
 							{/if}
@@ -122,7 +122,7 @@
 
 						<!-- Stały gradient z przyciskami na dole -->
 						<div
-							class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/60 to-transparent p-2 pt-8"
+							class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-plum-darker/50 to-transparent p-2 pt-8"
 						>
 							<div class="flex gap-1">
 								<Button {...props} size="sm" variant="secondary" class="h-8">

package/dist/admin/components/fields/media-field.svelte

@@ -226,7 +226,7 @@
 										>
 											<FileMiniature {file} />
 										</button>
-										<div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/60 to-transparent p-2 pt-8">
+										<div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-plum-darker/50 to-transparent p-2 pt-8">
 											<Button {...props} size="sm" variant="secondary" class="h-8">
 												<Plus class="h-4 w-4" />
 												{lang[interfaceLanguage.current].change}
@@ -279,12 +279,12 @@
 													<ChevronRight class="h-5 w-5" />
 												</button>
 											</div>
-											<div class="absolute top-2 right-2 rounded-full bg-black/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur">
+											<div class="absolute top-2 right-2 rounded-full bg-plum-darker/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur">
 												{currentIndex + 1} / {valueArr.length}
 											</div>
 										{/if}
 
-										<div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/60 to-transparent p-2 pt-8">
+										<div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-plum-darker/50 to-transparent p-2 pt-8">
 											<Button {...props} size="sm" variant="secondary" class="h-8">
 												<Plus class="h-4 w-4" />
 												{lang[interfaceLanguage.current].change}
@@ -306,7 +306,7 @@
 					<button
 						{...props}
 						type="button"
-						class="flex aspect-video max-w-64 w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-muted-foreground/30 bg-muted/30 p-6 transition-colors hover:border-primary/50 hover:bg-muted/50"
+						class="flex aspect-video max-w-64 w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-border bg-card/80 p-6 transition-colors hover:border-primary/50 hover:bg-card"
 					>
 						<div class="rounded-full bg-muted p-3">
 							<Plus class="h-6 w-6 text-muted-foreground" />

package/dist/admin/components/media/file/file-miniature.svelte

@@ -18,10 +18,10 @@
 {#if mode === 'thumb'}
 	<!-- Thumb mode: just the media content for 120px thumb area -->
 	{#if file.type === 'image'}
-		<img class="pointer-events-none size-full object-contain" src={file.url} alt={file.name} />
+		<img class="pointer-events-none size-full object-contain m-0" src={file.url} alt={file.name} />
 	{:else if file.type === 'video'}
 		{#if file.thumbnailUrl}
-			<img class="pointer-events-none size-full object-contain" src={file.thumbnailUrl} alt={file.name} />
+			<img class="pointer-events-none size-full object-contain m-0" src={file.thumbnailUrl} alt={file.name} />
 		{/if}
 		<div class="ml-video-overlay">
 			<div class="ml-video-play">
@@ -48,12 +48,12 @@
 			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
 				<Photo class="text-muted-foreground" />
 			</div>
-			<img class="pointer-events-none size-full object-contain" src={file.url} alt={file.name} />
+			<img class="pointer-events-none size-full object-contain m-0" src={file.url} alt={file.name} />
 		{:else if file.type === 'video'}
 			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
 				<Video class="text-muted-foreground" />
 			</div>
-			<img class="pointer-events-none size-full object-contain" src={file.thumbnailUrl} alt={file.name} />
+			<img class="pointer-events-none size-full object-contain m-0" src={file.thumbnailUrl} alt={file.name} />
 		{:else if file.type === 'audio'}
 			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
 				<Music class="text-muted-foreground" />
@@ -65,12 +65,12 @@
 			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
 				<Pdf class="text-muted-foreground" />
 			</div>
-			<Pdf class="pointer-events-none size-full object-contain" />
+			<Pdf class="pointer-events-none size-full object-contain m-0" />
 		{:else}
 			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
 				<File class="text-muted-foreground" />
 			</div>
-			<File class="pointer-events-none size-full object-contain" />
+			<File class="pointer-events-none size-full object-contain m-0" />
 		{/if}
 	</div>
 {/if}

package/dist/admin/context/remotes.d.ts

@@ -1,3 +1,3 @@
-import * as remotes from '../remote/index.js';
+import type * as remotes from '../remote/index.js';
 export declare function setRemotes(data: typeof remotes): void;
 export declare function getRemotes(): typeof remotes;

package/dist/admin/context/remotes.js

@@ -1,5 +1,4 @@
 import { getContext, setContext } from 'svelte';
-import * as remotes from '../remote/index.js';
 const contextKey = Symbol('remotes');
 export function setRemotes(data) {
     setContext(contextKey, data);

package/dist/admin/styles/admin.css

@@ -650,7 +650,7 @@ div[data-collapsible]:not([data-collapsible='icon'])
 
 /* Checkered transparency background */
 .ml-checkered-bg {
-	background: repeating-conic-gradient(var(--muted) 0% 25%, var(--card) 0% 50%) 50% / 16px 16px;
+	background: repeating-conic-gradient(#E2DFF0 0% 25%, #F4F2FA 0% 50%) 50% / 16px 16px;
 }
 
 /* Staggered fadeUp animation for file cards */

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

@@ -3,6 +3,6 @@ export type CommandRootApi = CommandPrimitive.Root;
 type $$ComponentProps = CommandPrimitive.RootProps & {
     api?: CommandRootApi | null;
 };
-declare const Command: import("svelte").Component<$$ComponentProps, {}, "api" | "ref" | "value">;
+declare const Command: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "api">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/components/ui/input/input.svelte

@@ -25,7 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
+			"selection:bg-primary selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-card px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
@@ -40,7 +40,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"border-input bg-background selection:bg-primary selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"border-input bg-card selection:bg-primary selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className

package/dist/components/ui/input-group/input-group-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "image" | "url" | "text" | "date" | "radio" | "color" | "button" | "checkbox" | "search" | (string & {}) | "email" | "hidden" | "password" | "reset" | "time" | "submit" | "tel" | "datetime-local" | "month" | "range" | "week";
+    type?: "number" | "image" | "url" | "text" | "date" | "radio" | "color" | "button" | "checkbox" | "search" | (string & {}) | "email" | "password" | "hidden" | "reset" | "time" | "submit" | "tel" | "datetime-local" | "month" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/components/ui/input-group/input-group.svelte

@@ -15,7 +15,7 @@
 	data-slot="input-group"
 	role="group"
 	class={cn(
-		"group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
+		"group/input-group border-input bg-card shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
 		"h-9 has-[>textarea]:h-auto",
 
 		// Variants based on alignment.

package/dist/components/ui/select/select-trigger.svelte

@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-card px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/sidebar/sidebar-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const SidebarInput: import("svelte").Component<(Omit<import("svelte/elem
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "image" | "url" | "text" | "date" | "radio" | "color" | "button" | "checkbox" | "search" | (string & {}) | "email" | "hidden" | "password" | "reset" | "time" | "submit" | "tel" | "datetime-local" | "month" | "range" | "week";
+    type?: "number" | "image" | "url" | "text" | "date" | "radio" | "color" | "button" | "checkbox" | "search" | (string & {}) | "email" | "password" | "hidden" | "reset" | "time" | "submit" | "tel" | "datetime-local" | "month" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/components/ui/textarea/textarea.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		"border-input placeholder:text-muted-foreground shadow-xs field-sizing-content flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		"border-input placeholder:text-muted-foreground shadow-xs field-sizing-content flex min-h-16 w-full rounded-md border bg-card px-3 py-2 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 		"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 		"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 		className

package/dist/core/cms.d.ts

@@ -1,6 +1,6 @@
 import type { DatabaseAdapter } from '../types/adapters/db.js';
 import type { FilesAdapter } from '../types/adapters/files.js';
-import type { ApiKeyConfig, CMSConfig, ICMS, MediaConfig } from '../types/cms.js';
+import type { ApiKeyConfig, AuthConfig, CMSConfig, ICMS, MediaConfig } from '../types/cms.js';
 import type { CollectionConfigWithType } from '../types/collections.js';
 import type { Language } from '../types/languages.js';
 import type { SingleConfigWithType } from '../types/singles.js';
@@ -8,14 +8,15 @@ import type { PluginConfig } from '../types/plugins.js';
 import type { FormConfig } from '../types/forms.js';
 import type { AIAdapter } from '../types/adapters/ai.js';
 import type { EmailAdapter } from '../types/adapters/email.js';
-import type { AuthAdapter } from '../types/cms.js';
+import { betterAuth } from 'better-auth';
 export declare class CMS implements ICMS {
     private config;
     databaseAdapter: DatabaseAdapter;
     filesAdapter: FilesAdapter;
     emailAdapter: EmailAdapter | null;
-    auth: AuthAdapter | null;
+    authConfig: AuthConfig | null;
     aiAdapter: AIAdapter | null;
+    private _betterAuth;
     collections: Record<string, CollectionConfigWithType>;
     singles: Record<string, SingleConfigWithType>;
     forms: Record<string, FormConfig>;
@@ -24,6 +25,7 @@ export declare class CMS implements ICMS {
     plugins: PluginConfig[];
     apiKeys: ApiKeyConfig[];
     constructor(config: CMSConfig);
+    get auth(): ReturnType<typeof betterAuth>;
     getBySlug(slug: string): CollectionConfigWithType | SingleConfigWithType;
     getFormBySlug(slug: string): FormConfig;
 }

package/dist/core/cms.js

@@ -1,10 +1,16 @@
+import { betterAuth } from 'better-auth';
+import { drizzleAdapter } from 'better-auth/adapters/drizzle';
+import { admin } from 'better-auth/plugins';
+import { resetPasswordEmailTemplate } from '../admin/email/reset-password-template.js';
+import * as authSchema from '../server/db/schema/auth-schema.js';
 export class CMS {
     config;
     databaseAdapter;
     filesAdapter;
     emailAdapter;
-    auth;
+    authConfig;
     aiAdapter = null;
+    _betterAuth = null;
     collections;
     singles;
     forms;
@@ -17,7 +23,7 @@ export class CMS {
         this.databaseAdapter = config.db;
         this.filesAdapter = config.files;
         this.emailAdapter = config.email ?? null;
-        this.auth = config.auth ?? null;
+        this.authConfig = config.auth ?? null;
         this.aiAdapter = config.ai || null;
         this.mediaConfig = config.media || {};
         this.collections = {};
@@ -46,6 +52,39 @@ export class CMS {
             this.plugins = config.plugins;
         }
     }
+    get auth() {
+        if (!this._betterAuth) {
+            if (!this.authConfig) {
+                throw new Error('Auth not configured. Add `auth` to your CMS config.');
+            }
+            const drizzleDb = this.databaseAdapter._drizzle;
+            if (!drizzleDb) {
+                throw new Error('Database adapter does not expose a drizzle instance (_drizzle).');
+            }
+            const emailAdapter = this.emailAdapter;
+            this._betterAuth = betterAuth({
+                database: drizzleAdapter(drizzleDb, { provider: 'pg', schema: authSchema }),
+                secret: this.authConfig.secret,
+                baseURL: this.authConfig.baseURL,
+                emailAndPassword: {
+                    enabled: true,
+                    async sendResetPassword({ user, url }, request) {
+                        if (!emailAdapter) {
+                            throw new Error('Email adapter not configured');
+                        }
+                        const lang = request?.headers.get('Accept-Language')?.startsWith('pl') ? 'pl' : 'en';
+                        const { subject, html } = resetPasswordEmailTemplate({
+                            resetUrl: url,
+                            lang
+                        });
+                        await emailAdapter.sendMail({ to: [user.email], subject, html });
+                    }
+                },
+                plugins: [admin()]
+            });
+        }
+        return this._betterAuth;
+    }
     getBySlug(slug) {
         const config = this.collections[slug] || this.singles[slug];
         if (!config) {

package/dist/db-postgres/index.d.ts

@@ -1,3 +1,8 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
 import type { Config } from './types.js';
+import * as schema from './schema/index.js';
 import type { DatabaseAdapter } from '../types/adapters/db.js';
-export declare function pg(config: Config): DatabaseAdapter;
+export type DatabaseAdapterWithDrizzle = DatabaseAdapter & {
+    _drizzle: ReturnType<typeof drizzle<typeof schema>>;
+};
+export declare function pg(config: Config): DatabaseAdapterWithDrizzle;

package/dist/db-postgres/index.js

@@ -88,6 +88,7 @@ export function pg(config) {
     const client = postgres(config.databaseUrl);
     const db = drizzle(client, { schema });
     return {
+        _drizzle: db,
         createEntry: async (data) => {
             return db.transaction(async (tx) => {
                 const [newEntry] = await tx.insert(schema.entriesTable).values(data).returning();