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

package/dist/components/dashboard/plugins/SettingsRenderer.astro

@@ -1,6 +1,11 @@
 ---
 import type { SettingsField } from 'studiocms:plugin-helpers';
-import { Checkbox, Input, RadioGroup, Row, Select, Textarea } from 'studiocms:ui/components';
+import { Checkbox } from 'studiocms:ui/components/checkbox';
+import { Input } from 'studiocms:ui/components/input';
+import { RadioGroup } from 'studiocms:ui/components/radiogroup';
+import { Row } from 'studiocms:ui/components/row';
+import { Select } from 'studiocms:ui/components/select';
+import { Textarea } from 'studiocms:ui/components/textarea';
 
 interface Props {
 	fields: SettingsField[];

package/dist/components/dashboard/profile/APITokens.astro

@@ -3,15 +3,20 @@ import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { FormattedDate } from 'studiocms:components';
 import { useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Button, Card, Center, Icon, Input, Modal } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import { Modal } from 'studiocms:ui/components/modal';
 
 interface Props {
-	userSession: UserSessionData;
+	userSession: UserSessionData | null;
 }
 
 const { userSession } = Astro.props;
 
-const { user } = userSession;
+const user = userSession?.user ?? null;
 
 if (!user) {
 	throw new Error('User not found');
@@ -19,7 +24,7 @@ if (!user) {
 
 const userTokens = await runSDK(SDKCoreJs.REST_API.tokens.get(user.id));
 
-const lang = Astro.locals.defaultLang;
+const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:profile');
 ---
 <Card fullWidth class="api-tokens">
@@ -36,7 +41,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                 color='primary'
                 size='sm'
                 >
-                <Icon slot="start-content" name="plus" width={24} height={24} />
+                <Icon slot="start-content" name="heroicons:plus" width={24} height={24} />
                 <t-profile-tokens key="api-tokens-create">
                     {t('api-tokens-create')}
                 </t-profile-tokens>
@@ -53,11 +58,11 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                 <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={user.id} disabled>
-                            <Icon slot="start-content" name="trash" width={24} height={24} />
+                            <Icon slot="start-content" name="heroicons:trash" width={24} height={24} />
                             <t-profile-tokens key="api-tokens-delete-button">{t('api-tokens-delete-button')}</t-profile-tokens>
                         </Button>
                     </div>
@@ -112,7 +117,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
 <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>
@@ -137,7 +142,8 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 </script>
 
 <script>
-    import { ModalHelper, toast } from 'studiocms:ui/components';
+    import { ModalHelper } from 'studiocms:ui/components/modal';
+    import { toast } from 'studiocms:ui/components/toaster';
 
     const createAPITokenModal = new ModalHelper('create-api-token-modal', 'create-api-token');
     const createTokenResponseModal = new ModalHelper('create-token-response-modal');
@@ -260,13 +266,13 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
         gap: .5rem;
 
         .description {
-            color: hsl(var(--text-muted));
+            color: var(--text-muted);
         }
 
         .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;
@@ -296,7 +302,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
                     .created-at {
                         font-size: 0.75rem;
-                        color: hsl(var(--text-muted));
+                        color: var(--text-muted);
                     }
                 }
             }

package/dist/components/dashboard/profile/BasicInfo.astro

@@ -1,19 +1,23 @@
 ---
 import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { useTranslations } from 'studiocms:i18n';
-import { Button, Card, Group, Icon, Input } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Group } from 'studiocms:ui/components/group';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
 
 interface Props {
-	currentUser: UserSessionData;
+	currentUser: UserSessionData | null;
 }
 
 const { currentUser: data } = Astro.props as Props;
 
-const lang = Astro.locals.defaultLang;
+const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:profile');
 ---
 
-<Card fullWidth as="form" id="basic-info-form" class="basic-info-form" action={Astro.locals.routeMap.endpointLinks.profile}>
+<Card fullWidth as="form" id="basic-info-form" class="basic-info-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.profile}>
 
     <div slot="header">
         <h2>
