studiocms 0.1.0-beta.25 → 0.1.0-beta.26

package/dist/components/dashboard/user-mgmt/SocialSignin.astro

@@ -1,15 +1,14 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
-import { Button, Card, Center } 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 type { OAuthData } from '@withstudiocms/auth-kit/types';
 import { providerData } from '../profile/oAuthButtonProviders.js';
 
 interface Props {
 	lang: UiLanguageKeys;
-	oAuthData?: {
-		provider: string;
-		providerUserId: string;
-		userId: string;
-	}[];
+	oAuthData?: OAuthData[];
 }
 
 const { oAuthData, lang } = Astro.props;
@@ -19,8 +18,8 @@ const hasOAuthData = oAuthData && oAuthData.length > 0;
 const connectedAccounts: { provider: string }[] = [];
 
 if (hasOAuthData) {
-	for (const provider in oAuthData) {
-		connectedAccounts.push({ provider });
+	for (const { provider } of oAuthData ?? []) {
+		connectedAccounts.push({ provider: provider.toLowerCase() });
 	}
 }
 
@@ -81,7 +80,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-edit');
 
 <style>
     .social-signin-bg {
-        background-color: hsl(var(--background-step-1));
+        background-color: var(--background-step-1);
         height: auto;
         width: auto;
 
@@ -96,7 +95,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-edit');
             align-items: stretch;
             justify-content: space-between !important;
             width: 100%;
-            margin-button: 1rem;
+            margin-bottom: 1rem;
             cursor: default;
 
             & .icon-and-label {

package/dist/components/dashboard/user-mgmt/UserListItem.astro

@@ -1,6 +1,9 @@
 ---
 import { getLabelForPermissionLevel } from 'studiocms:auth/utils/getLabelForPermissionLevel';
-import { Divider, Icon, User } from 'studiocms:ui/components';
+import { Divider } from 'studiocms:ui/components/divider';
+import { Icon } from 'studiocms:ui/components/icon';
+import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
+import User from '../../shared/SSRUser.astro';
 
 interface Props {
 	user: {
@@ -12,7 +15,7 @@ interface Props {
 		permissionsData:
 			| {
 					user: string;
-					rank: string;
+					rank: AvailablePermissionRanks;
 			  }
 			| undefined;
 	};
@@ -36,10 +39,9 @@ const userListItemHrefString = userListItemHref.toString();
     <User
         name={user.name}
         avatar={user.avatar ?? undefined}
-        description={getLabelForPermissionLevel(user.permissionsData?.rank!)}
-        loading="eager"
+        description={getLabelForPermissionLevel(user.permissionsData?.rank ?? 'unknown')}
     />
-    <Icon name="chevron-right" width={24} height={24} />
+    <Icon name="heroicons:chevron-right" width={24} height={24} />
 </user-list-item>
 <Divider background={"background-step-1"} />
 
@@ -94,7 +96,7 @@ const userListItemHrefString = userListItemHref.toString();
                 if (openInNewTab) {
                     // Preserve default middle-click behavior if this were a native link
                     e.preventDefault();
-                    window.open(url.href, '_blank');
+                    window.open(url.href, '_blank', 'noopener,noreferrer');
                     return;
                 }
 

package/dist/components/default-grid-items/Recently-created-pages.astro

@@ -1,7 +1,9 @@
 ---
 import { FormattedDate } from 'studiocms:components';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Badge, Card, Center } from 'studiocms:ui/components';
+import { Badge } from 'studiocms:ui/components/badge';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
 import { allowedIdentifiers, sortByDate, withinLast30Days } from './utils.js';
 
 // Get all pages and users from the database
@@ -33,8 +35,8 @@ const recentlyUpdatedPages = totalPages
         </Card>
       ))
   ) : (
-      <Card fullWidth style="background-color: hsl(var(--background-step-2));">
-        <Center><span style="color: hsl(var(--text-muted));">No recently created pages found.</span></Center>
+      <Card fullWidth style="background-color: var(--background-step-2);">
+        <Center><span style="color: var(--text-muted);">No recently created pages found.</span></Center>
       </Card>
     )
   }
