Add tests for themes

* master:
  Fix " > base64State is not defined"
  chore(deps-dev): bump svelte-preprocess from 4.8.0 to 4.9.4
  chore(deps-dev): bump eslint-plugin-cypress from 2.11.3 to 2.12.1
  chore(deps-dev): bump cypress from 8.3.1 to 8.4.0
  chore(deps-dev): bump @typescript-eslint/eslint-plugin
  chore(deps): bump js-base64 from 3.7.0 to 3.7.1
  chore(deps-dev): bump svelte from 3.42.5 to 3.42.6
  chore(deps): bump node from 16.9.0 to 16.9.1
  chore(deps-dev): bump prettier from 2.4.0 to 2.4.1
  chore(deps-dev): bump @sveltejs/adapter-static
  chore(deps-dev): bump @typescript-eslint/parser from 4.31.0 to 4.31.1

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
 		// 'plugin:@typescript-eslint/recommended-requiring-type-checking',
 		'prettier'
 	],
-	plugins: ['svelte3', 'tailwindcss', '@typescript-eslint'],
+	plugins: ['svelte3', 'tailwindcss', '@typescript-eslint', 'es'],
 	ignorePatterns: [
 		'docs/*',
 		'*.cjs',
@@ -42,6 +42,7 @@ module.exports = {
 			}
 		],
 		'@typescript-eslint/no-unsafe-member-access': 'off',
-		'@typescript-eslint/no-unsafe-assignment': 'off'
+		'@typescript-eslint/no-unsafe-assignment': 'off',
+		'es/no-regexp-lookbehind-assertions': 'error'
 	}
 };

.github/dependabot.yml

@@ -1,8 +1,20 @@
 version: 2
 updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
-    target-branch: 'develop'
+  - package-ecosystem: docker
+    directory: /
+    target-branch: develop
     schedule:
-      interval: 'weekly'
-      day: 'friday'
+      interval: weekly
+      day: friday
+  - package-ecosystem: github-actions
+    directory: /
+    target-branch: develop
+    schedule:
+      interval: weekly
+      day: friday
+  - package-ecosystem: npm
+    directory: /
+    target-branch: develop
+    schedule:
+      interval: weekly
+      day: friday

.github/workflows/cypress.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   cypress-run:
     runs-on: ubuntu-latest
+    # Update after https://github.com/cypress-io/cypress-docker-images/issues/487
     container: cypress/browsers:node14.16.0-chrome90-ff88
 
     steps:

.github/workflows/deploy.yml

@@ -6,13 +6,14 @@ on:
   pull_request:
     branches:
       - master
+      - develop
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
 
       - name: Checkout
         uses: actions/checkout@v2
@@ -45,6 +46,7 @@ jobs:
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/master' }}
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./docs

.github/workflows/stale.yml

@@ -8,7 +8,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v3
+      - uses: actions/stale@v4
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           exempt-issue-labels: 'retained'

Dockerfile

@@ -6,7 +6,7 @@
 # Stop               : press ctrl + c 
 #                                     or 
 #                                        docker stop mermaid-live-editor
-FROM node:14.17.0 as mermaid-live-editor-builder 
+FROM node:16.9.1 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install

README.md