@@ -22,14 +26,14 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
     
         <div class="form-header">
             <Group>
-                <Button id="refresh-avatar" size='sm' variant={'outlined'} color={'info'} data-url={Astro.locals.routeMap.endpointLinks.profile}>
-                    <Icon slot="start-content" name="user-circle" width={24} height={24} />
+                <Button id="refresh-avatar" size='sm' variant={'outlined'} color={'info'} data-url={Astro.locals.StudioCMS.routeMap.endpointLinks.profile}>
+                    <Icon slot="start-content" name="heroicons:user-circle" width={24} height={24} />
                     <t-profile-basic key="sync-with-libravatar">
                         {t('sync-with-libravatar')}
                     </t-profile-basic>
                 </Button>
                 <Button type='submit' size='sm' variant={'solid'} color='primary'>
-                    <Icon slot="start-content" name="check" width={24} height={24} />
+                    <Icon slot="start-content" name="heroicons:check" width={24} height={24} />
                     <t-profile-basic key="basic-info-save-button">
                         {t('basic-info-save-button')}
                     </t-profile-basic>
@@ -40,15 +44,15 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
     <div class="form-inputs">
 
-        <Input label={t('basic-info-display-name')} placeholder='John Doe' value={data.user?.name} isRequired name='display-name' />
+        <Input label={t('basic-info-display-name')} placeholder='John Doe' value={data?.user?.name} isRequired name='display-name' />
 
-        <Input label={t('basic-info-username')} placeholder='johndoe' value={data.user?.username} isRequired name='username' />
+        <Input label={t('basic-info-username')} placeholder='johndoe' value={data?.user?.username} isRequired name='username' />
     
-        <Input label={t('basic-info-email')} placeholder='john@doe.com' value={data.user?.email} isRequired name='email' />
+        <Input label={t('basic-info-email')} placeholder='john@doe.com' value={data?.user?.email} isRequired name='email' />
     
-        <Input label={t('basic-info-website')} placeholder='https://doe.com' value={data.user?.url} name='account-url' />
+        <Input label={t('basic-info-website')} placeholder='https://doe.com' value={data?.user?.url} name='account-url' />
 
-        <Input label={t('basic-avatar-url')} placeholder="https://seccdn.libravatar.org/avatar/..." value={data.user?.avatar} name="avatar" />
+        <Input label={t('basic-avatar-url')} placeholder="https://seccdn.libravatar.org/avatar/..." value={data?.user?.avatar} name="avatar" />
 
     </div>
 
@@ -80,7 +84,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
 
 <script>
-    import { toast } from "studiocms:ui/components";
+    import { toast } from "studiocms:ui/components/toaster";
 
     const syncAvatar = document.getElementById('refresh-avatar') as HTMLButtonElement;
     const syncUrl = syncAvatar.dataset.url as string;

package/dist/components/dashboard/profile/Notifications.astro

@@ -3,17 +3,20 @@ import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { Mailer } from 'studiocms:mailer';
 import { notificationTitleStrings, notificationTypes } from 'studiocms:notifier';
 import { type SiteConfigCacheObject } from 'studiocms:sdk/types';