@@ -51,7 +53,7 @@ const recentlyUpdatedPages = totalPages
   .recently-created-page-card {
     display: flex;
     flex-direction: column;
-    background-color: hsl(var(--background-step-2));
+    background-color: var(--background-step-2);
     text-decoration: none;
     color: initial;
     transition: all .15s ease;
@@ -70,27 +72,27 @@ const recentlyUpdatedPages = totalPages
       }
 
       & .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);
       }
     }
   }
 
   .recently-created-page-card .card-title {
-    color: hsl(var(--text-normal));
+    color: var(--text-normal);
   }
 
   .recently-created-page-card:hover {
-    background-color: hsl(var(--background-step-3)) !important;
+    background-color: var(--background-step-3) !important;
   }
 </style>

package/dist/components/default-grid-items/Recently-signed-up.astro

@@ -1,8 +1,9 @@
 ---
 import config from 'studiocms:config';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Icon, User } from 'studiocms:ui/components';
-import Card from '@studiocms/ui/components/Card/Card.astro';
+import { Card } from 'studiocms:ui/components/card';
+import { Icon } from 'studiocms:ui/components/icon';
+import User from '../shared/SSRUser.astro';
 import { sortByDate } from './utils.js';
 
 const totalUsers = await runSDK(SDKCoreJs.GET.users.all());
@@ -21,9 +22,8 @@ const recentlyCreatedUsers = totalUsers
                             name={user.name}
                             avatar={user.avatar ?? undefined} 
                             description={`Created at ${new Date(user.createdAt!).toLocaleDateString(config.locale.dateLocale, config.locale.dateTimeFormat)}`} 
-                            loading='eager',
                             />
-                        <Icon name="eye" width={24} height={24} />
+                        <Icon name="heroicons:eye" width={24} height={24} />
                     </div>
                 </Card>
             </a>
@@ -43,18 +43,18 @@ const recentlyCreatedUsers = totalUsers
     
     .recently-signed-up-user {
         text-decoration: none;
-        color: hsl(var(--text-normal));
+        color: var(--text-normal);
     }
 
     .user-card {
-        background-color: hsl(var(--background-step-2));
+        background-color: var(--background-step-2);
         width: 100%;
         height: 100%;
         transition: all .15s ease;
     }
     
     .user-card:hover {
-        background-color: hsl(var(--background-step-3));
+        background-color: var(--background-step-3);
     }
 
     .user-flex {
@@ -64,7 +64,7 @@ const recentlyCreatedUsers = totalUsers
     }
 
     .user-card:hover {
-        background-color: hsl(var(--background-step-3));
+        background-color: var(--background-step-3);
     }
     
 </style>

package/dist/components/default-grid-items/Recently-updated-pages.astro

@@ -1,7 +1,9 @@
 ---
 import { FormattedDate } from 'studiocms:components';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Badge, Card, Center } from 'studiocms:ui/components';
+import { Badge } from 'studiocms:ui/components/badge';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
 import { allowedIdentifiers, sortByDate, withinLast30Days } from './utils.js';
 
 // Get all pages and users from the database
@@ -33,8 +35,8 @@ const recentlyUpdatedPages = totalPages
         </Card>
       ))
     ) : (
-      <Card fullWidth style="background-color: hsl(var(--background-step-2));">
-        <Center><span style="color: hsl(var(--text-muted));">No recently updated pages found.</span></Center>
+      <Card fullWidth style="background-color: var(--background-step-2);">
+        <Center><span style="color: var(--text-muted);">No recently updated pages found.</span></Center>
       </Card>
     )
   }
@@ -51,7 +53,7 @@ const recentlyUpdatedPages = totalPages
   .recently-updated-page-card {
     display: flex;
     flex-direction: column;
-    background-color: hsl(var(--background-step-2));
+    background-color: var(--background-step-2);
     text-decoration: none;
     color: initial;
     transition: all .15s ease;
@@ -74,27 +76,27 @@ const recentlyUpdatedPages = totalPages
       }
 
       & .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);
       }
     }
   }
 
   .recently-updated-page-card .card-title {
-    color: hsl(var(--text-normal));
+    color: var(--text-normal);
   }
 
   .recently-updated-page-card:hover {
-    background-color: hsl(var(--background-step-3)) !important;
+    background-color: var(--background-step-3) !important;
   }
 </style>