@@ -1,4 +1,4 @@
-[![Mermaid Live Editor](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/detailed/2ckppp/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/2ckppp/runs) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Mermaid Live Editor](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/detailed/2ckppp/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/2ckppp/runs) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)[![Netlify Status](https://api.netlify.com/api/v1/badges/27fa023d-7c73-4a3f-9791-b3b657a47100/deploy-status)](https://app.netlify.com/sites/mermaidjs/deploys)
 
 # Contributors are welcome!
 
@@ -17,7 +17,7 @@ Edit, preview and share mermaid charts/diagrams.
 
 ## Live demo
 
-You can try out a live version [here](https://mermaid-js.github.io/mermaid-live-editor/).
+You can try out a live version [here](https://mermaid.live/).
 
 ## Docker
 

cypress/integration/themes.spec.ts

@@ -0,0 +1,57 @@
+describe('Test themes', () => {
+	describe('Test light themes', () => {
+		beforeEach(() => {
+			cy.clearLocalStorage();
+			cy.visit('/edit', {
+				onBeforeLoad(win) {
+					cy.stub(win, 'matchMedia')
+						.callThrough()
+						.withArgs('(prefers-color-scheme: dark)')
+						.returns({
+							matches: false
+						});
+				}
+			});
+			cy.contains('Change Theme').click();
+		});
+
+		it('should set light theme as default', () => {
+			cy.contains('light').parent().should('have.class', 'bordered');
+			cy.contains('dark').parent().should('not.have.class', 'bordered');
+			cy.getLocalStorage('themeStore').snapshot();
+		});
+
+		it('should change themes when clicked', () => {
+			cy.contains('light').parent().should('have.class', 'bordered');
+			cy.contains('cupcake').click();
+			cy.contains('cupcake').parent().should('have.class', 'bordered');
+			cy.contains('light').parent().should('not.have.class', 'bordered');
+			cy.contains('dark').parent().should('not.have.class', 'bordered');
+			cy.getLocalStorage('themeStore').snapshot();
+		});
+	});
+
+	describe('Test dark mode', () => {
+		// eslint-disable-next-line mocha/no-hooks-for-single-case
+		beforeEach(() => {
+			cy.clearLocalStorage();
+			cy.visit('/edit', {
+				onBeforeLoad(win) {
+					cy.stub(win, 'matchMedia')
+						.callThrough()
+						.withArgs('(prefers-color-scheme: dark)')
+						.returns({
+							matches: true
+						});
+				}
+			});
+			cy.contains('Change Theme').click();
+		});
+
+		it('should set dark theme as default', () => {
+			cy.contains('light').parent().should('not.have.class', 'bordered');
+			cy.contains('dark').parent().should('have.class', 'bordered');
+			cy.getLocalStorage('themeStore').snapshot();
+		});
+	});
+});

cypress/snapshots.js

@@ -16,7 +16,7 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "8.3.1",
+  "__version": "8.4.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}"
@@ -24,5 +24,29 @@ module.exports = {
     "should not dim diagram when code is in sync": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Testing\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}"
     }
+  },
+  "Test themes": {
+    "should set light theme as default": {
+      "1": "{\"theme\":\"light\",\"isDark\":false}"
+    },
+    "should change themes when clicked": {
+      "1": "{\"theme\":\"cupcake\",\"isDark\":false}"
+    },
+    "should set dark theme as default": {
+      "1": "{\"theme\":\"dark\",\"isDark\":true}"
+    },
+    "Test light themes": {
+      "should set light theme as default": {
+        "1": "{\"theme\":\"light\",\"isDark\":false}"
+      },
+      "should change themes when clicked": {
+        "1": "{\"theme\":\"cupcake\",\"isDark\":false}"
+      }
+    },
+    "Test dark mode": {
+      "should set dark theme as default": {
+        "1": "{\"theme\":\"dark\",\"isDark\":true}"
+      }
+    }
   }
 }

package.json

@@ -15,42 +15,44 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.17",
+		"@sveltejs/adapter-static": "1.0.0-next.19",
 		"@sveltejs/kit": "1.0.0-next.147",
 		"@types/mermaid": "^8.2.7",
-		"@typescript-eslint/eslint-plugin": "^4.30.0",
-		"@typescript-eslint/parser": "^4.30.0",
-		"autoprefixer": "^10.3.3",
+		"@typescript-eslint/eslint-plugin": "^4.31.1",
+		"@typescript-eslint/parser": "^4.31.1",
+		"autoprefixer": "^10.3.4",
 		"chai": "^4.3.4",
 		"cssnano": "^5.0.8",
-		"cypress": "8.3.1",
+		"cypress": "8.4.0",
 		"cypress-localstorage-commands": "^1.5.0",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
-		"eslint-plugin-cypress": "^2.11.3",
+		"eslint-plugin-cypress": "^2.12.1",
+		"eslint-plugin-es": "^4.1.0",
 		"eslint-plugin-mocha": "^9.0.0",
 		"eslint-plugin-postcss-modules": "^1.2.1",
-		"eslint-plugin-svelte3": "^3.2.0",
+		"eslint-plugin-svelte3": "^3.2.1",
 		"eslint-plugin-tailwindcss": "^1.14.3",
 		"husky": "^7.0.2",
 		"lint-staged": "^11.1.2",
 		"mocha": "^9.1.1",
 		"postcss": "^8.3.6",
 		"postcss-load-config": "^3.1.0",
-		"prettier": "~2.3.2",
+		"prettier": "~2.4.1",
 		"prettier-plugin-svelte": "^2.4.0",
-		"svelte": "^3.42.4",
-		"svelte-preprocess": "^4.8.0",
-		"tailwindcss": "^2.2.9",
+		"svelte": "^3.42.6",
+		"svelte-preprocess": "^4.9.4",
+		"tailwindcss": "^2.2.15",
 		"tslib": "^2.3.1",
-		"typescript": "^4.4.2"
+		"typescript": "^4.4.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.2.0",
 		"analytics": "^0.7.14",
-		"js-base64": "^3.6.1",
+		"daisyui": "^1.14.0",
+		"js-base64": "^3.7.1",
 		"mermaid": "^8.12.1",
 		"moment": "^2.29.1",
 		"monaco-editor": "^0.27.0",

src/app.html

@@ -8,7 +8,7 @@
 			name="og:image"
 			content="https://github.com/mermaid-js/mermaid/raw/develop/img/header.png"
 		/>
-		<link rel="canonical" href="https://mermaid-js.github.io/mermaid-live-editor/" />
+		<link rel="canonical" href="https://mermaid.live" />
 		<meta
 			name="description"
 			content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript."

src/app.postcss

@@ -2,17 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-.nav-btn {
-	@apply lg:p-2 py-3 px-0 block border-b-2 border-transparent hover:border-white;
-}
-
-.btn {
-	@apply bg-indigo-500 hover:bg-indigo-700 rounded px-4 shadow;
+.input {
+	@apply flex-1 border-primary border-solid border-2 rounded;
 }
 .action-btn {
-	@apply rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500;
-}
-
-.input {
-	@apply flex-1 border-indigo-400 border-solid border-2 rounded;
+	@apply btn btn-primary;
 }

src/lib/components/actions.svelte

@@ -153,39 +153,53 @@
 	<div class="flex flex-wrap gap-2 m-2">
 		{#if isClipboardAvailable()}
 			<button class="action-btn w-full" on:click={onCopyClipboard}
-				><i class="far fa-copy" /> Copy Image to clipboard
+				><i class="far fa-copy mr-2" /> Copy Image to clipboard
 			</button>
 		{/if}
 		<button class="action-btn flex-auto" on:click={onDownloadPNG}>
-			<i class="fas fa-download" /> PNG
+			<i class="fas fa-download mr-2" /> PNG
 		</button>
 		<button class="action-btn flex-auto" on:click={onDownloadSVG}>
-			<i class="fas fa-download" /> SVG
+			<i class="fas fa-download mr-2" /> SVG
 		</button>
 		<button class="action-btn flex-auto">
-			<a target="_blank" href={iUrl}><i class="fas fa-external-link-alt" /> PNG</a>
+			<a target="_blank" href={iUrl}><i class="fas fa-external-link-alt mr-2" /> PNG</a>
 		</button>
 		<button class="action-btn flex-auto">
-			<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt" /> SVG</a>
+			<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt mr-2" /> SVG</a>
 		</button>
 
 		<div class="flex gap-2 items-center">
 			PNG size
-			<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} />
-			<label for="autosize">Auto</label>
-			<input type="radio" value="width" id="width-active" bind:group={imagemodeselected} />
-			<label for="width">Width</label>
-			<input type="radio" value="height" id="height-active" bind:group={imagemodeselected} />
-			<label for="height">Height</label>
+			<label for="autosize">
+				<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
+			</label>
+
+			<label for="width">
+				<input type="radio" value="width" id="width" bind:group={imagemodeselected} /> Width
+			</label>
+
+			<label for="height">
+				<input type="radio" value="height" id="height" bind:group={imagemodeselected} /> Height
+			</label>
+
 			{#if imagemodeselected !== 'auto'}
-				<input id="height" type="number" min="3" max="10000" bind:value={userimagesize} />
+				<input
+					id="height"
+					class="input"
+					type="number"
+					min="3"
+					max="10000"
+					bind:value={userimagesize} />
 			{/if}
 		</div>
 
 		<div class="w-full flex gap-2 items-center">
 			<input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
 			<label for="markdown">
-				<button class="btn text-white flex-auto" on:click={onCopyMarkdown}> Copy Markdown </button>
+				<button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
+					Copy Markdown
+				</button>
 			</label>
 		</div>
 
@@ -197,7 +211,7 @@
 				bind:value={gistURL}
 				placeholder="Enter Gist URL" />
 			<label for="gist">
-				<button class="btn text-white flex-auto" on:click={loadGist}> Load Gist </button>
+				<button class="btn btn-primary btn-md flex-auto" on:click={loadGist}> Load Gist </button>
 			</label>
 		</div>
 		{#if isNetlify}

src/lib/components/card/card.svelte

@@ -7,21 +7,22 @@
 	export let tabs: Tab[] = [];
 	export let title: string;
 	$: isOpen = isCloseable ? isOpen : true;
+	$: isTabsShown = isOpen && tabs.length > 0;
 </script>
 
-<div class="bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col">
+<div class="card rounded overflow-hidden m-2 flex-grow flex flex-col shadow-2xl">
 	<div
-		class="bg-indigo-400 border-gray-400 p-2 flex-none cursor-pointer"
+		class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
 		on:click={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
 			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />
-			<div class="flex gap-x-4 items-center text-white">
+			<div class="flex gap-x-4 items-center {isTabsShown ? '-mt-2' : ''}">
 				<slot name="actions" />
 			</div>
 		</div>
 	</div>
 	{#if isOpen}
-		<div class="flex-grow overflow-auto" transition:slide>
+		<div class="card-body p-0 flex-grow overflow-auto text-base-content" transition:slide>
 			<slot />
 		</div>
 	{/if}

src/lib/components/card/tabs.svelte

@@ -17,25 +17,20 @@
 </script>
 
 <div class="flex cursor-default">
-	<span class="text-white mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
+	<span class="mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
 		{#if isCloseable}
 			<i class="fas fa-chevron-right icon" class:isOpen />
 		{/if}
 		{title}</span>
 	{#if isOpen && tabs}
-		<ul class="flex flex-wrap flex-row" transition:fade>
+		<ul class="tabs" transition:fade>
 			{#each tabs as tab}
-				<li class="mr-2 last:mr-0 w-28 h-6 flex-auto text-center">
-					<div
-						class="text cursor-pointer font-semibold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t flex justify-center items-center leading-normal {activeTabID ===
-						tab.id
-							? 'text-indigo-500 bg-white border-white'
-							: 'text-white bg-indigo-500 border-indigo-500 hover:bg-indigo-600'}"
-						on:click|stopPropagation={() => toggleTabs(tab)}>
-						<i class="{tab.icon} mr-1" />
-						{tab.title}
-					</div>
-				</li>
+				<div
+					class="tab tab-lifted text-primary-content {activeTabID === tab.id ? 'tab-active' : ''}"
+					on:click|stopPropagation={() => toggleTabs(tab)}>
+					<i class="mr-1 {tab.icon}" />
+					{tab.title}
+				</div>
 			{/each}
 		</ul>
 	{/if}

src/lib/components/editor/editor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { EditorEvents } from '$lib/types';
 	import { codeStore } from '$lib/util/state';
+	import { themeStore } from '$lib/util/theme';
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { initEditor } from './util';
@@ -17,7 +18,7 @@
 		minimap: {
 			enabled: false
 		},
-		theme: 'mermaidTheme',
+		theme: 'mermaid',
 		overviewRulerLanes: 0
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
@@ -33,6 +34,10 @@
 		editor && Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
 	}
 
+	themeStore.subscribe(({ isDark }) => {
+		editor && Monaco?.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
+	});
+
 	const dispatch = createEventDispatcher<EditorEvents>();
 	const loadMonaco = async () => {
 		let i = 0;
@@ -62,7 +67,7 @@
 				text
 			});
 		});
-
+		Monaco?.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({
 				height: entries[0].contentRect.height,

src/lib/components/editor/util.ts

@@ -5,73 +5,545 @@
 export const initEditor = (monacoEditor): void => {
 	monacoEditor.languages.register({ id: 'mermaid' });
 
-	// Register a tokens provider for the language
-	monacoEditor.languages.setMonarchTokensProvider('mermaid', {
-		typeKeywords: [
-			'graph',
-			'stateDiagram',
-			'sequenceDiagram',
-			'classDiagram',
-			'pie',
-			'erDiagram',
-			'flowchart',
-			'gantt',
-			'gitGraph',
-			'journey'
-		],
-		keywords: ['participant', 'as'],
-		arrows: ['---', '===', '-->', '==>', '->>', '->'],
-		tokenizer: {
-			root: [
-				[/[{}]/, 'delimiter.bracket'],
-				[/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } }],
-				[/[-=>ox]+/, { cases: { '@arrows': 'transition' } }],
-				[/[[{(}]+.+?[)\]}]+/, 'string'],
-				[/".*"/, 'string']
+	const requirementDiagrams = [
+		'requirement',
+		'functionalRequirement',
+		'interfaceRequirement',
+		'performanceRequirement',
+		'physicalRequirement',
+		'designConstraint'
+	];
+
+	const keywords: {
+		[key: string]: {
+			typeKeywords: string[];
+			blockKeywords: string[];
+			keywords: string[];
+		};
+	} = {
+		flowchart: {
+			typeKeywords: ['flowchart', 'flowchart-v2', 'graph'],
+			blockKeywords: ['subgraph', 'end'],
+			keywords: [
+				'TB',
+				'TD',
+				'BT',
+				'RL',
+				'LR',
+				'click',
+				'call',
+				'href',
+				'_self',
+				'_blank',
+				'_parent',
+				'_top',
+				'linkStyle',
+				'style',
+				'classDef',
+				'class',
+				'direction',
+				'interpolate'
 			]
 		},
-		whitespace: [
-			[/[ \t\r\n]+/, 'white'],
-			[/%%.*$/, 'comment']
+		sequenceDiagram: {
+			typeKeywords: ['sequenceDiagram'],
+			blockKeywords: ['alt', 'par', 'and', 'loop', 'else', 'end', 'rect', 'opt', 'alt', 'rect'],
+			keywords: [
+				'participant',
+				'as',
+				'Note',
+				'note',
+				'right of',
+				'left of',
+				'over',
+				'activate',
+				'deactivate',
+				'autonumber',
+				'title'
+			]
+		},
+		classDiagram: {
+			typeKeywords: ['classDiagram', 'classDiagram-v2'],
+			blockKeywords: ['class'],
+			keywords: [
+				'link',
+				'click',
+				'callback',
+				'call',
+				'href',
+				'cssClass',
+				'direction',
+				'TB',
+				'BT',
+				'RL',
+				'LR'
+			]
+		},
+		stateDiagram: {
+			typeKeywords: ['stateDiagram', 'stateDiagram-v2'],
+			blockKeywords: ['state', 'note', 'end'],
+			keywords: ['state', 'as', 'hide empty description', 'direction', 'TB', 'BT', 'RL', 'LR']
+		},
+		erDiagram: {
+			typeKeywords: ['erDiagram'],
+			blockKeywords: [],
+			keywords: []
+		},
+		journey: {
+			typeKeywords: ['journey'],
+			blockKeywords: ['section'],
+			keywords: ['title']
+		},
+		info: {
+			typeKeywords: ['info'],
+			blockKeywords: [],
+			keywords: ['showInfo']
+		},
+		gantt: {
+			typeKeywords: ['gantt'],
+			blockKeywords: [],
+			keywords: [
+				'title',
+				'dateFormat',
+				'axisFormat',
+				'todayMarker',
+				'section',
+				'excludes',
+				'inclusiveEndDates'
+			]
+		},
+		requirementDiagram: {
+			typeKeywords: ['requirement', 'requirementDiagram'],
+			blockKeywords: requirementDiagrams.concat('element'),
+			keywords: []
+		},
+		gitGraph: {
+			typeKeywords: ['gitGraph'],
+			blockKeywords: [],
+			keywords: ['commit', 'branch', 'merge', 'reset', 'checkout', 'LR', 'BT']
+		},
+		pie: {
+			typeKeywords: ['pie'],
+			blockKeywords: [],
+			keywords: ['title', 'showData']
+		}
+	};
+
+	// Register a tokens provider for the mermaid language
+	monacoEditor.languages.setMonarchTokensProvider('mermaid', {
+		...Object.entries(keywords)
+			.map((entry) =>
+				Object.fromEntries(
+					Object.entries(entry[1]).map((deepEntry) => [
+						entry[0] + deepEntry[0][0].toUpperCase() + deepEntry[0].slice(1),
+						deepEntry[1]
+					])
+				)
+			)
+			.reduce((overallKeywords, nextKeyword) => ({ ...overallKeywords, ...nextKeyword }), {}),
+		tokenizer: {
+			root: [
+				[/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }],
+				[/%%$/, { token: 'string', nextEmbedded: '@pop' }],
+				[/^\s*gitGraph/m, 'typeKeyword', 'gitGraph'],
+				[/^\s*info/m, 'typeKeyword', 'info'],
+				[/^\s*pie/m, 'typeKeyword', 'pie'],
+				[/^\s*(flowchart|flowchart-v2|graph)/m, 'typeKeyword', 'flowchart'],
+				[/^\s*sequenceDiagram/, 'typeKeyword', 'sequenceDiagram'],
+				[/^\s*classDiagram(-v2)?/, 'typeKeyword', 'classDiagram'],
+				[/^\s*journey/, 'typeKeyword', 'journey'],
+				[/^\s*gantt/, 'typeKeyword', 'gantt'],
+				[/^\s*stateDiagram(-v2)?/, 'typeKeyword', 'stateDiagram'],
+				[/^\s*erDiagram/, 'typeKeyword', 'erDiagram'],
+				[/^\s*requirement(Diagram)?/, 'typeKeyword', 'requirementDiagram'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			gitGraph: [
+				[/option(?=s)/, { token: 'typeKeyword', next: 'optionsGitGraph' }],
+				[/(^\s*branch|reset|merge|checkout)(.*$)/, ['keyword', 'variable']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@gitGraphBlockKeywords': 'typeKeyword',
+							'@gitGraphKeywords': 'keyword'
+						}
+					}
+				],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/".*?"/, 'string'],
+				[/\^/, 'delimiter.bracket']
+			],
+			optionsGitGraph: [
+				[/s$/, { token: 'typeKeyword', nextEmbedded: 'json', matchOnlyAtLineStart: false }],
+				['end', { token: 'typeKeyword', next: '@pop', nextEmbedded: '@pop' }]
+			],
+			info: [
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@infoBlockKeywords': 'typeKeyword',
+							'@infoKeywords': 'keyword'
+						}
+					}
+				]
+			],
+			pie: [
+				[/(title)(.*$)/, ['keyword', 'string']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@pieBlockKeywords': 'typeKeyword',
+							'@pieKeywords': 'keyword'
+						}
+					}
+				],
+				[/".*?"/, 'string'],
+				[/\s*\d+/, 'number'],
+				[/:/, 'delimiter.bracket'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			flowchart: [
+				[/[ox]?(--+|==+)[ox]/, 'transition'],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@flowchartBlockKeywords': 'typeKeyword',
+							'@flowchartKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/\|+.+?\|+/, 'string'],
+				[/\[+(\\.+?[\\/]|\/.+?[/\\])\]+/, 'string'],
+				[/[[>]+[^\]|[]+?\]+/, 'string'],
+				[/{+.+?}+/, 'string'],
+				[/\(+.+?\)+/, 'string'],
+				[/-\.+->?/, 'transition'],
+				[/(-[-.])([^->]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']],
+				[/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']],
+				[/<?(--+|==+)>|===+|---+/, 'transition'],
+				[/:::/, 'transition'],
+				[/[;&]/, 'delimiter.bracket'],
+				[/".*?"/, 'string'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			sequenceDiagram: [
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@sequenceDiagramBlockKeywords': 'typeKeyword',
+							'@sequenceDiagramKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/(--?>?>|--?[)x])[+-]?/, 'transition'],
+				[/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			classDiagram: [
+				[/(?!class\s)([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']],
+				[/(\*|<\|?|o)?(--|\.\.)(\*|\|?>|o)?/, 'transition'],
+				[/^\s*class\s(?!.*\{)/, 'keyword'],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@classDiagramBlockKeywords': 'typeKeyword',
+							'@classDiagramKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/(<<)(.+?)(>>)/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']],
+				[/".*?"/, 'string'],
+				[/:::/, 'transition'],
+				[/:|\+|-|#|~|\*\s*$|\$\s*$|\(|\)|{|}/, 'delimiter.bracket']
+			],
+			journey: [
+				[/(title)(.*)/, ['keyword', 'string']],
+				[/(section)(.*)/, ['typeKeyword', 'string']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@journeyBlockKeywords': 'typeKeyword',
+							'@journeyKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[
+					/(^\s*.+?)(:)(.*?)(:)(.*?)([,$])/,
+					[
+						'string',
+						'delimiter.bracket',
+						'number',
+						'delimiter.bracket',
+						'variable',
+						'delimiter.bracket'
+					]
+				],
+				[/,/, 'delimiter.bracket'],
+				[/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', 'variable']],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			gantt: [
+				[/(title)(.*)/, ['keyword', 'string']],
+				[/(section)(.*)/, ['typeKeyword', 'string']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@ganttBlockKeywords': 'typeKeyword',
+							'@ganttKeywords': 'keyword'
+						}
+					}
+				],
+				[/(^\s*.*?)(:)/, ['string', 'delimiter.bracket']],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/:/, 'delimiter.bracket']
+			],
+			stateDiagram: [
+				[/note[^:]*$/, { token: 'typeKeyword', next: 'stateDiagramNote' }],
+				['hide empty description', 'keyword'],
+				[/^\s*state\s(?!.*\{)/, 'keyword'],
+				[/(<<)(fork|join|choice)(>>)/, 'annotation'],
+				[/(\[\[)(fork|join|choice)(]])/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@stateDiagramBlockKeywords': 'typeKeyword',
+							'@stateDiagramKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/".*?"/, 'string'],
+				[/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']],
+				[/{|}/, 'delimiter.bracket'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/-->/, 'transition'],
+				[/\[.*?]/, 'string']
+			],
+			stateDiagramNote: [
+				[/^\s*end note$/, { token: 'typeKeyword', next: '@pop' }],
+				[/.*/, 'string']
+			],
+			erDiagram: [
+				[/[}|][o|](--|\.\.)[o|][{|]/, 'transition'],
+				[/".*?"/, 'string'],
+				[/(:)(.*?$)/, ['delimiter.bracket', 'string']],
+				[/:|{|}/, 'delimiter.bracket'],
+				[/([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/[a-zA-Z_-][\w$]*/, 'variable']
+			],
+			requirementDiagram: [
+				[/->|<-|-/, 'transition'],
+				[/(\d+\.)*\d+/, 'number'],
+				[
+					/[a-zA-Z_-][\w$]*/,
+					{
+						cases: {
+							'@requirementDiagramBlockKeywords': 'typeKeyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/:|{|}|\//, 'delimiter.bracket'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/".*?"/, 'string']
+			]
+		}
+	});
+
+	monacoEditor.editor.defineTheme('mermaid-dark', {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [
+			{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
+			{ token: 'transition', foreground: '008800', fontStyle: 'bold' }
 		]
 	});
 
-	monacoEditor.editor.defineTheme('mermaidTheme', {
+	monacoEditor.editor.defineTheme('mermaid', {
 		base: 'vs',
-		inherit: false,
+		inherit: true,
 		rules: [
-			{ token: 'keyword', foreground: '880000', fontStyle: 'bold' },
+			{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
+			{ token: 'keyword', foreground: '649696' },
 			{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
 			{ token: 'string', foreground: 'AA8500' },
 			{ token: 'transition', foreground: '008800', fontStyle: 'bold' },
-			{ token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }
+			{ token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' },
+			{ token: 'annotation', foreground: '4b4b96' },
+			{ token: 'number', foreground: '4b4b96' },
+			{ token: 'comment', foreground: '888c89' },
+			{ token: 'variable', foreground: 'A22889' },
+			{ token: 'type', foreground: '2BDEA8' }
 		]
 	});
 
-	// Register a completion item provider for the new language
+	// Register a completion item provider for the mermaid language
 	monacoEditor.languages.registerCompletionItemProvider('mermaid', {
 		provideCompletionItems: () => {
 			const suggestions = [
 				{
-					label: 'simpleText',
-					kind: monacoEditor.languages.CompletionItemKind.Text,
-					insertText: 'simpleText'
-				},
-				{
-					label: 'testing',
-					kind: monacoEditor.languages.CompletionItemKind.Keyword,
-					insertText: 'testing(${1:condition})',
-					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet
-				},
-				{
-					label: 'ifelse',
+					label: 'loop',
 					kind: monacoEditor.languages.CompletionItemKind.Snippet,
-					insertText: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'),
+					insertText: ['loop ${1:Loop text}', '\t$0', 'end'].join('\n'),
 					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-					documentation: 'If-Else Statement'
-				}
+					documentation: 'Sequence Diagram Loops'
+				},
+				{
+					label: 'alt',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['alt ${1:Describing text}', '\t$0', 'else', '\t', 'end'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'Alternative Path'
+				},
+				{
+					label: 'opt',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['opt ${1:Describing text}', '\t$0', 'end'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'Optional Path'
+				},
+				{
+					label: 'par',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: [
+						'par ${1:[Action 1]}',
+						'\t$0',
+						'and ${2:[Action 2]}',
+						'\t',
+						'and ${3:[Action 3]}',
+						'\t',
+						'end'
+					].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'Parallel Actions'
+				},
+				{
+					label: 'rect',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['rect ${1:rgb(0, 255, 0)}', '\t$0', 'end'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'Background Color'
+				},
+				{
+					label: 'subgraph',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['subgraph ${1:title}', '\t$0', 'end'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'Subgraph'
+				},
+				{
+					label: 'class',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['class ${1:className} {', '\t$0', '}'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'Class'
+				},
+				{
+					label: 'state',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['state ${1:stateName} {', '\t$0', '}'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'State'
+				},
+				{
+					label: 'note',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['note ${1:right of State1}', '\t$0', 'end note'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'State'
+				},
+				{
+					label: 'section',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['section ${1:Go to work}', '\t$0'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'User-journey Section'
+				},
+				{
+					label: 'element',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['element ${1:test_entity} {', '\t$0', '}'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'User-journey Section'
+				},
+				{
+					label: 'options',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['options', '{', '    $0', '}', 'end'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'Git Graph Options'
+				},
+				...requirementDiagrams.map((requirementDiagramType) => ({
+					label: requirementDiagramType,
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: [
+						requirementDiagramType + ' ${1:test_req} {',
+						'\tid: 1',
+						'\ttext: the test text.',
+						'\trisk: high',
+						'\tverifyMethod: test',
+						'}'
+					].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: requirementDiagramType
+						.split(/(?=[A-Z])/)
+						.map((part) => part[0].toUpperCase() + part.slice(1))
+						.join(' ')
+				})),
+				...[
+					...new Set(
+						Object.values(keywords)
+							.map((diagramKeywords) =>
+								Object.entries(diagramKeywords)
+									.filter((keywordType) => keywordType[0] !== 'annotations')
+									.map((entry) => entry[1])
+							)
+							.flat(2)
+					)
+				].map((keyword) => ({
+					label: keyword,
+					kind: monacoEditor.languages.CompletionItemKind.Keyword,
+					insertText: keyword
+				}))
 			];
 			return { suggestions: suggestions };
 		}
 	});
+
+	monacoEditor.languages.setLanguageConfiguration('mermaid', {
+		autoClosingPairs: [
+			{
+				open: '(',
+				close: ')'
+			},
+			{
+				open: '{',
+				close: '}'
+			},
+			{
+				open: '[',
+				close: ']'
+			}
+		],
+		brackets: [
+			['(', ')'],
+			['{', '}'],
+			['[', ']']
+		]
+	});
 };

src/lib/components/history/history.svelte

@@ -90,13 +90,13 @@
 	<div slot="actions">
 		<button
 			id="saveHistory"
-			class="btn"
+			class="btn btn-xs btn-success w-12"
 			on:click|stopPropagation={() => saveHistory()}
 			title="Save current state"><i class="far fa-save" /></button>
 		{#if $historyModeStore !== 'loader'}
 			<button
 				id="clearHistory"
-				class="btn text-red-400"
+				class="btn btn-xs btn-error w-12"
 				on:click|stopPropagation={() => clearHistory()}
 				title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
 		{/if}
@@ -107,7 +107,7 @@
 				<li class="rounded p-2 shadow flex-col">
 					<div class="flex">
 						<div class="flex-1">
-							<div class="flex flex-col">
+							<div class="flex flex-col text-base-content">
 								{#if url}
 									<a
 										href={url}
@@ -121,20 +121,18 @@
 							</div>
 						</div>
 						<div class="flex gap-2 content-center">
-							<button
-								class="rounded px-2 w-24 bg-green-200 hover:bg-green-300"
-								on:click={() => restoreHistory(state)}><i class="fas fa-undo" /> Restore</button>
+							<button class="btn btn-success" on:click={() => restoreHistory(state)}
+								><i class="fas fa-undo mr-1" />Restore</button>
 							{#if type !== 'loader'}
-								<button
-									class="rounded px-2 w-24 bg-red-200 hover:bg-red-300"
-									on:click={() => clearHistory(time)}><i class="fas fa-trash-alt" /> Delete</button>
+								<button class="btn btn-error" on:click={() => clearHistory(time)}
+									><i class="fas fa-trash-alt mr-1" />Delete</button>
 							{/if}
 						</div>
 					</div>
 				</li>
 			{/each}
 		{:else}
-			<div class="m-2 text-gray-600">
+			<div class="m-2">
 				No items in History<br />
 				Click the Save button to save current state and restore it later.<br />
 				Timeline will automatically be saved every minute.

src/lib/components/navbar.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts">
+	import Theme from './theme.svelte';
+
 	interface Link {
 		title: string;
 		href: string;
@@ -37,11 +39,12 @@
 	];
 </script>
 
-<header class="p-2 bg-indigo-400 text-white font-bold flex flex-wrap items-center">
-	<div class="flex-1 flex justify-between items-center">
-		<a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
+<div class="navbar mb-2 shadow-lg bg-primary">
+	<div class="flex-1 px-2 mx-2">
+		<span class="text-lg font-bold">
+			<a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
+		</span>
 	</div>
-
 	<label for="menu-toggle" class="pointer-cursor lg:hidden block"
 		><svg
 			class="fill-current "
@@ -53,28 +56,27 @@
 		></label>
 	<input class="hidden" type="checkbox" id="menu-toggle" />
 
+	<Theme />
 	<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
-		<nav>
-			<ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
-				{#each links as { title, href, icon }}
-					<li>
-						<a class="nav-btn" target="_blank" {href}>
-							{#if icon}
-								<i class={icon} />
-							{/if}
-							{title}</a>
-					</li>
-				{/each}
-			</ul>
-		</nav>
+		<ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
+			{#each links as { title, href, icon }}
+				<li>
+					<a class="btn btn-ghost" target="_blank" {href}>
+						{#if icon}
+							<i class={icon} />
+						{/if}
+						{title}</a>
+				</li>
+			{/each}
+		</ul>
 	</div>
-</header>
+</div>
 
 <style>
 	#menu-toggle:checked + #menu {
 		display: block;
 	}
-	header {
+	.navbar {
 		z-index: 10000;
 	}
 </style>

src/lib/components/preset.svelte

@@ -108,7 +108,8 @@ merge newbranch
 <Card title="Sample Diagrams" isOpen={false}>
 	<div class="flex gap-2 flex-wrap p-2">
 		{#each Object.keys(samples) as sample}
-			<button class="action-btn" on:click={() => loadSampleDiagram(sample)}>{sample}</button>
+			<button class="btn btn-primary normal-case btn-sm" on:click={() => loadSampleDiagram(sample)}
+				>{sample}</button>
 		{/each}
 	</div>
 </Card>

src/lib/components/theme.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { setTheme, themeStore } from '$lib/util/theme';
+
+	const themes = [
+		'🌝  light',
+		'🌚  dark',
+		'🧁  cupcake',
+		'🐝  bumblebee',
+		'✳️  emerald',
+		'🏢  corporate',
+		'🌃  synthwave',
+		'👴  retro',
+		'🤖  cyberpunk',
+		'🌸  valentine',
+		'🎃  halloween',
+		'🌷  garden',
+		'🌲  forest',
+		'🐟  aqua',
+		'👓  lofi',
+		'🖍  pastel',
+		'🧚‍♀️  fantasy',
+		'📝  wireframe',
+		'🏴  black',
+		'💎  luxury',
+		'🧛‍♂️  dracula'
+	];
+</script>
+
+<div class="hidden lg:block dropdown">
+	<div tabindex="0" class="btn btn-ghost ">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="inline-block w-6 h-6 stroke-current md:mr-2"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>
+		<span class="hidden md:inline"> Change Theme </span>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 1792 1792"
+			class="inline-block w-4 h-4 ml-1 fill-current"
+			><path
+				d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg>
+	</div>
+	<div
+		class="mt-14 overflow-y-auto shadow-2xl top-px dropdown-content h-96 w-56 bg-base-200 text-base-content">
+		<ul tabindex="0" class="p-4 menu compact">
+			{#each themes as theme}
+				<li class={theme.includes($themeStore.theme) ? 'bordered' : ''}>
+					<span class="btn btn-ghost justify-start" on:click={() => setTheme(theme)}>{theme}</span>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>

src/lib/components/view.svelte

@@ -3,11 +3,12 @@
 
 	import { codeStore } from '$lib/util/state';
 	import { onMount } from 'svelte';
-	import * as mermaid from 'mermaid';
+	import mermaid from 'mermaid';
 
 	let code = '';
 	let config = '';
 	let container: HTMLDivElement;
+	let view: HTMLDivElement;
 	let error = false;
 	let outOfSync = false;
 	let manualUpdate = true;
@@ -26,13 +27,13 @@
 					}
 					code = state.code;
 					config = state.mermaid;
-					const scroll = container.parentElement.parentElement.parentElement.scrollTop;
+					const scroll = view.parentElement.scrollTop;
 					delete container.dataset.processed;
 					mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
 					mermaid.render('graph-div', code, (svgCode) => {
 						container.innerHTML = svgCode;
 					});
-					container.parentElement.parentElement.parentElement.scrollTop = scroll;
+					view.parentElement.scrollTop = scroll;
 					error = false;
 				} else if (manualUpdate) {
 					manualUpdate = false;
@@ -55,7 +56,7 @@
 	});
 </script>
 
-<div id="view" class="p-2" class:error class:outOfSync>
+<div id="view" bind:this={view} class="p-2" class:error class:outOfSync>
 	<div id="container" bind:this={container} class="flex-1 overflow-auto" />
 </div>
 

src/lib/util/state.ts

@@ -2,7 +2,7 @@ import { writable, get, derived } from 'svelte/store';
 import { toBase64, fromBase64 } from 'js-base64';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import type { State } from '$lib/types';
-import { saveStatistcs } from './stats';
+import { saveStatistics } from './stats';
 
 export const defaultState: State = {
 	code: `graph TD
@@ -33,7 +33,7 @@ export const loadState = (data: string): void => {
 	let state: State;
 	try {
 		const stateStr = fromBase64(data);
-		console.log(`Tring to load state: ${stateStr}`);
+		console.log(`Trying to load state: ${stateStr}`);
 		state = JSON.parse(stateStr);
 		const mermaidConfig =
 			typeof state.mermaid === 'string' ? JSON.parse(state.mermaid) : state.mermaid;
@@ -66,12 +66,12 @@ export const updateCodeStore = (newState: State): void => {
 
 let prompted = false;
 export const updateCode = (code: string, updateEditor: boolean, updateDiagram = false): void => {
-	saveStatistcs(code);
+	saveStatistics(code);
 	const lines = (code.match(/\n/g) || '').length + 1;
 
 	if (lines > 50 && !prompted && get(codeStore).autoSync) {
 		const turnOff = confirm(
-			'Long diagram deteced. Turn off Auto Sync? Click the sync logo to manually sync.'
+			'Long diagram detected. Turn off Auto Sync? Click the sync logo to manually sync.'
 		);
 		prompted = true;
 		if (turnOff) {
@@ -92,6 +92,17 @@ export const updateConfig = (config: string, updateEditor: boolean): void => {
 	});
 };
 
+export const toggleDarkTheme = (dark: boolean): void => {
+	codeStore.update((state) => {
+		const config = JSON.parse(state.mermaid);
+		if (!config.theme || ['dark', 'default'].includes(config.theme)) {
+			config.theme = dark ? 'dark' : 'default';
+		}
+
+		return { ...state, mermaid: JSON.stringify(config, null, 2), updateEditor: true };
+	});
+};
+
 export const initURLSubscription = (): void => {
 	base64State.subscribe((state: string) => {
 		history.replaceState(undefined, undefined, `#${state}`);

src/lib/util/stats.ts

@@ -34,10 +34,10 @@ const detectType = (text: string): string => {
 
 // manual debounce
 let timeout;
-export const saveStatistcs = (graph: string): void => {
+export const saveStatistics = (graph: string): void => {
 	if (analytics) {
 		clearTimeout(timeout);
-		// Only save statistcs after a 5 sec delay
+		// Only save statistics after a 5 sec delay
 		timeout = setTimeout(function () {
 			const graphType = detectType(graph);
 			console.debug('ga:', 'send', 'event', 'render', graphType);

src/lib/util/theme.ts

@@ -0,0 +1,36 @@
+import { writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
+import { persist, localStorage } from '@macfja/svelte-persistent-store';
+
+export interface ThemeConfig {
+	isDark: boolean;
+	theme?: string;
+}
+
+export const themeStore: Writable<ThemeConfig> = persist(
+	writable({
+		isDark: false
+	}),
+	localStorage(),
+	'themeStore'
+);
+
+const darkThemes = [
+	'dark',
+	'synthwave',
+	'halloween',
+	'aqua',
+	'forest',
+	'luxury',
+	'black',
+	'dracula'
+];
+
+export const setTheme = (theme: string): void => {
+	if (theme.includes(' ')) {
+		theme = theme.split(' ')[1].trim();
+	}
+	const isDark = darkThemes.includes(theme);
+	console.log('Setting theme', theme);
+	themeStore.set({ theme, isDark });
+};

src/routes/[fallback]/manifest.json.ts

@@ -0,0 +1,2 @@
+import { get as manifestGet } from '../manifest.json';
+export const get = manifestGet;

src/routes/__layout.svelte

@@ -3,6 +3,9 @@
 	import { base } from '$app/paths';
 	import { onMount } from 'svelte';
 	import { loadingStateStore } from '$lib/util/loading';
+	import { setTheme, themeStore } from '$lib/util/theme';
+	import { toggleDarkTheme } from '$lib/util/state';
+
 	// This can be removed once https://github.com/sveltejs/kit/issues/1612 is fixed.
 	// Then move it into src and vite will bundle it automatically.
 	onMount(() => {
@@ -18,10 +21,23 @@
 					console.log('Service worker registration failed, error:', error);
 				});
 		}
+
+		const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+		if ($themeStore.theme === undefined) {
+			setTheme(isDarkMode ? 'dark' : 'light');
+		}
+
+		themeStore.subscribe(({ theme, isDark }) => {
+			if (theme) {
+				document.getElementsByTagName('html')[0].setAttribute('data-theme', theme);
+				toggleDarkTheme(isDark);
+			}
+		});
 	});
 </script>
 
-<main class="h-screen">
+<main class="h-screen text-primary-content">
 	<slot />
 </main>
 

src/routes/edit.svelte

@@ -10,11 +10,12 @@
 	import { initHandler, syncDiagram } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
-	import * as mermaid from 'mermaid';
+	import mermaid from 'mermaid';
 	import type monaco from 'monaco-editor';
 	import type { EditorUpdateEvent, State, Tab } from '$lib/types';
 	import { base } from '$app/paths';
 
+	base64State; // Weird fix for error > base64State is not defined. Treeshaking?
 	let selectedMode = 'code';
 	const languageMap = {
 		code: 'mermaid',
@@ -120,25 +121,32 @@
 	});
 </script>
 
-<div class="h-full flex flex-col overflow-hidden bg-gray-100">
+<div class="h-full flex flex-col overflow-hidden">
 	<Navbar />
 	<div class="flex-1 flex overflow-hidden">
 		<div class="hidden md:flex flex-col" id="editorPane" style="width: 40%">
 			<Card on:select={tabSelectHandler} {tabs} isCloseable={false} title="Mermaid">
 				<div slot="actions">
-					{#if !$codeStore.autoSync}
-						<button
-							class="bg-indigo-500 hover:bg-indigo-700 rounded px-4 mx-2"
-							title="Sync Diagram"
-							data-cy="sync"
-							on:click={syncDiagram}><i class="fas fa-sync" /></button>
-					{/if}
-					<label
-						for="autoSync"
-						style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-						<input type="checkbox" id="autoSync" bind:checked={$codeStore.autoSync} />
-						Auto sync
-					</label>
+					<div class="flex flex-row items-center">
+						{#if !$codeStore.autoSync}
+							<button
+								class="btn btn-secondary btn-xs"
+								title="Sync Diagram"
+								data-cy="sync"
+								on:click={syncDiagram}><i class="fas fa-sync" /></button>
+						{/if}
+
+						<div class="form-control">
+							<label class="cursor-pointer label" for="autoSync">
+								<input
+									type="checkbox"
+									class="toggle toggle-primary mr-1"
+									id="autoSync"
+									bind:checked={$codeStore.autoSync} />
+								<span> Auto sync</span>
+							</label>
+						</div>
+					</div>
 				</div>
 
 				<Editor on:update={updateHandler} {language} bind:text {errorMarkers} />
@@ -150,20 +158,20 @@
 				<Actions />
 			</div>
 		</div>
-		<div id="resizeHandler" />
+		<div id="resizeHandler" class="hidden md:block" />
 		<div class="flex-1 flex flex-col overflow-hidden">
 			<Card title="Diagram" isCloseable={false}>
 				<button
 					slot="actions"
-					class="btn"
+					class="btn btn-primary btn-xs shadow-lg"
 					title="View diagram in new page"
-					on:click|stopPropagation={() => viewDiagram()}><i class="far fa-eye" /> View</button>
+					on:click|stopPropagation={() => viewDiagram()}><i class="far fa-eye mr-2" /> View</button>
 
 				<div class="flex-1 overflow-auto">
 					<View />
 				</div>
 			</Card>
-			<div class="md:hidden bg-white rounded shadow p-2 mx-2">
+			<div class="md:hidden rounded shadow p-2 mx-2">
 				Code editing not supported on mobile. Please use a desktop browser.
 			</div>
 		</div>
@@ -182,19 +190,14 @@
 		top: 0;
 		content: '';
 		position: absolute;
-		background-color: #ccc;
+		background-color: hsla(var(--b3));
 		margin-left: -1px;
+		transition-duration: 0.2s;
 	}
 
 	#resizeHandler:hover::after {
 		margin-left: -2px;
-		background-color: #818cf8;
+		background-color: hsla(var(--p));
 		width: 4px;
 	}
-
-	@media screen and (max-width: 768px) {
-		#resizeHandler {
-			display: none;
-		}
-	}
 </style>

tailwind.config.cjs

@@ -1,21 +1,7 @@
-const { tailwindExtractor } = require('tailwindcss/lib/lib/purgeUnusedStyles');
-
 module.exports = {
-	mode: 'aot',
-	purge: {
-		content: ['./src/**/*.{html,js,svelte,ts}'],
-		options: {
-			defaultExtractor: (content) => [
-				// If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
-				...tailwindExtractor(content),
-				// Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
-				...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
-					([_match, group, ..._rest]) => group
-				)
-			]
-		},
-		safelist: [/^svelte-[\d\w]+$/]
-	},
+	mode: 'jit',
+	plugins: [require('daisyui')],
+	purge: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {}
 	},

yarn.lock

@@ -39,7 +39,7 @@
 
 "@analytics/storage-utils@^0.2.12":
   version "0.2.12"
-  resolved "https://registry.yarnpkg.com/@analytics/storage-utils/-/storage-utils-0.2.12.tgz#cae7597934b76716d8a6a4f6696fb04cffb05861"
+  resolved "https://registry.npmjs.org/@analytics/storage-utils/-/storage-utils-0.2.12.tgz"
   integrity sha512-cuQuV5sgk1vuIwFUFJ5VJv0EsDL84SS4enuCyY9JEcE24wJeC6iUEy6O7OJvVssYpGJsW+i1XSgwCDJTPgkZgg==
   dependencies:
     "@analytics/cookie-utils" "^0.2.6"
@@ -49,7 +49,7 @@
 
 "@analytics/type-utils@^0.3.1":
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@analytics/type-utils/-/type-utils-0.3.1.tgz#49db3a95fd45864e30f6ad43dddf5b78fba562d6"
+  resolved "https://registry.npmjs.org/@analytics/type-utils/-/type-utils-0.3.1.tgz"
   integrity sha512-9Ej6c9ulj5DNE29eFk3s49/1b89M8mbQ7BoJEQAQg/k86HOVrAEWQUScr359WVSOyGNBsSYE1qILC3XFTTtgtw==
 
 "@babel/code-frame@7.12.11":
@@ -198,14 +198,14 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@sveltejs/adapter-static@1.0.0-next.17":
-  version "1.0.0-next.17"
-  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.17.tgz#63537e4d2b8c1fabb6db96b56f69ec41e56b6334"
-  integrity sha512-RKYNkQxtsMgt0wD8PhfXR1hGT1Tmq1E5eZeTr1KxIerczITRnWVT8LElfu/9Kusv44yYlyQtNc1mLoYqgloOQw==
+"@sveltejs/adapter-static@1.0.0-next.19":
+  version "1.0.0-next.19"
+  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.19.tgz#28f38b021ed5349be14dbd1b29d5f238b3fe6d7e"
+  integrity sha512-uZNJNVGCdiLo1XnMbezlAUsNSzB36oqtXvaUiDmy+Lv0jKU7ZukDQnJ0zWAatdqXl9ETlG4YyTWI/i7E8nmLpQ==
 
 "@sveltejs/kit@1.0.0-next.147":
   version "1.0.0-next.147"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.147.tgz#1dad06fd7f4365405beebdcd12b410a52c3a03b0"
+  resolved "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.147.tgz"
   integrity sha512-rAABsKlC1K/B4VfqT2SaVO29t+OV8deseSJ9l+hV7j9zkswTwiJ7h37tZ5SfnvMgCHemcNjXg8Gzg+0U1MCfEA==
   dependencies:
     "@sveltejs/vite-plugin-svelte" "^1.0.0-next.16"
@@ -284,73 +284,73 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^4.30.0":
-  version "4.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.30.0.tgz#4a0c1ae96b953f4e67435e20248d812bfa55e4fb"
-  integrity sha512-NgAnqk55RQ/SD+tZFD9aPwNSeHmDHHe5rtUyhIq0ZeCWZEvo4DK9rYz7v9HDuQZFvn320Ot+AikaCKMFKLlD0g==
+"@typescript-eslint/eslint-plugin@^4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.31.1.tgz#e938603a136f01dcabeece069da5fb2e331d4498"
+  integrity sha512-UDqhWmd5i0TvPLmbK5xY3UZB0zEGseF+DHPghZ37Sb83Qd3p8ujhvAtkU4OF46Ka5Pm5kWvFIx0cCTBFKo0alA==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.30.0"
-    "@typescript-eslint/scope-manager" "4.30.0"
+    "@typescript-eslint/experimental-utils" "4.31.1"
+    "@typescript-eslint/scope-manager" "4.31.1"
     debug "^4.3.1"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.1.0"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.30.0":
-  version "4.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.30.0.tgz#9e49704fef568432ae16fc0d6685c13d67db0fd5"
-  integrity sha512-K8RNIX9GnBsv5v4TjtwkKtqMSzYpjqAQg/oSphtxf3xxdt6T0owqnpojztjjTcatSteH3hLj3t/kklKx87NPqw==
+"@typescript-eslint/experimental-utils@4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.31.1.tgz#0c900f832f270b88e13e51753647b02d08371ce5"
+  integrity sha512-NtoPsqmcSsWty0mcL5nTZXMf7Ei0Xr2MT8jWjXMVgRK0/1qeQ2jZzLFUh4QtyJ4+/lPUyMw5cSfeeME+Zrtp9Q==
   dependencies:
     "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.30.0"
-    "@typescript-eslint/types" "4.30.0"
-    "@typescript-eslint/typescript-estree" "4.30.0"
+    "@typescript-eslint/scope-manager" "4.31.1"
+    "@typescript-eslint/types" "4.31.1"
+    "@typescript-eslint/typescript-estree" "4.31.1"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/parser@^4.30.0":
-  version "4.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.30.0.tgz#6abd720f66bd790f3e0e80c3be77180c8fcb192d"
-  integrity sha512-HJ0XuluSZSxeboLU7Q2VQ6eLlCwXPBOGnA7CqgBnz2Db3JRQYyBDJgQnop6TZ+rsbSx5gEdWhw4rE4mDa1FnZg==
+"@typescript-eslint/parser@^4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.31.1.tgz#8f9a2672033e6f6d33b1c0260eebdc0ddf539064"
+  integrity sha512-dnVZDB6FhpIby6yVbHkwTKkn2ypjVIfAR9nh+kYsA/ZL0JlTsd22BiDjouotisY3Irmd3OW1qlk9EI5R8GrvRQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.30.0"
-    "@typescript-eslint/types" "4.30.0"
-    "@typescript-eslint/typescript-estree" "4.30.0"
+    "@typescript-eslint/scope-manager" "4.31.1"
+    "@typescript-eslint/types" "4.31.1"
+    "@typescript-eslint/typescript-estree" "4.31.1"
     debug "^4.3.1"
 
-"@typescript-eslint/scope-manager@4.30.0":
-  version "4.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.30.0.tgz#1a3ffbb385b1a06be85cd5165a22324f069a85ee"
-  integrity sha512-VJ/jAXovxNh7rIXCQbYhkyV2Y3Ac/0cVHP/FruTJSAUUm4Oacmn/nkN5zfWmWFEanN4ggP0vJSHOeajtHq3f8A==
+"@typescript-eslint/scope-manager@4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.31.1.tgz#0c21e8501f608d6a25c842fcf59541ef4f1ab561"
+  integrity sha512-N1Uhn6SqNtU2XpFSkD4oA+F0PfKdWHyr4bTX0xTj8NRx1314gBDRL1LUuZd5+L3oP+wo6hCbZpaa1in6SwMcVQ==
   dependencies:
-    "@typescript-eslint/types" "4.30.0"
-    "@typescript-eslint/visitor-keys" "4.30.0"
+    "@typescript-eslint/types" "4.31.1"
+    "@typescript-eslint/visitor-keys" "4.31.1"
 
-"@typescript-eslint/types@4.30.0":
-  version "4.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.30.0.tgz#fb9d9b0358426f18687fba82eb0b0f869780204f"
-  integrity sha512-YKldqbNU9K4WpTNwBqtAerQKLLW/X2A/j4yw92e3ZJYLx+BpKLeheyzoPfzIXHfM8BXfoleTdiYwpsvVPvHrDw==
+"@typescript-eslint/types@4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.31.1.tgz#5f255b695627a13401d2fdba5f7138bc79450d66"
+  integrity sha512-kixltt51ZJGKENNW88IY5MYqTBA8FR0Md8QdGbJD2pKZ+D5IvxjTYDNtJPDxFBiXmka2aJsITdB1BtO1fsgmsQ==
 
-"@typescript-eslint/typescript-estree@4.30.0":
-  version "4.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.30.0.tgz#ae57833da72a753f4846cd3053758c771670c2ac"
-  integrity sha512-6WN7UFYvykr/U0Qgy4kz48iGPWILvYL34xXJxvDQeiRE018B7POspNRVtAZscWntEPZpFCx4hcz/XBT+erenfg==
+"@typescript-eslint/typescript-estree@4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.1.tgz#4a04d5232cf1031232b7124a9c0310b577a62d17"
+  integrity sha512-EGHkbsUvjFrvRnusk6yFGqrqMBTue5E5ROnS5puj3laGQPasVUgwhrxfcgkdHNFECHAewpvELE1Gjv0XO3mdWg==
   dependencies:
-    "@typescript-eslint/types" "4.30.0"
-    "@typescript-eslint/visitor-keys" "4.30.0"
+    "@typescript-eslint/types" "4.31.1"
+    "@typescript-eslint/visitor-keys" "4.31.1"
     debug "^4.3.1"
     globby "^11.0.3"
     is-glob "^4.0.1"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/visitor-keys@4.30.0":
-  version "4.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.30.0.tgz#a47c6272fc71b0c627d1691f68eaecf4ad71445e"
-  integrity sha512-pNaaxDt/Ol/+JZwzP7MqWc8PJQTUhZwoee/PVlQ+iYoYhagccvoHnC9e4l+C/krQYYkENxznhVSDwClIbZVxRw==
+"@typescript-eslint/visitor-keys@4.31.1":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.1.tgz#f2e7a14c7f20c4ae07d7fc3c5878c4441a1da9cc"
+  integrity sha512-PCncP8hEqKw6SOJY+3St4LVtoZpPPn+Zlpm7KW5xnviMhdqcsBty4Lsg4J/VECpJjw1CkROaZhH4B8M1OfnXTQ==
   dependencies:
-    "@typescript-eslint/types" "4.30.0"
+    "@typescript-eslint/types" "4.31.1"
     eslint-visitor-keys "^2.0.0"
 
 "@ungap/promise-all-settled@1.1.2":
@@ -569,10 +569,10 @@ at-least-node@^1.0.0:
   resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-autoprefixer@^10.3.3:
-  version "10.3.3"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.3.tgz#4bac89c74ef98e6a40fe1c5b76c0d1c91db153ce"
-  integrity sha512-yRzjxfnggrP/+qVHlUuZz5FZzEbkT+Yt0/Df6ScEMnbbZBLzYB2W0KLxoQCW+THm1SpOsM1ZPcTHAwuvmibIsQ==
+autoprefixer@^10.3.4:
+  version "10.3.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.4.tgz#29efe5d19f51c281953178ddb5b84c5f1ca24c86"
+  integrity sha512-EKjKDXOq7ug+jagLzmnoTRpTT0q1KVzEJqrJd0hCBa7FiG0WbFOBCcJCy2QkW1OckpO3qgttA1aWjVbeIPAecw==
   dependencies:
     browserslist "^4.16.8"
     caniuse-lite "^1.0.30001252"
@@ -666,7 +666,7 @@ browserslist@^4.0.0, browserslist@^4.16.0, browserslist@^4.16.6, browserslist@^4
     escalade "^3.1.1"
     node-releases "^1.1.75"
 
-buffer-crc32@~0.2.3:
+buffer-crc32@^0.2.5, buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz"
   integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
@@ -989,6 +989,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-color-names@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
+
 css-color-names@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz"
@@ -1097,10 +1102,10 @@ cypress-localstorage-commands@^1.5.0:
   resolved "https://registry.npmjs.org/cypress-localstorage-commands/-/cypress-localstorage-commands-1.5.0.tgz"
   integrity sha512-gl1uKeviYdyJG4dLcZ9hfoUjLciwkkfbaQ3gvRtmipsPxC612ZBJhSjbunnJcUGwkryaM+82VrY9ij0tLSg7LA==
 
-cypress@8.3.1:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.3.1.tgz#c6760dbb907df2570b0e1ac235fa31c30f9260a6"
-  integrity sha512-1v6pfx+/5cXhaT5T6QKOvnkawmEHWHLiVzm3MYMoQN1fkX2Ma1C32STd3jBStE9qT5qPSTILjGzypVRxCBi40g==
+cypress@8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.4.0.tgz#09ec06a73f1cb10121c103cba15076e659e24876"
+  integrity sha512-RtVgGFR06ikyMaq/VqapeqOjGaIA42PpK7F0qe1MCiFArfUuJECsLmeYaOA+1TlmNUgJNMSF5fWKkZIJr5Uc7w==
   dependencies:
     "@cypress/request" "^2.88.6"
     "@cypress/xvfb" "^1.2.4"
@@ -1410,6 +1415,11 @@ dagre@^0.8.5:
     graphlib "^2.1.8"
     lodash "^4.17.15"
 
+daisyui@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-1.14.0.tgz#1d63658c0dd87f9795d333e7068cedbb0b0a52a6"
+  integrity sha512-50ccXdJMi0TS7raItKfUOJppPRvluOUCO4m6i7QPOVOdDZVP6awjqUoGmLzqFepO6b6QpVotswDvaXIKSZ/2aw==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz"
@@ -1637,6 +1647,11 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+es6-promise@^3.1.2:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+  integrity sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=
+
 esbuild@^0.12.17:
   version "0.12.22"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.22.tgz#6031a1257b8d0307d306bed673b79c3668607f51"
@@ -1662,13 +1677,21 @@ eslint-config-prettier@^8.1.0:
   resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz"
   integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
 
-eslint-plugin-cypress@^2.11.3:
-  version "2.11.3"
-  resolved "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.3.tgz"
-  integrity sha512-hOoAid+XNFtpvOzZSNWP5LDrQBEJwbZwjib4XJ1KcRYKjeVj0mAmPmucG4Egli4j/aruv+Ow/acacoloWWCl9Q==
+eslint-plugin-cypress@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.12.1.tgz#9aeee700708ca8c058e00cdafe215199918c2632"
+  integrity sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==
   dependencies:
     globals "^11.12.0"
 
+eslint-plugin-es@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz#f0822f0c18a535a97c3e714e89f88586a7641ec9"
+  integrity sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==
+  dependencies:
+    eslint-utils "^2.0.0"
+    regexpp "^3.0.0"
+
 eslint-plugin-mocha@^9.0.0:
   version "9.0.0"
   resolved "https://registry.npmjs.org/eslint-plugin-mocha/-/eslint-plugin-mocha-9.0.0.tgz"
@@ -1693,10 +1716,10 @@ eslint-plugin-postcss-modules@^1.2.1:
     postcss-modules-scope "^2.1.0"
     postcss-modules-values "^3.0.0"
 
-eslint-plugin-svelte3@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.2.0.tgz"
-  integrity sha512-qdWB1QN21dEozsJFdR8XlEhMnsS6aKHjsXWuNmchYwxoet5I6QdCr1Xcq62++IzRBMCNCeH4waXqSOAdqrZzgA==
+eslint-plugin-svelte3@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.2.1.tgz#f0f24150ecea3061c38c69e282bea26dc3e660c6"
+  integrity sha512-YoBR9mLoKCjGghJ/gvpnFZKaMEu/VRcuxpSRS8KuozuEo7CdBH7bmBHa6FmMm0i4kJnOyx+PVsaptz96K6H/4Q==
 
 eslint-plugin-tailwindcss@^1.14.3:
   version "1.14.3"
@@ -1715,7 +1738,7 @@ eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-utils@^2.1.0:
+eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz"
   integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
@@ -1741,7 +1764,7 @@ eslint-visitor-keys@^2.0.0:
 
 eslint@^7.32.0:
   version "7.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz"
   integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
   dependencies:
     "@babel/code-frame" "7.12.11"
@@ -2159,6 +2182,11 @@ globby@^11.0.3:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+graceful-fs@^4.1.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
 graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.6"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz"
@@ -2218,6 +2246,21 @@ he@1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hex-color-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
+  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+
+hsl-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
+  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
+
+hsla-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
+  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
+
 html-tags@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz"
@@ -2384,6 +2427,18 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.1.1"
 
+is-color-stop@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
+  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
+  dependencies:
+    css-color-names "^0.0.4"
+    hex-color-regex "^1.1.0"
+    hsl-regex "^1.0.0"
+    hsla-regex "^1.0.0"
+    rgb-regex "^1.0.1"
+    rgba-regex "^1.0.0"
+
 is-core-module@^2.2.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz"
@@ -2486,10 +2541,10 @@ its-name@1.0.0:
   resolved "https://registry.npmjs.org/its-name/-/its-name-1.0.0.tgz"
   integrity sha1-IGXxiD7LVoxl9xEt2/EjQB+uSvA=
 
-js-base64@^3.6.1:
-  version "3.6.1"
-  resolved "https://registry.npmjs.org/js-base64/-/js-base64-3.6.1.tgz"
-  integrity sha512-Frdq2+tRRGLQUIQOgsIGSCd1VePCS2fsddTG5dTCqR0JHgltXWfsxnY0gIXPoMeRmdom6Oyq+UMOFg5suduOjQ==
+js-base64@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.1.tgz#d5fa3ee5fe56a49db871516e70b0474238efcc68"
+  integrity sha512-XyYXEUTP3ykPPnGPoesMr4yBygopit99iXW52yT1EWrkzwzvtAor/pbf+EBuDkwqSty7K10LeTjCkUn8c166aQ==
 
 js-beautify@1.10.3:
   version "1.10.3"
@@ -2616,7 +2671,7 @@ lines-and-columns@^1.1.6:
 
 lint-staged@^11.1.2:
   version "11.1.2"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-11.1.2.tgz#4dd78782ae43ee6ebf2969cad9af67a46b33cd90"
+  resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-11.1.2.tgz"
   integrity sha512-6lYpNoA9wGqkL6Hew/4n1H6lRqF3qCsujVT0Oq5Z4hiSAM7S6NksPJ3gnr7A7R52xCtiZMcEUNNQ6d6X5Bvh9w==
   dependencies:
     chalk "^4.1.1"
@@ -2801,12 +2856,12 @@ minimatch@3.0.4, minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.1.1, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-mkdirp@~0.5.1:
+mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -3434,10 +3489,10 @@ prettier-plugin-svelte@^2.4.0:
   resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.4.0.tgz#482bb6003bf1d5bd7ff002261a42a32b87d42d00"
   integrity sha512-JwJ9bOz4XHLQtiLnX4mTSSDUdhu12WH8sTwy/XTDCSyPlah6IcV7NWeYBZscPEcceu2YnW8Y9sJCP40Z2UH9GA==
 
-prettier@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz"
-  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
+prettier@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
+  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
 
 pretty-bytes@^5.6.0:
   version "5.6.0"
@@ -3529,7 +3584,7 @@ ramda@^0.27.1, ramda@~0.27.1:
 
 random-word-slugs@^0.0.5:
   version "0.0.5"
-  resolved "https://registry.yarnpkg.com/random-word-slugs/-/random-word-slugs-0.0.5.tgz#6ccd6c7ea320be9fbc19507f8c3a7d4a970ff61f"
+  resolved "https://registry.npmjs.org/random-word-slugs/-/random-word-slugs-0.0.5.tgz"
   integrity sha512-KwelmWsWHiMl3MKauB5usAIPg2FgwAku+FVYEuf32yyhZmEh3Fq4nXBxeUAgXB2F+G/HTeDsqXsmuupmOMnjRg==
 
 randombytes@^2.1.0:
@@ -3554,10 +3609,10 @@ reduce-css-calc@^2.1.8:
     css-unit-converter "^1.1.1"
     postcss-value-parser "^3.3.0"
 
-regexpp@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz"
-  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
+regexpp@^3.0.0, regexpp@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
 request-progress@^3.0.0:
   version "3.0.0"
@@ -3643,6 +3698,23 @@ reusify@^1.0.4:
   resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rgb-regex@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
+  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
+
+rgba-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
+  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
+
+rimraf@^2.5.2:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
@@ -3698,6 +3770,16 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sander@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/sander/-/sander-0.5.1.tgz#741e245e231f07cafb6fdf0f133adfa216a502ad"
+  integrity sha1-dB4kXiMfB8r7b98PEzrfohalAq0=
+  dependencies:
+    es6-promise "^3.1.2"
+    graceful-fs "^4.1.3"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.2"
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz"
@@ -3798,6 +3880,16 @@ snap-shot-store@1.2.3:
     lazy-ass "1.6.0"
     ramda "0.25.0"
 
+sorcery@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.10.0.tgz#8ae90ad7d7cb05fc59f1ab0c637845d5c15a52b7"
+  integrity sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=
+  dependencies:
+    buffer-crc32 "^0.2.5"
+    minimist "^1.2.0"
+    sander "^0.5.0"
+    sourcemap-codec "^1.3.0"
+
 source-map-js@^0.6.2:
   version "0.6.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz"
@@ -3808,7 +3900,7 @@ source-map@^0.6.1:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-sourcemap-codec@^1.4.4:
+sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.4:
   version "1.4.8"
   resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
@@ -3965,20 +4057,22 @@ svelte-hmr@^0.14.7:
   resolved "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.7.tgz"
   integrity sha512-pDrzgcWSoMaK6AJkBWkmgIsecW0GChxYZSZieIYfCP0v2oPyx2CYU/zm7TBIcjLVUPP714WxmViE9Thht4etog==
 
-svelte-preprocess@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.8.0.tgz#fd3ebc19aae1b8a49ac9e30db1af572bf4619245"
-  integrity sha512-i9Z17cwGlp+kuSSv3kJWdAdAP2L26A5yMzHHdDj8YL+86sN64Yz5/gfjQp3Xb6fiaToo4sB+wTpid/23Gz0yvw==
+svelte-preprocess@^4.9.4:
+  version "4.9.4"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.4.tgz#1a81c47994b94a8ee8a8cadf10763053dd486e24"
+  integrity sha512-Z0mUQBGtE+ZZSv/HerRSHe7ukJokxjiPeHe7iPOIXseEoRw51H3K/Vh6OMIMstetzZ11vWO9rCsXSD/uUUArmA==
   dependencies:
     "@types/pug" "^2.0.4"
     "@types/sass" "^1.16.0"
     detect-indent "^6.0.0"
+    magic-string "^0.25.7"
+    sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-svelte@^3.42.4:
-  version "3.42.4"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.42.4.tgz#838ed98fa7b26fc5fffe4df0d7ba345f1c54cf4f"
-  integrity sha512-DqC0AmDdBrrbIA+Kzl3yhBb6qCn4vZOAfxye2pTnIpinLegyagC5sLI8Pe9GPlXu9VpHBXIwpDDedpMfu++epA==
+svelte@^3.42.6:
+  version "3.42.6"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.42.6.tgz#45a534d76fcdb551a2f23abf2cfee648fa248d03"
+  integrity sha512-lAcryr9Do2PeGtbodspX5I4kWj4yWYAa2WGpDCwzNkP3y8WZTxigMd4/TMO1rBZEOkMYGn4ZXrbAlSEGhK6q3w==
 
 svgo@^2.3.0:
   version "2.4.0"
@@ -4005,10 +4099,10 @@ table@^6.0.9:
     string-width "^4.2.0"
     strip-ansi "^6.0.0"
 
-tailwindcss@^2.1.2, tailwindcss@^2.2.9:
-  version "2.2.9"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.9.tgz#1484bd45a4a9f9f5de7faabf74c11bf0aeb5ad98"
-  integrity sha512-P8zCKFkEthfUvqcnun8DqGGXw4QqyDw971NAM23e8QQ+m5HW1agp4upq50rFGwGNtphVYvr+0zvVLSXo5/I9Qg==
+tailwindcss@^2.1.2, tailwindcss@^2.2.15:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.15.tgz#8bee3ebe68b988c050508ce20633f35b040dd9fe"
+  integrity sha512-WgV41xTMbnSoTNMNnJvShQZ+8GmY86DmXTrCgnsveNZJdlybfwCItV8kAqjYmU49YiFr+ofzmT1JlAKajBZboQ==
   dependencies:
     arg "^5.0.1"
     bytes "^3.0.0"
@@ -4023,6 +4117,7 @@ tailwindcss@^2.1.2, tailwindcss@^2.2.9:
     fs-extra "^10.0.0"
     glob-parent "^6.0.1"
     html-tags "^3.1.0"
+    is-color-stop "^1.1.0"
     is-glob "^4.0.1"
     lodash "^4.17.21"
     lodash.topath "^4.5.2"
@@ -4091,7 +4186,7 @@ tslib@^1.8.1, tslib@^1.9.0:
 
 tslib@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
 tsutils@^3.21.0:
@@ -4135,10 +4230,10 @@ type-fest@^0.21.3:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-typescript@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86"
-  integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==
+typescript@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"
+  integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==
 
 uniqs@^2.0.0:
   version "2.0.0"