studiocms 0.1.0-beta.24 → 0.1.0-beta.26

package/dist/components/dashboard/UserName.astro

@@ -2,9 +2,9 @@
 import type { UserSessionData } from 'studiocms:auth/lib/types';
 
 interface Props {
-	currentUser: UserSessionData;
+	currentUser: UserSessionData | null;
 }
 
 const { currentUser } = Astro.props as Props;
 ---
-<Fragment set:text={currentUser.user?.name} />
+<Fragment set:text={currentUser?.user?.name || 'Unknown User'} />

package/dist/components/dashboard/component-scripts/dateTimeListener.js

@@ -1,13 +1,8 @@
+import { DTConfig } from "./dateWithTimeAndZone.js";
 function dateTimeListener(id) {
-  const lastCheckedDate = document.getElementById(id);
-  lastCheckedDate.textContent = new Date(lastCheckedDate.dateTime).toLocaleString(void 0, {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    timeZoneName: "short"
-  });
+  const el = document.getElementById(id);
+  if (!(el instanceof HTMLTimeElement)) return;
+  el.textContent = new Date(el.dateTime).toLocaleString(void 0, DTConfig);
 }
 export {
   dateTimeListener

package/dist/components/dashboard/component-scripts/dateWithTimeAndZone.d.ts

@@ -1 +1,2 @@
+export declare const DTConfig: Readonly<Intl.DateTimeFormatOptions>;
 export declare function dateWithTimeAndZone(date: Date): string;

package/dist/components/dashboard/component-scripts/dateWithTimeAndZone.js

@@ -1,12 +1,15 @@
+const DTConfig = Object.freeze({
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  timeZoneName: "short"
+});
 function dateWithTimeAndZone(date) {
-  return date.toLocaleString(void 0, {
-    month: "numeric",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric"
-  });
+  return date.toLocaleString(void 0, DTConfig);
 }
 export {
+  DTConfig,
   dateWithTimeAndZone
 };

package/dist/components/dashboard/configuration/ConfigForm.astro

@@ -3,8 +3,12 @@ import { validImages } from 'studiocms:auth/utils/validImages';
 import dashboardGridItems from 'studiocms:components/dashboard-grid-items';
 import { useTranslations } from 'studiocms:i18n';
 import type { SiteConfigCacheObject } from 'studiocms:sdk/types';
-import { Card, Divider, Input, Select, Toggle } from 'studiocms:ui/components';
-import LightVsDark from './LightVsDark.astro';
+import { Card } from 'studiocms:ui/components/card';
+import { Divider } from 'studiocms:ui/components/divider';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
+import { Toggle } from 'studiocms:ui/components/toggle';
+import LoginPreview from './LoginPreview.astro';
 
 interface Props {
 	config: SiteConfigCacheObject;
@@ -20,13 +24,6 @@ const currentLoginPageBg = validImages.find(
 	({ name }) => name === data.loginPageBackground && name !== 'custom'
 );
 
-const imageFilter = (filterName: string) =>
-	validImages.filter(({ name }) => name === filterName)[0];
-
-const blobs = imageFilter('studiocms-blobs');
-const blocks = imageFilter('studiocms-blocks');
-const curves = imageFilter('studiocms-curves');
-
 const currentlyEnabledGridItems: string[] = (data.gridItems as string[]) ?? [];
 
 interface PreGridItem {
@@ -59,11 +56,11 @@ const gridItemOptions: AllGridItems[] = allGridItems.map(({ name, label }) => {
 	};
 });
 
-const lang = Astro.locals.defaultLang;
+const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:configuration');
 ---
 
-<form id="site-config-form" action={Astro.locals.routeMap.endpointLinks.config}>
+<form id="site-config-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.config}>
     <div class="form-content">
 
         <div class="form-row">
@@ -95,7 +92,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:configuration');
         <div class="grid-items-container">
             {
                 gridItemOptions.map(({ enabled, label, name }) => (
-                    <Card style="background-color: hsl(var(--background-step-2));">
+                    <Card style="background-color: var(--background-step-2);">
                         <Toggle {label} {name} color='primary' defaultChecked={enabled} />
                     </Card>
                 ))
@@ -109,18 +106,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:configuration');
             <Input label={t('input-custom-login-page')} name="login-page-background-custom" placeholder="'https://...' for local, or '/...' for public/ folder" value={data.loginPageCustomImage} disabled={data.loginPageBackground !== 'custom'} />
         </div>
 
-        <Card class="login-preview-container">
-            <div slot="header">
-                <span>
-                    <t-config-form key="login-page-preview">{t('login-page-preview')}</t-config-form>
-                </span>
-            </div>
-            {
-                currentLoginPageBg && currentLoginPageBg.name !== 'custom' && (
-                    <LightVsDark light={currentLoginPageBg.light!} dark={currentLoginPageBg.dark!} />
-                )
-            }
-        </Card>
+        <LoginPreview light={currentLoginPageBg?.light} dark={currentLoginPageBg?.dark} />
 
     </div>
 </form>
@@ -164,142 +150,62 @@ const t = useTranslations(lang, '@studiocms/dashboard:configuration');
     }
 </script>
 
-<div id="login-page-bgs"
-    data-blobs-light={blobs?.light?.src} data-blobs-dark={blobs?.dark?.src}
-    data-blocks-light={blocks?.light?.src} data-blocks-dark={blocks?.dark?.src}
-    data-curves-light={curves?.light?.src} data-curves-dark={curves?.dark?.src}
-></div>
-
 <script>
-    import { toast } from "studiocms:ui/components";
+    import { toast } from "studiocms:ui/components/toaster";
         const configForm = document.querySelector('#site-config-form') as HTMLFormElement;
 
         configForm.addEventListener('submit', async (e) => {
             e.preventDefault();
-
-            const formData = new FormData(configForm);
-
-            // Get dashboard grid items
-            const gridItems = Array.from(configForm.querySelectorAll('input[type="checkbox"]') as NodeListOf<HTMLInputElement>).map((input) => {
-                return {
+            try {
+                const formData = new FormData(configForm);
+                // Scope to grid container to avoid unrelated checkboxes
+                const gridItems = Array.from(document.querySelectorAll('.grid-items-container input[type="checkbox"]') as NodeListOf<HTMLInputElement>).map((input) => ({
                     name: input.name,
                     enabled: input.checked,
+                }));
+                const enabledGridItems = gridItems.filter((item) => item.enabled).map((item) => item.name);
+                const diffPerPageRaw = formData.get('diff-per-page') as string;
+                const diffPerPageParsed = Number.parseInt(diffPerPageRaw, 10);
+                const data = {
+                    title: formData.get('site-title') as string,
+                    description: formData.get('site-description') as string,
+                    defaultOgImage: formData.get('default-og-image') ?? null,
+                    siteIcon: formData.get('site-icon') ?? null,
+                    loginPageBackground: formData.get('login-page-background') as string,
+                    loginPageCustomImage: formData.get('login-page-background-custom') ?? null,
+                    enableDiffs: formData.get('diff-enabled') === 'true',
+                   diffPerPage: Number.isNaN(diffPerPageParsed) ? 10 : diffPerPageParsed,
+                    gridItems: enabledGridItems,
+                    enableMailer: formData.get('enable-mailer') === 'true',
+                    hideDefaultIndex: formData.get('hide-default-index') === 'true'
+                };
+                const response = await fetch(configForm.action, {
+                    method: 'POST',
+                    body: JSON.stringify(data),
+                    headers: { 'Content-Type': 'application/json' },
+                });
+                const res: any = await response.json().catch(() => ({}));
+                if (!response.ok) {
+                    toast({
+                        title: 'Error',
+                        description: res?.error || res?.message || 'Request failed',
+                        type: 'danger'
+                    });
+                    return;
                 }
-            });
-
-            const enabledGridItems = gridItems.filter((item) => item.enabled).map((item) => item.name);
-
-            const data = {
-                title: formData.get('site-title') as string,
-                description: formData.get('site-description') as string,
-                defaultOgImage: formData.get('default-og-image') ?? null,
-                siteIcon: formData.get('site-icon') ?? null,
-                loginPageBackground: formData.get('login-page-background') as string,
-                loginPageCustomImage: formData.get('login-page-background-custom') ?? null,
-                enableDiffs: formData.get('diff-enabled') === 'true',
-                diffPerPage: parseInt(formData.get('diff-per-page') as string),
-                gridItems: enabledGridItems,
-                enableMailer: formData.get('enable-mailer') === 'true',
-                hideDefaultIndex: formData.get('hide-default-index') === 'true'
-            }
-
-            console.log(data);
-
-            const response = await fetch(configForm.action, {
-                method: 'POST',
-                body: JSON.stringify(data),
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            })
-            const res = await response.json();
-
-            if (response.status !== 200) {
-                toast({
-                    title: 'Error',
-                    description: res.error,
-                    type: 'danger'
-                })
-            }
-
-            if (response.status === 200) {
                 toast({
                     title: 'Success',
-                    description: res.message,
+                    description: res?.message || 'Configuration saved',
                     type: 'success'
-                })
-            }
-        });
-</script>
-
-<script is:inline>
-async function setupLoginPreview() {
-    // Selectors
-    const loginPageBgSelectOptions = document.querySelector('#login-page-background-dropdown').querySelectorAll('.sui-select-option');
-    const customInput = document.querySelector('input[name="login-page-background-custom"]');
-    const customInputLabel = document.querySelector('label[for="login-page-background-custom"]');
-    const previewContainer = document.querySelector('.login-preview-container');
-    const lightImageHolder = document.querySelector('.light-image-holder');
-    const darkImageHolder = document.querySelector('.dark-image-holder');
-
-    // Backgrounds
-    const loginPageBgs = document.querySelector('#login-page-bgs');
-
-    const blobs = {
-        light: loginPageBgs.getAttribute('data-blobs-light'),
-        dark: loginPageBgs.getAttribute('data-blobs-dark'),
-    }
-
-    const blocks = {
-        light: loginPageBgs.getAttribute('data-blocks-light'),
-        dark: loginPageBgs.getAttribute('data-blocks-dark'),
-    }
-
-    const curves = {
-        light: loginPageBgs.getAttribute('data-curves-light'),
-        dark: loginPageBgs.getAttribute('data-curves-dark'),
-    }
-
-    // Event Listeners
-    loginPageBgSelectOptions.forEach((option) => {
-        option.addEventListener('click', () => {
-            const selectedValue = option.getAttribute('value');
-
-            if (selectedValue === 'custom') {
-                customInput.removeAttribute('disabled');
-                customInputLabel.classList.remove('disabled');
-            } else {
-                customInput.setAttribute('disabled', 'disabled');
-                customInputLabel.classList.add('disabled');
-            }
-
-            if (selectedValue === 'custom') {
-                previewContainer.style.display = 'none';
-            } else {
-                previewContainer.style.display = 'block';
-
-                if (selectedValue === 'studiocms-blobs') {
-                    lightImageHolder.src = blobs.light;
-                    darkImageHolder.src = blobs.dark;
-                }
-
-                if (selectedValue === 'studiocms-blocks') {
-                    lightImageHolder.src = blocks.light;
-                    darkImageHolder.src = blocks.dark;
-                }
-
-                if (selectedValue === 'studiocms-curves') {
-                    lightImageHolder.src = curves.light;
-                    darkImageHolder.src = curves.dark;
-                }
-
+                });
+            } catch (err) {
+                toast({
+                    title: 'Network error',
+                    description: (err as Error)?.message ?? 'Unexpected error',
+                    type: 'danger'
+                });
             }
         });
-    });
-}
-
-document.addEventListener('astro:page-load', setupLoginPreview);
-setupLoginPreview();
 </script>
 
 <style>
@@ -315,11 +221,6 @@ setupLoginPreview();
         gap: 1rem;
     }
 
-    .login-preview-container {
-        width: min-content;
-        height: min-content;
-    }
-
     @media screen and (max-width: 768px) {
         .form-row {
             grid-template-columns: 1fr;

package/dist/components/dashboard/configuration/LoginPreview.astro

@@ -0,0 +1,275 @@
+---
+import { Image } from 'astro:assets';
+import { validImages } from 'studiocms:auth/utils/validImages';
+import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
+import { Card } from 'studiocms:ui/components/card';
+
+const imageFilter = (filterName: string) =>
+	validImages.filter(({ name }) => name === filterName)[0];
+
+type LoginImage = {
+	light: ImageMetadata;
+	dark: ImageMetadata;
+};
+
+function getLoginImage(name: string): LoginImage {
+	const image = imageFilter(name);
+	if (!image) {
+		throw new Error(`Image with name ${name} not found in validImages.`);
+	}
+	if (!image.light || !image.dark) {
+		throw new Error(`Image with name ${name} does not have both light and dark variants.`);
+	}
+	return {
+		light: image.light,
+		dark: image.dark,
+	};
+}
+
+const blobs = getLoginImage('studiocms-blobs');
+const blocks = getLoginImage('studiocms-blocks');
+const curves = getLoginImage('studiocms-curves');
+
+interface Props {
+	light?: ImageMetadata;
+	dark?: ImageMetadata;
+
+	defaultLang?: UiLanguageKeys;
+}
+
+const { light, dark, defaultLang } = Astro.props as Props;
+
+const lightSrc = light ? light : blobs.light;
+const darkSrc = dark ? dark : blobs.dark;
+
+const stringifyable = {
+	blobs: {
+		light: blobs.light.src,
+		dark: blobs.dark.src,
+	},
+	blocks: {
+		light: blocks.light.src,
+		dark: blocks.dark.src,
+	},
+	curves: {
+		light: curves.light.src,
+		dark: curves.dark.src,
+	},
+};
+
+const lang = defaultLang ?? Astro.locals?.StudioCMS?.defaultLang ?? 'en';
+const t = useTranslations(lang, '@studiocms/dashboard:configuration');
+---
+
+<Card class="login-preview-container">
+    <div slot="header">
+        <span><t-config-form key="login-page-preview">{t('login-page-preview')}</t-config-form></span>
+    </div>
+    <login-preview class="wrapper" data-sources={JSON.stringify(stringifyable)}>
+        <div class="before">
+            <Image
+                width={640}
+                height={360}
+                class="content-image light-image-holder"
+                src={lightSrc as ImageMetadata}
+                draggable="false"
+                alt="Light Preview"
+                loading={"eager"}
+            />
+        </div>
+        <div class="after">
+            <Image
+                width={640}
+                height={360}
+                class="content-image dark-image-holder"
+                src={darkSrc as ImageMetadata}
+                draggable="false"
+                alt="Dark Preview"
+                loading={"eager"}
+            />
+        </div>
+    </login-preview>
+</Card>
+
+<script>
+    import { 
+        $i18n,
+        $localeSettings,
+        baseTranslation,
+        defaultLang,
+        makeTranslation,
+        updateSelectElmLabel,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:configuration';
+
+    let lang = defaultLang;
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+
+    $localeSettings.subscribe((locale) => {
+        lang = locale || defaultLang;
+    });
+    
+    i18n.subscribe(comp => {
+        updateSelectElmLabel('login-page-preview', comp['login-page-preview']);
+    });
+    
+    if (!customElements.get('t-config-form')) {
+        customElements.define('t-config-form', makeTranslation(currentPage, i18n));
+    }
+</script>
+<script>
+    type LoginImage = {
+        light: string;
+        dark: string;
+    };
+    type JsonData = {
+        blobs: LoginImage;
+        blocks: LoginImage;
+        curves: LoginImage;
+    };
+
+    class LoginPreview extends HTMLElement {
+        // selectors
+        lightImageHolder: HTMLImageElement | null = null;
+        darkImageHolder: HTMLImageElement | null = null;
+        jsonData: JsonData;
+
+        constructor() {
+            super();
+            this.attachShadow({ mode: "open" });
+            const dataSources = this.getAttribute("data-sources");
+            try {
+                this.jsonData = JSON.parse(dataSources || "{}");
+            } catch {
+                this.jsonData = { blobs: { light: "", dark: "" }, blocks: { light: "", dark: "" }, curves: { light: "", dark: "" } };
+            }
+        }
+
+        connectedCallback() {
+            this.setupEventListeners();
+            this.cacheRefs();
+            this.render();
+        }
+ 
+        cacheRefs() {
+            this.lightImageHolder = this.querySelector(".light-image-holder") as HTMLImageElement;
+            this.darkImageHolder = this.querySelector(".dark-image-holder") as HTMLImageElement;
+        }
+
+        render() {
+            if (!this.shadowRoot) return;
+            if (this.shadowRoot.childNodes.length === 0) {
+                const slot = document.createElement("slot");
+                slot.style.display = "block";
+                slot.style.width = "640px";
+                slot.style.height = "360px";
+                this.shadowRoot.appendChild(slot);
+            }
+        }
+
+        setupEventListeners() {
+            const loginPageBgSelectOptions = document
+                .querySelector<HTMLElement>("#login-page-background-dropdown")
+                ?.querySelectorAll<HTMLElement>(".sui-select-option");
+            const customInput = document.querySelector<HTMLElement>(
+                'input[name="login-page-background-custom"]',
+            );
+            const customInputLabel = document.querySelector<HTMLElement>(
+                'label[for="login-page-background-custom"]',
+            );
+
+            if (!loginPageBgSelectOptions || !customInput || !customInputLabel)
+                return;
+
+            loginPageBgSelectOptions.forEach((option) => {
+                option.addEventListener("click", () => {
+                    const selectedValue = option.getAttribute("value");
+
+                    if (selectedValue === "custom") {
+                        customInput.removeAttribute("disabled");
+                        customInputLabel.classList.remove("disabled");
+                    } else {
+                        customInput.setAttribute("disabled", "disabled");
+                        customInputLabel.classList.add("disabled");
+                    }
+
+                    if (selectedValue === "studiocms-blobs" && this.lightImageHolder && this.darkImageHolder) {
+                        this.lightImageHolder.src = this.jsonData.blobs.light;
+                        this.darkImageHolder.src = this.jsonData.blobs.dark;
+                    }
+
+                    if (selectedValue === "studiocms-blocks" && this.lightImageHolder && this.darkImageHolder) {
+                        this.lightImageHolder.src = this.jsonData.blocks.light;
+                        this.darkImageHolder.src = this.jsonData.blocks.dark;
+                    }
+
+                    if (selectedValue === "studiocms-curves" && this.lightImageHolder && this.darkImageHolder) {
+                        this.lightImageHolder.src = this.jsonData.curves.light;
+                        this.darkImageHolder.src = this.jsonData.curves.dark;
+                    }
+                });
+            });
+        }
+    }
+
+    if (!customElements.get("login-preview")) {
+        customElements.define("login-preview", LoginPreview);
+    }
+</script>
+
+<style>
+    /* Our normalize css */
+    * {
+        margin: 0;
+        box-sizing: border-box;
+    }
+
+    .login-preview-container {
+        width: min-content;
+        height: min-content;
+    }
+
+    /* Our wrapper */
+    .wrapper {
+        width: 640px;
+        height: 360px;
+        position: relative;
+        overflow: hidden;
+        box-shadow:
+            0 10px 20px rgba(0, 0, 0, 0.19),
+            0 6px 6px rgba(0, 0, 0, 0.23);
+    }
+
+    /* Our image information */
+    .before,
+    .after {
+        width: 100%;
+        height: 100%;
+        background-repeat: no-repeat;
+        background-color: white;
+        background-size: cover;
+        background-position: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        overflow: hidden;
+    }
+
+    .content-image {
+        height: 100%;
+    }
+
+    .after {
+        width: 50%;
+    }
+
+    @media screen and (max-width: 768px) {
+        .wrapper {
+            width: 320px;
+            height: 180px;
+        }
+    }
+</style>

package/dist/components/dashboard/content-mgmt/CreateFolder.astro

@@ -1,6 +1,7 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
-import { Input, Select } from 'studiocms:ui/components';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
 import { parentFolderOptions } from './shared.js';
 
 interface Props {
@@ -11,10 +12,10 @@ const { lang } = Astro.props;
 
 const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 ---
-<div id="create-folder-container" data-content-management-url={Astro.locals.routeMap.mainLinks.contentManagement}>
+<div id="create-folder-container" data-content-management-url={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagement}>
+
+    <form id="create-folder-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.content.folder}>
 
-    <form id="create-folder-form" action={Astro.locals.routeMap.endpointLinks.content.folder}>
-    
         <Input label={t('input-folder-name')} name="folder-name" isRequired />
         
         <Select label={t('input-folder-parent')} name="parent-folder" fullWidth options={parentFolderOptions} defaultValue='null' />
@@ -42,7 +43,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 </script>
 
 <script>
-import { toast } from "studiocms:ui/components";
+import { toast } from "studiocms:ui/components/toaster";
 
     const form = document.getElementById('create-folder-form') as HTMLFormElement;
     const createContainer = document.getElementById('create-folder-container') as HTMLDivElement;