package/dist/components/default-grid-items/Totals.astro

@@ -1,6 +1,7 @@
 ---
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Card, Icon } from 'studiocms:ui/components';
+import { Card } from 'studiocms:ui/components/card';
+import { Icon } from 'studiocms:ui/components/icon';
 import { Effect } from '../../effect.js';
 import { allowedIdentifiers } from './utils.js';
 
@@ -20,7 +21,7 @@ const totalDraftPages = totalPages.filter(({ data: page }) => page.draft === tru
         <a href={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagement}>
             <Card class="totals-grid-item-card">
                 <div class="totals-grid-item-content">
-                    <Icon name="document-text" height={24} width={24} />
+                    <Icon name="heroicons:document-text" height={24} width={24} />
                     <div class="totals-grid-item-text">
                         <span class="totals-grid-item-label">Total Pages</span>
                         <span>{totalPages.length}</span>
@@ -33,7 +34,7 @@ const totalDraftPages = totalPages.filter(({ data: page }) => page.draft === tru
         <a href={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagement}>
             <Card class="totals-grid-item-card">
                 <div class="totals-grid-item-content">
-                    <Icon name="document" height={24} width={24} />
+                    <Icon name="heroicons:document" height={24} width={24} />
                     <div class="totals-grid-item-text">
                         <span class="totals-grid-item-label">Draft Pages</span>
                         <span>{totalDraftPages.length}</span>
@@ -46,7 +47,7 @@ const totalDraftPages = totalPages.filter(({ data: page }) => page.draft === tru
         <a href={Astro.locals.StudioCMS.routeMap.mainLinks.userManagement}>
             <Card class="totals-grid-item-card">
                 <div class="totals-grid-item-content">
-                    <Icon name="user-group" height={24} width={24} />
+                    <Icon name="heroicons:user-group" height={24} width={24} />
                     <div class="totals-grid-item-text">
                         <span class="totals-grid-item-label">Total Users</span>
                         <span>{totalUsers.length}</span>
@@ -64,14 +65,14 @@ const totalDraftPages = totalPages.filter(({ data: page }) => page.draft === tru
     }
 
     .totals-grid-item-card {
-        background-color: hsl(var(--background-step-2));
+        background-color: var(--background-step-2);
         width: 100%;
         height: 100%;
         transition: all 0.15s ease;
     }
 
     .totals-grid-item-card:hover {
-        background-color: hsl(var(--background-step-3));
+        background-color: var(--background-step-3);
     }
 
     .totals-grid-item-container {

package/dist/components/first-time-setup/PageHeader.astro

@@ -1,11 +1,12 @@
 ---
-import { Badge, type HeroIconName } from 'studiocms:ui/components';
+import { Badge } from 'studiocms:ui/components/badge';
+import type { AvailableIcons } from 'studiocms:ui/icons';
 
 interface Props {
 	title: string;
 	badge?: {
 		label: string;
-		icon?: HeroIconName;
+		icon?: AvailableIcons;
 	};
 }
 
@@ -14,7 +15,7 @@ const { title, badge } = Astro.props;
 <header class="page-header">
   <div class="page-title-container">
     <h1 class="page-title">{title}</h1>
-    { badge && <Badge label={badge.label} size="lg" /> }
+    { badge && <Badge label={badge.label} size="lg" icon={badge.icon} /> }
   </div>
   <div class="page-actions-container">
     <slot />

package/dist/components/shared/SSRUser.astro

@@ -0,0 +1,200 @@
+---
+import { extname } from 'node:path';
+import { Icon } from 'studiocms:ui/components/icon';
+import { lookup } from 'mrmime';
+
+const heroIconsUserDataUri =
+	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADSklEQVR4AdSWS2xMYRTHjQXRRupRKVWrJhrxSCRigTQpYUHq0VYsarwi8RgJ0rCwFJEQEQ1psZFQXWgGRZB6NdFalkSFFRutV1UJNhLj9+dcOubeud8dC2lzfvd/7vedc77TO999DB/2n/+GZgOpVCoOSegx5K/N5WJGugIsNhHusNBZqIJiQ/455tqgiDFni9QAVZthIVyBBTAWJsBKeAOL4Tw4m3MD/GebqVoBV2Ox2ArohAHog1bGZ0MfLCJ2A+pkzg1QrRpkB3X4G5p4xdhOkOknkYYSpYE5Vu2pqZ/ctUFdDXOzS5QGvlkplxyXmJ/lnAOJfgSyMh0C0AbVVJcOLkRp4JQV3GeaJmy8SQzUg6xRBxecG2CTaaffpGgli12DeVAAhaDb8CFzhXCZ2Ouokzk3YNU2ordhGXTCALyDS6AH0C10CzhbpAb4z16DHjZxVtCivWgPJCHO3BJ4i+9skRrwqrJIE1TBZCiBGmjy5qNoTg1EWSAsNlIDbLZi2AEt0A2fDPkX8BOguyFs3d/zTg1QNB+OkPUcjkMNTIfRhvzV+CfgBbGHYBR+qIU2QCG97dqpVAcjoRuOgpqYggr5GnvCuWL2ou3kjkOzWtYGKFBAdgfoPfAR1S02iw1XB0l4achXgzOJ2QaKnYt2WA1cfwtsgETNtZA2FXR/l7LYaUhx7muag5NMloI+XKahzdSKob6mRXwnGEyA7nm949dQ+D3nTmax2hN6SC0lSVcOyTTfBuhYl36/hddS8IP5zmI56y3hADW1Ye30j/g2wLQ21Ri0i0JtaE5G7g0SH8N40PsCSbegBiot7J7pv4hXw6uZViuogRkWpdvP3JzFq6E7JKNIUAP63FbwJn67KsjTSRSUA/o2XGd5Xk07/SVBDei7/zshq0Bvun6KtcIeqIUKKAM9IfNQ+RrTnGL07dBvufrtVesM5xnm2wCbZyuRer9vR+/DCFgOh0FvPX18PsP/DF9AvsY0pxjFKke5up2LqLmLuAzzbUBRJOh7vxEt57wEVKABvQgPQO+Fr6iQrzHNKWY343pNl5PfAHqWMJRpgQ0MDqVAL9RDAqphPujJmI8K+RrTnGKOMa6PlcFlfH2nBnwzHQfDwn4AAAD//6qWhy8AAAAGSURBVAMAJXQ0UKI3Vu0AAAAASUVORK5CYII=';
+
+interface Props {
+	/**
+	 * The name of the user.
+	 */
+	name: string;
+	/**
+	 * The description of the user. Could be a role, a handle, etc.
+	 */
+	description: string;
+	/**
+	 * The avatar of the user. Either a URL to an image or an imported image.
+	 */
+	avatar?: string;
+	/**
+	 * Additional classes to apply to the user container.
+	 */
+	class?: string;
+	/**
+	 * The loading strategy for the image. Defaults to `lazy`.
+	 */
+	loading?: 'eager' | 'lazy';
+
+	/**
+	 * The timeout delay for loading the avatar image. Defaults to 5000ms.
+	 */
+	timeoutDelay?: number;
+}
+
+const {
+	name,
+	description,
+	avatar,
+	class: className,
+	loading = 'lazy',
+	timeoutDelay = 3000,
+} = Astro.props;
+
+async function getObjectData(src: string): Promise<{ data: string; type: string } | undefined> {
+	try {
+		const data = src;
+		const extension = extname(src).toLowerCase();
+
+		if (extension) {
+			const type = lookup(extension);
+
+			if (!type) {
+				console.error(`Could not determine MIME type for extension: ${extension}`);
+				return undefined;
+			}
+
+			if (!/^image\/.*$/.test(type)) {
+				console.error(`Unsupported image type: ${type}`);
+				return undefined;
+			}
+
+			if (type === 'image/svg+xml' || type.startsWith('image/svg')) {
+				console.error('SVG avatars are disallowed for security.');
+				return undefined;
+			}
+
+			return { data, type };
+		}
+
+		// Create URL object to validate format
+		const urlObj = new URL(src);
+
+		// Only allow HTTPS (avoid mixed content + downgrade attacks)
+		if (urlObj.protocol !== 'https:') {
+			console.error(`Insecure avatar URL protocol: ${urlObj.protocol}`);
+			return undefined;
+		}
+
+		const controller = new AbortController();
+		const timeoutId = setTimeout(() => controller.abort(), timeoutDelay);
+		let response: Response;
+		try {
+			// Fetch the URL with timeout
+			response = await fetch(src, {
+				method: 'HEAD', // Use HEAD to avoid downloading the entire image
+				signal: controller.signal,
+				cache: 'no-cache',
+			});
+		} finally {
+			clearTimeout(timeoutId);
+		}
+
+		if (!response || !response.ok) {
+			console.error(`Failed to fetch image: ${response.statusText}`);
+			return undefined;
+		}
+		const contentType = response.headers.get('content-type');
+		if (!contentType || !contentType.startsWith('image/')) {
+			console.error(`Invalid image type: ${contentType}`);
+			return undefined;
+		}
+
+		if (contentType === 'image/svg+xml') {
+			console.error('Remote SVG avatars are disallowed for security.');
+			return undefined;
+		}
+
+		return { data, type: contentType };
+	} catch (error) {
+		// Handle various error types
+		if (error instanceof Error) {
+			if (error.name === 'AbortError') {
+				console.log(`Avatar URL test timed out after ${timeoutDelay / 1000} seconds`);
+			} else if (error.name === 'TypeError') {
+				console.log('Invalid URL or network error:', error.message);
+			} else {
+				console.log('Error testing avatar URL:', error.message);
+			}
+		}
+		return undefined;
+	}
+}
+
+const validAvatar = avatar ? await getObjectData(avatar) : undefined;
+---
+
+<div class="sui-user-container" class:list={[className]}>
+    <div class="sui-avatar-container">
+        {
+            validAvatar ? (
+                <img
+                  src={validAvatar.data}
+                  width={64}
+                  height={64}
+                  class="sui-avatar-img"
+                  alt={name}
+                  loading={loading}
+                  decoding="async"
+                  referrerpolicy="no-referrer"
+                  onerror={`this.src='${heroIconsUserDataUri}'`}
+                />
+            ) : (
+                <Icon
+                    name="heroicons:user"
+                    width={24}
+                    height={24}
+                    role="img"
+                    aria-label={`Placeholder avatar for ${name}`}
+                />
+            )
+        }
+    </div>
+    <div class="sui-text-content">
+        <span class="sui-name">{name}</span>
+        <span class="sui-description">{description}</span>
+    </div>
+</div>
+
+<style>
+    .sui-user-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+    }
+    .sui-avatar-container {
+        width: 2.5rem;
+        height: 2.5rem;
+        background-color: var(--default-base);
+        border-radius: var(--radius-full);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        border: 1px solid var(--border);
+    }
+    .sui-avatar-img {
+        width: 100%;
+        height: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .sui-text-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+    }
+    .sui-name {
+        font-size: 1em;
+        font-weight: 600;
+    }
+    .sui-description {
+        font-size: 0.875em;
+        font-weight: 400;
+        color: var(--text-muted);
+    }
+</style>

package/dist/components/shared/head/Favicons.astro

@@ -0,0 +1,6 @@
+---
+import { FAVICON_ASSETS } from '../../../consts.js';
+---
+<link rel="icon" href={FAVICON_ASSETS.svg} type="image/svg+xml" />
+<link rel="icon" href={FAVICON_ASSETS.png.light} type="image/png" media="(prefers-color-scheme: dark)" />
+<link rel="icon" href={FAVICON_ASSETS.png.dark} type="image/png" media="(prefers-color-scheme: light)" />

package/dist/components/shared/head/Global.astro

@@ -0,0 +1,4 @@
+---
+---
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />

package/dist/components/shared/head/TitleTags.astro

@@ -0,0 +1,14 @@
+---
+import { STUDIOCMS_THEME_COLOR } from '../../../consts.js';
+
+interface Props {
+	title: string;
+	description: string;
+}
+
+const { title, description } = Astro.props;
+---
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+<meta name="theme-color" content={STUDIOCMS_THEME_COLOR} />

package/dist/config.d.ts

@@ -16,13 +16,10 @@ export type { StudioCMSOptions } from './schemas/index.js';
  * @example
  * ```js
  * // studiocms.config.mjs
- * import { defineStudioCMSConfig } from 'studiocms';
+ * import { defineStudioCMSConfig } from 'studiocms/config';
  *
  * export default defineStudioCMSConfig({
  *  dbStartPage: true,
- *  contentRenderer: 'marked',
- *  verbose: true,
- *  dateLocale: 'en-us',
  *  // ...Other Options
  * })
  * ```

package/dist/consts.d.ts

@@ -1,3 +1,5 @@
+import type uiIntegration from '@studiocms/ui';
+import { type AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
 import type { AstroConfig } from 'astro';
 import type { RobotsConfig } from './integrations/robots/schema.js';
 import type { TimeString } from './schemas/config/sdk.js';
@@ -5,14 +7,17 @@ import type { TimeString } from './schemas/config/sdk.js';
  * StudioCMS Site Config Table Entry ID
  */
 export declare const CMSSiteConfigId: number;
+export declare const Next_SiteConfigId: string;
 /**
  * StudioCMS Mailer Config Table Entry ID
  */
 export declare const CMSMailerConfigId: string;
+export declare const Next_MailerConfigId: string;
 /**
  * StudioCMS Notification Settings Table Entry ID
  */
 export declare const CMSNotificationSettingsId: string;
+export declare const Next_NotificationSettingsId: string;
 /**
  * The default lifetime for cached items.
  * This value is used to determine how long an item should remain in the cache before it is considered expired.
@@ -78,7 +83,6 @@ export declare const GhostUserDefaults: {
  * Default values for the site Notifications configuration.
  */
 export declare const NotificationSettingsDefaults: {
-    id: string;
     emailVerification: boolean;
     oAuthBypassVerification: boolean;
     requireEditorVerification: boolean;
@@ -170,3 +174,32 @@ export declare const FAVICON_ASSETS: {
         readonly dark: "https://cdn.studiocms.dev/favicon-dark.png";
     };
 };
+type UiOptions = Parameters<typeof uiIntegration>[0];
+/**
+ * UI options configuration for StudioCMS.
+ *
+ * @remarks
+ * This constant defines the default UI options used throughout StudioCMS.
+ * It includes settings for CSS injection and icon sets.
+ *
+ * @property noInjectCSS - If true, StudioCMS UI will not inject its default CSS into all routes.
+ * @property icons - An object containing icon sets used in the UI.
+ *   - `flatcoloricons`: Contains selected icons from the Flat Color Icons set (e.g., 'google').
+ *   - `simpleicons`: Contains selected icons from the Simple Icons set (e.g., 'github', 'discord', 'auth0').
+ */
+export declare const STUDIOCMS_UI_OPTS: UiOptions;
+/**
+ * Merges user-provided UI options with default StudioCMS UI options.
+ *
+ * @param userOpts - An optional partial object containing user-specified UI options.
+ * @returns The merged UI options object.
+ *
+ * @remarks
+ * - If a user option is provided, it takes precedence over the default.
+ * - The `icons` property is deeply merged, combining default and user-provided icons.
+ */
+export declare function getUiOpts(userOpts?: Partial<UiOptions>): UiOptions;
+export declare const LinkNewOAuthCookieName = "link-new-o-auth";
+export declare const AuthSessionCookieName = "auth_session";
+export declare const ValidRanks: ReadonlySet<AvailablePermissionRanks>;
+export {};