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

package/src/routes/dashboard/user-management/edit.astro

@@ -2,8 +2,14 @@
 import { FormattedDate } from 'studiocms:components';
 import { useTranslations } from 'studiocms:i18n';
 import { SDKCore } from 'studiocms:sdk';
-import { Button, Card, Center, Group, Icon, Input, Modal, Select } from 'studiocms:ui/components';
-import { Effect } from 'effect';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
+import { Group } from 'studiocms:ui/components/group';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import { Modal } from 'studiocms:ui/components/modal';
+import { Select } from 'studiocms:ui/components/select';
 import PageHeader from '../../../components/dashboard/PageHeader.astro';
 import {
 	providerData,
@@ -12,16 +18,23 @@ import {
 import InnerSidebarElement from '../../../components/dashboard/user-mgmt/InnerSidebarElement.astro';
 import RankCheck from '../../../components/dashboard/user-mgmt/RankCheck.astro';
 import SocialSignin from '../../../components/dashboard/user-mgmt/SocialSignin.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, defaultLang: lang, security } = Astro.locals.StudioCMS;
+
+const userSession = security?.userSessionData ?? null;
+const emailVerificationEnabled = security?.emailVerificationEnabled ?? false;
 const {
-	siteConfig: config,
-	userSessionData: userSession,
-	defaultLang: lang,
-	emailVerificationEnabled,
-	userPermissionLevel: { isAdmin: isAdministrator, isOwner, isEditor: isAllowedAPITokens },
-} = Astro.locals;
+	isOwner,
+	isAdmin,
+	isEditor: isAllowedAPITokens,
+} = security?.userPermissionLevel ?? {
+	isOwner: false,
+	isAdmin: false,
+	isEditor: false,
+	isVisitor: false,
+};
 
 const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-edit');
 
@@ -33,7 +46,7 @@ const allowedRanks = [
 	{ label: 'Visitor', value: 'visitor' },
 ];
 
-const [user, diffs, pages, userTokens] = await convertToVanilla(
+const [user, diffs, pages, userTokens] = await runEffect(
 	genLogger('studiocms/routes/dashboard/user-management/edit')(function* () {
 		const sdk = yield* SDKCore;
 		return yield* Effect.all([
@@ -47,11 +60,11 @@ const [user, diffs, pages, userTokens] = await convertToVanilla(
 
 const shouldShowOAuth = showOAuth && providerData.some(({ enabled }) => enabled);
 
-const disableDelete = user?.permissionsData?.rank === 'owner' || user?.id === userSession.user?.id;
+const disableDelete = user?.permissionsData?.rank === 'owner' || user?.id === userSession?.user?.id;
 
 if (isOwner) allowedRanks.unshift({ label: 'Owner', value: 'owner' });
 
-if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admin' });
+if (isAdmin) allowedRanks.unshift({ label: 'Administrator', value: 'admin' });
 ---
 <Layout 
   title={t('title')}
@@ -77,12 +90,12 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
     <PageHeader title={user?.name || t('header')}>
 
       <Group>
-        <Button id="delete-user-modal-trigger" color="danger" type="submit" size="sm" disabled={disableDelete} data-action={Astro.locals.routeMap.endpointLinks.users}>
-          <Icon name="trash-20-solid" width={20} height={20} />
+        <Button id="delete-user-modal-trigger" color="danger" type="submit" size="sm" disabled={disableDelete} data-action={Astro.locals.StudioCMS.routeMap.endpointLinks.users}>
+          <Icon name="heroicons:trash-20-solid" width={20} height={20} />
           <t-users-edit key="header-delete-button">{t('header-delete-button')}</t-users-edit>
         </Button>
         <Button id="edit-user-button" variant="solid" size="sm"  color="primary" type="submit" form="edit-user-form">
-          <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-users-edit key="header-save-button">{t('header-save-button')}</t-users-edit>
         </Button>
       </Group>
@@ -105,7 +118,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
 
             <Input name="confirm-user-username" placeholder={`${user?.username.slice(0, user?.username.length-2)}...`} isRequired />
           
-            <span style="color: hsl(var(--danger-base))"><t-users-edit key="delete-modal-warning">{t('delete-modal-warning')}</t-users-edit></span>
+            <span style="color: var(--danger-base)"><t-users-edit key="delete-modal-warning">{t('delete-modal-warning')}</t-users-edit></span>
           </div>
         </Center>
       </Modal>
@@ -145,7 +158,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
 
     <div>
       <Button id="password-reset-link-trigger" variant={'outlined'} color={'danger'} size="sm" disabled={disableDelete}>
-        <Icon name="lock-open-20-solid" width={20} height={20} />
+        <Icon name="heroicons:lock-open-20-solid" width={20} height={20} />
         <t-users-edit key="password-reset-button">{t('password-reset-button')}</t-users-edit>
       </Button>
       <Modal id='password-reset-link-modal'>
@@ -162,7 +175,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
       </Modal>
     </div>
 
-    <form id="edit-user-form" action={Astro.locals.routeMap.endpointLinks.users}>
+    <form id="edit-user-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.users}>
 
       <div class="text-h3"><t-users-edit key="edit-role-header">{t('edit-role-header')}</t-users-edit></div>
 
@@ -205,11 +218,11 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
                 <div slot="header" class="token-list-item-header">
                     <div class="token-list-item-header-row">
                         <h4>
-                            <Icon name="key" width={24} height={24} />
+                            <Icon name="heroicons:key" width={24} height={24} />
                             {token.description}
                         </h4>
                         <Button type="submit" variant="solid" color="danger" size="sm" data-token={token.id} data-user={token.userId} disabled>
-                            <Icon slot="start-content" name="trash" width={24} height={24} />
+                            <Icon slot="start-content" name="heroicons:trash" width={24} height={24} />
                             <t-users-edit key="api-tokens-delete-button">{t('api-tokens-delete-button')}</t-users-edit>
                         </Button>
                     </div>
@@ -247,14 +260,14 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
   
                 <div class="card-row">
                   <span class="card-description">{pages.find((page) => page.data.id === diff.pageId)?.data.description}</span>
-                  <Button size='sm' as='a' href={Astro.locals.routeMap.mainLinks.contentManagementDiff + `?diff=${diff.id}`}>
-                    <Icon name="eye" width={24} height={24} class="card-icon" />
+                  <Button size='sm' as='a' href={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementDiff + `?diff=${diff.id}`}>
+                    <Icon name="heroicons:eye" width={24} height={24} class="card-icon" />
                   </Button>
                 </div>
               </Card>
             ))
           ) : (
-            <Card fullWidth style="background-color: hsl(var(--background-step-1));">
+            <Card fullWidth style="background-color: var(--background-step-1);">
               <Center><t-users-edit key="last-edit-pages-no-edits">{t('last-edit-pages-no-edits')}</t-users-edit></Center>
             </Card>
           )
@@ -265,11 +278,11 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
 
   </div>
 
-  <div style="display: none;" id="reset-link-selector" data-link={Astro.locals.routeMap.endpointLinks.createResetLink} data-userid={user?.id} data-dashboard={Astro.locals.routeMap.mainLinks.dashboardIndex} data-reseturl={Astro.locals.routeMap.mainLinks.passwordReset}></div>
+  <div style="display: none;" id="reset-link-selector" data-link={Astro.locals.StudioCMS.routeMap.endpointLinks.createResetLink} data-userid={user?.id} data-dashboard={Astro.locals.StudioCMS.routeMap.mainLinks.dashboardIndex} data-reseturl={Astro.locals.StudioCMS.routeMap.mainLinks.passwordReset}></div>
 
   <div 
       id="token-api-links" style="display: none;"
-      data-token_api={Astro.locals.routeMap.endpointLinks.apiTokens}
+      data-token_api={Astro.locals.StudioCMS.routeMap.endpointLinks.apiTokens}
   ></div>
 
   <script>
@@ -302,7 +315,8 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
   </script>
 
   <script>
-    import { ModalHelper, toast } from 'studiocms:ui/components';
+    import { toast } from 'studiocms:ui/components/toaster';
+    import { ModalHelper } from 'studiocms:ui/components/modal';
 
     const resetLinkModal = new ModalHelper('password-reset-link-modal');
     
@@ -502,7 +516,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
     height: 100%;
     width: 100%;
     padding-top: 1.5rem;
-    background-color: hsl(var(--background-base));
+    background-color: var(--background-base);
   }
 
   .placeholder-info {
@@ -517,7 +531,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
 
     p {
       font-size: 1.25rem;
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
     }
   }
 
@@ -544,7 +558,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
     }
 
     code {
-        background-color: hsl(var(--background-step-3));
+        background-color: var(--background-step-3);
         padding: .25rem;
         border-radius: 4px;
     }
@@ -563,7 +577,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
       }
 
       code {
-        background-color: hsl(var(--background-step-3));
+        background-color: var(--background-step-3);
         padding: .25rem;
         border-radius: 4px;
       }
@@ -575,11 +589,11 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
     border-collapse: collapse;
 
     tr {
-      border-bottom: 2px solid hsl(var(--background-step-1));
+      border-bottom: 2px solid var(--background-step-1);
     }
 
     tr:nth-child(even) {
-      background-color: hsl(var(--background-step-2));
+      background-color: var(--background-step-2);
     }
 
     tr:last-child {
@@ -600,7 +614,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
   .edit-card {
     display: flex;
     flex-direction: column;
-    background-color: hsl(var(--background-step-2));
+    background-color: var(--background-step-2);
     
     & .card-row {
       display: flex;
@@ -613,18 +627,18 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
       }
 
       & .card-date {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         font-size: .8rem;
       }
 
       & .card-description {
         font-size: 1rem;
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         line-clamp: 1;
       }
 
       & .card-icon {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
       }
     }
   }
@@ -632,7 +646,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
   .token-list-item {
     display: flex;
     flex-direction: column;
-    background-color: hsl(var(--background-step-2));
+    background-color: var(--background-step-2);
 
     .token-list-item-header {
       display: flex;
@@ -662,7 +676,7 @@ if (isAdministrator) allowedRanks.unshift({ label: 'Administrator', value: 'admi
 
         .created-at {
           font-size: 0.75rem;
-          color: hsl(var(--text-muted));
+          color: var(--text-muted);
         }
       }
     }

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

@@ -2,9 +2,11 @@
 import { useTranslations } from 'studiocms:i18n';
 import PageHeader from '../../../components/dashboard/PageHeader.astro';
 import InnerSidebarElement from '../../../components/dashboard/user-mgmt/InnerSidebarElement.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:user-mngmt-index');
 ---
@@ -85,7 +87,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-index');
     height: 100%;
     width: 100%;
     padding-top: 1.5rem;
-    background-color: hsl(var(--background-base));
+    background-color: var(--background-base);
   }
 
   .placeholder-info {
@@ -100,7 +102,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-index');
 
     p {
       font-size: 1.25rem;
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
     }
   }
 </style>

package/src/routes/error-pages/404.astro

@@ -1,13 +1,15 @@
 ---
 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 lang = Astro.locals.defaultLang;
+const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:404');
 
-const { siteConfig: config, userSessionData: currentUser } = Astro.locals;
+const { siteConfig: config, security } = Astro.locals.StudioCMS;
+
+const currentUser = security?.userSessionData ?? null;
 ---
 
 <Layout 

package/src/routes/firstTimeSetupRoutes/1-start.astro

@@ -1,33 +1,23 @@
 ---
 import { validImages } from 'studiocms:auth/utils/validImages';
 import { StudioCMSRoutes } from 'studiocms:lib';
-import {
-	Accordion,
-	AccordionItem,
-	Button,
-	Card,
-	Divider,
-	Input,
-	Select,
-} from 'studiocms:ui/components';
-import LightVsDark from '../../components/dashboard/configuration/LightVsDark.astro';
-import Layout from './components/Layout.astro';
-import PageHeader from './components/PageHeader.astro';
+import { Accordion, AccordionItem } from 'studiocms:ui/components/accordion';
+import { Button } from 'studiocms:ui/components/button';
+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 LoginPreview from '../../components/dashboard/configuration/LoginPreview.astro';
+import PageHeader from '../../components/first-time-setup/PageHeader.astro';
+import Layout from '../../layouts/FirstTimeSetupLayout.astro';
 
 const ogSelectOptions = validImages.map(({ label, name: value }) => ({ label, value }));
-
-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');
 ---
 <Layout title="Welcome to StudioCMS">
 
     <PageHeader title="Welcome to StudioCMS" badge={{ label: 'Step 1' }} />
 
-    <Card class='card' style="background-color: hsl(var(--background-step-1))" fullWidth>
+    <Card class='card' style="background-color: var(--background-step-1)" fullWidth>
 
         <div slot="header">
             <h2>Basic Site Information</h2>
@@ -63,12 +53,7 @@ const curves = imageFilter('studiocms-curves');
                     <AccordionItem>
                         <div slot="summary">Login Page Preview</div>
 
-                        <Card class="login-preview-container">
-                            <div slot="header">
-                                <span>Login Page Preview (Dark/Light)</span>
-                            </div>
-                            <LightVsDark light={curves.light!} dark={curves.dark!} />
-                        </Card>
+                        <LoginPreview defaultLang={'en'} />
                     </AccordionItem>
                 </Accordion>
 
@@ -84,7 +69,7 @@ const curves = imageFilter('studiocms-curves');
     </Card>
 
     <script>
-        import { toast } from 'studiocms:ui/components';
+        import { toast } from 'studiocms:ui/components/toaster';
 
         const form = document.querySelector('#setup-step-one') as HTMLFormElement;
 
@@ -98,8 +83,12 @@ const curves = imageFilter('studiocms-curves');
                 description: formData.get('site-description') as string,
                 defaultOgImage: formData.get('default-og-image') as string,
                 siteIcon: formData.get('site-icon') as string,
-                enableDiffs: formData.get('diff-enabled') as string,
-                diffPerPage: formData.get('diff-per-page') as string,
+                enableDiffs: formData.get('diff-enabled') === 'true',
+                diffPerPage: (() => {
+                  const raw = formData.get('diff-per-page');
+                  const n = (typeof raw === 'string' && raw.trim() !== '') ? Number(raw) : NaN;
+                  return Number.isNaN(n) ? 10 : Math.max(1, Math.floor(n));
+                })(),
                 loginPageBackground: formData.get('login-page-background') as string,
                 loginPageBackgroundCustom: formData.get('login-page-background-custom') as string,
             }
@@ -146,11 +135,6 @@ const curves = imageFilter('studiocms-curves');
             gap: 1rem;
         }
     