-import { Button, Card, Icon, 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 { Toggle } from 'studiocms:ui/components/toggle';
+import { Effect } from '../../../effect.js';
 
 interface Props {
-	currentUser: UserSessionData;
+	currentUser: UserSessionData | null;
 	config: SiteConfigCacheObject;
 }
 
 const { currentUser: data, config: siteConfig } = Astro.props as Props;
 
-if (!data.user) {
+if (!data?.user) {
 	throw new Error('User not found');
 }
 
@@ -21,7 +24,16 @@ const NotificationOptions = notificationTypes;
 
 const userNotifications = data.user.notifications?.split(',') || [];
 
-const { isEditor, isAdmin, isVisitor: isUser } = Astro.locals.userPermissionLevel;
+const {
+	isEditor,
+	isAdmin,
+	isVisitor: isUser,
+} = Astro.locals.StudioCMS.security?.userPermissionLevel ?? {
+	isVisitor: false,
+	isEditor: false,
+	isAdmin: false,
+	isOwner: false,
+};
 
 let isNotificationsEnabled = false;
 
@@ -35,7 +47,7 @@ if (enableMailer) {
 	}
 }
 ---
-<Card fullWidth as="form" id="notifications-form" class="notifications-update-form" action={Astro.locals.routeMap.endpointLinks.updateUserNotifications}>
+<Card fullWidth as="form" id="notifications-form" class="notifications-update-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.updateUserNotifications}>
 
     <div slot="header">
         <h2>Notifications Events</h2>
@@ -48,7 +60,7 @@ if (enableMailer) {
                 size='sm'
                 disabled={!isNotificationsEnabled}
                 >
-                <Icon slot="start-content" name="check" width={24} height={24} />
+                <Icon slot="start-content" name="heroicons:check" width={24} height={24} />
                 Save
             </Button>
 
@@ -99,7 +111,7 @@ if (enableMailer) {
 </Card>
 
 <script>
-    import { toast } from 'studiocms:ui/components';
+    import { toast } from 'studiocms:ui/components/toaster';
     import { getEnabledNotificationCheckboxes, formatNotificationOptions } from 'studiocms:notifier/client'
 
     const form = document.getElementById('notifications-form') as HTMLFormElement;

package/dist/components/dashboard/profile/SocialSignin.astro

@@ -3,16 +3,19 @@ import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
 import type { CombinedUserData } from 'studiocms:sdk/types';
-import { Button, Card, Center, Icon } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
+import { Icon } from 'studiocms:ui/components/icon';
 import { providerData } from './oAuthButtonProviders.js';
 
 interface Props {
-	currentUser: UserSessionData;
+	currentUser: UserSessionData | null;
 }
 
 const { currentUser: data } = Astro.props as Props;
 
-const { user } = data;
+const user = data?.user ?? null;
 
 let userOAuthData: CombinedUserData['oAuthData'] | undefined;
 
@@ -44,7 +47,7 @@ const socialProviders = providerData.map((providerData) => ({
 const connectedProviders = socialProviders.filter(({ connected }) => connected);
 const unconnectedProviders = socialProviders.filter(({ connected }) => !connected);
 
-const lang = Astro.locals.defaultLang;
+const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:profile');
 ---
 <Card fullWidth class="social-signin-options">
@@ -73,7 +76,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                                 <Fragment set:html={image} />
                                 <span>{label}</span>
                             </div>
-                            <Icon name="minus-circle" width={24} height={24} />
+                            <Icon name="heroicons:minus-circle" width={24} height={24} />
                         </Button>
                     ))
                 }
@@ -105,7 +108,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                                 <Fragment set:html={image} />
                                 <span>{label}</span>
                             </div>
-                            <Icon name="plus-circle" width={24} height={24} />
+                            <Icon name="heroicons:plus-circle" width={24} height={24} />
                         </Button>
                     ))
                 }
@@ -161,7 +164,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
     }
 
     .social-signin-bg {
-        background-color: hsl(var(--background-step-1));
+        background-color: var(--background-step-1);
         height: auto;
     }
 
@@ -170,7 +173,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
         align-items: stretch;
         justify-content: space-between !important;
         width: 100%;
