windmill-components 1.642.0 → 1.655.0

package/package/components/settings/TokensTable.svelte

@@ -1,18 +1,65 @@
-<script lang="ts">import TableCustom from '../TableCustom.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import TableCustom from '../TableCustom.svelte';
 import { displayDate } from '../../utils';
 import { UserService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import CreateToken from './CreateToken.svelte';
 import Button from '../common/button/Button.svelte';
+import Badge from '../common/badge/Badge.svelte';
+import Alert from '../common/alert/Alert.svelte';
 import { Trash } from 'lucide-svelte';
 let { showMcpMode = false, openWithMcpMode = false, defaultNewTokenLabel, defaultNewTokenWorkspace, scopes, onTokenCreated } = $props();
 // --- Local State ---
 let tokens = $state([]);
 let tokenPage = $state(1);
-let newTokenLabel = $state(defaultNewTokenLabel);
+let newTokenLabel = $state(untrack(() => defaultNewTokenLabel));
 $effect(() => {
     listTokens();
 });
+// When updating this filter, also update:
+// - `is_user_token` in backend/src/monitor.rs
+// - `register_token_expiry_notification` in backend/windmill-api-auth/src/lib.rs
+function isUserToken(label) {
+    if (!label)
+        return true;
+    return (label !== 'session' &&
+        !label.toLowerCase().startsWith('ephemeral') &&
+        label !== 'debugger-token' &&
+        !label.startsWith('mcp-oauth-'));
+}
+function daysUntilExpiration(expiration) {
+    if (!expiration)
+        return null;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const exp = new Date(expiration);
+    exp.setHours(0, 0, 0, 0);
+    return Math.round((exp.getTime() - today.getTime()) / 86400000);
+}
+function expirationBadge(expiration, label) {
+    if (!isUserToken(label))
+        return null;
+    const days = daysUntilExpiration(expiration);
+    if (days === null)
+        return null;
+    if (days < 0)
+        return { color: 'red', text: 'Expired' };
+    if (days === 0)
+        return { color: 'red', text: 'Expires today' };
+    if (days === 1)
+        return { color: 'orange', text: 'Expires tomorrow' };
+    if (days <= 7)
+        return { color: 'orange', text: `Expires in ${days}d` };
+    if (days <= 30)
+        return { color: 'yellow', text: `Expires in ${days}d` };
+    return null;
+}
+let expiringSoonCount = $derived(tokens.filter((t) => {
+    if (!isUserToken(t.label))
+        return false;
+    const days = daysUntilExpiration(t.expiration);
+    return days !== null && days >= 0 && days <= 7;
+}).length);
 function handleTokenCreated(token) {
     onTokenCreated(token);
     listTokens();
@@ -44,6 +91,11 @@ function handlePreviousPage() {
 	<div class="text-xs text-secondary mb-2">
 		Authenticate to the Windmill API with access tokens.
 	</div>
+	{#if expiringSoonCount > 0}
+		<div class="mb-2">
+			<Alert type="warning" title="{expiringSoonCount} token{expiringSoonCount > 1 ? 's' : ''} expiring within 7 days" size="xs" />
+		</div>
+	{/if}
 	<CreateToken
 		{showMcpMode}
 		{openWithMcpMode}
@@ -54,24 +106,32 @@ function handlePreviousPage() {
 	/>
 	<div class="overflow-auto grow min-h-64 max-h-2/3">
 		<TableCustom>
-			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-			<tr slot="header-row">
-				<th>Prefix</th>
-				<th>Label</th>
-				<th>Expiration</th>
-				<th>Scopes</th>
-				<th></th>
-			</tr>
+
+			{#snippet headerRow()}
+						<tr >
+					<th>Prefix</th>
+					<th>Label</th>
+					<th>Expiration</th>
+					<th>Scopes</th>
+					<th></th>
+				</tr>
+					{/snippet}
 			{#snippet body()}
 				<tbody>
 					{#if tokens && tokens.length > 0}
-						{#each tokens as { token_prefix, expiration, label, scopes }}
+						{#each tokens as { token_prefix, expiration, label, scopes } (token_prefix)}
+							{@const badge = expirationBadge(expiration, label)}
 							<tr>
 								<td class="w-32 text-xs text-primary">{token_prefix}****</td>
 								<td class="min-w-0 max-w-32 truncate text-xs text-primary">{label ?? ''}</td>
-								<td class="w-24 whitespace-nowrap text-xs text-secondary"
-									>{displayDate(expiration ?? '')}</td
-								>
+								<td class="w-40 whitespace-nowrap text-xs text-secondary">
+									<div class="flex items-center gap-1.5">
+										{displayDate(expiration ?? '')}
+										{#if badge}
+											<Badge color={badge.color} small>{badge.text}</Badge>
+										{/if}
+									</div>
+								</td>
 								<td
 									class="min-w-0 max-w-48 truncate text-xs text-secondary"
 									title={scopes?.join(', ') ?? ''}>{scopes?.join(', ') ?? ''}</td

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -485,7 +485,6 @@ const displayMode = $derived.by(() => {
 				<Popover
 					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 					usePointerDownOutside
-					floatingClass="!z-20"
 				>
 					{#snippet trigger()}
 						<Button

package/package/components/sidebar/CriticalAlertModal.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { onMount, onDestroy } from 'svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { onMount, onDestroy } from 'svelte';
 import CriticalAlertModalInner from './CriticalAlertModalInner.svelte';
 import { SettingService } from '../../gen';
 import { sendUserToast } from '../../toast';
@@ -11,22 +12,14 @@ import Toggle from '../Toggle.svelte';
 import { BellOff, Bell, ExternalLink, Settings } from 'lucide-svelte';
 import { base } from '../../base';
 import Notification from '../common/alert/Notification.svelte';
-export let open = false;
-export let numUnacknowledgedCriticalAlerts = 0;
-export let muteSettings;
-let workspaceContext = false;
-let childRef;
-$: {
-    setupApiFunctions(workspaceContext);
-}
+let { open = $bindable(false), numUnacknowledgedCriticalAlerts = $bindable(0), muteSettings = $bindable() } = $props();
+let workspaceContext = $state(false);
+let childRef = $state();
 function setupApiFunctions(_ctx) {
     getCriticalAlerts = withSuperadminLogic(SettingService.getCriticalAlerts, SettingService.workspaceGetCriticalAlerts);
     acknowledgeCriticalAlert = withSuperadminLogic(SettingService.acknowledgeCriticalAlert, SettingService.workspaceAcknowledgeCriticalAlert);
     acknowledgeAllCriticalAlerts = withSuperadminLogic(SettingService.acknowledgeAllCriticalAlerts, SettingService.workspaceAcknowledgeAllCriticalAlerts);
 }
-$: isCriticalAlertsUIOpen.set(open);
-$: if ($isCriticalAlertsUIOpen)
-    open = $isCriticalAlertsUIOpen;
 let checkForNewAlertsInterval;
 let checkingForNewAlerts = false;
 const withSuperadminLogic = (superadminFunction, workspaceFunction) => {
@@ -42,9 +35,9 @@ const withSuperadminLogic = (superadminFunction, workspaceFunction) => {
         }
     };
 };
-let getCriticalAlerts;
-let acknowledgeCriticalAlert;
-let acknowledgeAllCriticalAlerts;
+let getCriticalAlerts = $state();
+let acknowledgeCriticalAlert = $state();
+let acknowledgeAllCriticalAlerts = $state();
 setupApiFunctions();
 onMount(async () => {
     await updateHasUnacknowledgedCriticalAlerts(false);
@@ -63,7 +56,7 @@ async function saveWorkSpaceMuteSetting() {
         }
     });
     sendUserToast(`Critical alert UI mute settings changed.\nPlease reload page for UI changes to take effect.`);
-    childRef.refreshAlerts();
+    childRef?.refreshAlerts();
 }
 async function saveGlobalMuteSetting() {
     await SettingService.setGlobal({
@@ -71,7 +64,7 @@ async function saveGlobalMuteSetting() {
         requestBody: { value: muteSettings.global }
     });
     sendUserToast(`Critical alert UI mute settings changed.\nPlease reload page for UI changes to take effect.`);
-    childRef.refreshAlerts();
+    childRef?.refreshAlerts();
 }
 async function updateHasUnacknowledgedCriticalAlerts(sendToast = false) {
     if (typeof document !== 'undefined' && document.visibilityState !== 'visible') {
@@ -129,9 +122,19 @@ async function updateHasUnacknowledgedCriticalAlerts(sendToast = false) {
     }
 }
 async function acknowledgeAlert(id) {
-    await acknowledgeCriticalAlert({ id });
+    await acknowledgeCriticalAlert?.({ id });
     updateHasUnacknowledgedCriticalAlerts();
 }
+run(() => {
+    setupApiFunctions(workspaceContext);
+});
+run(() => {
+    if ($isCriticalAlertsUIOpen)
+        open = $isCriticalAlertsUIOpen;
+});
+run(() => {
+    isCriticalAlertsUIOpen.set(open);
+});
 </script>
 
 <Modal2
@@ -141,10 +144,10 @@ async function acknowledgeAlert(id) {
 	fixedHeight="lg"
 	fixedWidth="lg"
 >
-	<svelte:fragment slot="header-left">
+	{#snippet headerLeft()}
 		<Notification notificationCount={numUnacknowledgedCriticalAlerts} notificationLimit={9999} />
-	</svelte:fragment>
-	<svelte:fragment slot="header-right">
+	{/snippet}
+	{#snippet headerRight()}
 		<List horizontal>
 			{#if $superadmin || $userStore?.is_admin}
 				<Popover
@@ -152,7 +155,7 @@ async function acknowledgeAlert(id) {
 					portal="#mute-settings-button"
 					contentClasses="p-4"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<div id="mute-settings-button">
 							<Button variant="default" nonCaptureEvent>
 								{#if muteSettings.global || muteSettings.workspace}
@@ -162,8 +165,8 @@ async function acknowledgeAlert(id) {
 								{/if}
 							</Button>
 						</div>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
+					{/snippet}
+					{#snippet content()}
 						<List justify="start">
 							<div class="w-full">
 								{#if $superadmin}
@@ -189,7 +192,7 @@ async function acknowledgeAlert(id) {
 								/>
 							</div>
 						</List>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{/if}
 
@@ -199,14 +202,14 @@ async function acknowledgeAlert(id) {
 					portal="#settings-button"
 					contentClasses="p-4"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<div id="settings-button">
 							<Button variant="default" nonCaptureEvent>
 								<Settings size="16" />
 							</Button>
 						</div>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
+					{/snippet}
+					{#snippet content()}
 						<List justify="start" gap="none">
 							<div class="w-full">
 								<Button
@@ -234,7 +237,7 @@ async function acknowledgeAlert(id) {
 								</Button>
 							</div>
 						</List>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{:else}
 				<Button
@@ -250,7 +253,7 @@ async function acknowledgeAlert(id) {
 				</Button>
 			{/if}
 		</List>
-	</svelte:fragment>
+	{/snippet}
 
 	<CriticalAlertModalInner
 		bind:workspaceContext

package/package/components/sidebar/CriticalAlertModal.svelte.d.ts

@@ -1,22 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CriticalAlertModal: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     open?: boolean;
     numUnacknowledgedCriticalAlerts?: number;
     muteSettings: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CriticalAlertModal = InstanceType<typeof CriticalAlertModal>;
+}
+declare const CriticalAlertModal: import("svelte").Component<Props, {}, "open" | "numUnacknowledgedCriticalAlerts" | "muteSettings">;
+type CriticalAlertModal = ReturnType<typeof CriticalAlertModal>;
 export default CriticalAlertModal;

package/package/components/sidebar/CriticalAlertTable.svelte

@@ -8,18 +8,9 @@ import { devopsRole } from '../../stores';
 import List from '../common/layout/List.svelte';
 import { Skeleton } from '../common';
 import Linkify from './Linkify.svelte';
-export let alerts;
-export let hideAcknowledged = false;
-export let goToNextPage;
-export let goToPreviousPage;
-export let acknowledgeAlert;
-export let acknowledgeAll;
-export let numUnacknowledgedCriticalAlerts;
-export let page = 1;
-export let hasMore = true;
-export let pageSize = 0;
-let headerHeight = 0;
-let contentHeight = 0;
+let { alerts, hideAcknowledged = false, goToNextPage, goToPreviousPage, acknowledgeAlert, acknowledgeAll, numUnacknowledgedCriticalAlerts, page = $bindable(1), hasMore = true, pageSize = 0 } = $props();
+let headerHeight = $state(0);
+let contentHeight = $state(0);
 function formatDate(dateString) {
     if (!dateString)
         return '';
@@ -33,7 +24,7 @@ function formatDate(dateString) {
         second: '2-digit'
     }).format(date);
 }
-$: availableHeight = (contentHeight - headerHeight - pageSize - 1) / pageSize;
+let availableHeight = $derived((contentHeight - headerHeight - pageSize - 1) / pageSize);
 </script>
 
 <div class="relative grow min-h-0 w-full">

package/package/components/sidebar/CriticalAlertTable.svelte.d.ts

@@ -1,17 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CriticalAlertTable: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     alerts: any[];
     hideAcknowledged?: boolean;
     goToNextPage: () => void;
@@ -22,8 +9,7 @@ declare const CriticalAlertTable: $$__sveltets_2_IsomorphicComponent<{
     page?: number;
     hasMore?: boolean;
     pageSize?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CriticalAlertTable = InstanceType<typeof CriticalAlertTable>;
+}
+declare const CriticalAlertTable: import("svelte").Component<Props, {}, "page">;
+type CriticalAlertTable = ReturnType<typeof CriticalAlertTable>;
 export default CriticalAlertTable;

package/package/components/sidebar/DarkModeToggle.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import { Moon, Sun } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import DarkModeObserver from '../DarkModeObserver.svelte';
-export let darkMode = document.documentElement.classList.contains('dark');
-export let forcedDarkMode = true;
+let { darkMode = $bindable(document.documentElement.classList.contains('dark')), forcedDarkMode = true } = $props();
 export function toggle() {
     if (!document.documentElement.classList.contains('dark')) {
         document.documentElement.classList.add('dark');
@@ -20,7 +19,7 @@ export function toggle() {
 		'text-2xs m-1 p-2 rounded-lg flex flex-row gap-2 justify-center',
 		forcedDarkMode ? 'text-white hover:bg-gray-600' : 'text-secondary hover:bg-surface-hover'
 	)}
-	on:click={toggle}
+	onclick={toggle}
 >
 	{#if darkMode}
 		<Sun class="w-4 h-4" />

package/package/components/sidebar/DarkModeToggle.svelte.d.ts

@@ -1,24 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DarkModeToggle: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     darkMode?: boolean;
     forcedDarkMode?: boolean;
-    toggle?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const DarkModeToggle: import("svelte").Component<Props, {
     toggle: () => void;
-}, string>;
-type DarkModeToggle = InstanceType<typeof DarkModeToggle>;
+}, "darkMode">;
+type DarkModeToggle = ReturnType<typeof DarkModeToggle>;
 export default DarkModeToggle;

package/package/components/sidebar/FavoriteMenu.svelte

@@ -4,7 +4,7 @@
         flow: `/flows/get/${path}`,
         app: `/apps/get/${path}`,
         raw_app: `/apps_raw/get/${path}`,
-        asset: `#dbmanager:${path}`
+        asset: '#'
     }[kind];
 }
 export function getFavoriteLabel(path, kind) {

package/package/components/sidebar/MenuButton.svelte

@@ -10,7 +10,7 @@
 
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import Popover from '../Popover.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import SideBarNotification from './SideBarNotification.svelte';
 import { conditionalMelt } from '../../utils';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
@@ -18,7 +18,7 @@ let { aiId = undefined, aiDescription = undefined, label = undefined, sublabel =
 let buttonRef = $state(undefined);
 let dispatch = createEventDispatcher();
 // Dynamic component based on whether href is provided
-const Element = href ? 'a' : 'button';
+const Element = untrack(() => href) ? 'a' : 'button';
 </script>
 
 {#if !disabled}

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -1,13 +1,14 @@
-<script lang="ts">import { enterpriseLicense, userStore, workspaceStore, awarenessStore } from '../../stores';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { enterpriseLicense, userStore, workspaceStore, awarenessStore } from '../../stores';
 import { BROWSER } from 'esm-env';
 import { WebsocketProvider } from 'y-websocket';
 import * as Y from 'yjs';
 import { page } from '$app/stores';
 import { slide } from 'svelte/transition';
 const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws';
-let awareness = undefined;
+let awareness = $state(undefined);
 let wsProvider = undefined;
-let connected = false;
+let connected = $state(false);
 function connectWorkspace(workspace) {
     const ydoc = new Y.Doc();
     wsProvider = new WebsocketProvider(`${wsProtocol}://${window.location.host}/ws_mp/`, workspace, ydoc);
@@ -30,11 +31,15 @@ function connectWorkspace(workspace) {
         setPeers();
     });
 }
-$: awareness?.setLocalState({
-    name: $userStore?.username,
-    url: $page.url.pathname
+run(() => {
+    awareness?.setLocalState({
+        name: $userStore?.username,
+        url: $page.url.pathname
+    });
+});
+run(() => {
+    $enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore);
 });
-$: $enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore);
 function showActivity(url) {
     if (url.startsWith('/scripts/add')) {
         return 'Creating a script';

package/package/components/sidebar/MultiplayerMenu.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MultiplayerMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MultiplayerMenu = InstanceType<typeof MultiplayerMenu>;
+declare const MultiplayerMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type MultiplayerMenu = ReturnType<typeof MultiplayerMenu>;
 export default MultiplayerMenu;

package/package/components/sidebar/SideBarNotification.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">import Notification from '../common/alert/Notification.svelte';
-export let notificationCount = 0;
-export let small = false;
+let { notificationCount = 0, small = false } = $props();
 </script>
 
 {#if !small}

package/package/components/sidebar/SideBarNotification.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SideBarNotification: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     notificationCount?: number;
     small?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SideBarNotification = InstanceType<typeof SideBarNotification>;
+}
+declare const SideBarNotification: import("svelte").Component<Props, {}, "">;
+type SideBarNotification = ReturnType<typeof SideBarNotification>;
 export default SideBarNotification;

package/package/components/sidebar/SidebarContent.svelte

@@ -14,7 +14,7 @@ import { twMerge } from 'tailwind-merge';
 import { onMount } from 'svelte';
 import { base } from '../../base';
 import { changelogs } from './changelogs';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import SideBarNotification from './SideBarNotification.svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
 import NatsIcon from '../icons/NatsIcon.svelte';
@@ -292,10 +292,10 @@ let triggerMenuLinks = $derived([
         aiId: 'sidebar-menu-link-schedules',
         aiDescription: 'Button to navigate to schedules'
     },
-    ...allTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href))
+    ...allTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || page.url.pathname.includes(link.href))
 ]);
 let extraTriggerLinks = $derived(allTriggerLinks.filter((link) => {
-    return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind);
+    return !page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind);
 }));
 let secondaryMenuLinks = $derived([
     // {

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -6,7 +6,7 @@ import { Menu, MenuItem } from '../meltComponents';
 import WorkspaceIcon from '../workspace/WorkspaceIcon.svelte';
 import { goto } from '../../navigation';
 import { base } from '../../base';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { switchWorkspace } from '../../storeUtils';
 import MultiplayerMenu from './MultiplayerMenu.svelte';
 import { enterpriseLicense } from '../../stores';
@@ -35,11 +35,11 @@ async function toggleSwitchWorkspace(id) {
         '/flows/get/',
         '/apps/get/'
     ];
-    const isOnEditPage = editPages.some((editPage) => $page.route.id?.includes(editPage) ?? false);
+    const isOnEditPage = editPages.some((editPage) => page.route.id?.includes(editPage) ?? false);
     if (!isOnEditPage) {
         switchWorkspace(id);
-        if ($page.url.searchParams.get('workspace')) {
-            $page.url.searchParams.set('workspace', id);
+        if (page.url.searchParams.get('workspace')) {
+            page.url.searchParams.set('workspace', id);
         }
     }
     else {

package/package/components/splitPanes/AnimatedPane.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import {} from 'svelte';
+<script lang="ts">import { untrack } from 'svelte';
 import { Pane } from 'svelte-splitpanes';
 import { cubicOut } from 'svelte/easing';
 let { duration = 300, easing = cubicOut, size = $bindable(), opened, children, ...props } = $props();
-let t = $state(opened ? 1 : 0);
+let t = $state(untrack(() => opened) ? 1 : 0);
 let computedSize = $derived((opened ? easing(t) : 1 - easing(1 - t)) * size);
 let lastTValue = 0;
 let loopIsRunning = false;