Merge branch 'main' into testing

css/icons.css

@@ -1,3 +1,34 @@
+.ui.inline-icon {
+	position: relative;
+
+	display: flex;
+}
+
+.ui.inline-icon::after {
+	content: "";
+	display: block;
+
+	position: absolute;
+
+	box-sizing: border-box;
+
+	margin: auto;
+	top: 15%;
+	bottom: 15%;
+
+	mask-size: contain;
+	mask-repeat: no-repeat;
+
+	max-height: 70%;
+	aspect-ratio: 1;
+
+	left: 0;
+	right: 0;
+
+	background-color: var(--c-text);
+}
+
+.ui.inline-icon.icon-eye-off::after,
 .ui.icon > .icon-eye-off {
 	-webkit-mask-image: url("../res/icons/eye-off.svg");
 	mask-image: url("../res/icons/eye-off.svg");
@@ -42,3 +73,57 @@
 	-webkit-mask-image: url("../res/icons/settings.svg");
 	mask-image: url("../res/icons/settings.svg");
 }
+
+.ui.inline-icon.icon-grid::after,
+.ui.icon > .icon-grid {
+	-webkit-mask-image: url("../res/icons/grid.svg");
+	mask-image: url("../res/icons/grid.svg");
+}
+
+.ui.inline-icon.icon-venetian-mask::after,
+.ui.icon > .icon-venetian-mask {
+	-webkit-mask-image: url("../res/icons/venetian-mask.svg");
+	mask-image: url("../res/icons/venetian-mask.svg");
+}
+
+.ui.inline-icon.icon-brush::after,
+.ui.icon > .icon-brush {
+	-webkit-mask-image: url("../res/icons/brush.svg");
+	mask-image: url("../res/icons/brush.svg");
+}
+
+.ui.inline-icon.icon-paintbrush::after,
+.ui.icon > .icon-paintbrush {
+	-webkit-mask-image: url("../res/icons/paintbrush.svg");
+	mask-image: url("../res/icons/paintbrush.svg");
+}
+
+.ui.inline-icon.icon-expand::after,
+.ui.icon > .icon-expand {
+	-webkit-mask-image: url("../res/icons/expand.svg");
+	mask-image: url("../res/icons/expand.svg");
+}
+
+.ui.inline-icon.icon-pin::after,
+.ui.icon > .icon-pin {
+	-webkit-mask-image: url("../res/icons/pin.svg");
+	mask-image: url("../res/icons/pin.svg");
+}
+
+.ui.inline-icon.icon-box-select::after,
+.ui.icon > .icon-box-select {
+	-webkit-mask-image: url("../res/icons/box-select.svg");
+	mask-image: url("../res/icons/box-select.svg");
+}
+
+.ui.inline-icon.icon-maximize::after,
+.ui.icon > .icon-maximize {
+	-webkit-mask-image: url("../res/icons/maximize.svg");
+	mask-image: url("../res/icons/maximize.svg");
+}
+
+.ui.inline-icon.icon-clipboard-list::after,
+.ui.icon > .icon-clipboard-list {
+	-webkit-mask-image: url("../res/icons/clipboard-list.svg");
+	mask-image: url("../res/icons/clipboard-list.svg");
+}

css/ui/generic.css