-        margin-button: 1rem;
+        margin-bottom: 1rem;
     }
 
     .icon-and-label {

package/dist/components/dashboard/profile/UpdatePassword.astro

@@ -1,21 +1,24 @@
 ---
 import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { useTranslations } from 'studiocms:i18n';
-import { Button, Card, Icon, Input } from 'studiocms:ui/components';
+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';
 
 interface Props {
-	currentUser: UserSessionData;
+	currentUser: UserSessionData | null;
 }
 
 const { currentUser: data } = Astro.props as Props;
 
-const userHasNoPassword = data.user?.password === null;
+const userHasNoPassword = data?.user?.password === null;
 
-const lang = Astro.locals.defaultLang;
+const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:profile');
 ---
 
-<Card fullWidth as="form" id="password-update-form" class="password-update-form" action={Astro.locals.routeMap.endpointLinks.profile}>
+<Card fullWidth as="form" id="password-update-form" class="password-update-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.profile}>
 
     <div slot="header">
         <h2><t-profile-password key="user-password-header">{t('user-password-header')}</t-profile-password></h2>
@@ -28,7 +31,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                 disabled={userHasNoPassword}
                 size='sm'
                 >
-                <Icon slot="start-content" name="check" width={24} height={24} />
+                <Icon slot="start-content" name="heroicons:check" width={24} height={24} />
                 <t-profile-password key="user-password-save-button">
                     {t('user-password-save-button')}
                 </t-profile-password>
@@ -99,7 +102,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 </script>
 
 <script>
-    import { toast } from "studiocms:ui/components";
+    import { toast } from "studiocms:ui/components/toaster";
         const passwordUpdateForm = document.getElementById('password-update-form') as HTMLFormElement;
 
         passwordUpdateForm.addEventListener('submit', async (e) => {

package/dist/components/dashboard/profile/oAuthButtonProviders.d.ts

@@ -1,8 +1 @@
-export type ProviderData = {
-    enabled: boolean;
-    href: string;
-    label: string;
-    image: string;
-};
-export declare const providerData: ProviderData[];
-export declare const showOAuth: boolean;
+export * from '../../auth/oAuthButtonProviders.js';

package/dist/components/dashboard/profile/oAuthButtonProviders.js

@@ -1,15 +1 @@
-import { StudioCMSRoutes } from "studiocms:lib";
-import { oAuthButtons } from "studiocms:plugins/auth/providers";
-const providerData = oAuthButtons.map(
-  ({ enabled, image, label, safeName }) => ({
-    enabled,
-    href: StudioCMSRoutes.authLinks.oAuthIndex(safeName),
-    label,
-    image
-  })
-);
-const showOAuth = providerData.some((provider) => provider.enabled);
-export {
-  providerData,
-  showOAuth
-};
+export * from "../../auth/oAuthButtonProviders.js";

package/dist/components/dashboard/shared.d.ts

@@ -1,2 +1,2 @@
-import type { GridItemUsable } from '../../lib/dashboardGrid.js';
+import type { GridItemUsable } from '../../schemas/plugins/shared.js';
 export type GridItem = GridItemUsable;

package/dist/components/dashboard/sidebar/UserAccount.astro

@@ -1,10 +1,10 @@
 ---
 import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { getLabelForPermissionLevel } from 'studiocms:auth/utils/getLabelForPermissionLevel';
-import { User } from 'studiocms:ui/components';
+import User from '../../shared/SSRUser.astro';
 
 interface Props {
-	currentUser: UserSessionData;
+	currentUser: UserSessionData | null;
 }
 
 const { currentUser } = Astro.props as Props;
@@ -15,12 +15,11 @@ type PropsOf<T extends (...args: any[]) => any> = Parameters<T>[0];
 type UserProps = PropsOf<typeof User>;
 
 const userProps: UserProps = {
-	name: currentUser.user?.name || 'Visitor',
-	description: getLabelForPermissionLevel(currentUser.permissionLevel),
-	loading: 'eager',
+	name: currentUser?.user?.name || 'Visitor',
+	description: getLabelForPermissionLevel(currentUser?.permissionLevel || 'Visitor'),
 };
 
-if (currentUser.user?.avatar) {
+if (currentUser?.user?.avatar) {
 	userProps.avatar = currentUser.user.avatar;
 }
 ---

package/dist/components/dashboard/sidebar/VersionCheck.astro

@@ -1,6 +1,6 @@
 ---
 import type { VersionCacheObject } from 'studiocms:sdk/types';
-import { Button } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
 import currentVersion from 'studiocms:version';
 import { compare } from 'semver';
 
@@ -22,7 +22,7 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
 </Button>
 
 <script>
-    import { ModalHelper } from 'studiocms:ui/components';
+    import { ModalHelper } from 'studiocms:ui/components/modal';
     import { dateTimeListener } from '../component-scripts/dateTimeListener.js';
     import { dateWithTimeAndZone } from '../component-scripts/dateWithTimeAndZone.js';
     import { timeAgo } from '../component-scripts/timeAgo.js';
@@ -76,14 +76,14 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
         align-items: center;
         align-content: center;
         vertical-align: middle;
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         font-weight: 700;
         flex-wrap: wrap;
         justify-content: center;
     }
 
     .version-check:hover {
-        color: hsl(var(--primary-base));
+        color: var(--primary-base);
         cursor: pointer;
     }
 
@@ -92,7 +92,7 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
         width: 14px;
         height: 14px;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775a5.25 5.25 0 0 1 10.233-2.33a3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5z'/%3E%3C/svg%3E");
-        background-color: hsl(var(--warning-base));
+        background-color: var(--warning-base);
         -webkit-mask-image: var(--svg);
         mask-image: var(--svg);
         -webkit-mask-repeat: no-repeat;
@@ -106,7 +106,7 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
         width: 14px;
         height: 14px;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4.5 12.75l6 6l9-13.5'/%3E%3C/svg%3E");
-        background-color: hsl(var(--success-base));
+        background-color: var(--success-base);
         -webkit-mask-image: var(--svg);
         mask-image: var(--svg);
         -webkit-mask-repeat: no-repeat;
@@ -120,7 +120,7 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
         width: 14px;
         height: 14px;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104q-.376.034-.75.082m.75-.082a24.3 24.3 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104q.377.034.75.082M19.8 15.3l-1.57.393A9.07 9.07 0 0 1 12 15a9.07 9.07 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.3 48.3 0 0 1 12 21a48 48 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5'/%3E%3C/svg%3E");
-        background-color: hsl(var(--primary-base));
+        background-color: var(--primary-base);
         -webkit-mask-image: var(--svg);
         mask-image: var(--svg);
         -webkit-mask-repeat: no-repeat;

package/dist/components/dashboard/sidebar/VersionCheckChangelog.astro

@@ -1,12 +1,15 @@
 ---
+import css from '@studiocms/ui/css/prose.css?raw';
+
 interface Props {
 	link: string;
+	changelog: string;
 }
 
-const { link } = Astro.props;
+const { link, changelog } = Astro.props;
 ---
 
-<frame-button data-link={link}>
+<frame-button data-link={link} data-changelog={changelog} data-styles={css}>
     <slot />
 </frame-button>
 
@@ -14,6 +17,8 @@ const { link } = Astro.props;
     if (!customElements.get('frame-button')) {
         
         class FrameButton extends HTMLElement {
+            _onKeydown: (e: KeyboardEvent) => void;
+
             constructor() {
                 super();
                 // Get the slot element
@@ -21,9 +26,11 @@ const { link } = Astro.props;
 
                 const frameContainer = document.createElement('div');
                 frameContainer.style.position = 'absolute';
+                frameContainer.setAttribute('role', 'dialog');
+                frameContainer.setAttribute('aria-modal', 'true');
                 frameContainer.style.width = '100%';
                 frameContainer.style.height = '100%';
-                frameContainer.style.backgroundColor = 'hsl(var(--background-step-1))';
+                frameContainer.style.backgroundColor = 'var(--background-step-1)';
                 frameContainer.style.display = 'none';
                 frameContainer.style.justifyContent = 'center';
                 frameContainer.style.alignItems = 'center';
@@ -49,19 +56,20 @@ const { link } = Astro.props;
                 frameButton.style.justifyContent = 'center';
                 frameButton.style.alignItems = 'center';
                 frameButton.style.transition = 'background-color 0.15s ease-in-out';
+                frameButton.setAttribute('aria-label', 'Close full changelog');
 
                 const frameContent = document.createElement('div');
                 frameContent.style.padding = '1.5rem';
                 frameContent.style.width = '100%';
                 frameContent.style.height = '90%';
-                frameContent.style.overflowX = 'none';
+                frameContent.style.overflowX = 'hidden';
                 frameContent.style.overflowWrap = 'break-word';
                 frameContent.style.overflowY = 'auto';
                 frameContent.style.scrollbarWidth = 'thin';
-                frameContent.style.scrollbarColor = 'hsl(var(--default-active)) hsl(var(--background-step-1))';
+                frameContent.style.scrollbarColor = 'var(--default-active) var(--background-step-1)';
 
                 frameButton.addEventListener('mouseenter', () => {
-                    frameButton.style.backgroundColor = 'hsl(var(--default-base))';
+                    frameButton.style.backgroundColor = 'var(--default-base)';
                 });
 
                 frameButton.addEventListener('mouseleave', () => {
@@ -73,6 +81,7 @@ const { link } = Astro.props;
                 });
                 
                 slot.addEventListener('click', async () => {
+                    const changelogLink = this.getAttribute('data-changelog')!;
                     const link = this.getAttribute('data-link')!;
                     const { changelog } = await (await fetch(link, {
                         method: 'POST',
@@ -81,16 +90,24 @@ const { link } = Astro.props;
                         },
                         body: JSON.stringify({ currentURLOrigin: window.location.origin }),
                     })).json();
+                    const styles = this.getAttribute('data-styles')!;
 
                     frameContent.innerHTML = `
                         <h1>Full Changelog</h1>
-                        <a href="${link}" target="_blank">See on GitHub ⤴</a>
-                        ${changelog}
+                        <a href="${changelogLink}" target="_blank">See on GitHub ⤴</a>
+                        <style>${styles}</style>
+                        <div class="prose">${changelog}</div>
                     `;
 
                     frameContainer.style.display = 'flex';
                 });
 
+                this._onKeydown = (e: KeyboardEvent) => {
+                  if (e.key === 'Escape' && frameContainer.style.display === 'flex') {
+                    frameContainer.style.display = 'none';
+                  }
+                };
+
                 frameContainer.appendChild(frameButton);
                 frameContainer.appendChild(frameContent);
 
@@ -98,6 +115,13 @@ const { link } = Astro.props;
                 shadow.appendChild(frameContainer);
                 shadow.appendChild(slot);
             }
+
+            connectedCallback() {
+                document.addEventListener('keydown', this._onKeydown);
+            }
+            disconnectedCallback() {
+                document.removeEventListener('keydown', this._onKeydown);
+            }
         }
 
         customElements.define('frame-button', FrameButton);

package/dist/components/dashboard/sidebar-modals/UserManagementModals.astro

@@ -1,5 +1,10 @@
 ---
-import { Button, Center, Icon, Input, Modal, Select } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Center } from 'studiocms:ui/components/center';
+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';
 ---
 <Modal
   id='create-new-user-modal'
@@ -51,7 +56,7 @@ import { Button, Center, Icon, Input, Modal, Select } from 'studiocms:ui/compone
       <div class="link-container">
         <code id="invite-response-placeholder"></code>
         <Button color="primary" size="sm" class="copy-btn">
-          <Icon name="document-duplicate-20-solid" width={20} height={20} />
+          <Icon name="heroicons:document-duplicate-20-solid" width={20} height={20} />
         </Button>
       </div>
     </div>
@@ -70,7 +75,7 @@ import { Button, Center, Icon, Input, Modal, Select } from 'studiocms:ui/compone
     }
 
     code {
-      background-color: hsl(var(--background-step-3));
+      background-color: var(--background-step-3);
       padding: .25rem;
       border-radius: 4px;
     }