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

package/src/routes/dashboard/content-management/createpage.astro

@@ -3,9 +3,11 @@ import { useTranslations } from 'studiocms:i18n';
 import CreatePage from '../../../components/dashboard/content-mgmt/CreatePage.astro';
 import InnerSidebarElement from '../../../components/dashboard/content-mgmt/InnerSidebarElement.astro';
 import PageHeader from '../../../components/dashboard/content-mgmt/PageHeader.astro';
-import Layout from '../../../layouts/dashboard/Layout.astro';
+import Layout from '../../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:content-index');
 ---
@@ -90,7 +92,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-index');
 
     p {
       font-size: 1.25rem;
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
     }
   }
 </style>

package/src/routes/dashboard/content-management/diff.astro

@@ -2,14 +2,18 @@
 import { FormattedDate } from 'studiocms:components';
 import { useTranslations } from 'studiocms:i18n';
 import { SDKCore } from 'studiocms:sdk';
-import { Button, Card, Group, Input } from 'studiocms:ui/components';
-import { Effect } from 'effect';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Group } from 'studiocms:ui/components/group';
+import { Input } from 'studiocms:ui/components/input';
 import InnerSidebarElement from '../../../components/dashboard/content-mgmt/InnerSidebarElement.astro';
 import PageHeader from '../../../components/dashboard/content-mgmt/PageHeader.astro';
-import Layout from '../../../layouts/dashboard/Layout.astro';
-import { convertToVanilla, genLogger } from '../../../lib/effects/index.js';
+import { Effect, genLogger, runEffect } from '../../../effect.js';
+import Layout from '../../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:content-index');
 const td = useTranslations(lang, '@studiocms/dashboard:content-diff');
@@ -18,7 +22,7 @@ const diffId = urlParams.get('diff');
 
 if (!diffId) return Astro.redirect('/404');
 
