rimecms 0.22.0

package/dist/panel/pages/dashboard/Dashboard.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { Eye } from '@lucide/svelte';
+	import Button from '../../components/ui/button/button.svelte';
+	import PageHeader from '../../components/ui/page-header/PageHeader.svelte';
+	import { getConfigContext } from '../../context/config.svelte';
+	import LanguageSwitcher from '../../components/ui/language-switcher/LanguageSwitcher.svelte';
+	import { t__ } from '../../../core/i18n/index.js';
+	import type { DashboardEntry } from './types.js';
+	import { invalidateAll } from '$app/navigation';
+	import type { User } from '../../../core/collections/auth/types.js';
+	import Page from '../../components/sections/page-layout/Page.svelte';
+
+	type Props = { entries: DashboardEntry[]; user?: User };
+	const { entries, user }: Props = $props();
+
+	const config = getConfigContext();
+</script>
+
+<Page>
+	{#snippet main()}
+		<div class="rz-dashboard">
+			<PageHeader>
+				{#snippet title()}
+					{t__('common.welcome')} {user!.name}
+				{/snippet}
+
+				{#snippet topRight()}
+					{#if config.raw.siteUrl}
+						<Button variant="text" target="_blank" icon={Eye} href={config.raw.siteUrl}>
+							{t__('common.view_site')}
+						</Button>
+					{/if}
+					{#each config.raw.panel.components.header as CustomHeaderComponent, index (index)}
+						<CustomHeaderComponent />
+					{/each}
+
+					<LanguageSwitcher onLocalClick={() => invalidateAll()} />
+				{/snippet}
+			</PageHeader>
+
+			{#if config.raw.panel.components.dashboard}
+				{@const CustomDashBoard = config.raw.panel.components.dashboard}
+				<CustomDashBoard {entries} />
+			{:else}
+				<div class="rz-dashboard__content">
+					{#each entries as entry, index (index)}
+						{@const Icon = config.raw.icons[entry.slug]}
+						<a class="rz-dashboard__entry" href={entry.link}>
+							<div class="rz-dashboard__entry-icon">
+								<Icon size="16" strokeWidth="1" />
+							</div>
+							<div>
+								<header>
+									<h2>{entry.title}</h2>
+								</header>
+								{#if entry.description}
+									<p class="rz-dashboard__entry-description">{entry.description}</p>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/snippet}
+</Page>
+
+<style>
+	.rz-dashboard {
+		background-color: hsl(var(--rz-color-bg));
+		min-height: 100vh;
+
+		h2 {
+			font-size: var(--rz-text-lg);
+			font-variation-settings: 'wght' 500;
+			font-weight: 500;
+		}
+	}
+	.rz-dashboard__entry {
+		height: 100%;
+		background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
+		border-radius: var(--rz-radius-md);
+		padding: var(--rz-size-4);
+		position: relative;
+		min-height: 130px;
+		display: flex;
+		flex-direction: column;
+		gap: var(--rz-size-4);
+		transition: background-color 0.3s ease-out;
+		
+		&:hover {
+			background-color: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-4)));
+		}
+
+		:global(svg) {
+			opacity: 0.7;
+			z-index: 0;
+		}
+
+		header {
+			display: flex;
+			align-items: center;
+			gap: var(--rz-size-2);
+		}
+	}
+	.rz-dashboard__entry-icon {
+		width: var(--rz-size-8);
+		height: var(--rz-size-8);
+		background-color: light-dark(hsl(var(--rz-gray-13)), hsl(var(--rz-gray-0)));
+		border-radius: var(--rz-size-10);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.rz-dashboard__entry-description {
+		opacity: 0.5;
+		margin-top: var(--rz-size-1);
+	}
+
+	.rz-dashboard__content {
+		display: grid;
+		gap: var(--rz-size-4);
+		padding: var(--rz-size-8) var(--rz-page-gutter);
+		height: 100%;
+		grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+	}
+</style>

package/dist/panel/pages/dashboard/Dashboard.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DashboardEntry } from './types.js';
+import type { User } from '../../../core/collections/auth/types.js';
+type Props = {
+    entries: DashboardEntry[];
+    user?: User;
+};
+declare const Dashboard: import("svelte").Component<Props, {}, "">;
+type Dashboard = ReturnType<typeof Dashboard>;
+export default Dashboard;

package/dist/panel/pages/dashboard/load.server.d.ts

@@ -0,0 +1,7 @@
+import type { ServerLoadEvent } from '@sveltejs/kit';
+import type { Route } from '../../../types.js';
+import type { DashboardEntry } from './types.js';
+export declare const dashboardLoad: (event: ServerLoadEvent) => Promise<{
+    entries: DashboardEntry[];
+    aria: Route[];
+}>;

package/dist/panel/pages/dashboard/load.server.js

@@ -0,0 +1,66 @@
+import { panelUrl } from '../../util/url.js';
+import { capitalize } from '../../../util/string.js';
+export const dashboardLoad = async (event) => {
+    const { locale, user, rime } = event.locals;
+    const entries = [];
+    const buildBaseEntry = (c) => ({
+        prototype: 'collection',
+        description: c.panel && c.panel?.description ? c.panel.description : null,
+        slug: c.slug,
+        canCreate: user && c.access.create(user, {}),
+        link: panelUrl(c.kebab),
+        titleSingular: c.label.singular,
+        title: c.label.plural
+    });
+    const getLastEdited = async (c) => {
+        try {
+            return await rime.collection(c.slug).find({
+                limit: 6,
+                locale
+            });
+        }
+        catch (err) {
+            console.error(`Error fetching documents for collection ${c.slug}:`);
+            console.error(err);
+            return [];
+        }
+    };
+    const promiseEntries = rime.config.raw.collections
+        .filter((collection) => user && collection.access.read(user, {}))
+        .filter((collection) => collection.panel !== false)
+        .map(async (collection) => {
+        if (collection.panel) {
+            return getLastEdited(collection).then((docs) => ({
+                ...buildBaseEntry(collection),
+                lastEdited: docs
+            }));
+        }
+        else {
+            return {
+                ...buildBaseEntry(collection),
+                lastEdited: []
+            };
+        }
+    });
+    try {
+        const collectionEntries = await Promise.all(promiseEntries);
+        entries.push(...collectionEntries);
+    }
+    catch (err) {
+        console.error('Error retrieving collection entries:');
+        console.error(err);
+    }
+    for (const area of rime.config.raw.areas.filter((a) => a.panel !== false)) {
+        if (user && area.access.read(user, {})) {
+            entries.push({
+                prototype: 'area',
+                description: (area.panel && area.panel?.description) || null,
+                slug: area.slug,
+                link: panelUrl(area.kebab),
+                title: area.label || capitalize(area.slug)
+            });
+        }
+    }
+    const aria = [{ title: 'Dashboard', icon: 'dashboard', url: panelUrl() }];
+    return { entries, aria };
+};

package/dist/panel/pages/dashboard/types.d.ts

@@ -0,0 +1,18 @@
+import type { AreaSlug, CollectionSlug, GenericDoc } from '../../../core/types/doc.js';
+export type DashboardEntry = {
+    slug: CollectionSlug;
+    title: string;
+    titleSingular: string;
+    link: string;
+    canCreate?: boolean;
+    prototype: 'collection';
+    description: string | null;
+    lastEdited?: GenericDoc[];
+} | {
+    slug: AreaSlug;
+    title: string;
+    link: string;
+    prototype: 'area';
+    description: string | null;
+    lastEdited?: GenericDoc[];
+};

package/dist/panel/pages/dashboard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/panel/pages/index.actions.server.d.ts

@@ -0,0 +1,13 @@
+import area from './area/actions.server.js';
+import collectionDoc from './collection-document/actions.server.js';
+declare const collection: {
+    doc: typeof collectionDoc;
+};
+export { area, collection };
+declare const _default: {
+    area: typeof area;
+    collection: {
+        doc: typeof collectionDoc;
+    };
+};
+export default _default;

package/dist/panel/pages/index.actions.server.js

@@ -0,0 +1,10 @@
+import area from './area/actions.server.js';
+import collectionDoc from './collection-document/actions.server.js';
+const collection = {
+    doc: collectionDoc
+};
+export { area, collection };
+export default {
+    area,
+    collection,
+};

package/dist/panel/pages/index.load.server.d.ts

@@ -0,0 +1,23 @@
+import area from './area/load.server.js';
+import { collectionLoad } from './collection/load.server.js';
+import { docLoad } from './collection-document/load.server.js';
+import { liveLoad as live } from './live/load.server.js';
+import { dashboardLoad as dashboard } from './dashboard/load.server.js';
+declare const collection: {
+    list: typeof collectionLoad;
+    doc: typeof docLoad;
+};
+export { area, collection, dashboard, live };
+declare const _default: {
+    area: typeof area;
+    collection: {
+        list: typeof collectionLoad;
+        doc: typeof docLoad;
+    };
+    dashboard: (event: import("@sveltejs/kit").ServerLoadEvent) => Promise<{
+        entries: import("./dashboard/types.js").DashboardEntry[];
+        aria: import("../types.js").Route[];
+    }>;
+    live: typeof live;
+};
+export default _default;

package/dist/panel/pages/index.load.server.js

@@ -0,0 +1,16 @@
+import area from './area/load.server.js';
+import { collectionLoad } from './collection/load.server.js';
+import { docLoad } from './collection-document/load.server.js';
+import { liveLoad as live } from './live/load.server.js';
+import { dashboardLoad as dashboard } from './dashboard/load.server.js';
+const collection = {
+    list: collectionLoad,
+    doc: docLoad
+};
+export { area, collection, dashboard, live };
+export default {
+    area,
+    collection,
+    dashboard,
+    live,
+};

package/dist/panel/pages/live/Live.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { BuiltConfigClient } from '../../../core/config/types';
+	import { t__ } from '../../../core/i18n';
+	import type { GenericDoc } from '../../../core/types/doc';
+	import LiveSidePanel from '../../components/sections/live/SidePanel.svelte';
+	import Button from '../../components/ui/button/button.svelte';
+	import { Pane, PaneGroup, PaneResizer } from '../../components/ui/pane/index.js';
+	import SpinLoader from '../../components/ui/spin-loader/SpinLoader.svelte';
+	import { Laptop, Smartphone } from '@lucide/svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+
+	type Props = { data: any; config: BuiltConfigClient };
+	const { data, config }: Props = $props();
+
+	let iframe: HTMLIFrameElement;
+	let iframeSrc = $state('');
+
+	// Normalize URLs by removing trailing slashes
+	function normalizeUrl(url: string): string {
+		if (!url) return '';
+		// Remove trailing slash if it exists
+		return url.endsWith('/') ? url.slice(0, -1) : url;
+	}
+
+	// Compare URLs regardless of trailing slash
+	let sync = $derived(normalizeUrl(iframeSrc) === normalizeUrl(data.src));
+
+	const onDataChange = (args: Partial<GenericDoc>) => {
+		/** Send message to iframe */
+		if (iframe?.contentWindow) {
+			iframe.contentWindow.postMessage(args);
+		}
+	};
+
+	const onFieldFocus = (path: string) => {
+		/** Send message to iframe */
+		if (iframe?.contentWindow) {
+			iframe.contentWindow.postMessage({ focus: path });
+		}
+	};
+
+	// Wrapper tells the iframe it's live - using requestAnimationFrame for better performance
+	function handshake() {
+		if (sync === false) {
+			// Use requestAnimationFrame to yield to the browser for rendering
+			requestAnimationFrame(() => {
+				if (iframe?.contentWindow) {
+					iframe.contentWindow.postMessage({ handshake: true });
+				}
+				// Continue handshake attempts until synced
+				// Use setTimeout outside to ensure we don't create a tight animation frame loop
+				setTimeout(handshake, 1000);
+			});
+		}
+	}
+
+	const onIframeMessage = async (e: any) => {
+		// Handle handshake response from iframe - process in next microtask
+		if (e.data.handshake) {
+			// Use Promise.resolve().then to defer state update to next microtask
+			Promise.resolve().then(() => {
+				iframeSrc = e.data.handshake;
+			});
+		}
+		// Handle navigation request from iframe
+		if (e.data.location) {
+			goto(e.data.location);
+		}
+	};
+
+	onMount(() => {
+		// Set up message listener when component mounts
+		window.addEventListener('message', onIframeMessage);
+	});
+
+	$effect(() => {
+		// Start handshake process when not synced
+		if (!sync) {
+			handshake();
+		}
+	});
+
+	$effect(() => {
+		// Log when sync is established
+		if (sync) {
+			console.log('live:synced');
+		}
+	});
+
+	const ZOOMS = [0.5, 0.66, 1] as const;
+
+	let currentZoom = $state(1);
+	let currentDevice = $state<'mobile' | 'desktop'>('mobile');
+
+	const iframeScale = $derived(ZOOMS[currentZoom]);
+</script>
+
+<div class="rz-live-container">
+	{#if !sync}
+		<div out:fade={{ duration: 350 }} class="rz-live-container__overlay">
+			<div><SpinLoader /> {t__('common.live_in_sync')}</div>
+		</div>
+	{/if}
+	<PaneGroup autoSaveId="rz-live:panel-state" direction="horizontal">
+		<Pane defaultSize={40}>
+			<div class="rz-live-container__side-panel">
+				{#key data.src + data.doc.id + data.locale + data.slug}
+					<LiveSidePanel {config} {onDataChange} {onFieldFocus} doc={data.doc} user={data.user} locale={data.locale} />
+				{/key}
+			</div>
+		</Pane>
+		<PaneResizer />
+		<Pane class="rz-live-container__pane-right" defaultSize={70}>
+			<div class="rz-live-container__devices">
+				<Button
+					onclick={() => (currentDevice = 'mobile')}
+					variant={currentDevice === 'mobile' ? 'secondary' : 'ghost'}
+					size="icon"
+					icon={Smartphone}
+				/>
+				<Button
+					onclick={() => (currentDevice = 'desktop')}
+					variant={currentDevice === 'desktop' ? 'secondary' : 'ghost'}
+					size="icon"
+					icon={Laptop}
+				/>
+			</div>
+			<iframe class={currentDevice} bind:this={iframe} title="edit" src={data.src}></iframe>
+		</Pane>
+	</PaneGroup>
+</div>
+
+<style>
+	:global(.rz-scroll-area__viewport) {
+		position: relative;
+	}
+	:global(.rz-live-container__pane-right) {
+		position: relative;
+		gap: var(--rz-size-6);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-start;
+		padding: var(--rz-size-3);
+		height: 100vh;
+		background-color: hsl(var(--rz-gray-3));
+	}
+
+	.rz-live-container__side-panel {
+		width: 100%;
+		flex-shrink: 0;
+		flex-grow: 0;
+		border-right: var(--rz-border);
+	}
+
+	.rz-live-container iframe {
+		border: var(--rz-border);
+		transform-origin: center 0;
+	}
+
+	.rz-live-container iframe.mobile {
+		width: 320px;
+		/*transform: translateX(-50%);
+		margin-left: 50%;*/
+		aspect-ratio: 2 / 3.3;
+		scale: 1.25;
+	}
+
+	.rz-live-container iframe.desktop {
+		width: 133%;
+		aspect-ratio: 16 / 11;
+		scale: 0.75;
+	}
+
+	.rz-live-container__overlay {
+		background-color: hsl(var(--rz-gray-10));
+		opacity: 0.8;
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 50;
+		> div {
+			display: flex;
+			align-items: center;
+			gap: var(--rz-size-3);
+			justify-content: center;
+		}
+	}
+
+	.rz-live-container__devices {
+		display: inline-flex;
+		gap: var(--rz-size-3);
+		padding: var(--rz-size-2);
+		border-radius: var(--rz-radius-md);
+		background-color: hsl(var(--rz-gray-2));
+	}
+</style>

package/dist/panel/pages/live/Live.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BuiltConfigClient } from '../../../core/config/types';
+type Props = {
+    data: any;
+    config: BuiltConfigClient;
+};
+declare const Live: import("svelte").Component<Props, {}, "">;
+type Live = ReturnType<typeof Live>;
+export default Live;

package/dist/panel/pages/live/load.server.d.ts

@@ -0,0 +1,8 @@
+import type { ServerLoadEvent } from '@sveltejs/kit';
+export declare function liveLoad(event: ServerLoadEvent): Promise<{
+    doc: any;
+    user: any;
+    src: string;
+    slug: never;
+    locale: string | undefined;
+}>;

package/dist/panel/pages/live/load.server.js

@@ -0,0 +1,29 @@
+import { error, redirect } from '@sveltejs/kit';
+import { PARAMS } from '../../../core/constant.js';
+export async function liveLoad(event) {
+    const { user, rime } = event.locals;
+    event.depends('data:src');
+    const params = event.url.searchParams;
+    const id = params.get('id');
+    const versionId = params.get(PARAMS.VERSION_ID) || undefined;
+    const locale = params.get(PARAMS.LOCALE) || undefined;
+    const slug = params.get('slug');
+    const src = params.get('src');
+    if (!user) {
+        error(404, 'Not found');
+    }
+    if (user && src && slug && id) {
+        const output = { user, src: src, slug, locale };
+        if (rime.config.isCollection(slug)) {
+            const doc = await rime.collection(slug).findById({ id, locale, versionId });
+            return { ...output, doc };
+        }
+        else {
+            const doc = await rime.area(slug).find({ locale, versionId });
+            return { ...output, doc };
+        }
+    }
+    else {
+        redirect(302, '/');
+    }
+}

package/dist/panel/style/font.css

@@ -0,0 +1,45 @@
+@font-face {
+	font-family: 'Lora';
+	src: url('/panel/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
+	font-weight: 100 1000;
+	font-style: Italic;
+}
+
+@font-face {
+	font-family: 'Lora';
+	src: url('/panel/fonts/Lora-VariableFont_wght.ttf') format('truetype');
+	font-weight: 100 1000;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Chivo';
+	src: url('/panel/fonts/ChivoMono-Italic-VariableFont_wght.ttf') format('truetype');
+	font-weight: 100 1000;
+	font-style: Italic;
+}
+
+:root {
+	--rz-font-scale: 0.8;
+
+	--rz-font-sans:
+		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol';
+	--rz-font-mono: 'SFMono-Regular', Consolas, Liberation Mono, Menlo, Courier, monospace;
+	--rz-font-serif: 'Lora';
+
+	--rz-text-2xs: calc(var(--rz-font-scale) * 0.625rem);
+	--rz-text-xs: calc(var(--rz-font-scale) * 0.75rem);
+	--rz-text-sm: calc(var(--rz-font-scale) * 0.875rem);
+	--rz-text-md: calc(var(--rz-font-scale) * 1rem);
+	--rz-text-lg: calc(var(--rz-font-scale) * 1.125rem);
+	--rz-text-xl: calc(var(--rz-font-scale) * 1.25rem);
+	--rz-text-2xl: calc(var(--rz-font-scale) * 1.5rem);
+	--rz-text-3xl: calc(var(--rz-font-scale) * 1.875rem);
+	--rz-text-4xl: calc(var(--rz-font-scale) * 2.25rem);
+	--rz-text-5xl: calc(var(--rz-font-scale) * 3rem);
+	--rz-text-6xl: calc(var(--rz-font-scale) * 3.75rem);
+	--rz-text-7xl: calc(var(--rz-font-scale) * 4.5rem);
+	--rz-text-8xl: calc(var(--rz-font-scale) * 6rem);
+	--rz-text-9xl: calc(var(--rz-font-scale) * 8rem);
+}