-        .login-preview-container {
-            width: min-content;
-            height: min-content;
-        }
-    
         @media screen and (max-width: 768px) {
             .form-row {
                 grid-template-columns: 1fr;
@@ -177,80 +161,4 @@ const curves = imageFilter('studiocms-curves');
             gap: 1rem;
         }
     </style>
-
-    <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 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;
-                    }
-
-                }
-            });
-        });
-    }
-
-    setupLoginPreview();
-    </script>
-
 </Layout>

package/src/routes/firstTimeSetupRoutes/2-next.astro

@@ -1,27 +1,54 @@
 ---
-import { authEnvCheck } from 'studiocms:auth/utils/authEnvCheck';
-import { authConfig } from 'studiocms:config';
 import { StudioCMSRoutes } from 'studiocms:lib';
-import { Button, Card, Center, Input } from 'studiocms:ui/components';
-import Layout from './components/Layout.astro';
-import PageHeader from './components/PageHeader.astro';
-import TabItem from './components/TabItem.astro';
-import Tabs from './components/Tabs.astro';
-
-const { providers } = authConfig;
-
-const { SHOW_OAUTH, AUTH0, DISCORD, GITHUB, GOOGLE } = await authEnvCheck(providers);
-
-const githubEnabled = GITHUB.ENABLED && providers.github;
-const discordEnabled = DISCORD.ENABLED && providers.discord;
-const googleEnabled = GOOGLE.ENABLED && providers.google;
-const auth0Enabled = AUTH0.ENABLED && providers.auth0;
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
+import { Input } from 'studiocms:ui/components/input';
+import { TabItem, Tabs } from 'studiocms:ui/components/tabs';
+import type { AvailableIcons } from 'studiocms:ui/icons';
+import { providerData, showOAuth } from '../../components/auth/oAuthButtonProviders.js';
+import PageHeader from '../../components/first-time-setup/PageHeader.astro';
+import Layout from '../../layouts/FirstTimeSetupLayout.astro';
+
+// Define the current images for the providers
+// This is a mapping of provider labels to their respective icons.
+// If a provider does not have an icon, it will be logged to the console.
+// This is used to ensure that the icons are available for the providers in the UI.
+// If a provider is not found, it will be skipped in the UI rendering.
+const providerIcons: Record<string, AvailableIcons> = {
+	github: 'simpleicons:github',
+	discord: 'simpleicons:discord',
+	google: 'flatcoloricons:google',
+	auth0: 'simpleicons:auth0',
+};
+
+// Map the provider data to the current images
+const Providers = providerData
+	.map((provider) => {
+		if (!provider.enabled) return undefined;
+		const icon = providerIcons[provider.label.toLowerCase()];
+		if (!icon) {
+			console.warn(`No icon found for provider: ${provider.label}`);
+			return undefined;
+		}
+
+		return {
+			label: provider.label,
+			icon: icon,
+			href: provider.href,
+		};
+	})
+	.filter(Boolean) as {
+	label: string;
+	icon: AvailableIcons;
+	href: string;
+}[];
 ---
 <Layout title="Welcome to StudioCMS">
 
     <PageHeader title="Welcome to StudioCMS" badge={{ label: 'Step 2' }} />
 
