studiocms 0.1.0-beta.28 → 0.1.0-beta.30

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # studiocms
 
+## 0.1.0-beta.30
+
+### Patch Changes
+
+- [#983](https://github.com/withstudiocms/studiocms/pull/983) [`044f30e`](https://github.com/withstudiocms/studiocms/commit/044f30e510eedfcdf3917db1884be9c0656c1c67) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Updates usage of Toaster on first-time setup pages
+
+- Updated dependencies [[`34e2c50`](https://github.com/withstudiocms/studiocms/commit/34e2c509914596d5e8bb75bceb6bf2b2cadeba3d), [`61091e1`](https://github.com/withstudiocms/studiocms/commit/61091e1e7633f1b4bf0fa3e0a09debb06b861fbe)]:
+  - @withstudiocms/component-registry@0.1.0-beta.6
+  - @withstudiocms/effect@0.1.0-beta.6
+  - @withstudiocms/auth-kit@0.1.0-beta.5
+
+## 0.1.0-beta.29
+
+### Patch Changes
+
+- [#969](https://github.com/withstudiocms/studiocms/pull/969) [`7dd17fa`](https://github.com/withstudiocms/studiocms/commit/7dd17fa085bd747b500f920c53184f5b6f509abd) Thanks [@renovate](https://github.com/apps/renovate)! - fix(deps): update studiocms dependencies
+
+- [#973](https://github.com/withstudiocms/studiocms/pull/973) [`76f30aa`](https://github.com/withstudiocms/studiocms/commit/76f30aab37bd5b94f418717788acd96f2e3cc62c) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Updates StudioCMS UI and related Astro files to resolve Astro picocolor bug resulting in broken dev environments
+
+- Updated dependencies [[`79286bf`](https://github.com/withstudiocms/studiocms/commit/79286bf1c914e9bcf4712c2165ccb978ad3118fe)]:
+  - @withstudiocms/effect@0.1.0-beta.5
+  - @withstudiocms/auth-kit@0.1.0-beta.4
+  - @withstudiocms/component-registry@0.1.0-beta.5
+
 ## 0.1.0-beta.28
 
 ### Patch Changes

package/dist/cli/utils/effectBoxen.d.ts

@@ -37,4 +37,4 @@ console.log(message2);
 //
 ```
 */
-export declare const effectBoxen: <T>(fn: (boxen: typeof _boxen) => T) => Effect.Effect.AsEffect<Effect.Effect<T, Error, never>>;
+export declare const effectBoxen: <T>(fn: (boxen: typeof _boxen) => T) => Effect.Effect<T, Error, never>;

package/dist/cli/utils/logger.d.ts

@@ -9,4 +9,4 @@ export declare const logger: {
  * @param debug - A boolean flag indicating whether debug logging is enabled.
  * @returns An Effect-wrapped function that logs a debug message if debugging is enabled.
  */
-export declare const buildDebugLogger: (debug: boolean) => Effect.Effect<(message: string) => Effect.Effect.AsEffect<Effect.Effect<void, import("effect/Cause").UnknownException, never>>, never, never>;
+export declare const buildDebugLogger: (debug: boolean) => Effect.Effect<(message: string) => Effect.Effect<void, import("effect/Cause").UnknownException, never>, never, never>;

package/dist/cli/utils/useLibSQLDb.d.ts

@@ -271,6 +271,6 @@ export declare const Permissions: s.SQLiteTableWithColumns<{
  * const result = yield* execute((db) => db.select(...));
  */
 export declare const libSQLDrizzleClient: (url: string, authToken: string) => Effect.Effect<{
-    execute: <T>(fn: (client: import("drizzle-orm/libsql").LibSQLDatabase<Record<string, never>> | import("@astrojs/db/runtime").Database) => Promise<T>) => Effect.Effect.AsEffect<Effect.Effect<T, LibSQLClientError, never>>;
+    execute: <T>(fn: (client: import("drizzle-orm/libsql").LibSQLDatabase<Record<string, never>> | import("@astrojs/db/runtime").Database) => Promise<T>) => Effect.Effect<T, LibSQLClientError, never>;
     makeQuery: <A, E, R, Input = never>(queryFn: (execute: import("@withstudiocms/effect/drizzle").ExecuteFn<Record<string, unknown>>, input: Input) => Effect.Effect<A, E, R>) => (...args: [Input] extends [never] ? [] : [input: Input]) => Effect.Effect<A, E, R>;
 }, LibSQLClientError, never>;

package/dist/frontend/components/dashboard/DoubleSidebar.astro

@@ -20,7 +20,7 @@ const { currentUser } = Astro.props as Props;
 </SuiDoubleSidebar>
 
 <script>
-  import { DoubleSidebarHelper } from "studiocms:ui/components/sidebar";
+  import { DoubleSidebarHelper } from "studiocms:ui/components/sidebar/client";
 
   if (document.getElementById('sui-sidebars')) {
     const sidebar = new DoubleSidebarHelper();

package/dist/frontend/components/dashboard/MainSidebarContent.astro

@@ -247,7 +247,7 @@ const filteredPluginList = pluginList.filter((plugin) => !!plugin.settingsPage);
 </script>
 
 <script>
-  import { DropdownHelper } from "studiocms:ui/components/dropdown";
+  import { DropdownHelper } from "studiocms:ui/components/dropdown/client";
   import { ThemeHelper } from '@studiocms/ui/utils/ThemeHelper.js';
 
   function sendPostRequest(url: string) {

package/dist/frontend/components/dashboard/SingleSidebar.astro

@@ -14,7 +14,7 @@ const { currentUser } = Astro.props as Props;
 </Sidebar>
 
 <script>
-  import { SingleSidebarHelper } from "studiocms:ui/components/sidebar";
+  import { SingleSidebarHelper } from "studiocms:ui/components/sidebar/client";
 
   function setupSidebar() {
     if (!document.getElementById('sui-sidebar')) return;

package/dist/frontend/components/dashboard/configuration/ConfigForm.astro

@@ -191,7 +191,7 @@ updateTrueFalseSelectOptions,
 </script>
 
 <script>
-    import { toast } from "studiocms:ui/components/toaster";
+    import { toast } from "studiocms:ui/components/toaster/client";
         const configForm = document.querySelector('#site-config-form') as HTMLFormElement;
 
         configForm.addEventListener('submit', async (e) => {

package/dist/frontend/components/dashboard/content-mgmt/CreateFolder.astro

@@ -43,7 +43,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 </script>
 
 <script>
-import { toast } from "studiocms:ui/components/toaster";
+import { toast } from "studiocms:ui/components/toaster/client";
 
     const form = document.getElementById('create-folder-form') as HTMLFormElement;
     const createContainer = document.getElementById('create-folder-container') as HTMLDivElement;

package/dist/frontend/components/dashboard/content-mgmt/CreatePage.astro

@@ -309,7 +309,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
 <script>
   import type { tsPageDataInsert } from "studiocms:sdk/types";
-  import { toast } from "studiocms:ui/components/toaster";
+  import { toast } from "studiocms:ui/components/toaster/client";
   import {
     formDataToRecord,
     studioCMSCreatePageDataSchema,

package/dist/frontend/components/dashboard/content-mgmt/EditFolder.astro

@@ -65,7 +65,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 </script>
 
 <script>
-import { toast } from "studiocms:ui/components/toaster";
+import { toast } from "studiocms:ui/components/toaster/client";
 
     const form = document.getElementById('edit-folder-form') as HTMLFormElement;
     const createContainer = document.getElementById('edit-folder-container') as HTMLDivElement;

package/dist/frontend/components/dashboard/content-mgmt/EditPage.astro

@@ -457,7 +457,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
 <script>
   import type { tsPageDataInsert } from "studiocms:sdk/types";
-  import { toast } from "studiocms:ui/components/toaster";
+  import { toast } from "studiocms:ui/components/toaster/client";
   import {
     formDataToRecord,
     studioCMSEditPageDataAndContentSchema,

package/dist/frontend/components/dashboard/content-mgmt/InnerSidebarElement.astro

@@ -143,7 +143,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
 </script>
 
 <script>
-  import { DropdownHelper } from 'studiocms:ui/components/dropdown';
+  import { DropdownHelper } from 'studiocms:ui/components/dropdown/client';
 
   const createNewDropdown = new DropdownHelper('create-new-dropdown');
 

package/dist/frontend/components/dashboard/content-mgmt/PageHeader.astro

@@ -242,8 +242,8 @@ const currentMode = editPage
 </script>
 
 <script>
-    import { ModalHelper } from 'studiocms:ui/components/modal';
-    import { toast } from "studiocms:ui/components/toaster";
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
+    import { toast } from "studiocms:ui/components/toaster/client";
 
     const mode = (document.getElementById('current-mode-selector') as HTMLDivElement).dataset.mode;
 

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

@@ -142,8 +142,8 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 </script>
 
 <script>
-    import { ModalHelper } from 'studiocms:ui/components/modal';
-    import { toast } from 'studiocms:ui/components/toaster';
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
+    import { toast } from 'studiocms:ui/components/toaster/client';
 
     const createAPITokenModal = new ModalHelper('create-api-token-modal', 'create-api-token');
     const createTokenResponseModal = new ModalHelper('create-token-response-modal');

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

@@ -84,7 +84,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
 
 <script>
-    import { toast } from "studiocms:ui/components/toaster";
+    import { toast } from "studiocms:ui/components/toaster/client";
 
     const syncAvatar = document.getElementById('refresh-avatar') as HTMLButtonElement;
     const syncUrl = syncAvatar.dataset.url as string;

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

@@ -160,7 +160,7 @@ type TKey = Parameters<typeof t>[0];
 </script>
 
 <script>
-    import { toast } from 'studiocms:ui/components/toaster';
+    import { toast } from 'studiocms:ui/components/toaster/client';
     import { getEnabledNotificationCheckboxes, formatNotificationOptions } from 'studiocms:notifier/client'
 
     const form = document.getElementById('notifications-form') as HTMLFormElement;

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

@@ -102,7 +102,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 </script>
 
 <script>
-    import { toast } from "studiocms:ui/components/toaster";
+    import { toast } from "studiocms:ui/components/toaster/client";
         const passwordUpdateForm = document.getElementById('password-update-form') as HTMLFormElement;
 
         passwordUpdateForm.addEventListener('submit', async (e) => {

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

@@ -33,7 +33,7 @@ const status: false | 'outdated' | 'latest' | 'future' = (() => {
 </Button>
 
 <script>
-  import { ModalHelper } from "studiocms:ui/components/modal";
+  import { ModalHelper } from "studiocms:ui/components/modal/client";
   import { dateTimeListener } from "../../../scripts/dateTimeListener.js";
   import { dateWithTimeAndZone } from "../../../scripts/dateWithTimeAndZone.js";
   import { timeAgo } from "../../../scripts/timeAgo.js";

package/dist/frontend/components/dashboard/user-mgmt/InnerSidebarElement.astro

@@ -142,9 +142,9 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 </script>
 
 <script>
-    import { DropdownHelper } from 'studiocms:ui/components/dropdown';
-    import { ModalHelper } from 'studiocms:ui/components/modal';
-    import { toast } from 'studiocms:ui/components/toaster';
+    import { DropdownHelper } from 'studiocms:ui/components/dropdown/client';
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
+    import { toast } from 'studiocms:ui/components/toaster/client';
 
     const createNewDropdown = new DropdownHelper('create-user-dropdown');
     const createNewUserModal = new ModalHelper('create-new-user-modal');

package/dist/frontend/pages/[dashboard]/content-management/diff.astro

@@ -181,7 +181,7 @@ const { data: page } = possiblePage;
 </Layout>
 
 <script>
-  import { toast } from "studiocms:ui/components/toaster";
+  import { toast } from "studiocms:ui/components/toaster/client";
 
   const revertMetaData = document.getElementById(
     "revert-metadata",

package/dist/frontend/pages/[dashboard]/login.astro

@@ -217,8 +217,8 @@ if (usernameAndPassword && SHOW_OAUTH) {
 
 <script>
     import { formListener } from '../../scripts/auth/formListener.js';
-    import { ModalHelper } from 'studiocms:ui/components/modal';
-    import { toast } from 'studiocms:ui/components/toaster';
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
+    import { toast } from 'studiocms:ui/components/toaster/client';
     
     const loginForm = document.getElementById('login-form') as HTMLFormElement | null;
     if (loginForm) {

package/dist/frontend/pages/[dashboard]/password-reset.astro

@@ -155,7 +155,7 @@ if (!lookupToken) {
     </script>
 
     <script>
-        import { toast } from "studiocms:ui/components/toaster";
+        import { toast } from "studiocms:ui/components/toaster/client";
 
         const resetForm = document.getElementById(
             "reset-password-form",

package/dist/frontend/pages/[dashboard]/smtp-configuration.astro

@@ -392,7 +392,7 @@ const notificationSettingKeys = Object.keys(notificationSettings.data).filter(
 </Layout>
 
 <script>
-  import { toast } from "studiocms:ui/components/toaster";
+  import { toast } from "studiocms:ui/components/toaster/client";
 
   const smtpConfigForm = document.getElementById(
     "smtp-config-form",

package/dist/frontend/pages/[dashboard]/unverified-email.astro

@@ -50,7 +50,7 @@ if (!userId) {
 </Layout>
 
 <script>
-  import { toast } from 'studiocms:ui/components/toaster';
+  import { toast } from 'studiocms:ui/components/toaster/client';
 
   document.getElementById('back-button')!.addEventListener('click', () => {
     window.location.href = '/';

package/dist/frontend/pages/[dashboard]/user-management/edit.astro

@@ -323,8 +323,8 @@ if (isAdmin) allowedRanks.unshift({ label: 'Administrator', value: 'admin' });
   </script>
 
   <script>
-    import { toast } from 'studiocms:ui/components/toaster';
-    import { ModalHelper } from 'studiocms:ui/components/modal';
+    import { toast } from 'studiocms:ui/components/toaster/client';
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
 
     const resetLinkModal = new ModalHelper('password-reset-link-modal');
 

package/dist/frontend/scripts/auth/formListener.js

@@ -1,4 +1,4 @@
-import { toast as uiToast } from "studiocms:ui/components/toaster";
+import { toast as uiToast } from "studiocms:ui/components/toaster/client";
 async function formListener(event, form, type, toast = uiToast, reload = () => {
   if (typeof window !== "undefined") {
     window.location.reload();

package/dist/frontend/setup-pages/1-start.astro

@@ -69,7 +69,7 @@ const ogSelectOptions = validImages.map(({ label, name: value }) => ({ label, va
     </Card>
 
     <script>
-        import { toast } from 'studiocms:ui/components/toaster';
+        import { toast } from 'studiocms:ui/components/toaster/client';
 
         const form = document.querySelector('#setup-step-one') as HTMLFormElement;
 

package/dist/frontend/setup-pages/2-next.astro

@@ -130,7 +130,7 @@ const Providers = providerData
     </Card>
 
     <script>
-        import { toast } from 'studiocms:ui/components/toaster';
+        import { toast } from 'studiocms:ui/components/toaster/client';
 
         const form = document.querySelector('#setup-step-two') as HTMLFormElement;
 

package/dist/frontend/utils.d.ts

@@ -11,7 +11,7 @@ export declare class StudioCMSRouteConfig extends StudioCMSRouteConfig_base {
 /**
  * Process and derive route settings from the main configuration.
  */
-export declare const processedConfig: (args_0: RouteConfig) => Effect.Effect.AsEffect<Effect.Effect<ProcessedRouteConfig, never, never>>;
+export declare const processedConfig: (args_0: RouteConfig) => Effect.Effect<ProcessedRouteConfig, never, never>;
 /**
  * Sets the `prerender` property to `false` for the given routes.
  *
@@ -28,38 +28,38 @@ export declare const setPrerenderFalse: (items: InjectedRoute[] | InjectedRoute)
  */
 export declare const mapProcessedConfig: (args_0: ProcessedRouteConfig & {
     dashboardRoute: (path: string) => string;
-}) => Effect.Effect.AsEffect<Effect.Effect<{
+}) => Effect.Effect<{
     enabled: boolean;
     routes: {
         prerender: boolean;
         pattern: string;
         entrypoint: string | URL;
     }[];
-}[], never, never>>;
+}[], never, never>;
 /**
  * Flat map processed configuration to route groups.
  */
-export declare const flatMapProcessedConfig: (config: Pick<RouteConfig, "dashboardRoute">) => (processed: ProcessedRouteConfig) => Effect.Effect.AsEffect<Effect.Effect.AsEffect<Effect.Effect<{
+export declare const flatMapProcessedConfig: (config: Pick<RouteConfig, "dashboardRoute">) => (processed: ProcessedRouteConfig) => Effect.Effect<{
     enabled: boolean;
     routes: {
         prerender: boolean;
         pattern: string;
         entrypoint: string | URL;
     }[];
-}[], never, never>>>;
+}[], never, never>;
 /**
  * Map route groups to a flat array of routes.
  */
 export declare const mapRouteGroups: (routeGroups: {
     enabled: boolean;
     routes: InjectedRoute[];
-}[]) => Effect.Effect.AsEffect<Effect.Effect<InjectedRoute[], never, never>>;
+}[]) => Effect.Effect<InjectedRoute[], never, never>;
 /**
  * Inject extra routes from the configuration.
  */
-export declare const injectExtraRoutes: (config: Pick<RouteConfig, "extraRoutes">) => (routes: InjectedRoute[]) => Effect.Effect.AsEffect<Effect.Effect<InjectedRoute[], never, never>>;
+export declare const injectExtraRoutes: (config: Pick<RouteConfig, "extraRoutes">) => (routes: InjectedRoute[]) => Effect.Effect<InjectedRoute[], never, never>;
 /**
  * Inject middleware based on the configuration.
  */
-export declare const injectMiddleware: ({ dbStartPage }: Pick<RouteConfig, "dbStartPage">) => (routes: InjectedRoute[]) => Effect.Effect.AsEffect<Effect.Effect<InjectedRoutesWithMiddleware, never, never>>;
+export declare const injectMiddleware: ({ dbStartPage }: Pick<RouteConfig, "dbStartPage">) => (routes: InjectedRoute[]) => Effect.Effect<InjectedRoutesWithMiddleware, never, never>;
 export {};

package/dist/virtuals/auth/core.d.ts

@@ -21,26 +21,26 @@ import { Effect } from '../../effect.js';
  * ```
  */
 export declare const Encryption: Effect.Effect<{
-    readonly encrypt: (data: Uint8Array<ArrayBufferLike>) => Effect.Effect.AsEffect<Effect.Effect<Uint8Array<ArrayBufferLike>, import("@withstudiocms/auth-kit/errors").EncryptionError, never>>;
+    readonly encrypt: (data: Uint8Array<ArrayBufferLike>) => Effect.Effect<Uint8Array<ArrayBufferLike>, import("@withstudiocms/auth-kit/errors").EncryptionError, never>;
     readonly encryptToString: (data: string) => Effect.Effect<Uint8Array<ArrayBufferLike>, import("@withstudiocms/auth-kit/errors").EncryptionError, never>;
-    readonly decrypt: (data: Uint8Array<ArrayBufferLike>) => Effect.Effect.AsEffect<Effect.Effect<Uint8Array<ArrayBufferLike>, import("@withstudiocms/auth-kit/errors").DecryptionError, never>>;
+    readonly decrypt: (data: Uint8Array<ArrayBufferLike>) => Effect.Effect<Uint8Array<ArrayBufferLike>, import("@withstudiocms/auth-kit/errors").DecryptionError, never>;
     readonly decryptToString: (data: Uint8Array<ArrayBufferLike>) => Effect.Effect<string, import("@withstudiocms/auth-kit/errors").DecryptionError, never>;
 }, import("@withstudiocms/auth-kit/errors").EncryptionError, never>, Password: Effect.Effect<{
     readonly hashPassword: (password: string, _salt?: string | undefined) => Effect.Effect<string, import("@withstudiocms/effect/scrypt").ScryptError, never>;
     readonly verifyPasswordHash: (hash: string, password: string) => Effect.Effect<boolean, import("@withstudiocms/effect/scrypt").ScryptError | import("@withstudiocms/auth-kit/errors").PasswordError, never>;
     readonly verifyPasswordStrength: (pass: string) => Effect.Effect<string | true, import("@withstudiocms/auth-kit/errors").PasswordError | import("@withstudiocms/auth-kit/errors").CheckIfUnsafeError | import("@effect/platform/HttpClientError").ResponseError, never>;
 }, never, never>, Session: Effect.Effect<{
-    readonly generateSessionToken: () => Effect.Effect.AsEffect<Effect.Effect<string, import("@withstudiocms/auth-kit/errors").SessionError, never>>;
+    readonly generateSessionToken: () => Effect.Effect<string, import("@withstudiocms/auth-kit/errors").SessionError, never>;
     readonly createSession: (token: string, userId: string) => Effect.Effect<import("@withstudiocms/auth-kit/types").UserSession, import("@withstudiocms/auth-kit/errors").SessionError, never>;
     readonly validateSessionToken: (token: string) => Effect.Effect<import("@withstudiocms/auth-kit/types").SessionValidationResult, import("@withstudiocms/auth-kit/errors").SessionError, never>;
-    readonly invalidateSession: (sessionId: string) => Effect.Effect.AsEffect<Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>>;
-    readonly setSessionTokenCookie: (context: import("astro").APIContext<Record<string, any>, Record<string, string | undefined>> | import("astro").AstroGlobal<Record<string, any>, import("astro/runtime/server/index.js").AstroComponentFactory, Record<string, string | undefined>>, token: string, expiresAt: Date, secure?: boolean | undefined) => Effect.Effect.AsEffect<Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>>;
-    readonly deleteSessionTokenCookie: (context: import("astro").APIContext<Record<string, any>, Record<string, string | undefined>> | import("astro").AstroGlobal<Record<string, any>, import("astro/runtime/server/index.js").AstroComponentFactory, Record<string, string | undefined>>, secure?: boolean | undefined) => Effect.Effect.AsEffect<Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>>;
-    readonly setOAuthSessionTokenCookie: (context: import("astro").APIContext<Record<string, any>, Record<string, string | undefined>> | import("astro").AstroGlobal<Record<string, any>, import("astro/runtime/server/index.js").AstroComponentFactory, Record<string, string | undefined>>, key: string, value: string, secure?: boolean | undefined) => Effect.Effect.AsEffect<Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>>;
+    readonly invalidateSession: (sessionId: string) => Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>;
+    readonly setSessionTokenCookie: (context: import("astro").APIContext<Record<string, any>, Record<string, string | undefined>> | import("astro").AstroGlobal<Record<string, any>, import("astro/runtime/server/index.js").AstroComponentFactory, Record<string, string | undefined>>, token: string, expiresAt: Date, secure?: boolean | undefined) => Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>;
+    readonly deleteSessionTokenCookie: (context: import("astro").APIContext<Record<string, any>, Record<string, string | undefined>> | import("astro").AstroGlobal<Record<string, any>, import("astro/runtime/server/index.js").AstroComponentFactory, Record<string, string | undefined>>, secure?: boolean | undefined) => Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>;
+    readonly setOAuthSessionTokenCookie: (context: import("astro").APIContext<Record<string, any>, Record<string, string | undefined>> | import("astro").AstroGlobal<Record<string, any>, import("astro/runtime/server/index.js").AstroComponentFactory, Record<string, string | undefined>>, key: string, value: string, secure?: boolean | undefined) => Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>;
     readonly createUserSession: (userId: string, context: import("astro").APIContext<Record<string, any>, Record<string, string | undefined>> | import("astro").AstroGlobal<Record<string, any>, import("astro/runtime/server/index.js").AstroComponentFactory, Record<string, string | undefined>>, secure?: boolean | undefined) => Effect.Effect<void, import("@withstudiocms/auth-kit/errors").SessionError, never>;
 }, import("@withstudiocms/auth-kit/errors").SessionError, never>, User: Effect.Effect<{
     readonly verifyUsernameInput: (username: string) => Effect.Effect<string | true, import("@withstudiocms/auth-kit/errors").CheckIfUnsafeError | import("@withstudiocms/auth-kit/errors").UserError, never>;
-    readonly createUserAvatar: (email: string) => Effect.Effect.AsEffect<Effect.Effect<string, import("@withstudiocms/auth-kit/errors").UserError, never>>;
+    readonly createUserAvatar: (email: string) => Effect.Effect<string, import("@withstudiocms/auth-kit/errors").UserError, never>;
     readonly createLocalUser: (name: string, username: string, email: string, password: string) => Effect.Effect<{
         name: string;
         username: string;
@@ -84,7 +84,7 @@ export declare const Encryption: Effect.Effect<{
         notifications: string | null;
     }, import("@withstudiocms/effect/scrypt").ScryptError | import("@withstudiocms/auth-kit/errors").UserError, never>;
     readonly getUserPasswordHash: (userId: string) => Effect.Effect<string, import("@withstudiocms/auth-kit/errors").UserError, never>;
-    readonly getUserFromEmail: (email: string) => Effect.Effect.AsEffect<Effect.Effect<import("@withstudiocms/auth-kit/types").CombinedUserData | null | undefined, import("@withstudiocms/auth-kit/errors").UserError, never>>;
+    readonly getUserFromEmail: (email: string) => Effect.Effect<import("@withstudiocms/auth-kit/types").CombinedUserData | null | undefined, import("@withstudiocms/auth-kit/errors").UserError, never>;
     readonly getUserData: (context: import("astro").APIContext<Record<string, any>, Record<string, string | undefined>> | import("astro").AstroGlobal<Record<string, any>, import("astro/runtime/server/index.js").AstroComponentFactory, Record<string, string | undefined>>) => Effect.Effect<import("@withstudiocms/auth-kit/types").UserSessionData, import("@withstudiocms/auth-kit/errors").SessionError | import("@withstudiocms/auth-kit/errors").UserError, never>;
     readonly getUserPermissionLevel: (userData: import("@withstudiocms/auth-kit/types").UserSessionData | import("@withstudiocms/auth-kit/types").CombinedUserData | null) => Effect.Effect<import("@withstudiocms/auth-kit/types").UserPermissionLevel, import("@withstudiocms/auth-kit/errors").UserError, never>;
     readonly isUserAllowed: (userData: import("@withstudiocms/auth-kit/types").UserSessionData | import("@withstudiocms/auth-kit/types").CombinedUserData | null, requiredPerms: "owner" | "admin" | "editor" | "visitor" | "unknown") => Effect.Effect<boolean, import("@withstudiocms/auth-kit/errors").UserError, never>;

package/dist/virtuals/i18n/LanguageSelector.astro

@@ -30,7 +30,7 @@ import { languageSelectorOptions } from './config.js';
 </Dropdown>
 
 <script>
-  import { DropdownHelper } from 'studiocms:ui/components/dropdown';
+  import { DropdownHelper } from 'studiocms:ui/components/dropdown/client';
   import { $localeSettings, defaultLang } from "studiocms:i18n/client";
 
   const languageSelector = new DropdownHelper('language-selector');

package/dist/virtuals/i18n/client.js

@@ -79,18 +79,30 @@ const updateSelectElmLabel = (el, translation) => {
 const updateTrueFalseSelectOptions = (el, t) => {
   const ul = document.querySelector(`#${el}-dropdown`);
   if (!ul) return;
-  const trueOption = ul.querySelector('li[data-value="true"]');
-  const falseOption = ul.querySelector('li[data-value="false"]');
+  const trueOption = ul.querySelector('li[value="true"]');
+  const falseOption = ul.querySelector('li[value="false"]');
   if (trueOption) trueOption.textContent = t.true;
   if (falseOption) falseOption.textContent = t.false;
+  const selected = ul.querySelector("li.selected");
+  const currentValueSpan = document.querySelector(`#${el}-value-span`);
+  const selectedValue = selected?.getAttribute("value");
+  if (currentValueSpan && selectedValue) {
+    currentValueSpan.textContent = selectedValue === "true" ? t.true : t.false;
+  }
 };
 const updateSelectOptions = (el, t) => {
   const ul = document.querySelector(`#${el}-dropdown`);
   if (!ul) return;
   for (const key in t) {
-    const option = ul.querySelector(`li[data-value="${key}"]`);
+    const option = ul.querySelector(`li[value="${key}"]`);
     if (option) option.textContent = t[key];
   }
+  const selected = ul.querySelector("li.selected");
+  const currentValueSpan = document.querySelector(`#${el}-value-span`);
+  const selectedValue = selected?.getAttribute("value");
+  if (currentValueSpan && selectedValue) {
+    currentValueSpan.textContent = t[selectedValue];
+  }
 };
 function updateTabLabel(id, label) {
   const tab = document.querySelector(`button[data-tab-child="${id}"]`);

package/dist/virtuals/scripts/template-editor.d.ts

@@ -29,8 +29,4 @@ ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 */
-import 'ace-builds/esm-resolver';
-import 'ace-builds/src-noconflict/mode-handlebars';
-import 'ace-builds/src-noconflict/theme-cloud_editor';
-import 'ace-builds/src-noconflict/theme-cloud_editor_dark';
-import 'ace-builds/src-noconflict/ext-language_tools';
+export {};

package/dist/virtuals/scripts/template-editor.js

@@ -1,13 +1,14 @@
 import { $i18n, baseTranslation, updateSelectOptions } from "studiocms:i18n/client";
-import { ModalHelper } from "studiocms:ui/components/modal";
-import { toast } from "studiocms:ui/components/toaster";
+import { ModalHelper } from "studiocms:ui/components/modal/client";
+import { toast } from "studiocms:ui/components/toaster/client";
 import * as ace from "ace-builds";
-import "ace-builds/esm-resolver";
-import "ace-builds/src-noconflict/mode-handlebars";
-import "ace-builds/src-noconflict/theme-cloud_editor";
-import "ace-builds/src-noconflict/theme-cloud_editor_dark";
-import "ace-builds/src-noconflict/ext-language_tools";
+import modeHandlebars from "ace-builds/src-noconflict/mode-handlebars?url";
+import themeLight from "ace-builds/src-noconflict/theme-cloud_editor?url";
+import themeDark from "ace-builds/src-noconflict/theme-cloud_editor_dark?url";
 const { default: templateEngine } = await import("@withstudiocms/template-lang");
+ace.config.setModuleUrl("ace/mode/handlebars", modeHandlebars);
+ace.config.setModuleUrl("ace/theme/cloud_editor", themeLight);
+ace.config.setModuleUrl("ace/theme/cloud_editor_dark", themeDark);
 const $ = (selector) => document.querySelector(selector);
 const $$ = (selector) => document.querySelectorAll(selector);
 const $$$ = (element, selectors) => element.querySelectorAll(selectors);
@@ -60,11 +61,7 @@ const editor = ace.edit("template-editor", {
   showPrintMargin: false,
   wrap: true,
   useWorker: false,
-  displayIndentGuides: true,
-  enableAutoIndent: true,
-  enableBasicAutocompletion: true,
-  enableLiveAutocompletion: true,
-  enableSnippets: true
+  displayIndentGuides: true
 });
 function updateButtonState(button, isActive) {
   if (isActive) {

package/dist/virtuals/sdk/effect/db.d.ts

@@ -3,7 +3,7 @@ export { LibSQLClientError } from '@withstudiocms/effect/drizzle';
 declare const AstroDB_base: Effect.Service.Class<AstroDB, "studiocms/sdk/effect/db/AstroDB", {
     readonly effect: Effect.Effect<{
         db: import("@astrojs/db/runtime").Database;
-        execute: <T>(fn: (client: import("drizzle-orm/libsql").LibSQLDatabase<Record<string, never>> | import("@astrojs/db/runtime").Database) => Promise<T>) => Effect.Effect.AsEffect<Effect.Effect<T, import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
+        execute: <T>(fn: (client: import("drizzle-orm/libsql").LibSQLDatabase<Record<string, never>> | import("@astrojs/db/runtime").Database) => Promise<T>) => Effect.Effect<T, import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
         makeQuery: <A, E, R, Input = never>(queryFn: (execute: import("@withstudiocms/effect/drizzle").ExecuteFn<Record<string, unknown>>, input: Input) => Effect.Effect<A, E, R>) => (...args: [Input] extends [never] ? [] : [input: Input]) => Effect.Effect<A, E, R>;
     }, never, never>;
 }>;

package/dist/virtuals/sdk/modules/get.d.ts

@@ -8,7 +8,7 @@ declare const SDKCore_GET_base: Effect.Service.Class<SDKCore_GET, "studiocms/sdk
     readonly dependencies: readonly [import("effect/Layer").Layer<AstroDB, never, never>, import("effect/Layer").Layer<SDKCore_FolderTree, never, never>, import("effect/Layer").Layer<GetVersionFromNPM, never, never>, import("effect/Layer").Layer<SDKCore_Users, never, never>, import("effect/Layer").Layer<SDKCore_Collectors, never, never>, import("effect/Layer").Layer<SDKCore_CONFIG, never, never>];
     readonly effect: Effect.Effect<{
         databaseTable: {
-            users: () => Effect.Effect.AsEffect<Effect.Effect<{
+            users: () => Effect.Effect<{
                 name: string;
                 password: string | null;
                 email: string | null;
@@ -20,22 +20,22 @@ declare const SDKCore_GET_base: Effect.Service.Class<SDKCore_GET, "studiocms/sdk
                 createdAt: Date | null;
                 emailVerified: boolean;
                 notifications: string | null;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            oAuthAccounts: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            oAuthAccounts: () => Effect.Effect<{
                 provider: string;
                 userId: string;
                 providerUserId: string;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            sessionTable: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            sessionTable: () => Effect.Effect<{
                 id: string;
                 userId: string;
                 expiresAt: Date;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            permissions: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            permissions: () => Effect.Effect<{
                 user: string;
                 rank: "unknown" | "owner" | "admin" | "editor" | "visitor";
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            pageData: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            pageData: () => Effect.Effect<{
                 title: string;
                 description: string;
                 slug: string;
@@ -55,29 +55,29 @@ declare const SDKCore_GET_base: Effect.Service.Class<SDKCore_GET, "studiocms/sdk
                 showContributors: boolean | null;
                 parentFolder: string | null;
                 draft: boolean | null;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            pageDataTags: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            pageDataTags: () => Effect.Effect<{
                 name: string;
                 description: string;
                 slug: string;
                 id: number;
                 meta: unknown;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            pageDataCategories: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            pageDataCategories: () => Effect.Effect<{
                 name: string;
                 description: string;
                 slug: string;
                 id: number;
                 parent: number | null;
                 meta: unknown;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            pageContent: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            pageContent: () => Effect.Effect<{
                 id: string;
                 contentLang: string;
                 contentId: string;
                 content: string | null;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            diffTracking: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            diffTracking: () => Effect.Effect<{
                 id: string;
                 userId: string;
                 pageId: string;
@@ -85,25 +85,25 @@ declare const SDKCore_GET_base: Effect.Service.Class<SDKCore_GET, "studiocms/sdk
                 pageMetaData: unknown;
                 pageContentStart: string;
                 diff: string | null;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            pageFolderStructure: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            pageFolderStructure: () => Effect.Effect<{
                 name: string;
                 id: string;
                 parent: string | null;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            notificationSettings: () => Effect.Effect.AsEffect<Effect.Effect<{
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            notificationSettings: () => Effect.Effect<{
                 id: string;
                 emailVerification: boolean;
                 requireAdminVerification: boolean;
                 requireEditorVerification: boolean;
                 oAuthBypassVerification: boolean;
-            } | undefined, import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
-            emailVerificationTokens: () => Effect.Effect.AsEffect<Effect.Effect<{
+            } | undefined, import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
+            emailVerificationTokens: () => Effect.Effect<{
                 id: string;
                 userId: string;
                 token: string;
                 expiresAt: Date;
-            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>>;
+            }[], import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
         };
         permissionsLists: {
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "studiocms",
-  "version": "0.1.0-beta.28",
+  "version": "0.1.0-beta.30",
   "description": "Astro Native CMS for AstroDB. Built from the ground up by the Astro community.",
   "author": {
     "name": "withstudiocms",
@@ -145,12 +145,12 @@
   "type": "module",
   "dependencies": {
     "@iconify-json/flat-color-icons": "^1.2.3",
-    "@iconify-json/simple-icons": "^1.2.55",
+    "@iconify-json/simple-icons": "^1.2.57",
     "@iconify-json/circle-flags": "^1.2.10",
     "@inox-tools/runtime-logger": "^0.7.0",
     "@nanostores/i18n": "^1.2.2",
     "@nanostores/persistent": "^1.2.0",
-    "@studiocms/ui": "^1.0.0-beta.3",
+    "@studiocms/ui": "^1.0.0-beta.4",
     "@withstudiocms/cli-kit": "^0.1.0",
     "ace-builds": "^1.43.4",
     "astro-integration-kit": "^0.19.1",
@@ -164,7 +164,7 @@
     "jose": "^6.1.0",
     "micromark": "^4.0.2",
     "micromark-extension-gfm": "^3.0.0",
-    "magicast": "^0.3.5",
+    "magicast": "^0.5.1",
     "mdast-util-to-markdown": "^2.1.2",
     "mrmime": "^2.0.1",
     "nanostores": "^1.0.1",
@@ -174,10 +174,10 @@
     "tinyglobby": "^0.2.15",
     "ultrahtml": "^1.6.0",
     "@withstudiocms/internal_helpers": "0.1.0-beta.3",
-    "@withstudiocms/auth-kit": "0.1.0-beta.3",
-    "@withstudiocms/component-registry": "0.1.0-beta.4",
+    "@withstudiocms/auth-kit": "0.1.0-beta.5",
+    "@withstudiocms/component-registry": "0.1.0-beta.6",
     "@withstudiocms/config-utils": "0.1.0-beta.4",
-    "@withstudiocms/effect": "0.1.0-beta.4",
+    "@withstudiocms/effect": "0.1.0-beta.6",
     "@withstudiocms/template-lang": "0.1.0-beta.1"
   },
   "devDependencies": {
@@ -193,7 +193,7 @@
     "@studiocms/web-vitals": "^4.5.3",
     "astro": "^5.12.9",
     "drizzle-orm": "^0.42.0",
-    "effect": "^3.18.4",
+    "effect": "^3.19.2",
     "vite": "^6.3.4"
   },
   "peerDependenciesMeta": {

package/src/frontend/components/dashboard/DoubleSidebar.astro

@@ -20,7 +20,7 @@ const { currentUser } = Astro.props as Props;
 </SuiDoubleSidebar>
 
 <script>
-  import { DoubleSidebarHelper } from "studiocms:ui/components/sidebar";
+  import { DoubleSidebarHelper } from "studiocms:ui/components/sidebar/client";
 
   if (document.getElementById('sui-sidebars')) {
     const sidebar = new DoubleSidebarHelper();

package/src/frontend/components/dashboard/MainSidebarContent.astro

@@ -247,7 +247,7 @@ const filteredPluginList = pluginList.filter((plugin) => !!plugin.settingsPage);
 </script>
 
 <script>
-  import { DropdownHelper } from "studiocms:ui/components/dropdown";
+  import { DropdownHelper } from "studiocms:ui/components/dropdown/client";
   import { ThemeHelper } from '@studiocms/ui/utils/ThemeHelper.js';
 
   function sendPostRequest(url: string) {

package/src/frontend/components/dashboard/SingleSidebar.astro

@@ -14,7 +14,7 @@ const { currentUser } = Astro.props as Props;
 </Sidebar>
 
 <script>
-  import { SingleSidebarHelper } from "studiocms:ui/components/sidebar";
+  import { SingleSidebarHelper } from "studiocms:ui/components/sidebar/client";
 
   function setupSidebar() {
     if (!document.getElementById('sui-sidebar')) return;

package/src/frontend/components/dashboard/configuration/ConfigForm.astro

@@ -191,7 +191,7 @@ updateTrueFalseSelectOptions,
 </script>
 
 <script>
-    import { toast } from "studiocms:ui/components/toaster";
+    import { toast } from "studiocms:ui/components/toaster/client";
         const configForm = document.querySelector('#site-config-form') as HTMLFormElement;
 
         configForm.addEventListener('submit', async (e) => {

package/src/frontend/components/dashboard/content-mgmt/CreateFolder.astro

@@ -43,7 +43,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 </script>
 
 <script>
-import { toast } from "studiocms:ui/components/toaster";
+import { toast } from "studiocms:ui/components/toaster/client";
 
     const form = document.getElementById('create-folder-form') as HTMLFormElement;
     const createContainer = document.getElementById('create-folder-container') as HTMLDivElement;

package/src/frontend/components/dashboard/content-mgmt/CreatePage.astro

@@ -309,7 +309,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
 <script>
   import type { tsPageDataInsert } from "studiocms:sdk/types";
-  import { toast } from "studiocms:ui/components/toaster";
+  import { toast } from "studiocms:ui/components/toaster/client";
   import {
     formDataToRecord,
     studioCMSCreatePageDataSchema,

package/src/frontend/components/dashboard/content-mgmt/EditFolder.astro

@@ -65,7 +65,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 </script>
 
 <script>
-import { toast } from "studiocms:ui/components/toaster";
+import { toast } from "studiocms:ui/components/toaster/client";
 
     const form = document.getElementById('edit-folder-form') as HTMLFormElement;
     const createContainer = document.getElementById('edit-folder-container') as HTMLDivElement;

package/src/frontend/components/dashboard/content-mgmt/EditPage.astro

@@ -457,7 +457,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
 <script>
   import type { tsPageDataInsert } from "studiocms:sdk/types";
-  import { toast } from "studiocms:ui/components/toaster";
+  import { toast } from "studiocms:ui/components/toaster/client";
   import {
     formDataToRecord,
     studioCMSEditPageDataAndContentSchema,

package/src/frontend/components/dashboard/content-mgmt/InnerSidebarElement.astro

@@ -143,7 +143,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
 </script>
 
 <script>
-  import { DropdownHelper } from 'studiocms:ui/components/dropdown';
+  import { DropdownHelper } from 'studiocms:ui/components/dropdown/client';
 
   const createNewDropdown = new DropdownHelper('create-new-dropdown');
 

package/src/frontend/components/dashboard/content-mgmt/PageHeader.astro

@@ -242,8 +242,8 @@ const currentMode = editPage
 </script>
 
 <script>
-    import { ModalHelper } from 'studiocms:ui/components/modal';
-    import { toast } from "studiocms:ui/components/toaster";
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
+    import { toast } from "studiocms:ui/components/toaster/client";
 
     const mode = (document.getElementById('current-mode-selector') as HTMLDivElement).dataset.mode;
 

package/src/frontend/components/dashboard/profile/APITokens.astro

@@ -142,8 +142,8 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 </script>
 
 <script>
-    import { ModalHelper } from 'studiocms:ui/components/modal';
-    import { toast } from 'studiocms:ui/components/toaster';
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
+    import { toast } from 'studiocms:ui/components/toaster/client';
 
     const createAPITokenModal = new ModalHelper('create-api-token-modal', 'create-api-token');
     const createTokenResponseModal = new ModalHelper('create-token-response-modal');

package/src/frontend/components/dashboard/profile/BasicInfo.astro

@@ -84,7 +84,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
 
 <script>
-    import { toast } from "studiocms:ui/components/toaster";
+    import { toast } from "studiocms:ui/components/toaster/client";
 
     const syncAvatar = document.getElementById('refresh-avatar') as HTMLButtonElement;
     const syncUrl = syncAvatar.dataset.url as string;

package/src/frontend/components/dashboard/profile/Notifications.astro

@@ -160,7 +160,7 @@ type TKey = Parameters<typeof t>[0];
 </script>
 
 <script>
-    import { toast } from 'studiocms:ui/components/toaster';
+    import { toast } from 'studiocms:ui/components/toaster/client';
     import { getEnabledNotificationCheckboxes, formatNotificationOptions } from 'studiocms:notifier/client'
 
     const form = document.getElementById('notifications-form') as HTMLFormElement;

package/src/frontend/components/dashboard/profile/UpdatePassword.astro

@@ -102,7 +102,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 </script>
 
 <script>
-    import { toast } from "studiocms:ui/components/toaster";
+    import { toast } from "studiocms:ui/components/toaster/client";
         const passwordUpdateForm = document.getElementById('password-update-form') as HTMLFormElement;
 
         passwordUpdateForm.addEventListener('submit', async (e) => {

package/src/frontend/components/dashboard/sidebar/VersionCheck.astro

@@ -33,7 +33,7 @@ const status: false | 'outdated' | 'latest' | 'future' = (() => {
 </Button>
 
 <script>
-  import { ModalHelper } from "studiocms:ui/components/modal";
+  import { ModalHelper } from "studiocms:ui/components/modal/client";
   import { dateTimeListener } from "../../../scripts/dateTimeListener.js";
   import { dateWithTimeAndZone } from "../../../scripts/dateWithTimeAndZone.js";
   import { timeAgo } from "../../../scripts/timeAgo.js";

package/src/frontend/components/dashboard/user-mgmt/InnerSidebarElement.astro

@@ -142,9 +142,9 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 </script>
 
 <script>
-    import { DropdownHelper } from 'studiocms:ui/components/dropdown';
-    import { ModalHelper } from 'studiocms:ui/components/modal';
-    import { toast } from 'studiocms:ui/components/toaster';
+    import { DropdownHelper } from 'studiocms:ui/components/dropdown/client';
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
+    import { toast } from 'studiocms:ui/components/toaster/client';
 
     const createNewDropdown = new DropdownHelper('create-user-dropdown');
     const createNewUserModal = new ModalHelper('create-new-user-modal');

package/src/frontend/pages/[dashboard]/content-management/diff.astro

@@ -181,7 +181,7 @@ const { data: page } = possiblePage;
 </Layout>
 
 <script>
-  import { toast } from "studiocms:ui/components/toaster";
+  import { toast } from "studiocms:ui/components/toaster/client";
 
   const revertMetaData = document.getElementById(
     "revert-metadata",

package/src/frontend/pages/[dashboard]/login.astro

@@ -217,8 +217,8 @@ if (usernameAndPassword && SHOW_OAUTH) {
 
 <script>
     import { formListener } from '../../scripts/auth/formListener.js';
-    import { ModalHelper } from 'studiocms:ui/components/modal';
-    import { toast } from 'studiocms:ui/components/toaster';
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
+    import { toast } from 'studiocms:ui/components/toaster/client';
     
     const loginForm = document.getElementById('login-form') as HTMLFormElement | null;
     if (loginForm) {

package/src/frontend/pages/[dashboard]/password-reset.astro

@@ -155,7 +155,7 @@ if (!lookupToken) {
     </script>
 
     <script>
-        import { toast } from "studiocms:ui/components/toaster";
+        import { toast } from "studiocms:ui/components/toaster/client";
 
         const resetForm = document.getElementById(
             "reset-password-form",

package/src/frontend/pages/[dashboard]/smtp-configuration.astro

@@ -392,7 +392,7 @@ const notificationSettingKeys = Object.keys(notificationSettings.data).filter(
 </Layout>
 
 <script>
-  import { toast } from "studiocms:ui/components/toaster";
+  import { toast } from "studiocms:ui/components/toaster/client";
 
   const smtpConfigForm = document.getElementById(
     "smtp-config-form",

package/src/frontend/pages/[dashboard]/unverified-email.astro

@@ -50,7 +50,7 @@ if (!userId) {
 </Layout>
 
 <script>
-  import { toast } from 'studiocms:ui/components/toaster';
+  import { toast } from 'studiocms:ui/components/toaster/client';
 
   document.getElementById('back-button')!.addEventListener('click', () => {
     window.location.href = '/';

package/src/frontend/pages/[dashboard]/user-management/edit.astro

@@ -323,8 +323,8 @@ if (isAdmin) allowedRanks.unshift({ label: 'Administrator', value: 'admin' });
   </script>
 
   <script>
-    import { toast } from 'studiocms:ui/components/toaster';
-    import { ModalHelper } from 'studiocms:ui/components/modal';
+    import { toast } from 'studiocms:ui/components/toaster/client';
+    import { ModalHelper } from 'studiocms:ui/components/modal/client';
 
     const resetLinkModal = new ModalHelper('password-reset-link-modal');
 

package/src/frontend/scripts/auth/formListener.ts

@@ -2,7 +2,7 @@
  * This tool is used by Auth Login pages
  */
 
-import { toast as uiToast } from 'studiocms:ui/components/toaster';
+import { toast as uiToast } from 'studiocms:ui/components/toaster/client';
 import type { ToastProps } from '@studiocms/ui/types';
 
 /**

package/src/frontend/setup-pages/1-start.astro

@@ -69,7 +69,7 @@ const ogSelectOptions = validImages.map(({ label, name: value }) => ({ label, va
     </Card>
 
     <script>
-        import { toast } from 'studiocms:ui/components/toaster';
+        import { toast } from 'studiocms:ui/components/toaster/client';
 
         const form = document.querySelector('#setup-step-one') as HTMLFormElement;
 

package/src/frontend/setup-pages/2-next.astro

@@ -130,7 +130,7 @@ const Providers = providerData
     </Card>
 
     <script>
-        import { toast } from 'studiocms:ui/components/toaster';
+        import { toast } from 'studiocms:ui/components/toaster/client';
 
         const form = document.querySelector('#setup-step-two') as HTMLFormElement;
 

package/src/virtuals/i18n/LanguageSelector.astro

@@ -30,7 +30,7 @@ import { languageSelectorOptions } from './config.js';
 </Dropdown>
 
 <script>
-  import { DropdownHelper } from 'studiocms:ui/components/dropdown';
+  import { DropdownHelper } from 'studiocms:ui/components/dropdown/client';
   import { $localeSettings, defaultLang } from "studiocms:i18n/client";
 
   const languageSelector = new DropdownHelper('language-selector');

package/src/virtuals/i18n/client.ts

@@ -199,19 +199,39 @@ export const updateSelectElmLabel = (el: string, translation: string) => {
 export const updateTrueFalseSelectOptions = (el: string, t: { true: string; false: string }) => {
 	const ul = document.querySelector<HTMLUListElement>(`#${el}-dropdown`);
 	if (!ul) return;
-	const trueOption = ul.querySelector<HTMLLIElement>('li[data-value="true"]');
-	const falseOption = ul.querySelector<HTMLLIElement>('li[data-value="false"]');
+	const trueOption = ul.querySelector<HTMLLIElement>('li[value="true"]');
+	const falseOption = ul.querySelector<HTMLLIElement>('li[value="false"]');
 	if (trueOption) trueOption.textContent = t.true;
 	if (falseOption) falseOption.textContent = t.false;
+
+	// get currently selected option
+	const selected = ul.querySelector<HTMLLIElement>('li.selected');
+	const currentValueSpan = document.querySelector<HTMLSpanElement>(`#${el}-value-span`);
+
+	const selectedValue = selected?.getAttribute('value');
+
+	if (currentValueSpan && selectedValue) {
+		currentValueSpan.textContent = selectedValue === 'true' ? t.true : t.false;
+	}
 };
 
 export const updateSelectOptions = (el: string, t: { [key: string]: string }) => {
 	const ul = document.querySelector<HTMLUListElement>(`#${el}-dropdown`);
 	if (!ul) return;
 	for (const key in t) {
-		const option = ul.querySelector<HTMLLIElement>(`li[data-value="${key}"]`);
+		const option = ul.querySelector<HTMLLIElement>(`li[value="${key}"]`);
 		if (option) option.textContent = t[key];
 	}
+
+	// get currently selected option
+	const selected = ul.querySelector<HTMLLIElement>('li.selected');
+	const currentValueSpan = document.querySelector<HTMLSpanElement>(`#${el}-value-span`);
+
+	const selectedValue = selected?.getAttribute('value');
+
+	if (currentValueSpan && selectedValue) {
+		currentValueSpan.textContent = t[selectedValue];
+	}
 };
 
 export function updateTabLabel(id: string, label: string) {

package/src/virtuals/scripts/template-editor.ts

@@ -31,17 +31,19 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 
 import { $i18n, baseTranslation, updateSelectOptions } from 'studiocms:i18n/client';
-import { ModalHelper } from 'studiocms:ui/components/modal';
-import { toast } from 'studiocms:ui/components/toaster';
+import { ModalHelper } from 'studiocms:ui/components/modal/client';
+import { toast } from 'studiocms:ui/components/toaster/client';
 import * as ace from 'ace-builds';
-import 'ace-builds/esm-resolver';
-import 'ace-builds/src-noconflict/mode-handlebars';
-import 'ace-builds/src-noconflict/theme-cloud_editor';
-import 'ace-builds/src-noconflict/theme-cloud_editor_dark';
-import 'ace-builds/src-noconflict/ext-language_tools';
+import modeHandlebars from 'ace-builds/src-noconflict/mode-handlebars?url';
+import themeLight from 'ace-builds/src-noconflict/theme-cloud_editor?url';
+import themeDark from 'ace-builds/src-noconflict/theme-cloud_editor_dark?url';
 
 const { default: templateEngine } = await import('@withstudiocms/template-lang');
 
+ace.config.setModuleUrl('ace/mode/handlebars', modeHandlebars);
+ace.config.setModuleUrl('ace/theme/cloud_editor', themeLight);
+ace.config.setModuleUrl('ace/theme/cloud_editor_dark', themeDark);
+
 // --- TYPE DEFINITIONS ---
 type EngineContext = {
 	site: {
@@ -120,10 +122,6 @@ const editor = ace.edit('template-editor', {
 	wrap: true,
 	useWorker: false,
 	displayIndentGuides: true,
-	enableAutoIndent: true,
-	enableBasicAutocompletion: true,
-	enableLiveAutocompletion: true,
-	enableSnippets: true,
 });
 
 // --- FUNCTION UTILITIES ---