-const { user, diff } = await convertToVanilla(
+const { user, diff } = await runEffect(
 	genLogger('studiocms/routes/dashboard/content-management/diff.users-diff')(function* () {
 		const sdk = yield* SDKCore;
 
@@ -35,7 +39,7 @@ const { user, diff } = await convertToVanilla(
 
 if (!diff) return Astro.redirect('/404');
 
-const [{ data: page }, metaDataChanges, diffContentHTML] = await convertToVanilla(
+const [{ data: page }, metaDataChanges, diffContentHTML] = await runEffect(
 	genLogger('studiocms/routes/dashboard/content-management/diff.page-meta')(function* () {
 		const sdk = yield* SDKCore;
 
@@ -70,7 +74,7 @@ const [{ data: page }, metaDataChanges, diffContentHTML] = await convertToVanill
         variant="outlined"
         color="info"
         size="sm"
-        href={`${Astro.locals.routeMap.mainLinks.contentManagementEdit}?edit=${page.id}`}
+        href={`${Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementEdit}?edit=${page.id}`}
         ><t-content-diff key="view-page">{td("view-page")}</t-content-diff>
       </Button>
 
@@ -82,7 +86,7 @@ const [{ data: page }, metaDataChanges, diffContentHTML] = await convertToVanill
           size="sm"
           disabled={metaDataChanges.length === 0}
           data-id={diff.id}
-          data-url={Astro.locals.routeMap.endpointLinks.content.diff}
+          data-url={Astro.locals.StudioCMS.routeMap.endpointLinks.content.diff}
           data-type="data"
           ><t-content-diff key="revert-metadata"
             >{td("revert-metadata")}</t-content-diff
@@ -94,7 +98,7 @@ const [{ data: page }, metaDataChanges, diffContentHTML] = await convertToVanill
           color={"primary"}
           size="sm"
           data-id={diff.id}
-          data-url={Astro.locals.routeMap.endpointLinks.content.diff}
+          data-url={Astro.locals.StudioCMS.routeMap.endpointLinks.content.diff}
           data-type="content"
           ><t-content-diff key="revert-content"
             >{td("revert-content")}</t-content-diff
@@ -106,7 +110,7 @@ const [{ data: page }, metaDataChanges, diffContentHTML] = await convertToVanill
           color={"primary"}
           size="sm"
           data-id={diff.id}
-          data-url={Astro.locals.routeMap.endpointLinks.content.diff}
+          data-url={Astro.locals.StudioCMS.routeMap.endpointLinks.content.diff}
           data-type="both"
           ><t-content-diff key="revert-all">{td("revert-all")}</t-content-diff>
         </Button>
@@ -173,7 +177,7 @@ const [{ data: page }, metaDataChanges, diffContentHTML] = await convertToVanill
 </Layout>
 
 <script>
-  import { toast } from "studiocms:ui/components";
+  import { toast } from "studiocms:ui/components/toaster";
 
   const revertMetaData = document.getElementById(
     "revert-metadata",
@@ -337,11 +341,11 @@ const [{ data: page }, metaDataChanges, diffContentHTML] = await convertToVanill
     border-collapse: collapse;
 
     tr {
-      border-bottom: 2px solid hsl(var(--background-step-2));
+      border-bottom: 2px solid var(--background-step-2);
     }
 
     tr:nth-child(even) {
-      background-color: hsl(var(--background-step-2));
+      background-color: var(--background-step-2);
     }
 
     tr:last-child {
@@ -353,7 +357,7 @@ const [{ data: page }, metaDataChanges, diffContentHTML] = await convertToVanill
     }
 
     td:last-child {
-      border-left: 2px solid hsl(var(--background-step-3));
+      border-left: 2px solid var(--background-step-3);
     }
   }
 </style>

package/src/routes/dashboard/content-management/editfolder.astro

@@ -3,9 +3,11 @@ import { useTranslations } from 'studiocms:i18n';
 import EditFolder from '../../../components/dashboard/content-mgmt/EditFolder.astro';
 import InnerSidebarElement from '../../../components/dashboard/content-mgmt/InnerSidebarElement.astro';
 import PageHeader from '../../../components/dashboard/content-mgmt/PageHeader.astro';
-import Layout from '../../../layouts/dashboard/Layout.astro';
+import Layout from '../../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:content-index');
 ---

package/src/routes/dashboard/content-management/editpage.astro

@@ -3,9 +3,11 @@ import { useTranslations } from 'studiocms:i18n';
 import EditPage from '../../../components/dashboard/content-mgmt/EditPage.astro';
 import InnerSidebarElement from '../../../components/dashboard/content-mgmt/InnerSidebarElement.astro';
 import PageHeader from '../../../components/dashboard/content-mgmt/PageHeader.astro';
-import Layout from '../../../layouts/dashboard/Layout.astro';
+import Layout from '../../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:content-index');
 ---

package/src/routes/dashboard/content-management/index.astro

@@ -2,9 +2,11 @@
 import { useTranslations } from 'studiocms:i18n';
 import InnerSidebarElement from '../../../components/dashboard/content-mgmt/InnerSidebarElement.astro';
 import PageHeader from '../../../components/dashboard/content-mgmt/PageHeader.astro';
-import Layout from '../../../layouts/dashboard/Layout.astro';
+import Layout from '../../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:content-index');
 ---
@@ -98,7 +100,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-index');
 
     p {
       font-size: 1.25rem;
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
     }
   }
 </style>

package/src/routes/dashboard/index.astro

@@ -2,9 +2,11 @@
 import { useTranslations } from 'studiocms:i18n';
 import DashboardGrid from '../../components/dashboard/DashboardGrid.astro';
 import DashboardPageHeader from '../../components/dashboard/DashboardPageHeader.astro';
-import Layout from '../../layouts/dashboard/Layout.astro';
+import Layout from '../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:index');
 ---

package/src/routes/dashboard/password-reset.astro

@@ -2,10 +2,15 @@
 import { useTranslations } from 'studiocms:i18n';
 import logger from 'studiocms:logger';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Button, Card, Icon, Input } from 'studiocms:ui/components';
-import Layout from '../../layouts/dashboard/Layout.astro';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import Layout from '../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:password-reset');
 
@@ -49,7 +54,7 @@ if (!lookupToken) {
         fullWidth
         as="form"
         id="reset-password-form"
-        action={Astro.locals.routeMap.endpointLinks.resetPassword}
+        action={Astro.locals.StudioCMS.routeMap.endpointLinks.resetPassword}
     >
         <div slot="header">
             <h2>
@@ -99,7 +104,7 @@ if (!lookupToken) {
                 >
                     <Icon
                         slot="start-content"
-                        name="check"
+                        name="heroicons:check"
                         width={24}
                         height={24}
                     />
@@ -150,7 +155,7 @@ if (!lookupToken) {
     </script>
 
     <script>
-        import { toast } from "studiocms:ui/components";
+        import { toast } from "studiocms:ui/components/toaster";
 
         const resetForm = document.getElementById(
             "reset-password-form",
@@ -213,14 +218,14 @@ if (!lookupToken) {
                 padding: 1rem;
                 font-size: 1.5rem;
                 font-weight: 500;
-                color: hsl(var(--text-base));
+                color: var(--text-base);
             }
 
             & p {
                 margin: 0;
                 padding: 1rem;
                 font-size: 1rem;
-                color: hsl(var(--text-muted));
+                color: var(--text-muted);
             }
 
             & .password-reset-form-body {

package/src/routes/dashboard/plugins/[plugin].astro

@@ -1,12 +1,15 @@
 ---
 import { useTranslations } from 'studiocms:i18n';
 import pluginList from 'studiocms:plugins';
-import { Button, Icon } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Icon } from 'studiocms:ui/components/icon';
 import PageHeader from '../../../components/dashboard/PageHeader.astro';
 import SettingsRenderer from '../../../components/dashboard/plugins/SettingsRenderer.astro';
-import Layout from '../../../layouts/dashboard/Layout.astro';
+import Layout from '../../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:plugin-settings');
 
@@ -35,15 +38,15 @@ if (!pluginData) {
   >
 
   <div slot="header">
-    <PageHeader title=`${t('header')}: ${pluginData.name}`>
-      <Button variant="solid" color="primary" size="sm" type="submit" form="site-config-form">
-        <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+    <PageHeader title={`${t('header')}: ${pluginData.name}`}>
+      <Button variant="solid" color="primary" size="sm" type="submit" form="plugin-settings-form">
+        <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
         <t-plugins key="save-button">{t('save-button')}</t-plugins>
       </Button>
     </PageHeader>
   </div>
 
-  <form id="plugin-settings-form" action={Astro.locals.routeMap.endpointLinks.plugins + pluginData.identifier} method="POST"> 
+  <form id="plugin-settings-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.plugins + pluginData.identifier} method="POST"> 
     <div class="form-settings">
       
     {

package/src/routes/dashboard/profile.astro

@@ -5,12 +5,17 @@ import PageHeader from '../../components/dashboard/PageHeader.astro';
 import APITokens from '../../components/dashboard/profile/APITokens.astro';
 import BasicInfo from '../../components/dashboard/profile/BasicInfo.astro';
 import Notifications from '../../components/dashboard/profile/Notifications.astro';
-import { providerData, showOAuth } from '../../components/dashboard/profile/oAuthButtonProviders';
+import {
+	providerData,
+	showOAuth,
+} from '../../components/dashboard/profile/oAuthButtonProviders.js';
 import SocialSignin from '../../components/dashboard/profile/SocialSignin.astro';
 import UpdatePassword from '../../components/dashboard/profile/UpdatePassword.astro';
-import Layout from '../../layouts/dashboard/Layout.astro';
+import Layout from '../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
@@ -20,7 +25,7 @@ const {
 
 const shouldShowOAuth = showOAuth && providerData.some(({ enabled }) => enabled);
 
-const isAllowedAPITokens = Astro.locals.userPermissionLevel.isEditor;
+const isAllowedAPITokens = Astro.locals.StudioCMS.security?.userPermissionLevel.isEditor ?? false;
 ---
 
 <Layout 

package/src/routes/dashboard/smtp-configuration.astro

@@ -2,17 +2,27 @@
 import { useTranslations } from 'studiocms:i18n';
 import { Mailer } from 'studiocms:mailer';
 import { SDKCore } from 'studiocms:sdk';
-import { Button, Card, Icon, Input, Select, Toggle } from 'studiocms:ui/components';
-import { Effect } from 'effect';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
+import { Toggle } from 'studiocms:ui/components/toggle';
 import PageHeader from '../../components/dashboard/PageHeader.astro';
-import Layout from '../../layouts/dashboard/Layout.astro';
-import { convertToVanilla, genLogger } from '../../lib/effects/index.js';
+import { Effect, genLogger, runEffect } from '../../effect.js';
+import Layout from '../../layouts/DashboardLayout.astro';
+import type {
+	ConfigFinal,
+	StudioCMSNotificationSettings,
+} from '../../virtuals/sdk/modules/config.js';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 
 const t = useTranslations(lang, '@studiocms/dashboard:smtp');
 
-const [mailerConfig, notificationSettings] = await convertToVanilla(
+const [rawMailerConfig, notificationSettings] = await runEffect(
 	genLogger('studiocms/routes/dashboard/smtp-configuration')(function* () {
 		const mailer = yield* Mailer;
 		const sdk = yield* SDKCore;
@@ -27,13 +37,15 @@ const {
 
 let createConfig = false;
 
+const mailerConfig = rawMailerConfig?.data;
+
 if (!mailerConfig) {
 	createConfig = true;
 }
 
-const notificationSettingKeys = Object.keys(notificationSettings).filter(
-	(key) => key !== 'id'
-) as Array<keyof Omit<typeof notificationSettings, 'id'>>;
+const notificationSettingKeys = Object.keys(notificationSettings.data).filter(
+	(key) => key !== '_config_version'
+) as Array<keyof ConfigFinal<StudioCMSNotificationSettings>>;
 ---
 
 <Layout
@@ -55,7 +67,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
       >
         <Icon
           slot="start-content"
-          name="check-20-solid"
+          name="heroicons:check-20-solid"
           width={20}
           height={20}
         />
@@ -72,7 +84,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
 
       <form
         id="smtp-config-form"
-        action={Astro.locals.routeMap.endpointLinks.mailer.config}
+        action={Astro.locals.StudioCMS.routeMap.endpointLinks.mailer.config}
       >
         <div class="form-content">
           {
@@ -179,7 +191,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
 
       <form
         id="test-smtp-form"
-        action={Astro.locals.routeMap.endpointLinks.mailer.testEmail}
+        action={Astro.locals.StudioCMS.routeMap.endpointLinks.mailer.testEmail}
       >
         <div class="form-content">
           <Input
@@ -204,7 +216,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
         >
           <Icon
             slot="start-content"
-            name="inbox-20-solid"
+            name="heroicons:inbox-20-solid"
             width={20}
             height={20}
           />
@@ -222,7 +234,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
 
       <form
         id="notification-settings-form"
-        action={Astro.locals.routeMap.endpointLinks
+        action={Astro.locals.StudioCMS.routeMap.endpointLinks
           .emailNotificationSettingsSite}
       >
         <div class="form-content">
@@ -231,7 +243,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
               <Toggle
                 name={key}
                 label={t(key)}
-                defaultChecked={notificationSettings[key] === true}
+                defaultChecked={notificationSettings.data[key] === true}
                 color="primary"
               />
             ))
@@ -249,7 +261,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
         >
           <Icon
             slot="start-content"
-            name="check-20-solid"
+            name="heroicons:check-20-solid"
             width={20}
             height={20}
           />
@@ -261,7 +273,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
 </Layout>
 
 <script>
-  import { toast } from "studiocms:ui/components";
+  import { toast } from "studiocms:ui/components/toaster";
 
   const smtpConfigForm = document.getElementById(
     "smtp-config-form",
@@ -304,7 +316,7 @@ const notificationSettingKeys = Object.keys(notificationSettings).filter(
     const createNewConfig = formData.get("create-new-config") as string;
 
     const response = await fetch(smtpConfigForm.action, {
-      method: createNewConfig ? "POST" : "UPDATE",
+      method: createNewConfig ? "POST" : "PATCH",
       headers: {
         "Content-Type": "application/json",
       },

package/src/routes/dashboard/unverified-email.astro

@@ -1,17 +1,19 @@
 ---
 import '../../styles/404.css';
 import { useTranslations } from 'studiocms:i18n';
-import { Button } from 'studiocms:ui/components';
-import Layout from '../../layouts/dashboard/Layout.astro';
+import { Button } from 'studiocms:ui/components/button';
+import Layout from '../../layouts/DashboardLayout.astro';
 
-const { siteConfig: config, userSessionData: currentUser, defaultLang: lang } = Astro.locals;
+const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
 
 const t = useTranslations(lang, '@studiocms/dashboard:unverifiedEmail');
 
-const userId = currentUser.user?.id;
+const currentUser = security?.userSessionData ?? null;
+
+const userId = currentUser?.user?.id;
 
 if (!userId) {
-	window.location.href = '/';
+	return Astro.redirect(Astro.locals.StudioCMS.routeMap.authLinks.loginURL);
 }
 ---
 
@@ -34,7 +36,7 @@ if (!userId) {
       <p><t-unverified key="sub-description">{t('sub-description')}</t-unverified></p>
 
       <Button id="resend-button" variant={'solid'} color="primary" class="resend" fullWidth>
-        <div style="display: none;" data-userid={userId} data-url={Astro.locals.routeMap.endpointLinks.resendVerificationEmail}> </div>
+        <div style="display: none;" data-userid={userId} data-url={Astro.locals.StudioCMS.routeMap.endpointLinks.resendVerificationEmail}> </div>
         <span><t-unverified key="resend-button">{t('resend-button')}</t-unverified></span>
       </Button>
 
@@ -48,7 +50,7 @@ if (!userId) {
 </Layout>
 
 <script>
-  import { toast } from 'studiocms:ui/components';
+  import { toast } from 'studiocms:ui/components/toaster';
 
   document.getElementById('back-button')!.addEventListener('click', () => {
     window.location.href = '/';
@@ -60,8 +62,6 @@ if (!userId) {
     const userId = resendButton.querySelector('div')!.dataset.userid;
     const url = resendButton.querySelector('div')!.dataset.url;
 
-    console.log(userId, url);
-
     if (!userId || !url) {
       return;
     }