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

package/src/{components → virtuals/scripts}/user-quick-tools.ts

@@ -40,36 +40,37 @@ const PERMISSION_HIERARCHY: Record<PermissionLevel, Set<PermissionLevel>> = {
 };
 
 const KNOWN_API_ROUTES = ['/studiocms_api/', '/_studiocms-devapps/', '/_web-vitals'];
-const DEFAULT_AVATAR = 'https://seccdn.libravatar.org/static/img/mm/80.png';
+const DEFAULT_AVATAR =
+	'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=';
 
 // Enhanced CSS with click protection and visual feedback
 const COMPONENT_STYLES = `
 :host {
-    --border: 240 5% 17%;
-    --background-base: 0 0% 6%;
-    --background-step-1: 0 0% 8%;
-    --background-step-2: 0 0% 10%;
-    --background-step-3: 0 0% 14%;
-    --primary-base: 259 83% 73%;
-    --success-base: 142 71% 46%;
-    --warning-base: 48 96% 53%;
-    --danger-base: 339 97% 31%;
-    --info-base: 217 92% 52%;
+    --border: hsl(240 5% 17%);
+    --background-base: hsl(0 0% 6%);
+    --background-step-1: hsl(0 0% 8%);
+    --background-step-2: hsl(0 0% 10%);
+    --background-step-3: hsl(0 0% 14%);
+    --primary-base: hsl(259 83% 73%);
+    --success-base: hsl(142 71% 46%);
+    --warning-base: hsl(48 96% 53%);
+    --danger-base: hsl(339 97% 31%);
+    --info-base: hsl(217 92% 52%);
     --light: 70;
     --threshold: 50;
 }
 
 [data-theme="light"] {
-    --border: 263 5% 68%;
-    --background-base: 0 0% 97%;
-    --background-step-1: 0 0% 90%;
-    --background-step-2: 0 0% 85%;
-    --background-step-3: 0 0% 80%;
-    --primary-base: 259 85% 61%;
-    --success-base: 142 59% 47%;
-    --warning-base: 48 92% 46%;
-    --danger-base: 339 97% 31%;
-    --info-base: 217 92% 52%;
+    --border: hsl(263 5% 68%);
+    --background-base: hsl(0 0% 97%);
+    --background-step-1: hsl(0 0% 90%);
+    --background-step-2: hsl(0 0% 85%);
+    --background-step-3: hsl(0 0% 80%);
+    --primary-base: hsl(259 85% 61%);
+    --success-base: hsl(142 59% 47%);
+    --warning-base: hsl(48 92% 46%);
+    --danger-base: hsl(339 97% 31%);
+    --info-base: hsl(217 92% 52%);
 }
 
 .menu_overlay {
@@ -90,27 +91,54 @@ const COMPONENT_STYLES = `
     bottom: 25px;
     width: 50px;
     height: 50px;
