rimecms 0.26.6 → 0.26.8

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

@@ -1,128 +1,128 @@
 <script lang="ts">
-	import { invalidateAll } from '$app/navigation';
-	import type { User } from '../../../core/collections/auth/types.js';
-	import { t__ } from '../../../core/i18n/index.js';
-	import Page from '../../components/sections/page-layout/Page.svelte';
-	import Button from '../../components/ui/button/button.svelte';
-	import LanguageSwitcher from '../../components/ui/language-switcher/LanguageSwitcher.svelte';
-	import PageHeader from '../../components/ui/page-header/PageHeader.svelte';
-	import { getConfigContext } from '../../context/config.svelte.js';
-	import { Eye } from '@lucide/svelte';
-	import type { DashboardEntry } from './types.js';
+  import { invalidateAll } from '$app/navigation';
+  import type { User } from '../../../core/collections/auth/types.js';
+  import { t__ } from '../../../core/i18n/index.js';
+  import Page from '../../components/sections/page-layout/Page.svelte';
+  import Button from '../../components/ui/button/button.svelte';
+  import LanguageSwitcher from '../../components/ui/language-switcher/LanguageSwitcher.svelte';
+  import PageHeader from '../../components/ui/page-header/PageHeader.svelte';
+  import { getConfigContext } from '../../context/config.svelte.js';
+  import { Eye } from '@lucide/svelte';
+  import type { DashboardEntry } from './types.js';
 
-	type Props = { entries: DashboardEntry[]; user?: User };
-	const { entries, user }: Props = $props();
+  type Props = { entries: DashboardEntry[]; user?: User };
+  const { entries, user }: Props = $props();
 
-	const config = getConfigContext();
+  const config = getConfigContext();
 </script>
 
 <Page>
-	{#snippet main()}
-		<div class="rz-dashboard">
-			<PageHeader>
-				{#snippet title()}
-					{t__('common.welcome')} {user!.name}
-				{/snippet}
+  {#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}
+        {#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>
+          <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}
+      {#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;
+  .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;
+    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)));
-		}
+    &:hover {
+      background-color: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-4)));
+    }
 
-		:global(svg) {
-			opacity: 0.7;
-			z-index: 0;
-		}
+    :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;
-	}
+    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__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));
-	}
+  .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/index.actions.server.js

@@ -6,5 +6,5 @@ const collection = {
 export { area, collection };
 export default {
     area,
-    collection,
+    collection
 };

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

@@ -12,5 +12,5 @@ export default {
     area,
     collection,
     dashboard,
-    live,
+    live
 };

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

@@ -1,201 +1,208 @@
 <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]);
+  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>
+  {#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%);
+  :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));
-	}
+    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>