@@ -37,6 +37,8 @@
 /* Slider Input */
 div.slider-wrapper {
 	margin: 5px;
+	margin-left: 0;
+	margin-right: 0;
 }
 
 div.slider-wrapper {
@@ -100,6 +102,83 @@ div.slider-wrapper > input.text {
 	background-color: transparent;
 }
 
+/* Checkbox Input */
+div.checkbox-array {
+	display: flex;
+
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+input.oo-checkbox[type="checkbox"] {
+	/* Hide original checkbox */
+	-webkit-appearance: none;
+	appearance: none;
+
+	flex: 1;
+
+	margin: 0;
+
+	min-width: 28px;
+	height: 28px;
+
+	background-color: var(--c-primary);
+
+	cursor: pointer;
+}
+
+input.oo-checkbox[type="checkbox"]:disabled {
+	background-color: #666 !important;
+	cursor: default !important;
+}
+
+input.oo-checkbox[type="checkbox"]:disabled:hover {
+	filter: none !important;
+}
+
+input.oo-checkbox[type="checkbox"]:checked::after {
+	background-color: #66f;
+}
+
+input.oo-checkbox[type="checkbox"]:hover {
+	background-color: var(--c-hover);
+}
+
+input.oo-checkbox[type="checkbox"]:active {
+	filter: brightness(120%);
+}
+
+input.oo-checkbox[type="checkbox"]:first-child {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+input.oo-checkbox[type="checkbox"]:last-child {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+/* Mask Inversion Checkbox */
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox::after {
+	background-color: var(--c-text);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:hover {
+	filter: brightness(120%);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:active {
+	filter: brightness(140%);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox {
+	background-color: #922;
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:checked {
+	background-color: #229;
+}
+
 /* Bare Select */
 
 .bareselector {

index.html

@@ -5,12 +5,12 @@
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
 		<link href="css/colors.css?v=3f81e80" rel="stylesheet" />
-		<link href="css/icons.css?v=a25504c" rel="stylesheet" />
+		<link href="css/icons.css?v=caa702e" rel="stylesheet" />
 
 		<link href="css/index.css?v=69d3b9e" rel="stylesheet" />
 		<link href="css/layers.css?v=b4fbf61" rel="stylesheet" />
 
-		<link href="css/ui/generic.css?v=79bee9b" rel="stylesheet" />
+		<link href="css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
 
 		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="css/ui/layers.css?v=4fd95fe" rel="stylesheet" />
@@ -319,7 +319,7 @@
 		</div>
 
 		<!-- Basics -->
-		<script src="js/global.js?v=3da0b2e" type="text/javascript"></script>
+		<script src="js/global.js?v=1807d6e" type="text/javascript"></script>
 
 		<!-- Base Libs -->
 		<script src="js/lib/util.js?v=7f6847c" type="text/javascript"></script>
@@ -328,7 +328,7 @@
 		<script src="js/lib/layers.js?v=a1f8aea" type="text/javascript"></script>
 		<script src="js/lib/commands.js?v=00464cb" type="text/javascript"></script>
 
-		<script src="js/lib/toolbar.js?v=d483951" type="text/javascript"></script>
+		<script src="js/lib/toolbar.js?v=d15051f" type="text/javascript"></script>
 		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
 
 		<script
@@ -340,7 +340,7 @@
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=a30c20a" type="text/javascript"></script>
+		<script src="js/index.js?v=170102e" type="text/javascript"></script>
 
 		<script
 			src="js/ui/floating/history.js?v=fc92d14"
@@ -354,19 +354,19 @@
 			src="js/ui/tool/generic.js?v=2bcd36d"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=45cb85f" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=567df48" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/colorbrush.js?v=1bd7288"
+			src="js/ui/tool/colorbrush.js?v=8acb4f6"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=533feab"
+			src="js/ui/tool/select.js?v=ade791e"
 			type="text/javascript"></script>
-		<script src="js/ui/tool/stamp.js?v=81b8908" type="text/javascript"></script>
+		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
-			src="js/ui/tool/interrogate.js?v=af51c4d"
+			src="js/ui/tool/interrogate.js?v=e579ff1"
 			type="text/javascript"></script>
 
 		<!-- Initialize -->

js/global.js

@@ -3,6 +3,11 @@
  */
 
 const global = {
+	// If this is the first run of openOutpaint
+	get firstRun() {
+		return this._firstRun;
+	},
+
 	// Connection
 	_connection: "offline",
 	set connection(v) {
@@ -46,3 +51,5 @@ const global = {
 		this.debug = !this.debug;
 	},
 };
+
+global._firstRun = !localStorage.getItem("openoutpaint/host");

js/index.js

@@ -139,7 +139,6 @@ var host = "";
 var url = "/sdapi/v1/";
 const basePixelCount = 64; //64 px - ALWAYS 64 PX
 
-//
 function startup() {
 	testHostConfiguration();
 	loadSettings();
@@ -857,12 +856,14 @@ async function getUpscalers() {
 }
 
 async function getModels() {
-	var url = document.getElementById("host").value + "/sdapi/v1/sd-models";
+	const url = document.getElementById("host").value + "/sdapi/v1/sd-models";
+	let opt = null;
+
 	try {
 		const response = await fetch(url);
 		const data = await response.json();
 
-		modelAutoComplete.options = data.map((option) => ({
+		opt = data.map((option) => ({
 			name: option.title,
 			value: option.title,
 			optionelcb: (el) => {
@@ -871,6 +872,8 @@ async function getModels() {
 			},
 		}));
 
+		modelAutoComplete.options = opt;
+
 		try {
 			const optResponse = await fetch(
 				document.getElementById("host").value + "/sdapi/v1/options"
@@ -891,10 +894,10 @@ async function getModels() {
 
 	modelAutoComplete.onchange.on(async ({value}) => {
 		console.log(`[index] Changing model to [${value}]`);
-		var payload = {
+		const payload = {
 			sd_model_checkpoint: value,
 		};
-		var url = document.getElementById("host").value + "/sdapi/v1/options/";
+		const url = document.getElementById("host").value + "/sdapi/v1/options/";
 		try {
 			await fetch(url, {
 				method: "POST",
@@ -914,6 +917,25 @@ async function getModels() {
 			);
 		}
 	});
+
+	// If first time running, ask if user wants to switch to an inpainting model
+	if (global.firstRun && !modelAutoComplete.value.includes("inpainting")) {
+		const inpainting = opt.find(({name}) => name.includes("inpainting"));
+
+		let message =
+			"It seems this is your first time using openOutpaint. It is highly recommended that you switch to an inpainting model. \
+			These are highlighted as green in the model selector.";
+
+		if (inpainting) {
+			message += `\n\nWe have found the inpainting model\n\n - ${inpainting.name}\n\navailable in the webui. Do you want to switch to it?`;
+			if (confirm(message)) {
+				modelAutoComplete.value = inpainting.value;
+			}
+		} else {
+			message += `\n\nNo inpainting model seems to be available in the webui. It is recommended that you download an inpainting model, or outpainting results may not be optimal.`;
+			alert(message);
+		}
+	}
 }
 
 async function getConfig() {

js/lib/toolbar.js

@@ -145,17 +145,24 @@ const toolbar = {
  * Premade inputs for populating the context menus
  */
 const _toolbar_input = {
-	checkbox: (state, dataKey, text, cb = null) => {
+	checkbox: (state, dataKey, text, classes, cb = null) => {
 		if (state[dataKey] === undefined) state[dataKey] = false;
 
 		const checkbox = document.createElement("input");
 		checkbox.type = "checkbox";
+		checkbox.classList.add("oo-checkbox", "ui", "inline-icon");
+
+		if (typeof classes === "string") classes = [classes];
+
+		if (classes) checkbox.classList.add(...classes);
 		checkbox.checked = state[dataKey];
 		checkbox.onchange = () => {
 			state[dataKey] = checkbox.checked;
 			cb && cb();
 		};
 
+		checkbox.title = text;
+
 		const label = document.createElement("label");
 		label.appendChild(checkbox);
 		label.appendChild(new Text(text));

js/ui/tool/colorbrush.js

@@ -349,13 +349,16 @@ const colorBrushTool = () =>
 					state.ctxmenu = {};
 
 					// Affects Mask Checkbox
+					const array = document.createElement("div");
 					const affectMaskCheckbox = _toolbar_input.checkbox(
 						state,
 						"affectMask",
-						"Affect Mask"
+						"Affect Mask",
-					).label;
+						"icon-venetian-mask"
+					).checkbox;
+					array.appendChild(affectMaskCheckbox);
 
-					state.ctxmenu.affectMaskCheckbox = affectMaskCheckbox;
+					state.ctxmenu.affectMaskCheckbox = array;
 
 					// Brush size slider
 					const brushSizeSlider = _toolbar_input.slider(

js/ui/tool/dream.js

@@ -1473,24 +1473,27 @@ const dreamTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Invert Mask Checkbox
 					state.ctxmenu.invertMaskLabel = _toolbar_input.checkbox(
 						state,
 						"invertMask",
 						"Invert Mask",
+						["icon-venetian-mask", "invert-mask-checkbox"],
 						() => {
 							setMask(state.invertMask ? "hold" : "clear");
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Checkbox
 					state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
 						state,
 						"keepUnmasked",
 						"Keep Unmasked",
+						"icon-pin",
 						() => {
 							if (state.keepUnmasked) {
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
@@ -1506,7 +1509,7 @@ const dreamTool = () =>
 								);
 							}
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Blur Slider
 					state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
@@ -1531,8 +1534,9 @@ const dreamTool = () =>
 					state.ctxmenu.preserveMasksLabel = _toolbar_input.checkbox(
 						state,
 						"preserveMasks",
-						"Preserve Brushed Masks"
+						"Preserve Brushed Masks",
-					).label;
+						"icon-paintbrush"
+					).checkbox;
 
 					// Overmasking Slider
 					state.ctxmenu.overMaskPxLabel = _toolbar_input.slider(
@@ -1562,15 +1566,19 @@ const dreamTool = () =>
 				}
 
 				menu.appendChild(state.ctxmenu.cursorSizeSlider);
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				//menu.appendChild(document.createElement("br"));
-				menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				array.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.preserveMasksLabel);
+				//menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
-				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
+				// menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
-				menu.appendChild(state.ctxmenu.preserveMasksLabel);
+				// menu.appendChild(state.ctxmenu.preserveMasksLabel);
-				menu.appendChild(document.createElement("br"));
+				// menu.appendChild(document.createElement("br"));
 				menu.appendChild(state.ctxmenu.overMaskPxLabel);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
 			},
@@ -1991,24 +1999,27 @@ const img2imgTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Invert Mask Checkbox
 					state.ctxmenu.invertMaskLabel = _toolbar_input.checkbox(
 						state,
 						"invertMask",
 						"Invert Mask",
+						["icon-venetian-mask", "invert-mask-checkbox"],
 						() => {
 							setMask(state.invertMask ? "hold" : "clear");
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Checkbox
 					state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
 						state,
 						"keepUnmasked",
 						"Keep Unmasked",
+						"icon-pin",
 						() => {
 							if (state.keepUnmasked) {
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
@@ -2024,7 +2035,7 @@ const img2imgTool = () =>
 								);
 							}
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Blur Slider
 					state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
@@ -2049,15 +2060,17 @@ const img2imgTool = () =>
 					state.ctxmenu.preserveMasksLabel = _toolbar_input.checkbox(
 						state,
 						"preserveMasks",
-						"Preserve Brushed Masks"
+						"Preserve Brushed Masks",
-					).label;
+						"icon-paintbrush"
+					).checkbox;
 
 					// Inpaint Full Resolution Checkbox
 					state.ctxmenu.fullResolutionLabel = _toolbar_input.checkbox(
 						state,
 						"fullResolution",
-						"Inpaint Full Resolution"
+						"Inpaint Full Resolution",
-					).label;
+						"icon-expand"
+					).checkbox;
 
 					// Denoising Strength Slider
 					state.ctxmenu.denoisingStrengthSlider = _toolbar_input.slider(
@@ -2076,8 +2089,9 @@ const img2imgTool = () =>
 					state.ctxmenu.borderMaskGradientCheckbox = _toolbar_input.checkbox(
 						state,
 						"gradient",
-						"Border Mask Gradient"
+						"Border Mask Gradient",
-					).label;
+						"icon-box-select"
+					).checkbox;
 
 					// Border Mask Size Slider
 					state.ctxmenu.borderMaskSlider = _toolbar_input.slider(
@@ -2124,20 +2138,22 @@ const img2imgTool = () =>
 				}
 
 				menu.appendChild(state.ctxmenu.cursorSizeSlider);
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.invertMaskLabel);
-				menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				array.appendChild(state.ctxmenu.preserveMasksLabel);
+				array.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
-				menu.appendChild(state.ctxmenu.preserveMasksLabel);
-				menu.appendChild(document.createElement("br"));
-				menu.appendChild(state.ctxmenu.fullResolutionLabel);
-				menu.appendChild(document.createElement("br"));
 				menu.appendChild(state.ctxmenu.inpaintTypeSelect);
 				menu.appendChild(state.ctxmenu.denoisingStrengthSlider);
-				menu.appendChild(state.ctxmenu.borderMaskGradientCheckbox);
+				const btnArray2 = document.createElement("div");
+				btnArray2.classList.add("checkbox-array");
+				btnArray2.appendChild(state.ctxmenu.fullResolutionLabel);
+				btnArray2.appendChild(state.ctxmenu.borderMaskGradientCheckbox);
+				menu.appendChild(btnArray2);
 				menu.appendChild(state.ctxmenu.borderMaskSlider);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
 			},

js/ui/tool/interrogate.js

@@ -97,8 +97,9 @@ const interrogateTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 				}
 
 				menu.appendChild(state.ctxmenu.cursorSizeSlider);

js/ui/tool/select.js

@@ -633,23 +633,26 @@ const selectTransformTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Keep Aspect Ratio
 					state.ctxmenu.keepAspectRatioLabel = _toolbar_input.checkbox(
 						state,
 						"keepAspectRatio",
-						"Keep Aspect Ratio"
+						"Keep Aspect Ratio",
-					).label;
+						"icon-maximize"
+					).checkbox;
 
 					// Use Clipboard
 					const clipboardCheckbox = _toolbar_input.checkbox(
 						state,
 						"useClipboard",
-						"Use clipboard"
+						"Use clipboard",
+						"icon-clipboard-list"
 					);
-					state.ctxmenu.useClipboardLabel = clipboardCheckbox.label;
+					state.ctxmenu.useClipboardLabel = clipboardCheckbox.checkbox;
 					if (!(navigator.clipboard && navigator.clipboard.write))
 						clipboardCheckbox.checkbox.disabled = true; // Disable if not available
 
@@ -760,11 +763,12 @@ const selectTransformTool = () =>
 					state.ctxmenu.actionArray = actionArray;
 					state.ctxmenu.visibleActionArray = visibleActionArray;
 				}
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.keepAspectRatioLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.keepAspectRatioLabel);
-				menu.appendChild(state.ctxmenu.useClipboardLabel);
+				array.appendChild(state.ctxmenu.useClipboardLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.selectionPeekOpacitySlider);
 				menu.appendChild(state.ctxmenu.actionArray);
 				menu.appendChild(state.ctxmenu.visibleActionArray);

js/ui/tool/stamp.js

@@ -368,11 +368,17 @@ const stampTool = () =>
 				if (!state.ctxmenu) {
 					state.ctxmenu = {};
 					// Snap To Grid Checkbox
-					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
+					const array = document.createElement("div");
-						state,
+					array.classList.add("checkbox-array");
-						"snapToGrid",
+					array.appendChild(
-						"Snap To Grid"
+						_toolbar_input.checkbox(
-					).label;
+							state,
+							"snapToGrid",
+							"Snap To Grid",
+							"icon-grid"
+						).checkbox
+					);
+					state.ctxmenu.snapToGridLabel = array;
 
 					// Create resource list
 					const uploadButtonId = `upload-btn-${guid()}`;

pages/configuration.html

@@ -5,12 +5,12 @@
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
 		<link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
-		<link href="../css/icons.css?v=a25504c" rel="stylesheet" />
+		<link href="../css/icons.css?v=caa702e" rel="stylesheet" />
 
 		<link href="../css/index.css?v=69d3b9e" rel="stylesheet" />
 		<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
 
-		<link href="../css/ui/generic.css?v=79bee9b" rel="stylesheet" />
+		<link href="../css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
 
 		<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="../css/ui/layers.css?v=4fd95fe" rel="stylesheet" />

res/icons/clipboard-list.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
+  <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+  <path d="M12 11h4"></path>
+  <path d="M12 16h4"></path>
+  <path d="M8 11h.01"></path>
+  <path d="M8 16h.01"></path>
+
+</svg>

res/icons/equal.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="5" y1="9" x2="19" y2="9"></line>
+  <line x1="5" y1="15" x2="19" y2="15"></line>
+
+</svg>

res/icons/expand.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"></path>
+  <path d="M3 16.2V21m0 0h4.8M3 21l6-6"></path>
+  <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"></path>
+  <path d="M3 7.8V3m0 0h4.8M3 3l6 6"></path>
+
+</svg>

res/icons/grid.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+  <line x1="3" y1="9" x2="21" y2="9"></line>
+  <line x1="3" y1="15" x2="21" y2="15"></line>
+  <line x1="9" y1="3" x2="9" y2="21"></line>
+  <line x1="15" y1="3" x2="15" y2="21"></line>
+
+</svg>

res/icons/maximize.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
+  <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
+  <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
+  <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
+
+</svg>

res/icons/pin.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="12" y1="17" x2="12" y2="22"></line>
+  <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"></path>
+
+</svg>

res/icons/square.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+
+</svg>

res/icons/venetian-mask.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M2 12a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V7h-5a8 8 0 0 0-5 2 8 8 0 0 0-5-2H2Z"></path>
+  <path d="M6 11c1.5 0 3 .5 3 2-2 0-3 0-3-2Z"></path>
+  <path d="M18 11c-1.5 0-3 .5-3 2 2 0 3 0 3-2Z"></path>
+
+</svg>