-    background: hsl(var(--background-step-1));
+    background: var(--background-step-1);
     box-shadow: 0 3px 7px rgba(0,0,0,0.3);
     border-radius: 50%;
     z-index: 600;
     cursor: pointer;
     transition: transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.avatar {
+.avatar-container {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    border: 1px solid hsl(var(--border));
+    background: var(--background-step-1);
+    border: 1px solid var(--border);
     object-fit: cover;
     z-index: 700;
     transition: transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.cornerMenu.menuOpened .avatar {
+.avatar {
+    width: 100%;
+    height: 100%;
+    background: var(--background-step-1);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.avatar-error {
+    width: 100%;
+	height: auto;
+	margin: 2.5rem;
+	border: none;
+}
+
+.cornerMenu.menuOpened .avatar-container {
     transform: scale(1.5);
-    border: 1px solid hsl(var(--border));
+    border: 1px solid var(--border);
 }
 
 .menu {
@@ -118,10 +146,10 @@ const COMPONENT_STYLES = `
     position: absolute;
     width: 32px;
     height: 32px;
-    background: hsl(var(--background-step-2));
+    background: var(--background-step-2);
     box-shadow: 0 3px 7px rgba(0,0,0,0.1);
     border-radius: 50%;
-    border: 1px solid hsl(var(--border));
+    border: 1px solid var(--border);
     color: hsl(0, 0%, var(--switch));
     display: flex;
     align-items: center;
@@ -149,17 +177,19 @@ const COMPONENT_STYLES = `
 }
 
 .cornerMenu.menuOpened .menu:hover {
-    background: hsl(var(--background-step-3));
+    background: var(--background-step-3);
 }
 
 /* Click protection: Only enable pointer events when menu is ready */
 .cornerMenu.menu-ready .menu {
     pointer-events: all;
-    box-shadow: 0 3px 7px rgba(0,0,0,0.1), 0 0 0 1px hsla(var(--primary-base), 0.2);
+    box-shadow: 0 3px 7px rgba(0,0,0,0.1),
+                0 0 0 1px color-mix(in hsl, var(--primary-base) 20%, transparent);
 }
 
 .cornerMenu.menu-ready .menu:hover {
-    box-shadow: 0 3px 7px rgba(0,0,0,0.2), 0 0 0 2px hsla(var(--primary-base), 0.4);
+    box-shadow: 0 3px 7px rgba(0,0,0,0.2),
+                0 0 0 2px color-mix(in hsl, var(--primary-base) 40%, transparent);
 }
 
 /* Visual feedback for ignored clicks */
@@ -179,10 +209,10 @@ const COMPONENT_STYLES = `
 .cornerMenu.menuOpened .menu:nth-child(3) { transform: translate(-38px, -76px); transition-delay: 0.1s; }
 .cornerMenu.menuOpened .menu:nth-child(4) { transform: translate(18px, -99px); transition-delay: 0.15s; }
 
-.menu.logout { color: hsl(var(--danger-base)); }
-.menu.profile { color: hsl(var(--primary-base)); }
-.menu.dashboard { color: hsl(var(--success-base)); }
-.menu.edit { color: hsl(var(--warning-base)); }
+.menu.logout { color: var(--danger-base); }
+.menu.profile { color: var(--primary-base); }
+.menu.dashboard { color: var(--success-base); }
+.menu.edit { color: var(--warning-base); }
 `;
 
 /**
@@ -379,7 +409,7 @@ class UserQuickTools extends HTMLElement {
 		this.removeInteractionListeners();
 	}
 
-	private render(): void {
+	private async render(): Promise<void> {
 		if (!this.shadowRoot || !this.sessionData) return;
 
 		// Create overlay
@@ -391,16 +421,15 @@ class UserQuickTools extends HTMLElement {
 		this.cornerMenu.className = 'cornerMenu';
 		this.cornerMenu.dataset.theme = document.documentElement.dataset.theme ?? 'dark';
 
+		const styleElm = document.createElement('style');
+		styleElm.textContent = COMPONENT_STYLES;
+
 		// Add menu items
 		this.addMenuItems();
-		this.addUserAvatar();
-
-		// Append elements
-		this.shadowRoot.append(document.createElement('style'), this.menuOverlay, this.cornerMenu);
-
-		// Add styles
-		// biome-ignore lint/style/noNonNullAssertion: this is safe as we check for element existence
-		this.shadowRoot.querySelector('style')!.textContent = COMPONENT_STYLES;
+		// Append elements early for faster paint
+		this.shadowRoot.append(styleElm, this.menuOverlay, this.cornerMenu);
+		// Load avatar asynchronously; avoid unhandled rejections
+		void this.addUserAvatar().catch((e) => console.warn('Avatar load failed:', e));
 	}
 
 	private addMenuItems(): void {
@@ -461,25 +490,88 @@ class UserQuickTools extends HTMLElement {
 		return element;
 	}
 
-	private addUserAvatar(): void {
+	private async testAvatarURL(url: string) {
+		let urlObj: URL;
+		try {
+			urlObj = new URL(url);
+		} catch {
+			console.warn('Invalid avatar URL:', url);
+			return undefined;
+		}
+		// 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 = window.setTimeout(() => controller.abort(), 3000);
+		try {
+			const response = await fetch(url, {
+				method: 'HEAD',
+				signal: controller.signal,
+				cache: 'no-cache',
+			});
+			if (!response.ok) return undefined;
+			const contentType = (response.headers.get('content-type') || '').split(';')[0].trim();
+			if (!contentType.startsWith('image/')) return undefined;
+			if (contentType === 'image/svg+xml') {
+				console.error('Remote SVG avatars are disallowed for security.');
+				return undefined;
+			}
+			return { type: contentType };
+		} catch (err) {
+			console.warn('Avatar HEAD check failed:', err);
+			return undefined;
+		} finally {
+			clearTimeout(timeoutId);
+		}
+	}
+
+	private async addUserAvatar(): Promise<void> {
 		if (!this.cornerMenu || !this.sessionData) return;
 
 		const { user, permissionLevel } = this.sessionData;
-		const avatar = document.createElement('img');
-		const displayName = `${user.name} - ${this.capitalizeFirst(permissionLevel)}`;
-
-		Object.assign(avatar, {
-			src: user.avatar || DEFAULT_AVATAR,
-			alt: displayName,
-			title: displayName,
-			width: '32',
-			height: '32',
-			className: 'avatar',
-			loading: 'lazy',
-		});
 
-		avatar.setAttribute('aria-hidden', 'true');
-		this.cornerMenu.appendChild(avatar);
+		const avatarContainer = document.createElement('div');
+		avatarContainer.className = 'avatar-container';
+
+		const newAvatar = document.createElement('img');
+
+		const avatar = await (async () => {
+			let avatar = DEFAULT_AVATAR;
+
+			if (user.avatar) {
+				const result = await this.testAvatarURL(user.avatar);
+				if (result) {
+					avatar = user.avatar;
+				}
+			}
+
+			return avatar;
+		})();
+
+		newAvatar.src = avatar;
+		newAvatar.width = 64;
+		newAvatar.height = 64;
+		newAvatar.className = 'avatar';
+		newAvatar.alt = `${user.name} - ${this.capitalizeFirst(permissionLevel)}`;
+		newAvatar.loading = 'lazy';
+		newAvatar.decoding = 'async';
+		newAvatar.referrerPolicy = 'no-referrer';
+
+		if (avatar === DEFAULT_AVATAR) {
+			newAvatar.classList.add('avatar-error');
+		}
+
+		newAvatar.onerror = function () {
+			this.src = DEFAULT_AVATAR;
+		};
+		newAvatar.setAttribute('aria-hidden', 'true');
+
+		avatarContainer.appendChild(newAvatar);
+
+		// Append the avatar to the corner menu
+		this.cornerMenu.appendChild(avatarContainer);
 	}
 
 	private setupEventListeners(): void {

package/src/{sdk → virtuals/sdk}/effect/collectors.ts

@@ -1,6 +1,5 @@
 import { eq, inArray } from 'astro:db';
-import { Effect } from 'effect';
-import type { UnknownException } from 'effect/Cause';
+import { type Cause, Effect } from '../../../effect.js';
 import { SDKCoreError, StudioCMS_SDK_Error } from '../errors.js';
 import {
 	tsOAuthAccounts,
@@ -152,7 +151,7 @@ export class SDKCore_Collectors extends Effect.Service<SDKCore_Collectors>()('SD
 		 */
 		const transformPageDataToMetaOnly = <T extends CombinedPageData[] | CombinedPageData>(
 			data: T
-		): Effect.Effect<PageDataReturnType<T>, UnknownException, never> =>
+		): Effect.Effect<PageDataReturnType<T>, Cause.UnknownException, never> =>
 			Effect.try(() => {
 				if (Array.isArray(data)) {
 					return data.map(

package/src/{sdk → virtuals/sdk}/effect/db.ts

@@ -3,7 +3,7 @@ import type { Database as Client } from '@astrojs/db/runtime';
 import type { ResultSet } from '@libsql/client';
 import type { ExtractTablesWithRelations } from 'drizzle-orm';
 import type { SQLiteTransaction } from 'drizzle-orm/sqlite-core';
-import { Cause, Context, Data, Effect, Exit, Option, Runtime } from 'effect';
+import { Cause, Context, Data, Effect, Exit, Option, Runtime } from '../../../effect.js';
 
 /**
  * Represents an error thrown by the LibSQL database integration.

package/src/{sdk → virtuals/sdk}/effect/foldertree.ts

@@ -1,4 +1,4 @@
-import { Effect } from 'effect';
+import { Effect } from '../../../effect.js';
 import { SDKCoreError, StudioCMS_SDK_Error } from '../errors.js';
 import { tsPageFolderStructure } from '../tables.js';
 import type { FolderListItem, FolderNode, tsPageFolderSelect } from '../types/index.js';

package/src/{sdk → virtuals/sdk}/effect/generators.ts

@@ -1,5 +1,5 @@
 import { cmsEncryptionKey } from 'virtual:studiocms/sdk/env';
-import { Effect } from 'effect';
+import { Effect } from '../../../effect.js';
 import { SDKCoreError, StudioCMS_SDK_Error } from '../errors.js';
 import { generateJwt, type JwtVerificationResult, verifyJwt } from './lib/jwt-generator.js';
 

package/src/{sdk → virtuals/sdk}/effect/getVersionFromNPM.ts

@@ -1,5 +1,4 @@
-import { FetchHttpClient, HttpClient, HttpClientResponse } from '@effect/platform';
-import { Effect, Schedule, Schema } from 'effect';
+import { Effect, HTTPClient, Platform, Schema } from '../../../effect.js';
 
 /**
  * Represents the version information retrieved from NPM.
@@ -35,12 +34,7 @@ export class GetVersionFromNPM extends Effect.Service<GetVersionFromNPM>()(
 	'studiocms/sdk/effect/GetVersionFromNPM',
 	{
 		effect: Effect.gen(function* () {
-			const httpClient = (yield* HttpClient.HttpClient).pipe(
-				HttpClient.retryTransient({
-					times: 3,
-					schedule: Schedule.spaced('1 second'),
-				})
-			);
+			const client = yield* HTTPClient;
 
 			/**
 			 * Retrieves the version of an NPM package.
@@ -51,14 +45,14 @@ export class GetVersionFromNPM extends Effect.Service<GetVersionFromNPM>()(
 			 */
 			const get = (pkg: string, ver = 'latest') =>
 				Effect.gen(function* () {
-					const response = yield* httpClient
+					const response = yield* client
 						.get(`https://registry.npmjs.org/${pkg}/${ver}`)
-						.pipe(Effect.flatMap(HttpClientResponse.schemaBodyJson(NpmVersion)));
+						.pipe(Effect.flatMap(Platform.HttpClientResponse.schemaBodyJson(NpmVersion)));
 					return response.version;
 				});
 
 			return { get };
 		}),
-		dependencies: [FetchHttpClient.layer],
+		dependencies: [HTTPClient.Default],
 	}
 ) {}

package/src/{sdk → virtuals/sdk}/effect/parsers.ts

@@ -1,5 +1,5 @@
-import { Effect } from 'effect';
-import { jsonParse } from '../../utils/jsonParse.js';
+import { jsonParse } from '@withstudiocms/internal_helpers/utils';
+import { Effect } from '../../../effect.js';
 import { SDKCoreError, StudioCMS_SDK_Error } from '../errors.js';
 import type { DiffReturnType, diffItem, diffReturn, tsPageDataSelect } from '../types/index.js';
 

package/src/{sdk → virtuals/sdk}/effect/pluginUtils.ts

@@ -1,4 +1,4 @@
-import { Effect, type ParseResult, pipe, Schema } from '../../effect.js';
+import { Effect, type ParseResult, pipe, Schema } from '../../../effect.js';
 import type { PluginDataEntry, ValidatorOptions } from '../types/index.js';
 
 export type RecursiveSimplifyMutable<A> = {

package/src/{sdk → virtuals/sdk}/effect/users.ts

@@ -1,6 +1,6 @@
 import { eq } from 'astro:db';
-import { Effect } from 'effect';
-import { GhostUserDefaults } from '../../consts.js';
+import { GhostUserDefaults } from '../../../consts.js';
+import { Effect } from '../../../effect.js';
 import { SDKCoreError, StudioCMS_SDK_Error } from '../errors.js';
 import {
 	tsDiffTracking,

package/src/{sdk → virtuals/sdk}/errors.ts

@@ -1,5 +1,5 @@
 import { Data } from 'effect';
-import { StudioCMSError } from '../errors.js';
+import { StudioCMSError } from '../../errors.js';
 
 /**
  * Represents an error specific to the StudioCMS SDK.

package/src/{sdk → virtuals/sdk}/index.ts

@@ -1,5 +1,4 @@
-import { Effect } from 'effect';
-import { convertToVanilla } from '../lib/effects/index.js';
+import { Effect, runEffect } from '../../effect.js';
 import { SDKCore as _SDKCore } from './sdkCore.js';
 
 /**
@@ -30,11 +29,11 @@ export const SDKCore = Effect.gen(function* () {
  *
  * @remarks
  * This function uses `Effect.gen` to yield the `SDKCore` effect, destructures the result to exclude the `_tag` property,
- * and then passes the remaining core properties to `convertToVanilla`.
+ * and then passes the remaining core properties to `runEffect`.
  *
  * @returns A promise that resolves to the core properties of `SDKCore` as a plain JavaScript object.
  */
-export const SDKCoreJs = await convertToVanilla(
+export const SDKCoreJs = await runEffect(
 	Effect.gen(function* () {
 		const { _tag, ...core } = yield* SDKCore;
 		return core;
@@ -42,9 +41,9 @@ export const SDKCoreJs = await convertToVanilla(
 );
 
 /**
- * Alias for `convertToVanilla`, used to run SDK effects and convert them to plain JavaScript objects.
+ * Alias for `runEffect`, used to run SDK effects and convert them to plain JavaScript objects.
  *
  * @param effect - The Effect to be converted.
  * @returns A promise that resolves to the plain JavaScript object representation of the effect's result.
  */
-export const runSDK = convertToVanilla;
+export const runSDK = runEffect;

package/src/{sdk → virtuals/sdk}/modules/auth.ts

@@ -1,6 +1,7 @@
 import { and, eq } from 'astro:db';
-import { GhostUserDefaults } from '../../consts.js';
-import { Effect, genLogger } from '../../effect.js';
+import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
+import { GhostUserDefaults } from '../../../consts.js';
+import { Effect, genLogger } from '../../../effect.js';
 import { AstroDB, SDKCore_Generators } from '../effect/index.js';
 import { SDKCoreError, StudioCMS_SDK_Error } from '../errors.js';
 import {
@@ -379,7 +380,7 @@ export class SDKCore_AUTH extends Effect.Service<SDKCore_AUTH>()(
 					 * @returns A promise that resolves to the inserted user.
 					 * @throws {StudioCMS_SDK_Error} If an error occurs while creating the user.
 					 */
-					create: (newUserData: tsUsersInsert, rank?: 'visitor' | 'editor' | 'admin' | 'owner') =>
+					create: (newUserData: tsUsersInsert, rank?: AvailablePermissionRanks) =>
 						Effect.gen(function* () {
 							const newUser = yield* dbService.execute((db) =>
 								db.insert(tsUsers).values(newUserData).returning().get()

package/src/{sdk → virtuals/sdk}/modules/clear.ts

@@ -1,4 +1,4 @@
-import { Effect, genLogger } from '../../effect.js';
+import { Effect, genLogger } from '../../../effect.js';
 import { _ClearUnknownError, CacheContext, isCacheEnabled } from '../utils.js';
 
 /**