-    <Card class='card' style="background-color: hsl(var(--background-step-1))" fullWidth>
+    <Card class='card' style="background-color: var(--background-step-1)" fullWidth>
 
         <div slot="header">
             <h2>Create an Administrator</h2>
@@ -74,32 +101,21 @@ const auth0Enabled = AUTH0.ENABLED && providers.auth0;
             </TabItem>
 
             {
-                SHOW_OAUTH && githubEnabled && (
-                    <TabItem label='GitHub' icon="simple-icons:github">
-                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.githubIndex}>Connect to GitHub</Button></Center>
-                    </TabItem>
-                )
-            }
-            {
-                SHOW_OAUTH && discordEnabled && (
-                    <TabItem label='Discord' icon="simple-icons:discord">
-                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.discordIndex}>Connect to Discord</Button></Center>
-                    </TabItem>
-                )
-            }
-            {
-                SHOW_OAUTH && googleEnabled && (
-                    <TabItem label='Google' icon="flat-color-icons:google">
-                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.googleIndex}>Connect to Google</Button></Center>
-                    </TabItem>
-                )
-            }
-            {
-                SHOW_OAUTH && auth0Enabled && (
-                    <TabItem label='Auth0' icon="simple-icons:auth0">
-                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.auth0Index}>Connect to Auth0</Button></Center>
-                    </TabItem>
-                )
+                showOAuth && Providers.map(({ href, icon, label }) => {
+                    return (
+                        <TabItem label={label} icon={icon}>
+                            <Center>
+                                <Button 
+                                    color="primary" 
+                                    as="a" 
+                                    href={href} 
+                                    aria-label={`Connect to ${label}`}
+                                    >Connect to {label}
+                                </Button>
+                            </Center>
+                        </TabItem>
+                    )
+                })
             }
 
         </Tabs>
@@ -113,7 +129,7 @@ const auth0Enabled = AUTH0.ENABLED && providers.auth0;
     </Card>
 
     <script>
-        import { toast } from 'studiocms:ui/components';
+        import { toast } from 'studiocms:ui/components/toaster';
 
         const form = document.querySelector('#setup-step-two') as HTMLFormElement;
 

package/src/routes/firstTimeSetupRoutes/3-done.astro

@@ -1,18 +1,18 @@
 ---
-import { Accordion, AccordionItem, Card } from 'studiocms:ui/components';
-import AstroCodeDiffsScript from '../../components/dashboard/AstroCodeDiffsScript.astro';
-import Code from '../../components/dashboard/Code.astro';
-import Layout from './components/Layout.astro';
-import PageHeader from './components/PageHeader.astro';
-import codeSnippet1 from './snippets/opt1-astro.config.diff?raw';
-import codeSnippet2 from './snippets/opt2-astro.config.diff?raw';
-import codeSnippet3 from './snippets/opt2-studiocms.config.diff?raw';
+import { Accordion, AccordionItem } from 'studiocms:ui/components/accordion';
+import { Card } from 'studiocms:ui/components/card';
+import PageHeader from '../../components/first-time-setup/PageHeader.astro';
+import codeSnippet1 from '../../components/first-time-setup/snippets/opt1-astro.config.diff?raw';
+import codeSnippet2 from '../../components/first-time-setup/snippets/opt2-astro.config.diff?raw';
+import codeSnippet3 from '../../components/first-time-setup/snippets/opt2-studiocms.config.diff?raw';
+import Code from '../../components/shared/Code.astro';
+import Layout from '../../layouts/FirstTimeSetupLayout.astro';
 ---
 <Layout title="Welcome to StudioCMS">
 
     <PageHeader title="Welcome to StudioCMS" badge={{ label: 'Done' }} />
 
-    <Card class='card' style="background-color: hsl(var(--background-step-1))" fullWidth>
+    <Card class='card' style="background-color: var(--background-step-1)" fullWidth>
 
         <div slot="header">
             <h2>Finish Onboarding</h2>
@@ -89,6 +89,4 @@ import codeSnippet3 from './snippets/opt2-studiocms.config.diff?raw';
         }
     </style>
 
-    <AstroCodeDiffsScript />
-
 </Layout>