From 3ce539effe2b26f2cf1112ea4622fe8ad7927605 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Thu, 15 Aug 2024 13:29:44 -0400
Subject: [PATCH] large rewrite; lint, type fixes; artwork branch clone
 complete

---
 .husky/pre-commit                             |   6 +-
 .prettierrc.js                                |  31 --
 app/components/logo.tsx                       |   2 +-
 app/components/progress-bar.tsx               |   2 +-
 .../templates/canvas/artwork-canvas.tsx       |   4 +-
 .../templates/canvas/canvas-share.tsx         |   4 +-
 .../templates/combobox/nav-combobox.tsx       |   6 +-
 app/components/templates/form/fetcher-hex.tsx |   8 +-
 .../templates/form/fetcher-icon-dialog.tsx    |  10 +
 .../templates/form/fetcher-image-select.tsx   |   2 +-
 .../templates/form/fetcher-image-upload.tsx   |  24 +-
 .../templates/form/fetcher-number.tsx         |   8 +-
 .../templates/form/fetcher-select.tsx         |  10 +-
 .../templates/form/fetcher-text.tsx           |   8 +-
 app/components/templates/navbar/combobox.tsx  |   6 +-
 ...rd-entity-panel.actions.update.visible.tsx |  10 +-
 .../templates/sidebar/sidebar-tabs.tsx        |   4 +-
 app/components/ui/input-hidden.tsx            |  15 +-
 app/entry.client.tsx                          |   2 +-
 app/entry.server.tsx                          |   4 +-
 .../linked-list.node.update.server.ts         |  31 +-
 app/models/__shared/linked-list.utils.ts      |   8 +-
 app/models/artwork-branch/_._schema.ts        |  13 +-
 .../artwork-branch/_.clone.definitions.ts     |   4 +-
 .../artwork-branch/_.create.db.server.ts      |  18 -
 app/models/artwork-branch/_.create.schema.ts  |   6 +
 app/models/artwork-branch/_.get.server.ts     |  22 +-
 .../artwork-version.clone.service.ts          |  17 +-
 .../artwork-versions.clone.definitions.ts     |   9 +
 .../artwork-versions.clone.service.ts         | 127 +++++
 app/models/artwork-version/_._utils.ts        |  18 +
 .../artwork-version/_.clone.definitions.ts    |   5 +-
 .../artwork-version.create.server.ts          |   2 +-
 .../artwork-version.get.server.ts             |  64 ++-
 .../layer/__components.panel.create.tsx       |   2 +-
 .../artwork-version/layer/clone.service.ts    |  42 +-
 .../artwork-version/layer/create.service.ts   |   2 +-
 .../layer/definitions.clone.ts                |   1 -
 .../layer/update.reorder.move-down.service.ts |   2 +-
 app/models/artwork/artwork-branch._schema.ts  |  10 +-
 .../artwork-branch.clone.definitions.ts       |   2 -
 .../artwork/artwork-branch.clone.form.tsx     |  59 +--
 .../artwork/artwork-branch.clone.service.ts   |  44 +-
 .../artwork-branch.clone.submission.ts        |   7 +-
 app/models/artwork/artwork.get.server.ts      |  17 +-
 app/models/asset/asset.get.server.ts          |  13 +-
 app/models/asset/image/image.get.server.ts    |  19 +-
 .../design-layer.update.server.ts             |  21 -
 app/models/design/design.get.server.ts        |  34 +-
 .../fill/update.attribute.style.submission.ts |   9 +-
 app/models/design/layout/layout.get.server.ts |  17 +-
 app/models/design/line/line.get.server.ts     |  17 +-
 .../design/palette/palette.get.server.ts      |  17 +-
 app/models/design/rotate/rotate.get.server.ts |  17 +-
 app/models/design/size/size.get.server.ts     |  17 +-
 app/models/design/stroke/stroke.get.server.ts |  17 +-
 .../design/template/template.get.server.ts    |  17 +-
 app/models/design/utils.ts                    |  17 +-
 app/models/layer/definitions.ts               |   1 -
 .../design.__components.panel.visible.tsx     |  45 ++
 app/models/layer/layer.create.server.ts       |   3 -
 app/models/layer/layer.get.server.ts          |  27 +-
 .../layer/layer.update.linked-list.server.ts  |   1 -
 app/models/project/project.get.server.ts      |  17 +-
 app/models/user/user.get.server.ts            |  13 +-
 .../_auth+/auth.$provider.callback.test.ts    | 490 +++++++++---------
 app/routes/_auth+/auth.$provider.callback.ts  |   3 +-
 app/routes/_auth+/onboarding_.$provider.tsx   |   5 +-
 app/routes/_marketing+/index.tsx              |  12 +-
 app/routes/editor+/index.tsx                  |   2 +-
 .../header.artwork.button-group.tsx           |  11 +-
 .../header.artwork.comboboxes.tsx             |   3 -
 .../__components/header.artwork.tsx           |   2 +-
 .../api.v1+/artwork-branch.create.tsx         | 182 -------
 .../asset.image.artwork-version.clone.tsx     |   2 +-
 .../resources+/api.v1+/asset.update.name.tsx  |   4 +-
 .../api.v1+/entity.create.dialog.tsx          |   1 +
 .../api.v1+/entity.toggle.attribute.tsx       |   2 +-
 .../api.v1+/layer.design.update.visible.tsx   | 110 ----
 .../api.v1+/layer.update.description.tsx      |   4 +-
 .../resources+/api.v1+/layer.update.name.tsx  |   4 +-
 .../artworks+/$artworkId/_index/route.tsx     |   6 +-
 app/services/artwork/branch/create.service.ts | 108 ----
 .../artwork/version/layer/delete.service.ts   |   1 -
 .../artwork/version/layer/move-up.service.ts  |   1 -
 ...et.image.artwork-version.delete.service.ts |   1 -
 .../asset.image.artwork.delete.service.ts     |   1 -
 .../asset.image.layer.delete.service.ts       |   1 -
 .../build/build-layer-draw-fill.service.ts    |   2 +-
 ...build-layer-draw-position.pixel.service.ts |   9 +-
 .../build/build-layer-draw-stroke.service.ts  |   2 +-
 .../layer/draw/draw-layers.asset.service.ts   |   4 +-
 .../canvas/layer/draw/draw-layers.service.ts  |   4 +-
 .../design-type/update-layout.service.ts      |   4 -
 .../design-type/update-line.service.ts        |   3 -
 .../design-type/update-palette.service.ts     |   1 -
 .../design-type/update-rotate.service.ts      |   2 -
 .../design-type/update-size.service.ts        |   3 -
 .../design-type/update-stroke.service.ts      |   3 -
 app/utils/array.utils.ts                      |   6 +-
 app/utils/conform-utils.ts                    |   4 +-
 app/utils/db.server.ts                        |   4 +-
 app/utils/providers/github.server.ts          |  10 +-
 app/utils/typescript-helpers.ts               |   2 +-
 dev/model-file-structure/entity._._utils.ts   |  16 +
 .../entity._.get.db.server.ts                 |  72 ++-
 .../entity.child.clone.form.tsx               |   2 +-
 .../entity.children.clone.service.ts          | 109 ++--
 package-lock.json                             | 192 +++----
 package.json                                  |   5 +-
 prisma/seed.ts                                |  22 +-
 tests/e2e/onboarding.test.ts                  |   2 +-
 112 files changed, 1102 insertions(+), 1374 deletions(-)
 create mode 100644 app/models/artwork-branch/_.create.schema.ts
 create mode 100644 app/models/artwork-branch/artwork-versions.clone.definitions.ts
 create mode 100644 app/models/artwork-branch/artwork-versions.clone.service.ts
 create mode 100644 app/models/artwork-version/_._utils.ts
 delete mode 100644 app/models/design-layer/design-layer.update.server.ts
 create mode 100644 app/models/layer/design.__components.panel.visible.tsx
 delete mode 100644 app/routes/resources+/api.v1+/artwork-branch.create.tsx
 delete mode 100644 app/routes/resources+/api.v1+/layer.design.update.visible.tsx
 delete mode 100644 app/services/artwork/branch/create.service.ts
 create mode 100644 dev/model-file-structure/entity._._utils.ts

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 87a0002d..cd03e92f 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,6 +1,6 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-# npm run build
-# npm run lint
-# npm run typecheck
+npm run build
+npm run lint
+npm run typecheck
diff --git a/.prettierrc.js b/.prettierrc.js
index 6e7ef2ce..c2d1fdcc 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -5,34 +5,3 @@ export default {
 	...defaultConfig,
 	// .. your overrides here...
 }
-
-// /** @type {import("prettier").Options} */
-// export default {
-// 	arrowParens: 'avoid',
-// 	bracketSameLine: false,
-// 	bracketSpacing: true,
-// 	embeddedLanguageFormatting: 'auto',
-// 	endOfLine: 'lf',
-// 	htmlWhitespaceSensitivity: 'css',
-// 	insertPragma: false,
-// 	jsxSingleQuote: false,
-// 	printWidth: 80,
-// 	proseWrap: 'always',
-// 	quoteProps: 'as-needed',
-// 	requirePragma: false,
-// 	semi: false,
-// 	singleAttributePerLine: false,
-// 	singleQuote: true,
-// 	tabWidth: 2,
-// 	trailingComma: 'all',
-// 	useTabs: true,
-// 	overrides: [
-// 		{
-// 			files: ['**/*.json'],
-// 			options: {
-// 				useTabs: false,
-// 			},
-// 		},
-// 	],
-// 	plugins: ['prettier-plugin-tailwindcss'],
-// }
diff --git a/app/components/logo.tsx b/app/components/logo.tsx
index 40f6241f..879833a0 100644
--- a/app/components/logo.tsx
+++ b/app/components/logo.tsx
@@ -21,7 +21,7 @@ const Logo = () => {
 		<Link to="/" className="group grid leading-snug">
 			<div className="mt-[-12px] flex flex-col">
 				{/* It first renders the Character component for the first character of the string */}
-				<Character char={str[0]} />
+				<Character char={str[0] as string} />
 				<div className="flex">
 					{/* Then it maps over the rest of the string and for each character, it renders a Character component */}
 					{str
diff --git a/app/components/progress-bar.tsx b/app/components/progress-bar.tsx
index f7f9b495..00737aea 100644
--- a/app/components/progress-bar.tsx
+++ b/app/components/progress-bar.tsx
@@ -22,7 +22,7 @@ function EpicProgress() {
 			.getAnimations()
 			.map(({ finished }) => finished)
 
-		Promise.allSettled(animationPromises).then(() => {
+		void Promise.allSettled(animationPromises).then(() => {
 			if (!delayedPending) setAnimationComplete(true)
 		})
 	}, [delayedPending])
diff --git a/app/components/templates/canvas/artwork-canvas.tsx b/app/components/templates/canvas/artwork-canvas.tsx
index 364ee8a8..f3780bc5 100644
--- a/app/components/templates/canvas/artwork-canvas.tsx
+++ b/app/components/templates/canvas/artwork-canvas.tsx
@@ -20,13 +20,13 @@ export const ArtworkCanvas = memo(
 		useEffect(() => {
 			const canvas = canvasRef.current
 			if (canvas) {
-				canvasDrawService({ canvas, generator })
+				void canvasDrawService({ canvas, generator })
 			}
 		}, [canvasRef, generator, refresh])
 
 		const canvasFooter = useCallback(() => {
 			const handleRefresh = () => {
-				setRefresh(prev => prev + 1)
+				setRefresh((prev) => prev + 1)
 			}
 			return (
 				<CanvasFooter
diff --git a/app/components/templates/canvas/canvas-share.tsx b/app/components/templates/canvas/canvas-share.tsx
index e633cceb..bab1783b 100644
--- a/app/components/templates/canvas/canvas-share.tsx
+++ b/app/components/templates/canvas/canvas-share.tsx
@@ -19,7 +19,7 @@ export const ShareCanvas = memo(
 				const canvas = canvasRef.current
 				if (!canvas) return false
 
-				canvas.toBlob(blob => {
+				canvas.toBlob((blob) => {
 					if (!blob) return
 					const file = new File([blob], downloadImageFileName(), {
 						type: 'image/png',
@@ -63,7 +63,7 @@ export const ShareCanvas = memo(
 			const shareData = {
 				files: filesArray,
 			}
-			navigator.share(shareData as any).then(() => {
+			void navigator.share(shareData as any).then(() => {
 				console.log('Shared successfully')
 			})
 		}
diff --git a/app/components/templates/combobox/nav-combobox.tsx b/app/components/templates/combobox/nav-combobox.tsx
index 609a24d0..6dcb3bcc 100644
--- a/app/components/templates/combobox/nav-combobox.tsx
+++ b/app/components/templates/combobox/nav-combobox.tsx
@@ -21,7 +21,6 @@ import { capitalize } from '#app/utils/string-formatting'
 
 interface EntitySelectorProps extends PopoverProps {
 	entities: IEntityWithSlug[]
-	entitySingular?: string
 	entityPlural?: string
 	placeholder?: string
 	slugParam?: string
@@ -30,7 +29,6 @@ interface EntitySelectorProps extends PopoverProps {
 
 export function ComboboxNav({
 	entities,
-	entitySingular = 'entity',
 	entityPlural = 'entities',
 	placeholder = 'Select...',
 	slugParam,
@@ -40,7 +38,7 @@ export function ComboboxNav({
 	const [open, setOpen] = useState(false)
 	const params = useParams()
 	const paramsSlug = slugParam ? params[slugParam] : params.slug
-	const currentEntity = entities.find(entity => entity.slug === paramsSlug)
+	const currentEntity = entities.find((entity) => entity.slug === paramsSlug)
 
 	return (
 		<Popover open={open} onOpenChange={setOpen} {...props}>
@@ -64,7 +62,7 @@ export function ComboboxNav({
 					<CommandInput placeholder={`Search ${entityPlural}...`} />
 					<CommandEmpty>No {entityPlural} found.</CommandEmpty>
 					<CommandGroup heading={capitalize(entityPlural)}>
-						{entities.map(entity => (
+						{entities.map((entity) => (
 							<CommandItem key={entity.id} onSelect={() => setOpen(false)}>
 								<Link prefetch="intent" to={`${baseUrl}/${entity.slug}`}>
 									{entity.name}
diff --git a/app/components/templates/form/fetcher-hex.tsx b/app/components/templates/form/fetcher-hex.tsx
index 04adeb30..0ef92092 100644
--- a/app/components/templates/form/fetcher-hex.tsx
+++ b/app/components/templates/form/fetcher-hex.tsx
@@ -68,7 +68,7 @@ export const FetcherHex = ({
 	// hack to submit select form on change
 	// through conform-to and fetcher
 	const submitRef = useRef<HTMLButtonElement>(null)
-	const handleChangeSubmit = useDebounce((f: HTMLFormElement) => {
+	const handleChangeSubmit = useDebounce(() => {
 		submitRef.current?.click()
 	}, 400)
 
@@ -82,7 +82,7 @@ export const FetcherHex = ({
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 			className="flex-1"
 		>
@@ -95,10 +95,10 @@ export const FetcherHex = ({
 				<Input
 					maxLength={6}
 					className="flex h-8"
-					onInput={e => handleInput(e.currentTarget)}
+					onInput={(e) => handleInput(e.currentTarget)}
 					placeholder={placeholder}
 					disabled={isPending}
-					{...conform.input(fields[fieldName], {
+					{...conform.input(fields[fieldName]!, {
 						ariaAttributes: true,
 					})}
 				/>
diff --git a/app/components/templates/form/fetcher-icon-dialog.tsx b/app/components/templates/form/fetcher-icon-dialog.tsx
index 65844530..89710a4f 100644
--- a/app/components/templates/form/fetcher-icon-dialog.tsx
+++ b/app/components/templates/form/fetcher-icon-dialog.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { type z } from 'zod'
 import { DialogContentGrid } from '#app/components/layout/dialog'
+import { quickToast } from '#app/components/toaster.js'
 import {
 	Dialog,
 	DialogContent,
@@ -73,6 +74,15 @@ export const FetcherIconDialog = ({
 			// parent component may want to do something
 			// such as navigate to a new page
 			onSuccessfulSubmission(fetcher.data)
+		} else if (
+			fetcher.state === 'loading' &&
+			fetcher.data?.status === 'error'
+		) {
+			quickToast({
+				type: 'error',
+				title: 'Error',
+				description: fetcher.data.message,
+			})
 		}
 	}, [fetcher, onSuccessfulSubmission])
 
diff --git a/app/components/templates/form/fetcher-image-select.tsx b/app/components/templates/form/fetcher-image-select.tsx
index b17890ff..5d4351d1 100644
--- a/app/components/templates/form/fetcher-image-select.tsx
+++ b/app/components/templates/form/fetcher-image-select.tsx
@@ -129,7 +129,7 @@ export const FetcherImageSelect = ({
 							<fieldset>
 								<FlexColumn className="gap-4">
 									{conform
-										.collection(assetImageId, {
+										.collection(assetImageId!, {
 											type: 'radio',
 											options: images.map(image => image.id),
 										})
diff --git a/app/components/templates/form/fetcher-image-upload.tsx b/app/components/templates/form/fetcher-image-upload.tsx
index 600d321b..8d93d114 100644
--- a/app/components/templates/form/fetcher-image-upload.tsx
+++ b/app/components/templates/form/fetcher-image-upload.tsx
@@ -124,7 +124,7 @@ export const FetcherImageUpload = ({
 								<ImagePreviewContainer>
 									<ImagePreviewWrapper>
 										<ImagePreviewLabel
-											htmlFor={fields.file.id}
+											htmlFor={fields.file?.id ?? ''}
 											className={!previewImage ? noImagePreviewClassName : ''}
 										>
 											{previewImage ? (
@@ -159,7 +159,7 @@ export const FetcherImageUpload = ({
 													}
 												}}
 												accept="image/*"
-												{...conform.input(fields.file, {
+												{...conform.input(fields.file!, {
 													type: 'file',
 													ariaAttributes: true,
 												})}
@@ -168,8 +168,8 @@ export const FetcherImageUpload = ({
 									</ImagePreviewWrapper>
 									<div className="min-h-[32px] px-4 pb-3 pt-1">
 										<ErrorList
-											id={fields.file.errorId}
-											errors={fields.file.errors}
+											id={fields.file?.errorId ?? ''}
+											errors={fields.file?.errors ?? []}
 										/>
 									</div>
 								</ImagePreviewContainer>
@@ -177,29 +177,29 @@ export const FetcherImageUpload = ({
 									labelProps={{ children: 'Name' }}
 									inputProps={{
 										autoFocus: true,
-										...conform.input(fields.name, { ariaAttributes: true }),
-										onChange: e => setName(e.currentTarget.value),
+										...conform.input(fields.name!, { ariaAttributes: true }),
+										onChange: (e) => setName(e.currentTarget.value),
 									}}
-									errors={fields.name.errors}
+									errors={fields.name!.errors}
 								/>
 								<TextareaField
 									labelProps={{ children: 'Description' }}
 									textareaProps={{
-										...conform.textarea(fields.description, {
+										...conform.textarea(fields.description!, {
 											ariaAttributes: true,
 										}),
 									}}
-									errors={fields.description.errors}
+									errors={fields.description!.errors}
 								/>
 								<TextareaField
 									labelProps={{ children: 'Alt Text' }}
 									textareaProps={{
-										...conform.textarea(fields.altText, {
+										...conform.textarea(fields.altText!, {
 											ariaAttributes: true,
 										}),
-										onChange: e => setAltText(e.currentTarget.value),
+										onChange: (e) => setAltText(e.currentTarget.value),
 									}}
-									errors={fields.altText.errors}
+									errors={fields.altText!.errors}
 								/>
 							</FlexColumn>
 						</DialogFormsContainer>
diff --git a/app/components/templates/form/fetcher-number.tsx b/app/components/templates/form/fetcher-number.tsx
index f6a81d83..35dbd229 100644
--- a/app/components/templates/form/fetcher-number.tsx
+++ b/app/components/templates/form/fetcher-number.tsx
@@ -67,7 +67,7 @@ export const FetcherNumber = ({
 	// hack to submit select form on change
 	// through conform-to and fetcher
 	const submitRef = useRef<HTMLButtonElement>(null)
-	const handleChangeSubmit = useDebounce((f: HTMLFormElement) => {
+	const handleChangeSubmit = useDebounce(() => {
 		submitRef.current?.click()
 	}, 400)
 
@@ -75,7 +75,7 @@ export const FetcherNumber = ({
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 			className="flex-1"
 		>
@@ -88,7 +88,7 @@ export const FetcherNumber = ({
 			<div className="flex w-full items-center space-x-2">
 				{/* icon might be for artwork height, width */}
 				{icon && (
-					<Label htmlFor={fields[fieldName].id} className="w-5 flex-shrink-0">
+					<Label htmlFor={fields[fieldName]!.id} className="w-5 flex-shrink-0">
 						<Icon name={icon} className="h-5 w-5" />
 					</Label>
 				)}
@@ -103,7 +103,7 @@ export const FetcherNumber = ({
 						autoComplete="off"
 						placeholder={placeholder}
 						disabled={isPending}
-						{...conform.input(fields[fieldName], {
+						{...conform.input(fields[fieldName]!, {
 							ariaAttributes: true,
 						})}
 					/>
diff --git a/app/components/templates/form/fetcher-select.tsx b/app/components/templates/form/fetcher-select.tsx
index f34c916e..5eb3e4e7 100644
--- a/app/components/templates/form/fetcher-select.tsx
+++ b/app/components/templates/form/fetcher-select.tsx
@@ -71,7 +71,7 @@ export const FetcherSelect = ({
 	// hack to submit select form on change
 	// through conform-to and fetcher
 	const submitRef = useRef<HTMLButtonElement>(null)
-	const handleChangeSubmit = (f: HTMLFormElement) => {
+	const handleChangeSubmit = () => {
 		submitRef.current?.click()
 	}
 
@@ -79,7 +79,7 @@ export const FetcherSelect = ({
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 			className="flex-1"
 		>
@@ -88,15 +88,15 @@ export const FetcherSelect = ({
 			{/* hidden field values */}
 			{children}
 
-			<Select disabled={isPending} {...conform.input(fields[fieldName])}>
+			<Select disabled={isPending} {...conform.input(fields[fieldName]!)}>
 				<TooltipHydrated tooltipText={tooltipText} isHydrated={isHydrated}>
 					<SelectTrigger className="flex h-8 flex-1 text-left">
 						<SelectValue placeholder={placeholder} />
 					</SelectTrigger>
 				</TooltipHydrated>
 				<SelectContent>
-					{options.map(option => {
-						const [value, label] = Object.entries(option)[0]
+					{options.map((option) => {
+						const [value, label] = Object.entries(option)[0] as [string, string]
 						return (
 							<SelectItem key={label} value={value}>
 								{label as string}
diff --git a/app/components/templates/form/fetcher-text.tsx b/app/components/templates/form/fetcher-text.tsx
index 2bf59283..80526112 100644
--- a/app/components/templates/form/fetcher-text.tsx
+++ b/app/components/templates/form/fetcher-text.tsx
@@ -69,7 +69,7 @@ export const FetcherText = ({
 	// hack to submit select form on change
 	// through conform-to and fetcher
 	const submitRef = useRef<HTMLButtonElement>(null)
-	const handleChangeSubmit = useDebounce((f: HTMLFormElement) => {
+	const handleChangeSubmit = useDebounce(() => {
 		submitRef.current?.click()
 	}, 400)
 
@@ -77,7 +77,7 @@ export const FetcherText = ({
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 			className="flex-1"
 		>
@@ -90,7 +90,7 @@ export const FetcherText = ({
 			<div className="flex w-full items-center space-x-2">
 				{/* icon might be for artwork height, width */}
 				{icon && (
-					<Label htmlFor={fields[fieldName].id} className="w-5 flex-shrink-0">
+					<Label htmlFor={fields[fieldName]!.id} className="w-5 flex-shrink-0">
 						<Icon name={icon} className="h-5 w-5" />
 					</Label>
 				)}
@@ -101,7 +101,7 @@ export const FetcherText = ({
 						autoComplete="off"
 						placeholder={placeholder}
 						disabled={disabled || isPending}
-						{...conform.input(fields[fieldName], {
+						{...conform.input(fields[fieldName]!, {
 							ariaAttributes: true,
 						})}
 					/>
diff --git a/app/components/templates/navbar/combobox.tsx b/app/components/templates/navbar/combobox.tsx
index 97a9bf37..23351b97 100644
--- a/app/components/templates/navbar/combobox.tsx
+++ b/app/components/templates/navbar/combobox.tsx
@@ -21,7 +21,6 @@ import { capitalize } from '#app/utils/string-formatting'
 
 interface EntitySelectorProps extends PopoverProps {
 	entities: IEntityWithSlug[]
-	entitySingular?: string
 	entityPlural?: string
 	placeholder?: string
 	slugParam?: string
@@ -30,7 +29,6 @@ interface EntitySelectorProps extends PopoverProps {
 
 export function ComboboxNav({
 	entities,
-	entitySingular = 'entity',
 	entityPlural = 'entities',
 	placeholder = 'Select...',
 	slugParam,
@@ -40,7 +38,7 @@ export function ComboboxNav({
 	const [open, setOpen] = useState(false)
 	const params = useParams()
 	const paramsSlug = slugParam ? params[slugParam] : params.slug
-	const currentEntity = entities.find(entity => entity.slug === paramsSlug)
+	const currentEntity = entities.find((entity) => entity.slug === paramsSlug)
 
 	return (
 		<Popover open={open} onOpenChange={setOpen} {...props}>
@@ -64,7 +62,7 @@ export function ComboboxNav({
 					<CommandInput placeholder={`Search ${entityPlural}...`} />
 					<CommandEmpty>No {entityPlural} found.</CommandEmpty>
 					<CommandGroup heading={capitalize(entityPlural)}>
-						{entities.map(entity => (
+						{entities.map((entity) => (
 							<CommandItem key={entity.id} onSelect={() => setOpen(false)}>
 								<Link prefetch="intent" to={`${baseUrl}/${entity.slug}`}>
 									{entity.name}
diff --git a/app/components/templates/panel/dashboard-entity-panel.actions.update.visible.tsx b/app/components/templates/panel/dashboard-entity-panel.actions.update.visible.tsx
index 3870515a..1018a6fc 100644
--- a/app/components/templates/panel/dashboard-entity-panel.actions.update.visible.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.actions.update.visible.tsx
@@ -3,11 +3,10 @@ import { type IArtworkVersion } from '#app/models/artwork-version/definitions'
 import { ToggleArtworkVersionDesignVisibleForm } from '#app/models/artwork-version/design/__components.panel.visible'
 import { ToggleArtworkVersionLayerVisibleForm } from '#app/models/artwork-version/layer/__components.panel.visible'
 import { type IAssetImage } from '#app/models/asset/image/image.server'
-import { type IDesign } from '#app/models/design/definitions'
 import { type ILayer } from '#app/models/layer/definitions'
+import { ToggleLayerDesignVisibleForm } from '#app/models/layer/design.__components.panel.visible'
 import { AssetImageArtworkVersionUpdateVisible } from '#app/routes/resources+/api.v1+/asset.image.artwork-version.update.visible'
 import { AssetImageLayerUpdateVisible } from '#app/routes/resources+/api.v1+/asset.image.layer.update.visible'
-import { LayerDesignToggleVisible } from '#app/routes/resources+/api.v1+/layer.design.update.visible'
 import {
 	type entityParentTypeEnum,
 	type entityTypeEnum,
@@ -72,9 +71,10 @@ const LayerToggleVisibleChildEntityForm = memo(
 				)
 			case EntityType.DESIGN:
 				return (
-					<LayerDesignToggleVisible
-						design={entity as IDesign}
-						layer={parent as ILayer}
+					<ToggleLayerDesignVisibleForm
+						entityType={entityType}
+						entity={entity}
+						parent={parent}
 					/>
 				)
 			default:
diff --git a/app/components/templates/sidebar/sidebar-tabs.tsx b/app/components/templates/sidebar/sidebar-tabs.tsx
index 4b8116ec..7f45056a 100644
--- a/app/components/templates/sidebar/sidebar-tabs.tsx
+++ b/app/components/templates/sidebar/sidebar-tabs.tsx
@@ -14,13 +14,13 @@ const SidebarTabs = ({
 	defaultValue?: string
 	children: React.ReactNode
 }) => {
-	const defaultTab = defaultValue || tabs[0]
+	const defaultTab = defaultValue || tabs[0] || ''
 
 	return (
 		<TabbedSidebar defaultValue={defaultTab}>
 			{/* tab triggers */}
 			<TabbedSidebarList cols={tabs.length}>
-				{tabs.map(tab => (
+				{tabs.map((tab) => (
 					<TabbedSidebarTrigger key={tab} value={tab} />
 				))}
 			</TabbedSidebarList>
diff --git a/app/components/ui/input-hidden.tsx b/app/components/ui/input-hidden.tsx
index d95ba2fb..efbc0de5 100644
--- a/app/components/ui/input-hidden.tsx
+++ b/app/components/ui/input-hidden.tsx
@@ -2,7 +2,10 @@ import { type AllIntentValues } from '#app/constants/intent'
 import { type IArtwork } from '#app/models/artwork/artwork.server'
 import { type IArtworkBranch } from '#app/models/artwork-branch/_._definitions.js'
 import { type IArtworkVersion } from '#app/models/artwork-version/definitions'
-import { type designTypeEnum, type IDesign } from '#app/models/design/definitions'
+import {
+	type designTypeEnum,
+	type IDesign,
+} from '#app/models/design/definitions'
 import { type ILayer } from '#app/models/layer/definitions'
 import { type IExampleEntity } from '#dev/model-file-structure/entity._._definitions.js'
 
@@ -29,7 +32,11 @@ export const HiddenInputId = ({ id }: { id: IArtworkVersion['id'] }) => {
 	return <HiddenInput name="id" value={id} />
 }
 
-export const HiddenInputExampleEntityId = ({ id }: { id: IExampleEntity['id'] }) => {
+export const HiddenInputExampleEntityId = ({
+	id,
+}: {
+	id: IExampleEntity['id']
+}) => {
 	return <HiddenInput name="exampleEntityId" value={id} />
 }
 
@@ -47,6 +54,10 @@ export const HiddenInputArtworkBranch = ({
 	return <HiddenInput name="branchId" value={id} />
 }
 
+export const HiddenInputVersion = ({ id }: { id: IArtworkVersion['id'] }) => {
+	return <HiddenInput name="versionId" value={id} />
+}
+
 export const HiddenInputArtworkVersion = ({
 	id,
 }: {
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
index cfea5580..cef8316e 100644
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -3,7 +3,7 @@ import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
-	import('./utils/monitoring.client.tsx').then(({ init }) => init())
+	void import('./utils/monitoring.client.tsx').then(({ init }) => init())
 }
 
 startTransition(() => {
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index 7ce34ba6..90e85902 100644
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -21,7 +21,7 @@ init()
 global.ENV = getEnv()
 
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
-	import('./utils/monitoring.server.ts').then(({ init }) => init())
+	void import('./utils/monitoring.server.ts').then(({ init }) => init())
 }
 
 type DocRequestArgs = Parameters<HandleDocumentRequestFunction>
@@ -103,7 +103,7 @@ export function handleError(
 	}
 	if (error instanceof Error) {
 		console.error(chalk.red(error.stack))
-		Sentry.captureRemixServerException(error, 'remix.server', request)
+		void Sentry.captureRemixServerException(error, 'remix.server', request)
 	} else {
 		console.error(chalk.red(error))
 		Sentry.captureException(error)
diff --git a/app/models/__shared/linked-list.node.update.server.ts b/app/models/__shared/linked-list.node.update.server.ts
index c1c51185..216956ed 100644
--- a/app/models/__shared/linked-list.node.update.server.ts
+++ b/app/models/__shared/linked-list.node.update.server.ts
@@ -62,6 +62,35 @@ export const connectNodes = ({
 	return [connectNextToPrev, connectPrevToNext]
 }
 
+export const connectUnlinkedNodes = ({
+	items,
+	type,
+}: {
+	items: LinkedListNode[]
+	type: linkedListNodeTypeEnum
+}) => {
+	// Step 1: Initialize prevId as null
+	let prevId: string | null = null
+
+	// Step 2: Use map to iterate through the items and create promises
+	const promises = items.flatMap((item) => {
+		const connectPromise = prevId
+			? connectNodes({
+					type,
+					prevId,
+					nextId: item.id,
+				})
+			: []
+
+		// Step 3: Update prevId for the next iteration
+		prevId = item.id
+
+		return connectPromise
+	})
+
+	return promises
+}
+
 export const updateNodeToHead = ({
 	id,
 	type,
@@ -111,7 +140,7 @@ export const updateNodesRemoveNodes = ({
 	nodes: LinkedListNode[]
 	type: linkedListNodeTypeEnum
 }) => {
-	return nodes.map(node =>
+	return nodes.map((node) =>
 		updateNodeFields({
 			type,
 			where: { id: node.id },
diff --git a/app/models/__shared/linked-list.utils.ts b/app/models/__shared/linked-list.utils.ts
index 3999b95d..d6afa9d9 100644
--- a/app/models/__shared/linked-list.utils.ts
+++ b/app/models/__shared/linked-list.utils.ts
@@ -4,20 +4,20 @@ import { type LinkedListNode } from './linked-list.definitions'
 // i.e., two heads, two tails, missing items, etc.
 
 export const orderLinkedItems = <T extends LinkedListNode>(items: T[]): T[] => {
-	const heads = items.filter(item => !item.prevId)
+	const heads = items.filter((item) => !item.prevId)
 	if (heads.length > 1) {
 		console.warn('Multiple heads found in the linked list.')
 		console.log('heads', heads)
 	}
 
-	const tails = items.filter(item => !item.nextId)
+	const tails = items.filter((item) => !item.nextId)
 	if (tails.length > 1) {
 		console.warn('Multiple tails found in the linked list.')
 		console.log('tails', tails)
 	}
 
 	// Step 1: Find the head of the list
-	const head = items.find(item => !item.prevId)
+	const head = items.find((item) => !item.prevId)
 	if (!head) return []
 
 	// Step 2: Sequentially order the items starting from the head
@@ -25,7 +25,7 @@ export const orderLinkedItems = <T extends LinkedListNode>(items: T[]): T[] => {
 	let currentItem = head
 	while (currentItem.nextId) {
 		const nextId = currentItem.nextId
-		const nextItem = items.find(item => item.id === nextId)
+		const nextItem = items.find((item) => item.id === nextId)
 
 		if (nextItem) {
 			orderedItems.push(nextItem)
diff --git a/app/models/artwork-branch/_._schema.ts b/app/models/artwork-branch/_._schema.ts
index 1d8ec807..86b0e5f6 100644
--- a/app/models/artwork-branch/_._schema.ts
+++ b/app/models/artwork-branch/_._schema.ts
@@ -1,5 +1,16 @@
 import { type ZodType, z } from 'zod'
-import { type IArtworkBranchParentData } from './_._definitions'
+import {
+	type IArtworkBranchData,
+	type IArtworkBranchParentData,
+} from './_._definitions'
+
+export const ArtworkVersionDataSchema = z.object({
+	name: z.string(),
+	slug: z.string(),
+	description: z.string(),
+	ownerId: z.string(),
+	parentId: z.string().optional(),
+}) satisfies z.Schema<IArtworkBranchData>
 
 export const ArtworkBranchParentSchema = z.object({
 	branchId: z.string(),
diff --git a/app/models/artwork-branch/_.clone.definitions.ts b/app/models/artwork-branch/_.clone.definitions.ts
index 53283dfe..c61c9a00 100644
--- a/app/models/artwork-branch/_.clone.definitions.ts
+++ b/app/models/artwork-branch/_.clone.definitions.ts
@@ -1,7 +1,7 @@
-import { type IArtworkBranch } from "./_._definitions"
+import { type IArtworkBranch } from './_._definitions'
 
 export interface IArtworkBranchCloneData {
 	id: IArtworkBranch['id']
 	name: string
 	description: string
-}
\ No newline at end of file
+}
diff --git a/app/models/artwork-branch/_.create.db.server.ts b/app/models/artwork-branch/_.create.db.server.ts
index 6f9ed203..01e0f8cc 100644
--- a/app/models/artwork-branch/_.create.db.server.ts
+++ b/app/models/artwork-branch/_.create.db.server.ts
@@ -1,7 +1,3 @@
-import { type IntentActionArgs } from '#app/definitions/intent-action-args'
-import { NewArtworkBranchSchema } from '#app/schema/artwork-branch'
-import { ValidateArtworkParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
-import { validateEntitySubmission } from '#app/utils/conform-utils'
 import { prisma } from '#app/utils/db.server'
 import { type IArtwork } from '../artwork/artwork.server'
 import { type IUser } from '../user/user.server'
@@ -16,20 +12,6 @@ export interface IArtworkBranchCreatedResponse {
 	createdArtworkBranch?: IArtworkBranch
 }
 
-export const validateNewArtworkBranchSubmission = async ({
-	userId,
-	formData,
-}: IntentActionArgs) => {
-	const strategy = new ValidateArtworkParentSubmissionStrategy()
-
-	return await validateEntitySubmission({
-		userId,
-		formData,
-		schema: NewArtworkBranchSchema,
-		strategy,
-	})
-}
-
 export const createArtworkBranch = ({
 	data,
 }: {
diff --git a/app/models/artwork-branch/_.create.schema.ts b/app/models/artwork-branch/_.create.schema.ts
new file mode 100644
index 00000000..53ce45ab
--- /dev/null
+++ b/app/models/artwork-branch/_.create.schema.ts
@@ -0,0 +1,6 @@
+import { z } from 'zod'
+import { type IArtworkBranchNewData } from './_.create.definitions'
+
+export const NewArtworkBranchSchema = z.object(
+	{},
+) satisfies z.Schema<IArtworkBranchNewData>
diff --git a/app/models/artwork-branch/_.get.server.ts b/app/models/artwork-branch/_.get.server.ts
index a605fe6a..913fca58 100644
--- a/app/models/artwork-branch/_.get.server.ts
+++ b/app/models/artwork-branch/_.get.server.ts
@@ -1,15 +1,19 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { prisma } from '#app/utils/db.server'
-import { type IArtworkBranch, type IArtworkBranchWithVersions } from './_._definitions'
+import {
+	type IArtworkBranch,
+	type IArtworkBranchWithVersions,
+} from './_._definitions'
 
-export type queryArtworkBranchWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	slug: z.string().optional(),
-	artworkId: z.string().optional(),
-})
+export type queryArtworkBranchWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		slug: z.ZodOptional<z.ZodString>
+		artworkId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/artwork-branch/artwork-version.clone.service.ts b/app/models/artwork-branch/artwork-version.clone.service.ts
index 904e9516..4ab9a2c7 100644
--- a/app/models/artwork-branch/artwork-version.clone.service.ts
+++ b/app/models/artwork-branch/artwork-version.clone.service.ts
@@ -51,10 +51,11 @@ export const cloneArtworkBranchArtworkVersionService = async ({
 		const artworkVersions = await getArtworkVersions({
 			where: { branchId },
 		})
-		const deleteArtworkVersionsPromise = deleteArtworkVersionsAfterCurrent({
-			id,
-			artworkVersions,
-		})
+		const deleteArtworkVersionsAfterCurrentPromise =
+			deleteArtworkVersionsAfterCurrent({
+				id,
+				artworkVersions,
+			})
 
 		// Step 3: get data for cloned artwork version
 		const validatedArtworkVersionData = validateArtworkVersionData({
@@ -68,9 +69,9 @@ export const cloneArtworkBranchArtworkVersionService = async ({
 			data: validatedArtworkVersionData,
 		})
 
-		// Step 5: execute the transactions
+		// Step 5: execute the clone transactions
 		const [, clonedArtworkVersion] = await prisma.$transaction([
-			deleteArtworkVersionsPromise,
+			deleteArtworkVersionsAfterCurrentPromise,
 			cloneArtworkVersionPromise,
 		])
 
@@ -121,13 +122,13 @@ const deleteArtworkVersionsAfterCurrent = ({
 
 	// Step 3: find the index of the current artwork version
 	const currentIndex = orderedArtworkVersions.findIndex(
-		artworkVersion => artworkVersion.id === id,
+		(artworkVersion) => artworkVersion.id === id,
 	)
 
 	// Step 4: get the id's of the artwork versions after the current index
 	const idsToDelete = orderedArtworkVersions
 		.slice(currentIndex + 1)
-		.map(artworkVersion => artworkVersion.id)
+		.map((artworkVersion) => artworkVersion.id)
 
 	// Step 5: return the promise that deletes them
 	return deleteArtworkVersions({
diff --git a/app/models/artwork-branch/artwork-versions.clone.definitions.ts b/app/models/artwork-branch/artwork-versions.clone.definitions.ts
new file mode 100644
index 00000000..af9361dc
--- /dev/null
+++ b/app/models/artwork-branch/artwork-versions.clone.definitions.ts
@@ -0,0 +1,9 @@
+import { type IUser } from '#app/models/user/user.server'
+import { type IArtworkVersionWithChildren } from '../artwork-version/definitions'
+import { type IArtworkBranch } from './_._definitions'
+
+export interface IArtworkBranchArtworkVersionsCloneSubmission {
+	userId: IUser['id']
+	artworkBranchId: IArtworkBranch['id']
+	artworkVersions: IArtworkVersionWithChildren[]
+}
diff --git a/app/models/artwork-branch/artwork-versions.clone.service.ts b/app/models/artwork-branch/artwork-versions.clone.service.ts
new file mode 100644
index 00000000..3dbc9f2e
--- /dev/null
+++ b/app/models/artwork-branch/artwork-versions.clone.service.ts
@@ -0,0 +1,127 @@
+import { type PrismaPromise } from '@prisma/client'
+import { LinkedListNodeTypeEnum } from '#app/models/__shared/linked-list.definitions'
+import { type IUser } from '#app/models/user/user.server'
+import { prisma } from '#app/utils/db.server.js'
+import { getOptionalZodErrorMessage } from '#app/utils/misc'
+import { connectUnlinkedNodes } from '../__shared/linked-list.node.update.server'
+import { getArtworkVersionData } from '../artwork-version/_._utils'
+import { type IArtworkVersionsClonedResponse } from '../artwork-version/_.clone.definitions'
+import { createArtworkVersion } from '../artwork-version/artwork-version.create.server'
+import {
+	type IArtworkVersion,
+	type IArtworkVersionWithChildren,
+} from '../artwork-version/definitions'
+import { cloneDesignsToArtworkVersionService } from '../artwork-version/design/clone.service'
+import { cloneLayersToArtworkVersionService } from '../artwork-version/layer/clone.service'
+import { type IArtworkBranch } from './_._definitions'
+import { type IArtworkBranchArtworkVersionCreateData } from './artwork-version.create.definitions'
+import { ArtworkBranchArtworkVersionSchema } from './artwork-version.schema'
+import { type IArtworkBranchArtworkVersionsCloneSubmission } from './artwork-versions.clone.definitions'
+
+export const cloneArtworkVersionsToArtworkBranchService = async ({
+	userId,
+	artworkBranchId,
+	artworkVersions,
+}: IArtworkBranchArtworkVersionsCloneSubmission): Promise<IArtworkVersionsClonedResponse> => {
+	try {
+		// Step 1: Prepare artwork version create data list
+		const cloneDataList = prepareCloneDataList({
+			userId,
+			branchId: artworkBranchId,
+			artworkVersions,
+		})
+
+		// Step 2: Create cloned artwork versions in order
+		const clonePromises = prepareClonePromises({
+			cloneDataList,
+		})
+		const clonedArtworkVersions = await prisma.$transaction(clonePromises)
+
+		// Step 3: Prepare artwork version update promises
+		// e.g. re-link the cloned artwork versions
+		const updateClonedPromises = connectUnlinkedNodes({
+			items: clonedArtworkVersions,
+			type: LinkedListNodeTypeEnum.ARTWORK_VERSION,
+		})
+		await prisma.$transaction(updateClonedPromises)
+
+		// Step 4: clone children for each cloned artwork version
+		await cloneChildrenToClonedArtworkVersions({
+			userId,
+			artworkVersions,
+			clonedArtworkVersions,
+		})
+
+		return { success: true }
+	} catch (error) {
+		return {
+			success: false,
+			message: getOptionalZodErrorMessage(error),
+		}
+	}
+}
+
+const validateCloneData = ({
+	cloneData,
+}: {
+	cloneData: IArtworkBranchArtworkVersionCreateData
+}) => {
+	return ArtworkBranchArtworkVersionSchema.parse(cloneData)
+}
+
+const prepareCloneDataList = ({
+	userId,
+	branchId,
+	artworkVersions,
+}: {
+	userId: IUser['id']
+	branchId: IArtworkBranch['id']
+	artworkVersions: IArtworkVersionWithChildren[]
+}): IArtworkBranchArtworkVersionCreateData[] => {
+	return artworkVersions.map((artworkVersion) =>
+		validateCloneData({
+			cloneData: {
+				...getArtworkVersionData({
+					artworkVersion,
+				}),
+				ownerId: userId,
+				branchId,
+			},
+		}),
+	)
+}
+
+const prepareClonePromises = ({
+	cloneDataList,
+}: {
+	cloneDataList: IArtworkBranchArtworkVersionCreateData[]
+}): PrismaPromise<IArtworkVersion>[] => {
+	return cloneDataList.map((data) => createArtworkVersion({ data }))
+}
+
+const cloneChildrenToClonedArtworkVersions = async ({
+	userId,
+	artworkVersions,
+	clonedArtworkVersions,
+}: {
+	userId: IUser['id']
+	artworkVersions: IArtworkVersionWithChildren[]
+	clonedArtworkVersions: IArtworkVersion[]
+}) => {
+	for (let i = 0; i < artworkVersions.length; i++) {
+		const artworkVersion = artworkVersions[i]!
+		const clonedArtworkVersion = clonedArtworkVersions[i]!
+
+		await cloneDesignsToArtworkVersionService({
+			userId,
+			artworkVersionId: clonedArtworkVersion.id,
+			designs: artworkVersion.designs,
+		})
+
+		await cloneLayersToArtworkVersionService({
+			userId,
+			artworkVersionId: clonedArtworkVersion.id,
+			layers: artworkVersion.layers,
+		})
+	}
+}
diff --git a/app/models/artwork-version/_._utils.ts b/app/models/artwork-version/_._utils.ts
new file mode 100644
index 00000000..3d5b53d0
--- /dev/null
+++ b/app/models/artwork-version/_._utils.ts
@@ -0,0 +1,18 @@
+import { type IArtworkVersion, type IArtworkVersionData } from './definitions'
+
+export const getArtworkVersionData = ({
+	artworkVersion,
+}: {
+	artworkVersion: IArtworkVersion
+}): IArtworkVersionData => {
+	return {
+		name: artworkVersion.name,
+		slug: artworkVersion.slug,
+		description: artworkVersion.description,
+		watermark: artworkVersion.watermark,
+		watermarkColor: artworkVersion.watermarkColor,
+		width: artworkVersion.width,
+		height: artworkVersion.height,
+		background: artworkVersion.background,
+	}
+}
diff --git a/app/models/artwork-version/_.clone.definitions.ts b/app/models/artwork-version/_.clone.definitions.ts
index baab1aff..77bf9bc6 100644
--- a/app/models/artwork-version/_.clone.definitions.ts
+++ b/app/models/artwork-version/_.clone.definitions.ts
@@ -1,6 +1,9 @@
-import { type IArtworkVersion } from "./definitions"
+import { type IClonedResponse } from '#app/definitions/intent-action-args.js'
+import { type IArtworkVersion } from './definitions'
 
 export interface IArtworkVersionCloneData {
 	id: IArtworkVersion['id']
 	description: string
 }
+
+export interface IArtworkVersionsClonedResponse extends IClonedResponse {}
diff --git a/app/models/artwork-version/artwork-version.create.server.ts b/app/models/artwork-version/artwork-version.create.server.ts
index ed486f7b..b52d108e 100644
--- a/app/models/artwork-version/artwork-version.create.server.ts
+++ b/app/models/artwork-version/artwork-version.create.server.ts
@@ -3,7 +3,7 @@ import { NewArtworkVersionSchema } from '#app/schema/artwork-version'
 import { ValidateArtworkBranchParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
 import { validateEntitySubmission } from '#app/utils/conform-utils'
 import { prisma } from '#app/utils/db.server'
-import { type IArtworkVersion, IArtworkVersionParentData } from './definitions'
+import { type IArtworkVersion } from './definitions'
 import { type IArtworkVersionParentCreateData } from './definitions.create'
 
 export interface IArtworkVersionCreatedResponse {
diff --git a/app/models/artwork-version/artwork-version.get.server.ts b/app/models/artwork-version/artwork-version.get.server.ts
index 1c5fac77..251d9c49 100644
--- a/app/models/artwork-version/artwork-version.get.server.ts
+++ b/app/models/artwork-version/artwork-version.get.server.ts
@@ -1,6 +1,6 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
-import { zodStringOrNull } from '#app/schema/zod-helpers'
+import { type z } from 'zod'
+import { type zodStringOrNull } from '#app/schema/zod-helpers'
 import { prisma } from '#app/utils/db.server'
 import { assetSelect } from '../asset/asset.get.server'
 import { deserializeAssets } from '../asset/utils'
@@ -10,16 +10,17 @@ import {
 	type IArtworkVersionWithChildren,
 } from './definitions'
 
-export type queryArtworkVersionWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	slug: z.string().optional(),
-	branchId: z.string().optional(),
-	nextId: zodStringOrNull.optional(),
-	prevId: zodStringOrNull.optional(),
-	starred: z.boolean().optional(),
-})
+export type queryArtworkVersionWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		slug: z.ZodOptional<z.ZodString>
+		branchId: z.ZodOptional<z.ZodString>
+		nextId: z.ZodOptional<typeof zodStringOrNull>
+		prevId: z.ZodOptional<typeof zodStringOrNull>
+		starred: z.ZodOptional<z.ZodBoolean>
+	}>
+>
 
 const includeDesigns = {
 	palette: true,
@@ -87,6 +88,35 @@ export const getArtworkVersions = ({
 	})
 }
 
+export const getArtworkVersionsWithChildren = async ({
+	where,
+}: {
+	where: queryArtworkVersionWhereArgsType
+}): Promise<IArtworkVersionWithChildren[]> => {
+	validateQueryWhereArgsPresent(where)
+	const artworkVersions = await prisma.artworkVersion.findMany({
+		where,
+		include: artworkVersionChildren,
+	})
+	return artworkVersions.map((artworkVersion) => {
+		const validatedAssets = deserializeAssets({ assets: artworkVersion.assets })
+		const validatedDesigns = deserializeDesigns({
+			designs: artworkVersion.designs,
+		})
+		const layersWithValidatedAssets = artworkVersion.layers.map((layer) => {
+			const validatedAssets = deserializeAssets({ assets: layer.assets })
+			const validatedDesigns = deserializeDesigns({ designs: layer.designs })
+			return { ...layer, assets: validatedAssets, designs: validatedDesigns }
+		})
+		return {
+			...artworkVersion,
+			assets: validatedAssets,
+			designs: validatedDesigns,
+			layers: layersWithValidatedAssets,
+		}
+	})
+}
+
 export const getArtworkVersion = ({
 	where,
 }: {
@@ -127,7 +157,7 @@ export const getArtworkVersionWithChildren = async ({
 	const validatedDesigns = deserializeDesigns({
 		designs: artworkVersion.designs,
 	})
-	const layersWithValidatedAssets = artworkVersion.layers.map(layer => {
+	const layersWithValidatedAssets = artworkVersion.layers.map((layer) => {
 		const validatedAssets = deserializeAssets({ assets: layer.assets })
 		const validatedDesigns = deserializeDesigns({ designs: layer.designs })
 		return { ...layer, assets: validatedAssets, designs: validatedDesigns }
@@ -161,14 +191,14 @@ export const getStarredArtworkVersionsByArtworkId = async ({
 		},
 	})
 
-	const validatedStarredVersions = starredVersions.map(artworkVersion => {
+	const validatedStarredVersions = starredVersions.map((artworkVersion) => {
 		const validatedArtboardVersionAssets = deserializeAssets({
 			assets: artworkVersion.assets,
 		})
 		const validatedArtboardVersionDesigns = deserializeDesigns({
 			designs: artworkVersion.designs,
 		})
-		const layersWithValidatedAssets = artworkVersion.layers.map(layer => {
+		const layersWithValidatedAssets = artworkVersion.layers.map((layer) => {
 			const validatedLayerAssets = deserializeAssets({ assets: layer.assets })
 			const validatedLayerDesigns = deserializeDesigns({
 				designs: layer.designs,
@@ -203,14 +233,14 @@ export const getAllPublishedArtworkVersions = async (): Promise<
 		},
 	})
 
-	const validatedPublishedVersions = publishedVersions.map(artworkVersion => {
+	const validatedPublishedVersions = publishedVersions.map((artworkVersion) => {
 		const validatedArtboardVersionAssets = deserializeAssets({
 			assets: artworkVersion.assets,
 		})
 		const validatedArtboardVersionDesigns = deserializeDesigns({
 			designs: artworkVersion.designs,
 		})
-		const layersWithValidatedAssets = artworkVersion.layers.map(layer => {
+		const layersWithValidatedAssets = artworkVersion.layers.map((layer) => {
 			const validatedLayerAssets = deserializeAssets({ assets: layer.assets })
 			const validatedLayerDesigns = deserializeDesigns({
 				designs: layer.designs,
diff --git a/app/models/artwork-version/layer/__components.panel.create.tsx b/app/models/artwork-version/layer/__components.panel.create.tsx
index b228abff..7ed929f1 100644
--- a/app/models/artwork-version/layer/__components.panel.create.tsx
+++ b/app/models/artwork-version/layer/__components.panel.create.tsx
@@ -9,7 +9,7 @@ import { generateParentFormId } from '#app/utils/form-id'
 import { NewArtworkVersionLayerSchema } from './schema.create'
 
 export const CreateArtworkVersionLayerForm = memo(
-	({ entityType, type, parent }: CreateChildEntityFormProps) => {
+	({ entityType, parent }: CreateChildEntityFormProps) => {
 		const parentId = parent.id
 		const formId = generateParentFormId({
 			action: 'create',
diff --git a/app/models/artwork-version/layer/clone.service.ts b/app/models/artwork-version/layer/clone.service.ts
index eae95bc5..09116557 100644
--- a/app/models/artwork-version/layer/clone.service.ts
+++ b/app/models/artwork-version/layer/clone.service.ts
@@ -1,6 +1,6 @@
 import { type PrismaPromise } from '@prisma/client'
 import { LinkedListNodeTypeEnum } from '#app/models/__shared/linked-list.definitions'
-import { connectNodes } from '#app/models/__shared/linked-list.node.update.server'
+import { connectUnlinkedNodes } from '#app/models/__shared/linked-list.node.update.server.js'
 import { type IDesignsClonedResponse } from '#app/models/design/definitions.clone'
 import {
 	type ILayer,
@@ -38,8 +38,9 @@ export const cloneLayersToArtworkVersionService = async ({
 
 		// Step 5: Prepare layer update promises
 		// re-link the cloned layers
-		const updateLayerPromises = prepareLayerLinkedListPromises({
-			clonedLayers,
+		const updateLayerPromises = connectUnlinkedNodes({
+			items: clonedLayers,
+			type: LinkedListNodeTypeEnum.LAYER,
 		})
 		// Step 6: Execute transaction
 		await prisma.$transaction(updateLayerPromises)
@@ -94,7 +95,7 @@ const prepareLayerCreateData = ({
 	userId: IUser['id']
 	artworkVersionId: IArtworkVersion['id']
 }): IArtworkVersionLayerCreateData[] => {
-	return layers.map(layer =>
+	return layers.map((layer) =>
 		validateLayerData({
 			layer,
 			userId,
@@ -118,35 +119,6 @@ const prepareLayerCreatePromises = ({
 	return cloneLayerPromises
 }
 
-const prepareLayerLinkedListPromises = ({
-	clonedLayers,
-}: {
-	clonedLayers: ILayer[]
-}) => {
-	const updateLayerPromises = []
-
-	// Step 1: first design is the head of the linked list, no prevId
-	let prevId: string | null = null
-
-	// Step 2: iterate through the layers
-	for (let i = 0; i < clonedLayers.length; i++) {
-		const clonedLayer = clonedLayers[i]
-		// Step 3: connect the cloned layer to the previous layer, if it exists
-		if (prevId) {
-			const connectLayersPromise = connectNodes({
-				type: LinkedListNodeTypeEnum.LAYER,
-				prevId,
-				nextId: clonedLayer.id,
-			})
-			updateLayerPromises.push(...connectLayersPromise)
-		}
-
-		// Step 4: update the prevId for the next iteration
-		prevId = clonedLayer.id
-	}
-	return updateLayerPromises
-}
-
 const cloneDesignsToLayers = async ({
 	userId,
 	layers,
@@ -158,8 +130,8 @@ const cloneDesignsToLayers = async ({
 }) => {
 	// Step 1: iterate through the layers
 	for (let i = 0; i < layers.length; i++) {
-		const layer = layers[i]
-		const clonedLayer = clonedLayers[i]
+		const layer = layers[i]!
+		const clonedLayer = clonedLayers[i]!
 		// Step 2: get designs from the layer
 		const designs = layer.designs
 		// Step 3: clone the designs to the cloned layer
diff --git a/app/models/artwork-version/layer/create.service.ts b/app/models/artwork-version/layer/create.service.ts
index be1fd437..5bd44651 100644
--- a/app/models/artwork-version/layer/create.service.ts
+++ b/app/models/artwork-version/layer/create.service.ts
@@ -12,7 +12,7 @@ import { prisma } from '#app/utils/db.server'
 import { getOptionalZodErrorMessage } from '#app/utils/misc'
 import { verifyArtworkVersion } from '../artwork-version.get.server'
 import { type IArtworkVersion } from '../definitions'
-import { IArtworkVersionLayerCreateSubmission } from './definitions.create'
+import { type IArtworkVersionLayerCreateSubmission } from './definitions.create'
 import { ArtworkVersionLayerSchema } from './schema'
 
 export const createArtworkVersionLayerService = async ({
diff --git a/app/models/artwork-version/layer/definitions.clone.ts b/app/models/artwork-version/layer/definitions.clone.ts
index 3cae1d1e..710a7d19 100644
--- a/app/models/artwork-version/layer/definitions.clone.ts
+++ b/app/models/artwork-version/layer/definitions.clone.ts
@@ -1,4 +1,3 @@
-import { IDesignParsed } from '#app/models/design/definitions'
 import { type ILayerWithChildren } from '#app/models/layer/definitions'
 import { type IUser } from '#app/models/user/user.server'
 import { type IArtworkVersion } from '../definitions'
diff --git a/app/models/artwork-version/layer/update.reorder.move-down.service.ts b/app/models/artwork-version/layer/update.reorder.move-down.service.ts
index 0dffb56a..1580f161 100644
--- a/app/models/artwork-version/layer/update.reorder.move-down.service.ts
+++ b/app/models/artwork-version/layer/update.reorder.move-down.service.ts
@@ -18,7 +18,7 @@ export const updateArtworkVersionLayerReorderMoveDownService = async ({
 		})
 
 		// Step 2: verify the layer exists
-		const layer = await verifyLayer({
+		await verifyLayer({
 			where: { id, artworkVersionId, ownerId: userId },
 		})
 
diff --git a/app/models/artwork/artwork-branch._schema.ts b/app/models/artwork/artwork-branch._schema.ts
index 1728df0c..a3d8dafa 100644
--- a/app/models/artwork/artwork-branch._schema.ts
+++ b/app/models/artwork/artwork-branch._schema.ts
@@ -1,9 +1,9 @@
 import { type ZodType } from 'zod'
-import { ArtworkBranchParentSchema } from '../artwork-branch/_._schema'
-import { ArtworkVersionDataSchema } from '../artwork-version/schema'
-import { type IArtworkArtworkBranchCreateData } from './artwork-version.create.definitions'
+import { ArtworkBranchDataCreateSchema } from '#app/schema/artwork-branch.js'
+import { ArtworkParentSchema } from '#app/schema/asset/image.artwork.js'
+import { type IArtworkArtworkBranchCreateData } from './artwork-branch.create.definitions'
 
 export const ArtworkArtworkBranchSchema: ZodType<IArtworkArtworkBranchCreateData> =
-	ArtworkVersionDataSchema.merge(
-		ArtworkBranchParentSchema,
+	ArtworkBranchDataCreateSchema.merge(
+		ArtworkParentSchema,
 	) satisfies ZodType<IArtworkArtworkBranchCreateData>
diff --git a/app/models/artwork/artwork-branch.clone.definitions.ts b/app/models/artwork/artwork-branch.clone.definitions.ts
index f02970e1..6ae950c7 100644
--- a/app/models/artwork/artwork-branch.clone.definitions.ts
+++ b/app/models/artwork/artwork-branch.clone.definitions.ts
@@ -1,6 +1,5 @@
 import { type IArtworkBranchSubmission } from '../artwork-branch/_._definitions'
 import { type IArtworkBranchCloneData } from '../artwork-branch/_.clone.definitions'
-import { type IArtworkVersion } from '../artwork-version/definitions'
 import { type IArtworkParentData } from './_._definiitions'
 
 export interface IArtworkArtworkBranchCloneData
@@ -12,5 +11,4 @@ export interface IArtworkArtworkBranchCloneSubmission
 		IArtworkBranchSubmission {
 	name: string
 	description: string
-	versionId: IArtworkVersion['id']
 }
diff --git a/app/models/artwork/artwork-branch.clone.form.tsx b/app/models/artwork/artwork-branch.clone.form.tsx
index 4dde9c4f..7aa6dbdd 100644
--- a/app/models/artwork/artwork-branch.clone.form.tsx
+++ b/app/models/artwork/artwork-branch.clone.form.tsx
@@ -1,9 +1,8 @@
-import { useNavigate, useParams } from '@remix-run/react'
+import { useNavigate } from '@remix-run/react'
 import { memo } from 'react'
 import { type DynamicFormFieldConfig } from '#app/components/templates/form/dynamic-form-field.js'
 import {
 	HiddenInputArtwork,
-	HiddenInputArtworkVersion,
 	HiddenInputId,
 } from '#app/components/ui/input-hidden'
 import {
@@ -11,42 +10,30 @@ import {
 	EntityCreateDialogIntent,
 } from '#app/routes/resources+/api.v1+/entity.create.dialog'
 import { generateParentFormId } from '#app/utils/form-id'
+import { stringToSlug } from '#app/utils/misc.js'
 import { type IArtworkBranch } from '../artwork-branch/_._definitions'
 import { CloneArtworkBranchArtworkVersionSchema } from '../artwork-branch/artwork-version.clone.schema'
-import { type IArtworkVersion } from '../artwork-version/definitions'
 import { type IArtwork } from './artwork.server'
 
-// Reminder that this is an option if the file is copied
-const CloneVersionContent = () => {
-	return null
-}
-
-const CloneVersionContentWarning = () => {
-	return null
-}
-
 export const CloneArtworkArtworkBranchForm = memo(
-	({
-		artwork,
-		branch,
-		version,
-	}: {
-		artwork: IArtwork
-		branch: IArtworkBranch
-		version: IArtworkVersion
-	}) => {
+	({ artwork, branch }: { artwork: IArtwork; branch: IArtworkBranch }) => {
 		const formId = generateParentFormId({
 			action: 'clone',
 			parentType: 'artwork',
 			parentId: artwork.id,
 			entityType: 'artwork-branch',
 		})
-		const intent = EntityCreateDialogIntent.ARTWORK_BRANCH.ARTWORK_VERSION
+		const intent = EntityCreateDialogIntent.ARTWORK.ARTWORK_BRANCH
 
 		const description =
-			'Save current settings of this artwork to a version. Add a description to help understand the changes. A new version will be created from here.'
+			'Start a new branch for this artwork off the current settings. Add a name and description to help understand the changes.'
 
 		const formFields: DynamicFormFieldConfig[] = [
+			{
+				type: 'input',
+				name: 'name',
+				label: 'Name',
+			},
 			{
 				type: 'textarea',
 				name: 'description',
@@ -54,15 +41,11 @@ export const CloneArtworkArtworkBranchForm = memo(
 			},
 		]
 
-		const onLatestVersion = version.nextId === null
-
-		const params = useParams()
 		const navigate = useNavigate()
-		const handleSuccessfulSubmission = () => {
-			if (params.versionSlug !== 'latest') {
-				// navigate to latest version if not already on that route
-				navigate('../latest')
-			}
+		const handleSuccessfulSubmission = (data: any) => {
+			const newBranchName = data.submission.value.name
+			const newBranchSlug = stringToSlug(newBranchName)
+			navigate(`../../${newBranchSlug}`)
 		}
 
 		return (
@@ -70,24 +53,16 @@ export const CloneArtworkArtworkBranchForm = memo(
 				formId={formId}
 				intent={intent}
 				schema={CloneArtworkBranchArtworkVersionSchema}
-				icon="card-stack-plus"
-				iconText="New Version..."
-				title="Save Version"
+				icon="file-plus"
+				iconText="New Branch..."
+				title="New Branch"
 				description={description}
 				formFields={formFields}
-				content={
-					onLatestVersion ? (
-						<CloneVersionContent />
-					) : (
-						<CloneVersionContentWarning />
-					)
-				}
 				onSuccessfulSubmission={handleSuccessfulSubmission}
 			>
 				<div className="hidden">
 					<HiddenInputId id={branch.id} />
 					<HiddenInputArtwork id={artwork.id} />
-					<HiddenInputArtworkVersion id={version.id} />
 				</div>
 			</EntityCreateDialogForm>
 		)
diff --git a/app/models/artwork/artwork-branch.clone.service.ts b/app/models/artwork/artwork-branch.clone.service.ts
index 20e8f004..41f5c0b6 100644
--- a/app/models/artwork/artwork-branch.clone.service.ts
+++ b/app/models/artwork/artwork-branch.clone.service.ts
@@ -3,9 +3,13 @@ import { type IUser } from '#app/models/user/user.server'
 import { prisma } from '#app/utils/db.server'
 import { getOptionalZodErrorMessage, stringToSlug } from '#app/utils/misc'
 import { type IArtworkBranch } from '../artwork-branch/_._definitions'
-import { createArtworkBranch } from '../artwork-branch/_.create.db.server'
+import {
+	createArtworkBranch,
+	type IArtworkBranchCreatedResponse,
+} from '../artwork-branch/_.create.db.server'
 import { verifyArtworkBranch } from '../artwork-branch/_.get.server'
-import { verifyArtworkVersion } from '../artwork-version/artwork-version.get.server'
+import { cloneArtworkVersionsToArtworkBranchService } from '../artwork-branch/artwork-versions.clone.service'
+import { getArtworkVersionsWithChildren } from '../artwork-version/artwork-version.get.server'
 import { ArtworkArtworkBranchSchema } from './artwork-branch._schema'
 import { type IArtworkArtworkBranchCloneSubmission } from './artwork-branch.clone.definitions'
 import { type IArtworkArtworkBranchCreateData } from './artwork-branch.create.definitions'
@@ -15,10 +19,9 @@ export const cloneArtworkArtworkBranchService = async ({
 	userId,
 	id,
 	artworkId,
-	versionId,
 	name,
 	description,
-}: IArtworkArtworkBranchCloneSubmission): Promise<IArtworkVersionCreatedResponse> => {
+}: IArtworkArtworkBranchCloneSubmission): Promise<IArtworkBranchCreatedResponse> => {
 	try {
 		// Step 1: verify the artwork branch exists
 		const artworkBranch = await verifyArtworkBranch({
@@ -33,13 +36,6 @@ export const cloneArtworkArtworkBranchService = async ({
 		await verifyArtwork({
 			where: { id: artworkId, ownerId: userId },
 		})
-		// Step 2.1: verify the artwork version exists and belongs to the artwork branch
-		const artworkVersion = await verifyArtworkVersion({
-			where: { id: versionId, ownerId: userId },
-		})
-		if (!artworkVersion || artworkVersion.branchId !== artworkBranch.id) {
-			invariant(false, 'Artwork version not found')
-		}
 
 		// Step 3: get data for cloned artwork branch
 		const validatedArtworkBranchData = validateArtworkBranchData({
@@ -59,6 +55,13 @@ export const cloneArtworkArtworkBranchService = async ({
 			cloneArtworkBranchPromise,
 		])
 
+		// Step 6: clone artwork versions from prev artwork branch
+		await cloneArtworkVersionsToArtworkBranch({
+			userId,
+			artworkBranch,
+			clonedArtworkBranch,
+		})
+
 		return {
 			createdArtworkBranch: clonedArtworkBranch,
 			success: true,
@@ -94,3 +97,22 @@ const validateArtworkBranchData = ({
 	// Step 3: validate the design data with the schema
 	return ArtworkArtworkBranchSchema.parse(artworkBranchData)
 }
+
+const cloneArtworkVersionsToArtworkBranch = async ({
+	userId,
+	artworkBranch,
+	clonedArtworkBranch,
+}: {
+	userId: IUser['id']
+	artworkBranch: IArtworkBranch
+	clonedArtworkBranch: IArtworkBranch
+}) => {
+	const artworkVersions = await getArtworkVersionsWithChildren({
+		where: { branchId: artworkBranch.id },
+	})
+	return await cloneArtworkVersionsToArtworkBranchService({
+		userId,
+		artworkBranchId: clonedArtworkBranch.id,
+		artworkVersions,
+	})
+}
diff --git a/app/models/artwork/artwork-branch.clone.submission.ts b/app/models/artwork/artwork-branch.clone.submission.ts
index 6e276e3d..e47abddc 100644
--- a/app/models/artwork/artwork-branch.clone.submission.ts
+++ b/app/models/artwork/artwork-branch.clone.submission.ts
@@ -31,7 +31,12 @@ export const handleCloneArtworkArtworkBranchSubmission = async ({
 			userId,
 			...submission.value,
 		})
-		return { status, submission, responseSuccess: success, message }
+		return {
+			status: success ? 'success' : 'error',
+			submission,
+			responseSuccess: success,
+			message,
+		}
 	}
 
 	return { status, submission, responseSuccess: false }
diff --git a/app/models/artwork/artwork.get.server.ts b/app/models/artwork/artwork.get.server.ts
index b501ed6f..d496ce65 100644
--- a/app/models/artwork/artwork.get.server.ts
+++ b/app/models/artwork/artwork.get.server.ts
@@ -1,5 +1,5 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { prisma } from '#app/utils/db.server'
 import {
 	type IArtworkWithProject,
@@ -10,18 +10,19 @@ import {
 import { assetSelect } from '../asset/asset.get.server'
 import { deserializeAssets } from '../asset/utils'
 
-export type queryArtworkWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	slug: z.string().optional(),
-})
+export type queryArtworkWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		slug: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
 // owner id should be present unless admin (not set up yet)
 const validateQueryWhereArgsPresent = (where: queryArtworkWhereArgsType) => {
-	if (Object.values(where).some(value => !value)) {
+	if (Object.values(where).some((value) => !value)) {
 		throw new Error(
 			'Null or undefined values are not allowed in query parameters for artwork.',
 		)
diff --git a/app/models/asset/asset.get.server.ts b/app/models/asset/asset.get.server.ts
index cbe46635..defbd864 100644
--- a/app/models/asset/asset.get.server.ts
+++ b/app/models/asset/asset.get.server.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import { type z } from 'zod'
 import { prisma } from '#app/utils/db.server'
 import { type IAsset } from './asset.server'
 
@@ -21,11 +21,12 @@ export const assetSelect = {
 	layerId: true,
 }
 
-export type queryAssetWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-})
+export type queryAssetWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/asset/image/image.get.server.ts b/app/models/asset/image/image.get.server.ts
index 59e586ab..5e8714da 100644
--- a/app/models/asset/image/image.get.server.ts
+++ b/app/models/asset/image/image.get.server.ts
@@ -1,18 +1,19 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { AssetTypeEnum } from '#app/schema/asset'
 import { prisma } from '#app/utils/db.server'
 import { deserializeAsset } from '../utils'
 import { type IAssetImage } from './image.server'
 
-export type queryAssetImageWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	artworkId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-})
+export type queryAssetImageWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/design-layer/design-layer.update.server.ts b/app/models/design-layer/design-layer.update.server.ts
deleted file mode 100644
index aa6ab38e..00000000
--- a/app/models/design-layer/design-layer.update.server.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { type IntentActionArgs } from '#app/definitions/intent-action-args'
-import {
-	ReorderLayerDesignSchema,
-	ToggleVisibleLayerDesignSchema,
-} from '#app/schema/design-layer'
-import { ValidateLayerParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
-import { validateEntitySubmission } from '#app/utils/conform-utils'
-
-export const validateLayerToggleVisibeDesignSubmission = async ({
-	userId,
-	formData,
-}: IntentActionArgs) => {
-	const strategy = new ValidateLayerParentSubmissionStrategy()
-
-	return await validateEntitySubmission({
-		userId,
-		formData,
-		schema: ToggleVisibleLayerDesignSchema,
-		strategy,
-	})
-}
diff --git a/app/models/design/design.get.server.ts b/app/models/design/design.get.server.ts
index 33ebb392..de3cb7c5 100644
--- a/app/models/design/design.get.server.ts
+++ b/app/models/design/design.get.server.ts
@@ -1,7 +1,6 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
-import { DesignTypeEnum } from '#app/models/design/definitions'
-import { arrayOfIds, zodStringOrNull } from '#app/schema/zod-helpers'
+import { type z } from 'zod'
+import { type DesignTypeEnum } from '#app/models/design/definitions'
 import { prisma } from '#app/utils/db.server'
 import {
 	type IDesignParsed,
@@ -10,19 +9,22 @@ import {
 } from '../design/definitions'
 import { deserializeDesigns } from './utils'
 
-export type queryDesignWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.union([z.string(), arrayOfIds]).optional(),
-	type: z.nativeEnum(DesignTypeEnum).optional(),
-	visible: z.boolean().optional(),
-	selected: z.boolean().optional(),
-	ownerId: z.string().optional(),
-	artworkId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-	nextId: zodStringOrNull.optional(),
-	prevId: zodStringOrNull.optional(),
-})
+export type queryDesignWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<
+			z.ZodUnion<[z.ZodString, z.ZodObject<{ in: z.ZodArray<z.ZodString> }>]>
+		>
+		type: z.ZodOptional<z.ZodNativeEnum<typeof DesignTypeEnum>>
+		visible: z.ZodOptional<z.ZodBoolean>
+		selected: z.ZodOptional<z.ZodBoolean>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+		nextId: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNull]>>
+		prevId: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNull]>>
+	}>
+>
 
 // no ordering for now since these are linked lists
 const designTypes = {
diff --git a/app/models/design/fill/update.attribute.style.submission.ts b/app/models/design/fill/update.attribute.style.submission.ts
index 2d526fab..6f9cd8e6 100644
--- a/app/models/design/fill/update.attribute.style.submission.ts
+++ b/app/models/design/fill/update.attribute.style.submission.ts
@@ -26,11 +26,10 @@ export const handleUpdateDesignFillStyleSubmission = async ({
 	})
 
 	if (status === 'success') {
-		const { success, message, updatedDesign } =
-			await updateDesignFillStyleService({
-				userId,
-				...submission.value,
-			})
+		const { success, message } = await updateDesignFillStyleService({
+			userId,
+			...submission.value,
+		})
 
 		return { status, submission, responseSuccess: success, message }
 	}
diff --git a/app/models/design/layout/layout.get.server.ts b/app/models/design/layout/layout.get.server.ts
index 5c7248a7..09461bf1 100644
--- a/app/models/design/layout/layout.get.server.ts
+++ b/app/models/design/layout/layout.get.server.ts
@@ -1,17 +1,18 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { DesignTypeEnum } from '#app/models/design/definitions'
 import { prisma } from '#app/utils/db.server'
 import { deserializeDesign } from '../utils'
 import { type IDesignLayout } from './layout.server'
 
-export type queryWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-})
+export type queryWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/design/line/line.get.server.ts b/app/models/design/line/line.get.server.ts
index bc23b60c..6c3458bf 100644
--- a/app/models/design/line/line.get.server.ts
+++ b/app/models/design/line/line.get.server.ts
@@ -1,17 +1,18 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { DesignTypeEnum } from '#app/models/design/definitions'
 import { prisma } from '#app/utils/db.server'
 import { deserializeDesign } from '../utils'
 import { type IDesignLine } from './line.server'
 
-export type queryWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-})
+export type queryWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/design/palette/palette.get.server.ts b/app/models/design/palette/palette.get.server.ts
index 1ce9cf07..b9f3416a 100644
--- a/app/models/design/palette/palette.get.server.ts
+++ b/app/models/design/palette/palette.get.server.ts
@@ -1,17 +1,18 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { DesignTypeEnum } from '#app/models/design/definitions'
 import { prisma } from '#app/utils/db.server'
 import { deserializeDesign } from '../utils'
 import { type IDesignPalette } from './palette.server'
 
-export type queryWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-})
+export type queryWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/design/rotate/rotate.get.server.ts b/app/models/design/rotate/rotate.get.server.ts
index d9384ef6..4f73ba3e 100644
--- a/app/models/design/rotate/rotate.get.server.ts
+++ b/app/models/design/rotate/rotate.get.server.ts
@@ -1,17 +1,18 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { DesignTypeEnum } from '#app/models/design/definitions'
 import { prisma } from '#app/utils/db.server'
 import { deserializeDesign } from '../utils'
 import { type IDesignRotate } from './rotate.server'
 
-export type queryWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-})
+export type queryWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/design/size/size.get.server.ts b/app/models/design/size/size.get.server.ts
index c9076824..412e936e 100644
--- a/app/models/design/size/size.get.server.ts
+++ b/app/models/design/size/size.get.server.ts
@@ -1,17 +1,18 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { DesignTypeEnum } from '#app/models/design/definitions'
 import { prisma } from '#app/utils/db.server'
 import { deserializeDesign } from '../utils'
 import { type IDesignSize } from './size.server'
 
-export type queryWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-})
+export type queryWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/design/stroke/stroke.get.server.ts b/app/models/design/stroke/stroke.get.server.ts
index 5c21888a..5d2f8903 100644
--- a/app/models/design/stroke/stroke.get.server.ts
+++ b/app/models/design/stroke/stroke.get.server.ts
@@ -1,17 +1,18 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { DesignTypeEnum } from '#app/models/design/definitions'
 import { prisma } from '#app/utils/db.server'
 import { deserializeDesign } from '../utils'
 import { type IDesignStroke } from './stroke.server'
 
-export type queryWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-})
+export type queryWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/design/template/template.get.server.ts b/app/models/design/template/template.get.server.ts
index 22ed83b1..fa0c4d40 100644
--- a/app/models/design/template/template.get.server.ts
+++ b/app/models/design/template/template.get.server.ts
@@ -1,17 +1,18 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { DesignTypeEnum } from '#app/models/design/definitions'
 import { prisma } from '#app/utils/db.server'
 import { deserializeDesign } from '../utils'
 import { type IDesignTemplate } from './template.server'
 
-export type queryWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	layerId: z.string().optional(),
-})
+export type queryWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		layerId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
diff --git a/app/models/design/utils.ts b/app/models/design/utils.ts
index 2839585c..482417e6 100644
--- a/app/models/design/utils.ts
+++ b/app/models/design/utils.ts
@@ -1,8 +1,5 @@
 import { ZodError } from 'zod'
-import {
-	initializeEnumItemsMap,
-	safelyAssignValue,
-} from '#app/utils/typescript-helpers'
+import { safelyAssignValue } from '#app/utils/typescript-helpers'
 import { orderLinkedItems } from '../__shared/linked-list.utils'
 import {
 	type IDesignByType,
@@ -88,7 +85,7 @@ export const deserializeDesigns = ({
 }: {
 	designs: IDesign[]
 }): IDesignParsed[] => {
-	return designs.map(design => deserializeDesign({ design }))
+	return designs.map((design) => deserializeDesign({ design }))
 }
 
 export const deserializeDesign = ({
@@ -142,7 +139,7 @@ export const validateDesignAttributes = ({
 	} catch (error: any) {
 		if (error instanceof ZodError) {
 			throw new Error(
-				`Validation failed for design type ${type}: ${error.errors.map(e => e.message).join(', ')}`,
+				`Validation failed for design type ${type}: ${error.errors.map((e) => e.message).join(', ')}`,
 			)
 		} else {
 			throw new Error(
@@ -157,7 +154,7 @@ export const serializeDesigns = ({
 }: {
 	designs: IDesignParsed[]
 }): IDesign[] => {
-	return designs.map(design => serializeDesign({ design }))
+	return designs.map((design) => serializeDesign({ design }))
 }
 
 export const serializeDesign = ({
@@ -227,7 +224,7 @@ export const stringifyDesignAttributes = ({
 	} catch (error: any) {
 		if (error instanceof ZodError) {
 			throw new Error(
-				`Validation failed for design type ${type}: ${error.errors.map(e => e.message).join(', ')}`,
+				`Validation failed for design type ${type}: ${error.errors.map((e) => e.message).join(', ')}`,
 			)
 		} else {
 			throw new Error(
@@ -242,7 +239,7 @@ export const filterDesignsVisible = ({
 }: {
 	designs: IDesignToGroup[]
 }): IDesignToGroup[] => {
-	return designs.filter(design => design.visible)
+	return designs.filter((design) => design.visible)
 }
 
 export const filterDesignType = ({
@@ -252,7 +249,7 @@ export const filterDesignType = ({
 	designs: IDesignToGroup[]
 	type: designTypeEnum
 }): IDesignToGroup[] => {
-	return designs.filter(design => design.type === type)
+	return designs.filter((design) => design.type === type)
 }
 
 export const groupDesignsByType = ({
diff --git a/app/models/layer/definitions.ts b/app/models/layer/definitions.ts
index 13485780..510e364e 100644
--- a/app/models/layer/definitions.ts
+++ b/app/models/layer/definitions.ts
@@ -4,7 +4,6 @@ import { type ISubmission } from '#app/definitions/submission.js'
 import { type IArtworkVersion } from '../artwork-version/definitions'
 import { type IAssetParsed } from '../asset/asset.server'
 import { type IDesignParsed, type IDesignWithType } from '../design/definitions'
-import { type IUser } from '../user/user.server'
 
 // Omitting 'createdAt' and 'updatedAt' from the Layer interface
 // prisma query returns a string for these fields
diff --git a/app/models/layer/design.__components.panel.visible.tsx b/app/models/layer/design.__components.panel.visible.tsx
new file mode 100644
index 00000000..d8369cea
--- /dev/null
+++ b/app/models/layer/design.__components.panel.visible.tsx
@@ -0,0 +1,45 @@
+import { memo } from 'react'
+import { type ToggleVisibleChildEntityFormProps } from '#app/components/templates/panel/dashboard-entity-panel.actions.update.visible'
+import {
+	HiddenInputId,
+	HiddenInputLayer,
+} from '#app/components/ui/input-hidden'
+import { type IDesign } from '#app/models/design/definitions'
+import {
+	EntityToggleAttributeForm,
+	EntityToggleAttributeIntent,
+} from '#app/routes/resources+/api.v1+/entity.toggle.attribute'
+import { generateEntityFormId } from '#app/utils/form-id'
+import { UpdateLayerDesignFieldSchema } from './design.schema.update'
+
+export const ToggleLayerDesignVisibleForm = memo(
+	({ entityType, entity, parent }: ToggleVisibleChildEntityFormProps) => {
+		const design = entity as IDesign
+		const formId = generateEntityFormId({
+			action: 'update',
+			entityType,
+			entityId: entity.id,
+			field: 'visible',
+			suffix: 'toggle',
+		})
+		const intent = EntityToggleAttributeIntent.LAYER.DESIGN.VISIBLE
+		return (
+			<EntityToggleAttributeForm
+				formId={formId}
+				intent={intent}
+				schema={UpdateLayerDesignFieldSchema}
+				condition={design.visible}
+				iconTrue="eye-open"
+				iconTrueText={`Hide ${design.type}`}
+				iconFalse="eye-closed"
+				iconFalseText={`Show ${design.type}`}
+			>
+				<div className="hidden">
+					<HiddenInputId id={design.id} />
+					<HiddenInputLayer id={parent.id} />
+				</div>
+			</EntityToggleAttributeForm>
+		)
+	},
+)
+ToggleLayerDesignVisibleForm.displayName = 'ToggleLayerDesignVisibleForm'
diff --git a/app/models/layer/layer.create.server.ts b/app/models/layer/layer.create.server.ts
index ba5850ed..03531bba 100644
--- a/app/models/layer/layer.create.server.ts
+++ b/app/models/layer/layer.create.server.ts
@@ -3,10 +3,7 @@ import { NewArtworkVersionLayerSchema } from '#app/schema/layer-artwork-version'
 import { ValidateArtworkVersionParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
 import { validateEntitySubmission } from '#app/utils/conform-utils'
 import { prisma } from '#app/utils/db.server'
-import { type IArtwork } from '../artwork/artwork.server'
-import { type IArtworkVersion } from '../artwork-version/definitions'
 import { type ILayer } from '../layer/definitions'
-import { type IUser } from '../user/user.server'
 import { type ILayerParentCreateData } from './definitions.create'
 
 export interface ILayerCreatedResponse {
diff --git a/app/models/layer/layer.get.server.ts b/app/models/layer/layer.get.server.ts
index 781ce6a8..9845f853 100644
--- a/app/models/layer/layer.get.server.ts
+++ b/app/models/layer/layer.get.server.ts
@@ -1,7 +1,7 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import { type findLayerArgsType, type whereArgsType } from '#app/schema/layer'
-import { arrayOfIds, zodStringOrNull } from '#app/schema/zod-helpers'
+import { type arrayOfIds, type zodStringOrNull } from '#app/schema/zod-helpers'
 import { prisma } from '#app/utils/db.server'
 import { assetSelect } from '../asset/asset.get.server'
 import { deserializeAssets } from '../asset/utils'
@@ -12,16 +12,17 @@ import {
 	type ILayerWithDesigns,
 } from '../layer/definitions'
 
-export type queryLayerWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.union([z.string(), arrayOfIds]).optional(),
-	visible: z.boolean().optional(),
-	selected: z.boolean().optional(),
-	ownerId: z.string().optional(),
-	artworkVersionId: z.string().optional(),
-	nextId: zodStringOrNull.optional(),
-	prevId: zodStringOrNull.optional(),
-})
+export type queryLayerWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodUnion<[z.ZodString, typeof arrayOfIds]>>
+		visible: z.ZodOptional<z.ZodBoolean>
+		selected: z.ZodOptional<z.ZodBoolean>
+		ownerId: z.ZodOptional<z.ZodString>
+		artworkVersionId: z.ZodOptional<z.ZodString>
+		nextId: z.ZodOptional<typeof zodStringOrNull>
+		prevId: z.ZodOptional<typeof zodStringOrNull>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
@@ -98,7 +99,7 @@ export const getLayersWithChildren = async ({
 		},
 	})
 
-	return layers.map(layer => {
+	return layers.map((layer) => {
 		const validatedAssets = deserializeAssets({ assets: layer.assets })
 		const validatedDesigns = deserializeDesigns({ designs: layer.designs })
 		return { ...layer, assets: validatedAssets, designs: validatedDesigns }
diff --git a/app/models/layer/layer.update.linked-list.server.ts b/app/models/layer/layer.update.linked-list.server.ts
index fee1a694..5a0bd43d 100644
--- a/app/models/layer/layer.update.linked-list.server.ts
+++ b/app/models/layer/layer.update.linked-list.server.ts
@@ -1,4 +1,3 @@
-import { prisma } from '#app/utils/db.server'
 import { type ILayer } from './definitions'
 import { updateLayerFields } from './layer.update.server'
 
diff --git a/app/models/project/project.get.server.ts b/app/models/project/project.get.server.ts
index cd6b9e89..2541bf8d 100644
--- a/app/models/project/project.get.server.ts
+++ b/app/models/project/project.get.server.ts
@@ -1,19 +1,20 @@
-import { z } from 'zod'
+import { type z } from 'zod'
 import { prisma } from '#app/utils/db.server'
 import { type IProjectWithArtworks } from './project.server'
 
-export type queryProjectWhereArgsType = z.infer<typeof queryWhereArgs>
-const queryWhereArgs = z.object({
-	id: z.string().optional(),
-	ownerId: z.string().optional(),
-	slug: z.string().optional(),
-})
+export type queryProjectWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		slug: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
 // owner id should be present unless admin (not set up yet)
 const validateQueryWhereArgsPresent = (where: queryProjectWhereArgsType) => {
-	if (Object.values(where).some(value => !value)) {
+	if (Object.values(where).some((value) => !value)) {
 		throw new Error(
 			'Null or undefined values are not allowed in query parameters for artwork.',
 		)
diff --git a/app/models/user/user.get.server.ts b/app/models/user/user.get.server.ts
index 71a38f40..08099eca 100644
--- a/app/models/user/user.get.server.ts
+++ b/app/models/user/user.get.server.ts
@@ -1,12 +1,13 @@
-import { z } from 'zod'
+import { type z } from 'zod'
 import { prisma } from '#app/utils/db.server'
 import { type IUserBasic } from './user.server'
 
-export type queryWhereArgsType = z.infer<typeof queryWhereArgs>
-const queryWhereArgs = z.object({
-	id: z.string().optional(),
-	username: z.string().optional(),
-})
+export type queryWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		username: z.ZodOptional<z.ZodString>
+	}>
+>
 
 export const getUserBasic = async ({
 	where,
diff --git a/app/routes/_auth+/auth.$provider.callback.test.ts b/app/routes/_auth+/auth.$provider.callback.test.ts
index 5c538e82..0e15b61a 100644
--- a/app/routes/_auth+/auth.$provider.callback.test.ts
+++ b/app/routes/_auth+/auth.$provider.callback.test.ts
@@ -1,259 +1,241 @@
-import { invariant } from '@epic-web/invariant'
-import { faker } from '@faker-js/faker'
-import { http } from 'msw'
-import { afterEach, expect, test } from 'vitest'
-import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
-import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
-import { connectionSessionStorage } from '#app/utils/connections.server.ts'
-import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'
-import { prisma } from '#app/utils/db.server.ts'
-import { authSessionStorage } from '#app/utils/session.server.ts'
-import { generateTOTP } from '#app/utils/totp.server.ts'
-import { createUser } from '#tests/db-utils.ts'
-import { insertGitHubUser, deleteGitHubUsers } from '#tests/mocks/github.ts'
-import { server } from '#tests/mocks/index.ts'
-import { consoleError } from '#tests/setup/setup-test-env.ts'
-import { BASE_URL, convertSetCookieToCookie } from '#tests/utils.ts'
-import { loader } from './auth.$provider.callback.ts'
-
-const ROUTE_PATH = '/auth/github/callback'
-const PARAMS = { provider: 'github' }
+import { afterEach } from 'vitest'
+import { deleteGitHubUsers } from '#tests/mocks/github.ts'
 
 afterEach(async () => {
 	await deleteGitHubUsers()
 })
 
-test.skip('a new user goes to onboarding', async () => {
-	const request = await setupRequest()
-	const response = await loader({ request, params: PARAMS, context: {} }).catch(
-		e => e,
-	)
-	expect(response).toHaveRedirect('/onboarding/github')
-})
-
-test.skip('when auth fails, send the user to login with a toast', async () => {
-	consoleError.mockImplementation(() => {})
-	server.use(
-		http.post('https://github.com/login/oauth/access_token', async () => {
-			return new Response('error', { status: 400 })
-		}),
-	)
-	const request = await setupRequest()
-	const response = await loader({ request, params: PARAMS, context: {} }).catch(
-		e => e,
-	)
-	invariant(response instanceof Response, 'response should be a Response')
-	expect(response).toHaveRedirect('/login')
-	await expect(response).toSendToast(
-		expect.objectContaining({
-			title: 'Auth Failed',
-			type: 'error',
-		}),
-	)
-	expect(consoleError).toHaveBeenCalledTimes(1)
-})
-
-test.skip('when a user is logged in, it creates the connection', async () => {
-	const githubUser = await insertGitHubUser()
-	const session = await setupUser()
-	const request = await setupRequest({
-		sessionId: session.id,
-		code: githubUser.code,
-	})
-	const response = await loader({ request, params: PARAMS, context: {} })
-	expect(response).toHaveRedirect('/settings/profile/connections')
-	await expect(response).toSendToast(
-		expect.objectContaining({
-			title: 'Connected',
-			type: 'success',
-			description: expect.stringContaining(githubUser.profile.login),
-		}),
-	)
-	const connection = await prisma.connection.findFirst({
-		select: { id: true },
-		where: {
-			userId: session.userId,
-			providerId: githubUser.profile.id.toString(),
-		},
-	})
-	expect(
-		connection,
-		'the connection was not created in the database',
-	).toBeTruthy()
-})
-
-test.skip(`when a user is logged in and has already connected, it doesn't do anything and just redirects the user back to the connections page`, async () => {
-	const session = await setupUser()
-	const githubUser = await insertGitHubUser()
-	await prisma.connection.create({
-		data: {
-			providerName: GITHUB_PROVIDER_NAME,
-			userId: session.userId,
-			providerId: githubUser.profile.id.toString(),
-		},
-	})
-	const request = await setupRequest({
-		sessionId: session.id,
-		code: githubUser.code,
-	})
-	const response = await loader({ request, params: PARAMS, context: {} })
-	expect(response).toHaveRedirect('/settings/profile/connections')
-	expect(response).toSendToast(
-		expect.objectContaining({
-			title: 'Already Connected',
-			description: expect.stringContaining(githubUser.profile.login),
-		}),
-	)
-})
-
-test.skip('when a user exists with the same email, create connection and make session', async () => {
-	const githubUser = await insertGitHubUser()
-	const email = githubUser.primaryEmail.toLowerCase()
-	const { userId } = await setupUser({ ...createUser(), email })
-	const request = await setupRequest({ code: githubUser.code })
-	const response = await loader({ request, params: PARAMS, context: {} })
-
-	expect(response).toHaveRedirect('/')
-
-	await expect(response).toSendToast(
-		expect.objectContaining({
-			type: 'message',
-			description: expect.stringContaining(githubUser.profile.login),
-		}),
-	)
-
-	const connection = await prisma.connection.findFirst({
-		select: { id: true },
-		where: {
-			userId: userId,
-			providerId: githubUser.profile.id.toString(),
-		},
-	})
-	expect(
-		connection,
-		'the connection was not created in the database',
-	).toBeTruthy()
-
-	await expect(response).toHaveSessionForUser(userId)
-})
-
-test.skip('gives an error if the account is already connected to another user', async () => {
-	const githubUser = await insertGitHubUser()
-	await prisma.user.create({
-		data: {
-			...createUser(),
-			connections: {
-				create: {
-					providerName: GITHUB_PROVIDER_NAME,
-					providerId: githubUser.profile.id.toString(),
-				},
-			},
-		},
-	})
-	const session = await setupUser()
-	const request = await setupRequest({
-		sessionId: session.id,
-		code: githubUser.code,
-	})
-	const response = await loader({ request, params: PARAMS, context: {} })
-	expect(response).toHaveRedirect('/settings/profile/connections')
-	await expect(response).toSendToast(
-		expect.objectContaining({
-			title: 'Already Connected',
-			description: expect.stringContaining(
-				'already connected to another account',
-			),
-		}),
-	)
-})
-
-test.skip('if a user is not logged in, but the connection exists, make a session', async () => {
-	const githubUser = await insertGitHubUser()
-	const { userId } = await setupUser()
-	await prisma.connection.create({
-		data: {
-			providerName: GITHUB_PROVIDER_NAME,
-			providerId: githubUser.profile.id.toString(),
-			userId,
-		},
-	})
-	const request = await setupRequest({ code: githubUser.code })
-	const response = await loader({ request, params: PARAMS, context: {} })
-	expect(response).toHaveRedirect('/')
-	await expect(response).toHaveSessionForUser(userId)
-})
-
-test.skip('if a user is not logged in, but the connection exists and they have enabled 2FA, send them to verify their 2FA and do not make a session', async () => {
-	const githubUser = await insertGitHubUser()
-	const { userId } = await setupUser()
-	await prisma.connection.create({
-		data: {
-			providerName: GITHUB_PROVIDER_NAME,
-			providerId: githubUser.profile.id.toString(),
-			userId,
-		},
-	})
-	const { otp: _otp, ...config } = generateTOTP()
-	await prisma.verification.create({
-		data: {
-			type: twoFAVerificationType,
-			target: userId,
-			...config,
-		},
-	})
-	const request = await setupRequest({ code: githubUser.code })
-	const response = await loader({ request, params: PARAMS, context: {} })
-	const searchParams = new URLSearchParams({
-		type: twoFAVerificationType,
-		target: userId,
-		redirectTo: '/',
-	})
-	expect(response).toHaveRedirect(`/verify?${searchParams}`)
-})
-
-async function setupRequest({
-	sessionId,
-	code = faker.string.uuid(),
-}: { sessionId?: string; code?: string } = {}) {
-	const url = new URL(ROUTE_PATH, BASE_URL)
-	const state = faker.string.uuid()
-	url.searchParams.set('state', state)
-	url.searchParams.set('code', code)
-	const connectionSession = await connectionSessionStorage.getSession()
-	connectionSession.set('oauth2:state', state)
-	const authSession = await authSessionStorage.getSession()
-	if (sessionId) authSession.set(sessionKey, sessionId)
-	const setSessionCookieHeader =
-		await authSessionStorage.commitSession(authSession)
-	const setConnectionSessionCookieHeader =
-		await connectionSessionStorage.commitSession(connectionSession)
-	const request = new Request(url.toString(), {
-		method: 'GET',
-		headers: {
-			cookie: [
-				convertSetCookieToCookie(setConnectionSessionCookieHeader),
-				convertSetCookieToCookie(setSessionCookieHeader),
-			].join('; '),
-		},
-	})
-	return request
-}
-
-async function setupUser(userData = createUser()) {
-	const session = await prisma.session.create({
-		data: {
-			expirationDate: getSessionExpirationDate(),
-			user: {
-				create: {
-					...userData,
-				},
-			},
-		},
-		select: {
-			id: true,
-			userId: true,
-		},
-	})
-
-	return session
-}
+// test.skip('a new user goes to onboarding', async () => {
+// 	const request = await setupRequest()
+// 	const response = await loader({ request, params: PARAMS, context: {} }).catch(
+// 		(e) => e,
+// 	)
+// 	expect(response).toHaveRedirect('/onboarding/github')
+// })
+
+// test.skip('when auth fails, send the user to login with a toast', async () => {
+// 	consoleError.mockImplementation(() => {})
+// 	server.use(
+// 		http.post('https://github.com/login/oauth/access_token', async () => {
+// 			return new Response('error', { status: 400 })
+// 		}),
+// 	)
+// 	const request = await setupRequest()
+// 	const response = await loader({ request, params: PARAMS, context: {} }).catch(
+// 		(e) => e,
+// 	)
+// 	invariant(response instanceof Response, 'response should be a Response')
+// 	expect(response).toHaveRedirect('/login')
+// 	await expect(response).toSendToast(
+// 		expect.objectContaining({
+// 			title: 'Auth Failed',
+// 			type: 'error',
+// 		}),
+// 	)
+// 	expect(consoleError).toHaveBeenCalledTimes(1)
+// })
+
+// test.skip('when a user is logged in, it creates the connection', async () => {
+// 	const githubUser = await insertGitHubUser()
+// 	const session = await setupUser()
+// 	const request = await setupRequest({
+// 		sessionId: session.id,
+// 		code: githubUser.code,
+// 	})
+// 	const response = await loader({ request, params: PARAMS, context: {} })
+// 	expect(response).toHaveRedirect('/settings/profile/connections')
+// 	await expect(response).toSendToast(
+// 		expect.objectContaining({
+// 			title: 'Connected',
+// 			type: 'success',
+// 			description: expect.stringContaining(githubUser.profile.login),
+// 		}),
+// 	)
+// 	const connection = await prisma.connection.findFirst({
+// 		select: { id: true },
+// 		where: {
+// 			userId: session.userId,
+// 			providerId: githubUser.profile.id.toString(),
+// 		},
+// 	})
+// 	expect(
+// 		connection,
+// 		'the connection was not created in the database',
+// 	).toBeTruthy()
+// })
+
+// test.skip(`when a user is logged in and has already connected, it doesn't do anything and just redirects the user back to the connections page`, async () => {
+// 	const session = await setupUser()
+// 	const githubUser = await insertGitHubUser()
+// 	await prisma.connection.create({
+// 		data: {
+// 			providerName: GITHUB_PROVIDER_NAME,
+// 			userId: session.userId,
+// 			providerId: githubUser.profile.id.toString(),
+// 		},
+// 	})
+// 	const request = await setupRequest({
+// 		sessionId: session.id,
+// 		code: githubUser.code,
+// 	})
+// 	const response = await loader({ request, params: PARAMS, context: {} })
+// 	expect(response).toHaveRedirect('/settings/profile/connections')
+// 	await expect(response).toSendToast(
+// 		expect.objectContaining({
+// 			title: 'Already Connected',
+// 			description: expect.stringContaining(githubUser.profile.login),
+// 		}),
+// 	)
+// })
+
+// test.skip('when a user exists with the same email, create connection and make session', async () => {
+// 	const githubUser = await insertGitHubUser()
+// 	const email = githubUser.primaryEmail.toLowerCase()
+// 	const { userId } = await setupUser({ ...createUser(), email })
+// 	const request = await setupRequest({ code: githubUser.code })
+// 	const response = await loader({ request, params: PARAMS, context: {} })
+
+// 	expect(response).toHaveRedirect('/')
+
+// 	await expect(response).toSendToast(
+// 		expect.objectContaining({
+// 			type: 'message',
+// 			description: expect.stringContaining(githubUser.profile.login),
+// 		}),
+// 	)
+
+// 	const connection = await prisma.connection.findFirst({
+// 		select: { id: true },
+// 		where: {
+// 			userId: userId,
+// 			providerId: githubUser.profile.id.toString(),
+// 		},
+// 	})
+// 	expect(
+// 		connection,
+// 		'the connection was not created in the database',
+// 	).toBeTruthy()
+
+// 	await expect(response).toHaveSessionForUser(userId)
+// })
+
+// test.skip('gives an error if the account is already connected to another user', async () => {
+// 	const githubUser = await insertGitHubUser()
+// 	await prisma.user.create({
+// 		data: {
+// 			...createUser(),
+// 			connections: {
+// 				create: {
+// 					providerName: GITHUB_PROVIDER_NAME,
+// 					providerId: githubUser.profile.id.toString(),
+// 				},
+// 			},
+// 		},
+// 	})
+// 	const session = await setupUser()
+// 	const request = await setupRequest({
+// 		sessionId: session.id,
+// 		code: githubUser.code,
+// 	})
+// 	const response = await loader({ request, params: PARAMS, context: {} })
+// 	expect(response).toHaveRedirect('/settings/profile/connections')
+// 	await expect(response).toSendToast(
+// 		expect.objectContaining({
+// 			title: 'Already Connected',
+// 			description: expect.stringContaining(
+// 				'already connected to another account',
+// 			),
+// 		}),
+// 	)
+// })
+
+// test.skip('if a user is not logged in, but the connection exists, make a session', async () => {
+// 	const githubUser = await insertGitHubUser()
+// 	const { userId } = await setupUser()
+// 	await prisma.connection.create({
+// 		data: {
+// 			providerName: GITHUB_PROVIDER_NAME,
+// 			providerId: githubUser.profile.id.toString(),
+// 			userId,
+// 		},
+// 	})
+// 	const request = await setupRequest({ code: githubUser.code })
+// 	const response = await loader({ request, params: PARAMS, context: {} })
+// 	expect(response).toHaveRedirect('/')
+// 	await expect(response).toHaveSessionForUser(userId)
+// })
+
+// test.skip('if a user is not logged in, but the connection exists and they have enabled 2FA, send them to verify their 2FA and do not make a session', async () => {
+// 	const githubUser = await insertGitHubUser()
+// 	const { userId } = await setupUser()
+// 	await prisma.connection.create({
+// 		data: {
+// 			providerName: GITHUB_PROVIDER_NAME,
+// 			providerId: githubUser.profile.id.toString(),
+// 			userId,
+// 		},
+// 	})
+// 	const { otp: _otp, ...config } = generateTOTP()
+// 	await prisma.verification.create({
+// 		data: {
+// 			type: twoFAVerificationType,
+// 			target: userId,
+// 			...config,
+// 		},
+// 	})
+// 	const request = await setupRequest({ code: githubUser.code })
+// 	const response = await loader({ request, params: PARAMS, context: {} })
+// 	const searchParams = new URLSearchParams({
+// 		type: twoFAVerificationType,
+// 		target: userId,
+// 		redirectTo: '/',
+// 	})
+// 	expect(response).toHaveRedirect(`/verify?${searchParams}`)
+// })
+
+// async function setupRequest({
+// 	sessionId,
+// 	code = faker.string.uuid(),
+// }: { sessionId?: string; code?: string } = {}) {
+// 	const url = new URL(ROUTE_PATH, BASE_URL)
+// 	const state = faker.string.uuid()
+// 	url.searchParams.set('state', state)
+// 	url.searchParams.set('code', code)
+// 	const connectionSession = await connectionSessionStorage.getSession()
+// 	connectionSession.set('oauth2:state', state)
+// 	const authSession = await authSessionStorage.getSession()
+// 	if (sessionId) authSession.set(sessionKey, sessionId)
+// 	const setSessionCookieHeader =
+// 		await authSessionStorage.commitSession(authSession)
+// 	const setConnectionSessionCookieHeader =
+// 		await connectionSessionStorage.commitSession(connectionSession)
+// 	const request = new Request(url.toString(), {
+// 		method: 'GET',
+// 		headers: {
+// 			cookie: [
+// 				convertSetCookieToCookie(setConnectionSessionCookieHeader),
+// 				convertSetCookieToCookie(setSessionCookieHeader),
+// 			].join('; '),
+// 		},
+// 	})
+// 	return request
+// }
+
+// async function setupUser(userData = createUser()) {
+// 	const session = await prisma.session.create({
+// 		data: {
+// 			expirationDate: getSessionExpirationDate(),
+// 			user: {
+// 				create: {
+// 					...userData,
+// 				},
+// 			},
+// 		},
+// 		select: {
+// 			id: true,
+// 			userId: true,
+// 		},
+// 	})
+
+// 	return session
+// }
diff --git a/app/routes/_auth+/auth.$provider.callback.ts b/app/routes/_auth+/auth.$provider.callback.ts
index 806d94af..120272eb 100644
--- a/app/routes/_auth+/auth.$provider.callback.ts
+++ b/app/routes/_auth+/auth.$provider.callback.ts
@@ -1,9 +1,8 @@
-import { type LoaderFunctionArgs } from '@remix-run/node'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 
 // const destroyRedirectTo = { 'set-cookie': destroyRedirectToHeader }
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader() {
 	return redirectWithToast('/', {
 		type: 'error',
 		title: 'Access Denied',
diff --git a/app/routes/_auth+/onboarding_.$provider.tsx b/app/routes/_auth+/onboarding_.$provider.tsx
index 064f64bb..f444e79b 100644
--- a/app/routes/_auth+/onboarding_.$provider.tsx
+++ b/app/routes/_auth+/onboarding_.$provider.tsx
@@ -2,7 +2,6 @@ import { parse } from '@conform-to/zod'
 import {
 	json,
 	redirect,
-	type LoaderFunctionArgs,
 	type ActionFunctionArgs,
 	type MetaFunction,
 } from '@remix-run/node'
@@ -64,7 +63,7 @@ async function requireData({
 	}
 }
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader() {
 	return redirectWithToast('/', {
 		type: 'error',
 		title: 'Access Denied',
@@ -118,7 +117,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
 				})
 				return
 			}
-		}).transform(async data => {
+		}).transform(async (data) => {
 			const session = await signupWithConnection({
 				...data,
 				email,
diff --git a/app/routes/_marketing+/index.tsx b/app/routes/_marketing+/index.tsx
index 3a3cd7f8..acc94654 100644
--- a/app/routes/_marketing+/index.tsx
+++ b/app/routes/_marketing+/index.tsx
@@ -1,9 +1,5 @@
 import { invariantResponse } from '@epic-web/invariant'
-import {
-	type LoaderFunctionArgs,
-	json,
-	type MetaFunction,
-} from '@remix-run/node'
+import { json, type MetaFunction } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import {
 	MarketingContentSection,
@@ -29,7 +25,7 @@ export interface IUserMarketing {
 	image: { id: string | null } | null
 }
 
-export async function loader({ params, request }: LoaderFunctionArgs) {
+export async function loader() {
 	const user: IUserMarketing | null = await prisma.user.findFirst({
 		select: {
 			name: true,
@@ -49,7 +45,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 
 	// get all generators for these versions
 	const generators: IArtworkVersionGenerator[] = await Promise.all(
-		publishedVersions.map(version =>
+		publishedVersions.map((version) =>
 			artworkVersionGeneratorBuildService({ version }),
 		),
 	)
@@ -58,7 +54,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 	const versionsWithGenerators: IArtworkVersionWithGenerator[] =
 		publishedVersions.map((version, index) => ({
 			...version,
-			generator: generators[index],
+			generator: generators[index]!,
 		}))
 
 	return json({
diff --git a/app/routes/editor+/index.tsx b/app/routes/editor+/index.tsx
index f2f1c499..90cc7474 100644
--- a/app/routes/editor+/index.tsx
+++ b/app/routes/editor+/index.tsx
@@ -12,7 +12,7 @@ import { getUserBasic } from '#app/models/user/user.get.server'
 import { requireUserId } from '#app/utils/auth.server'
 import { useUser } from '#app/utils/user'
 
-export async function loader({ params, request }: LoaderFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
diff --git a/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx b/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
index 47d97943..6c776465 100644
--- a/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
+++ b/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
@@ -30,16 +30,7 @@ export const NavActionsButtonGroup = memo(
 				{/* <span>fork ab</span> */}
 				{/* <span>merge ab</span> */}
 				<ArtworkVersionToggleStarred version={version} />
-				{/* <ArtworkBranchCreate
-					branchId={branch.id}
-					artworkId={artwork.id}
-					versionId={version.id}
-				/> */}
-				<CloneArtworkArtworkBranchForm
-					artwork={artwork}
-					branch={branch}
-					version={version}
-				/>
+				<CloneArtworkArtworkBranchForm artwork={artwork} branch={branch} />
 				<CloneArtworkBranchArtworkVersionForm
 					branch={branch}
 					version={version}
diff --git a/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.comboboxes.tsx b/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.comboboxes.tsx
index d31ea46d..43f43f4b 100644
--- a/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.comboboxes.tsx
+++ b/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.comboboxes.tsx
@@ -28,7 +28,6 @@ export const NavComboboxes = memo(
 				<FlexRow className="gap-4">
 					<ComboboxNav
 						entities={project.artworks}
-						entitySingular="artwork"
 						entityPlural="artworks"
 						placeholder="Select an artwork..."
 						slugParam="artworkSlug"
@@ -47,7 +46,6 @@ export const NavComboboxes = memo(
 				<FlexRow className="gap-4">
 					<ComboboxNav
 						entities={artwork.branches}
-						entitySingular="branch"
 						entityPlural="branches"
 						placeholder={branch.name || 'Select a branch...'}
 						slugParam="branchSlug"
@@ -66,7 +64,6 @@ export const NavComboboxes = memo(
 				<FlexRow className="gap-4">
 					<ComboboxNav
 						entities={branch.versions}
-						entitySingular="version"
 						entityPlural="versions"
 						placeholder={version.name || 'Select a version...'}
 						slugParam="versionSlug"
diff --git a/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.tsx b/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.tsx
index 5612f27b..577a6fd8 100644
--- a/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.tsx
+++ b/app/routes/editor+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.tsx
@@ -20,7 +20,7 @@ export const ArtworkHeader = () => {
 		artworkVersionLoaderRoute,
 	)
 	const onLatestVersion =
-		version.slug === 'latest' || branch.versions[0].id === version.id
+		version.slug === 'latest' || branch.versions[0]!.id === version.id
 
 	const navComboboxes = useCallback(
 		() => (
diff --git a/app/routes/resources+/api.v1+/artwork-branch.create.tsx b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
deleted file mode 100644
index 617a3db2..00000000
--- a/app/routes/resources+/api.v1+/artwork-branch.create.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { conform, useForm } from '@conform-to/react'
-import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import {
-	json,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-} from '@remix-run/node'
-import { useFetcher, useNavigate } from '@remix-run/react'
-import { useEffect, useState } from 'react'
-import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
-import { redirectBack } from 'remix-utils/redirect-back'
-import { useHydrated } from 'remix-utils/use-hydrated'
-import { Field, TextareaField } from '#app/components/forms'
-import {
-	DialogContentGrid,
-	DialogFormsContainer,
-} from '#app/components/layout/dialog'
-import { TooltipHydrated } from '#app/components/templates/tooltip'
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from '#app/components/ui/dialog'
-import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import { StatusButton } from '#app/components/ui/status-button'
-import { type IArtwork } from '#app/models/artwork/artwork.server'
-import { type IArtworkBranch } from '#app/models/artwork-branch/_._definitions.js'
-import { validateNewArtworkBranchSubmission } from '#app/models/artwork-branch/_.create.db.server.js'
-import { type IArtworkVersion } from '#app/models/artwork-version/definitions.js'
-import { NewArtworkBranchSchema } from '#app/schema/artwork-branch'
-import { validateNoJS } from '#app/schema/form-data'
-import { artworkBranchCreateService } from '#app/services/artwork/branch/create.service'
-import { requireUserId } from '#app/utils/auth.server'
-import { stringToSlug, useIsPending } from '#app/utils/misc'
-import { Routes } from '#app/utils/routes.const'
-
-// https://www.epicweb.dev/full-stack-components
-
-const route = Routes.RESOURCES.API.V1.ARTWORK_BRANCH.CREATE
-const schema = NewArtworkBranchSchema
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	await requireUserId(request)
-	return json({})
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	const userId = await requireUserId(request)
-	const formData = await request.formData()
-	const noJS = validateNoJS({ formData })
-
-	let createSuccess = false
-	let errorMessage = ''
-	const { status, submission } = await validateNewArtworkBranchSubmission({
-		userId,
-		formData,
-	})
-
-	if (status === 'success') {
-		const { success, message } = await artworkBranchCreateService({
-			userId,
-			...submission.value,
-		})
-		createSuccess = success
-		errorMessage = message || ''
-	}
-
-	if (noJS) {
-		throw redirectBack(request, {
-			fallback: '/',
-		})
-	}
-
-	return json(
-		{ status, submission, message: errorMessage },
-		{
-			status: status === 'error' || !createSuccess ? 422 : 201,
-		},
-	)
-}
-
-export const ArtworkBranchCreate = ({
-	artworkId,
-	branchId,
-	versionId,
-}: {
-	artworkId: IArtwork['id']
-	branchId: IArtworkBranch['id']
-	versionId: IArtworkVersion['id']
-}) => {
-	const [open, setOpen] = useState(false)
-
-	const fetcher = useFetcher<typeof action>()
-	const isPending = useIsPending()
-	const navigate = useNavigate()
-	let isHydrated = useHydrated()
-
-	const [form, fields] = useForm({
-		id: `artwork-branch-create-${artworkId}-${branchId}-${versionId}`,
-		constraint: getFieldsetConstraint(schema),
-		lastSubmission: fetcher.data?.submission,
-		onValidate: ({ formData }) => {
-			return parse(formData, { schema })
-		},
-		defaultValue: {
-			name: '',
-			description: '',
-		},
-	})
-
-	useEffect(() => {
-		if (fetcher.state === 'idle' && fetcher.data?.status === 'success') {
-			const newBranchName = fetcher.data.submission.value.name
-			const newBranchSlug = stringToSlug(newBranchName)
-			navigate(`../../${newBranchSlug}`)
-			setOpen(false)
-		}
-	}, [fetcher, navigate])
-
-	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<TooltipHydrated tooltipText="New branch..." isHydrated={isHydrated}>
-				<DialogTrigger asChild>
-					<PanelIconButton iconName="file-plus" iconText="New Branch" />
-				</DialogTrigger>
-			</TooltipHydrated>
-			<DialogContent className="sm:max-w-[425px]">
-				<DialogHeader>
-					<DialogTitle>Create a new branch</DialogTitle>
-					<DialogDescription>
-						Start a new branch for this artwork off the current settings. Add a
-						name and description to help understand the changes.
-					</DialogDescription>
-				</DialogHeader>
-				<DialogContentGrid>
-					<fetcher.Form method="POST" action={route} {...form.props}>
-						<AuthenticityTokenInput />
-
-						<input type="hidden" name="no-js" value={String(!isHydrated)} />
-						<input type="hidden" name="id" value={branchId} />
-						<input type="hidden" name="artworkId" value={artworkId} />
-						<input type="hidden" name="versionId" value={versionId} />
-
-						<DialogFormsContainer>
-							<Field
-								labelProps={{ children: 'Name' }}
-								inputProps={{
-									autoFocus: true,
-									...conform.input(fields.name, { ariaAttributes: true }),
-								}}
-								errors={fields.name.errors}
-							/>
-							<TextareaField
-								labelProps={{ children: 'Description' }}
-								textareaProps={{
-									...conform.textarea(fields.description, {
-										ariaAttributes: true,
-									}),
-								}}
-								errors={fields.description.errors}
-							/>
-						</DialogFormsContainer>
-					</fetcher.Form>
-				</DialogContentGrid>
-				<DialogFooter>
-					<StatusButton
-						form={form.id}
-						type="submit"
-						disabled={isPending}
-						status={isPending ? 'pending' : 'idle'}
-					>
-						Submit
-					</StatusButton>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	)
-}
diff --git a/app/routes/resources+/api.v1+/asset.image.artwork-version.clone.tsx b/app/routes/resources+/api.v1+/asset.image.artwork-version.clone.tsx
index 645a6de7..2f9934bd 100644
--- a/app/routes/resources+/api.v1+/asset.image.artwork-version.clone.tsx
+++ b/app/routes/resources+/api.v1+/asset.image.artwork-version.clone.tsx
@@ -21,7 +21,7 @@ import { ArtworkAssetImageSrcStrategy } from '#app/strategies/asset.image.src.st
 import { requireUserId } from '#app/utils/auth.server'
 import { Routes } from '#app/utils/routes.const'
 
-// technically this would be a clone of the artowrk asset image by id
+// technically this would be a clone of the artwork asset image by id
 
 // https://www.epicweb.dev/full-stack-components
 
diff --git a/app/routes/resources+/api.v1+/asset.update.name.tsx b/app/routes/resources+/api.v1+/asset.update.name.tsx
index b7198d4c..89f24cc3 100644
--- a/app/routes/resources+/api.v1+/asset.update.name.tsx
+++ b/app/routes/resources+/api.v1+/asset.update.name.tsx
@@ -27,8 +27,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
 }
 
 export async function action({ request }: ActionFunctionArgs) {
-	const userId = await requireUserId(request)
-	const { formData, noJS } = await handleFormData({ request })
+	await requireUserId(request)
+	const { noJS } = await handleFormData({ request })
 
 	const { status, submission, responseSuccess, message } = {
 		status: 'error',
diff --git a/app/routes/resources+/api.v1+/entity.create.dialog.tsx b/app/routes/resources+/api.v1+/entity.create.dialog.tsx
index 28ad5a56..156d5e9a 100644
--- a/app/routes/resources+/api.v1+/entity.create.dialog.tsx
+++ b/app/routes/resources+/api.v1+/entity.create.dialog.tsx
@@ -74,6 +74,7 @@ export const action = serverOnly$(async ({ request }: ActionFunctionArgs) => {
 	const userId = await requireUserId(request)
 	const { formData, noJS } = await handleFormData({ request })
 
+	// TODO: option to redirect from server
 	const { status, submission, responseSuccess, message } =
 		await handleSubmission({
 			userId,
diff --git a/app/routes/resources+/api.v1+/entity.toggle.attribute.tsx b/app/routes/resources+/api.v1+/entity.toggle.attribute.tsx
index 896628f1..2e711598 100644
--- a/app/routes/resources+/api.v1+/entity.toggle.attribute.tsx
+++ b/app/routes/resources+/api.v1+/entity.toggle.attribute.tsx
@@ -26,7 +26,7 @@ import { type ExtractStringValues } from '#app/utils/typescript-helpers'
 
 // https://www.epicweb.dev/full-stack-components
 
-const route = `${resourceRouteApiV1}/toggle/entity/attribute`
+const route = `${resourceRouteApiV1}/entity/toggle/attribute`
 
 export const EntityToggleAttributeIntent = {
 	ARTWORK_VERSION: {
diff --git a/app/routes/resources+/api.v1+/layer.design.update.visible.tsx b/app/routes/resources+/api.v1+/layer.design.update.visible.tsx
deleted file mode 100644
index 97140ab9..00000000
--- a/app/routes/resources+/api.v1+/layer.design.update.visible.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useForm } from '@conform-to/react'
-import { getFieldsetConstraint } from '@conform-to/zod'
-import {
-	json,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-} from '@remix-run/node'
-import { useFetcher } from '@remix-run/react'
-import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
-import { redirectBack } from 'remix-utils/redirect-back'
-import { useHydrated } from 'remix-utils/use-hydrated'
-import { TooltipHydrated } from '#app/components/templates/tooltip'
-import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import { type IDesign } from '#app/models/design/definitions'
-import { validateLayerToggleVisibeDesignSubmission } from '#app/models/design-layer/design-layer.update.server'
-import { type ILayer } from '#app/models/layer/definitions'
-import { ToggleVisibleLayerDesignSchema } from '#app/schema/design-layer'
-import { EntityParentIdType } from '#app/schema/entity'
-import { validateNoJS } from '#app/schema/form-data'
-import { layerDesignToggleVisibleService } from '#app/services/layer/design/toggle-visible.service'
-import { requireUserId } from '#app/utils/auth.server'
-import { useIsPending } from '#app/utils/misc'
-import { Routes } from '#app/utils/routes.const'
-
-// https://www.epicweb.dev/full-stack-components
-
-const route = Routes.RESOURCES.API.V1.LAYER.DESIGN.UPDATE.VISIBLE
-const schema = ToggleVisibleLayerDesignSchema
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	await requireUserId(request)
-	return json({})
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	const userId = await requireUserId(request)
-	const formData = await request.formData()
-	const noJS = validateNoJS({ formData })
-
-	let updateSuccess = false
-	const { status, submission } =
-		await validateLayerToggleVisibeDesignSubmission({
-			userId,
-			formData,
-		})
-
-	if (status === 'success') {
-		const { success } = await layerDesignToggleVisibleService({
-			userId,
-			...submission.value,
-		})
-		updateSuccess = success
-	}
-
-	if (noJS) {
-		throw redirectBack(request, {
-			fallback: '/',
-		})
-	}
-
-	return json(
-		{ status, submission },
-		{
-			status: status === 'error' || !updateSuccess ? 404 : 200,
-		},
-	)
-}
-
-export const LayerDesignToggleVisible = ({
-	design,
-	layer,
-}: {
-	design: IDesign
-	layer: ILayer
-}) => {
-	const layerId = layer.id
-	const designId = design.id
-	const isVisible = design.visible
-	const icon = isVisible ? 'eye-open' : 'eye-closed'
-	const iconText = `${isVisible ? 'Hide' : 'Show'} ${design.type}`
-
-	const fetcher = useFetcher<typeof action>()
-	const lastSubmission = fetcher.data?.submission
-	const isPending = useIsPending()
-	let isHydrated = useHydrated()
-	const [form] = useForm({
-		id: `artwork-layer-design-toggle-visible-${layerId}-${designId}`,
-		constraint: getFieldsetConstraint(schema),
-		lastSubmission,
-	})
-
-	return (
-		<fetcher.Form method="POST" action={route} {...form.props}>
-			<AuthenticityTokenInput />
-
-			<input type="hidden" name="no-js" value={String(!isHydrated)} />
-			<input type="hidden" name="id" value={designId} />
-			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
-
-			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
-				<PanelIconButton
-					type="submit"
-					iconName={icon}
-					iconText={iconText}
-					disabled={isPending}
-				/>
-			</TooltipHydrated>
-		</fetcher.Form>
-	)
-}
diff --git a/app/routes/resources+/api.v1+/layer.update.description.tsx b/app/routes/resources+/api.v1+/layer.update.description.tsx
index 41fcb611..f8e9fb60 100644
--- a/app/routes/resources+/api.v1+/layer.update.description.tsx
+++ b/app/routes/resources+/api.v1+/layer.update.description.tsx
@@ -103,7 +103,7 @@ export const LayerDescription = ({
 	})
 	const submitRef = useRef<HTMLButtonElement>(null)
 
-	const handleChangeSubmit = useDebounce((f: HTMLFormElement) => {
+	const handleChangeSubmit = useDebounce(() => {
 		submitRef.current?.click()
 	}, 400)
 
@@ -111,7 +111,7 @@ export const LayerDescription = ({
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 		>
 			<AuthenticityTokenInput />
diff --git a/app/routes/resources+/api.v1+/layer.update.name.tsx b/app/routes/resources+/api.v1+/layer.update.name.tsx
index a955f259..d2c45ac8 100644
--- a/app/routes/resources+/api.v1+/layer.update.name.tsx
+++ b/app/routes/resources+/api.v1+/layer.update.name.tsx
@@ -103,7 +103,7 @@ export const LayerName = ({
 	})
 	const submitRef = useRef<HTMLButtonElement>(null)
 
-	const handleChangeSubmit = useDebounce((f: HTMLFormElement) => {
+	const handleChangeSubmit = useDebounce(() => {
 		submitRef.current?.click()
 	}, 400)
 
@@ -111,7 +111,7 @@ export const LayerName = ({
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 		>
 			<AuthenticityTokenInput />
diff --git a/app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx b/app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx
index 8c711221..8a6db325 100644
--- a/app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx
+++ b/app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx
@@ -46,7 +46,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 
 	// get all generators for these versions
 	const generators: IArtworkVersionGenerator[] = await Promise.all(
-		starredVersions.map(version =>
+		starredVersions.map((version) =>
 			artworkVersionGeneratorBuildService({ version }),
 		),
 	)
@@ -55,7 +55,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 	const versionsWithGenerators: IArtworkVersionWithGenerator[] =
 		starredVersions.map((version, index) => ({
 			...version,
-			generator: generators[index],
+			generator: generators[index]!,
 		}))
 
 	const date = new Date(artwork.updatedAt)
@@ -154,7 +154,7 @@ export const meta: MetaFunction<
 	{ 'routes/users+/$username_+/artworks': typeof artworksLoader }
 > = ({ data, params, matches }) => {
 	const artworkssMatch = matches.find(
-		m => m.id === 'routes/users+/$username_+/artworks',
+		(m) => m.id === 'routes/users+/$username_+/artworks',
 	)
 	const displayName = artworkssMatch?.data?.owner.name ?? params.username
 	const entityTitle = data?.artwork.name ?? 'Artwork'
diff --git a/app/services/artwork/branch/create.service.ts b/app/services/artwork/branch/create.service.ts
deleted file mode 100644
index 55b69139..00000000
--- a/app/services/artwork/branch/create.service.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { invariant } from '@epic-web/invariant'
-import { type IArtwork } from '#app/models/artwork/artwork.server'
-import { type IArtworkBranch } from '#app/models/artwork-branch/_._definitions.js'
-import { createArtworkBranch, type IArtworkBranchCreatedResponse } from '#app/models/artwork-branch/_.create.db.server.js'
-import { getArtworkBranch } from '#app/models/artwork-branch/_.get.server.js'
-import { createArtworkVersion } from '#app/models/artwork-version/artwork-version.create.server'
-import { getArtworkVersion } from '#app/models/artwork-version/artwork-version.get.server'
-import { type IArtworkVersion } from '#app/models/artwork-version/definitions'
-import { type IUser } from '#app/models/user/user.server'
-import { ArtworkBranchDataCreateSchema } from '#app/schema/artwork-branch'
-import { ArtworkVersionDataCreateSchema } from '#app/schema/artwork-version'
-import { DesignCloneSourceTypeEnum } from '#app/schema/design'
-import { LayerCloneSourceTypeEnum } from '#app/schema/layer'
-import { stringToSlug } from '#app/utils/misc'
-
-export const artworkBranchCreateService = async ({
-	userId,
-	id,
-	artworkId,
-	versionId,
-	name,
-	description,
-}: {
-	userId: IUser['id']
-	id: IArtworkBranch['id']
-	artworkId: IArtwork['id']
-	versionId: IArtworkVersion['id']
-	name: string
-	description?: string
-}): Promise<IArtworkBranchCreatedResponse> => {
-	try {
-		// Step 1: find the current artwork branch
-		// this could be the root branch ("main")
-		// or this could be a child branch
-		// get this for its name
-		const currentArtworkBranch = await getArtworkBranch({
-			where: { id, ownerId: userId },
-		})
-		invariant(currentArtworkBranch, 'Current artwork branch not found')
-
-		// Step 2: get data for new artwork branch
-		const branchData = ArtworkBranchDataCreateSchema.parse({
-			ownerId: userId,
-			artworkId,
-			parentId: id,
-			name,
-			slug: stringToSlug(name),
-			description:
-				description || `New branch from ${currentArtworkBranch.name}`,
-		})
-
-		// Step 3: create the new artwork branch
-		const createdArtworkBranch = await createArtworkBranch({
-			data: branchData,
-		})
-		invariant(createdArtworkBranch, 'New artwork branch not created')
-
-		// Step 4: get the current version of the artwork branch
-		// NOTE: do not use artworkVersionCreateService
-		// as that will attempt to connect versions from different branches
-		const currentArtworkVersion = await getArtworkVersion({
-			where: { id: versionId, branchId: id, ownerId: userId },
-		})
-		invariant(currentArtworkVersion, 'Current artwork version not found')
-
-		// Step 5: get data for new branch initial version
-		const { width, height, background } = currentArtworkVersion
-		const versionData = ArtworkVersionDataCreateSchema.parse({
-			ownerId: userId,
-			branchId: createdArtworkBranch.id,
-			description: `New branch from ${currentArtworkBranch.name}, version ${currentArtworkVersion.name}`,
-			width,
-			height,
-			background,
-		})
-
-		// Step 6: create new artwork version
-		const createdArtworkVersion = await createArtworkVersion({
-			data: versionData,
-		})
-		invariant(createdArtworkVersion, 'New artwork version not created')
-
-		// Step 7: copy contents of previous artwork version to new artwork version
-		await artworkVersionCloneDesignsService({
-			userId,
-			sourceEntityType: DesignCloneSourceTypeEnum.ARTWORK_VERSION,
-			sourceEntityId: currentArtworkVersion.id,
-			targetEntityId: createdArtworkVersion.id,
-		})
-		await artworkVersionCloneLayersService({
-			userId,
-			sourceEntityType: LayerCloneSourceTypeEnum.ARTWORK_VERSION,
-			sourceEntityId: currentArtworkVersion.id,
-			targetEntityId: createdArtworkVersion.id,
-		})
-
-		return {
-			createdArtworkBranch,
-			success: true,
-		}
-	} catch (error) {
-		console.log(error)
-		return {
-			success: false,
-			message: 'Unknown error creating artwork generator.',
-		}
-	}
-}
diff --git a/app/services/artwork/version/layer/delete.service.ts b/app/services/artwork/version/layer/delete.service.ts
index cd4c7441..399b4f3e 100644
--- a/app/services/artwork/version/layer/delete.service.ts
+++ b/app/services/artwork/version/layer/delete.service.ts
@@ -18,7 +18,6 @@ import { getOptionalZodErrorMessage } from '#app/utils/misc'
 export const artworkVersionLayerDeleteService = async ({
 	userId,
 	id,
-	artworkVersionId,
 }: {
 	userId: IUser['id']
 	id: ILayer['id']
diff --git a/app/services/artwork/version/layer/move-up.service.ts b/app/services/artwork/version/layer/move-up.service.ts
index f281f868..38c0b0ef 100644
--- a/app/services/artwork/version/layer/move-up.service.ts
+++ b/app/services/artwork/version/layer/move-up.service.ts
@@ -11,7 +11,6 @@ import { prisma } from '#app/utils/db.server'
 export const artworkVersionLayerMoveUpService = async ({
 	userId,
 	id,
-	artworkVersionId,
 }: {
 	userId: IUser['id']
 	id: ILayer['id']
diff --git a/app/services/asset.image.artwork-version.delete.service.ts b/app/services/asset.image.artwork-version.delete.service.ts
index 7382aa2d..1e941657 100644
--- a/app/services/asset.image.artwork-version.delete.service.ts
+++ b/app/services/asset.image.artwork-version.delete.service.ts
@@ -7,7 +7,6 @@ import { type IUser } from '#app/models/user/user.server'
 import { prisma } from '#app/utils/db.server'
 
 export const assetImageArtworkVersionDeleteService = async ({
-	userId,
 	id,
 }: {
 	userId: IUser['id']
diff --git a/app/services/asset.image.artwork.delete.service.ts b/app/services/asset.image.artwork.delete.service.ts
index ba202c71..96e540e0 100644
--- a/app/services/asset.image.artwork.delete.service.ts
+++ b/app/services/asset.image.artwork.delete.service.ts
@@ -7,7 +7,6 @@ import { type IUser } from '#app/models/user/user.server'
 import { prisma } from '#app/utils/db.server'
 
 export const assetImageArtworkDeleteService = async ({
-	userId,
 	id,
 }: {
 	userId: IUser['id']
diff --git a/app/services/asset.image.layer.delete.service.ts b/app/services/asset.image.layer.delete.service.ts
index 471bc78d..84645fce 100644
--- a/app/services/asset.image.layer.delete.service.ts
+++ b/app/services/asset.image.layer.delete.service.ts
@@ -7,7 +7,6 @@ import { type IUser } from '#app/models/user/user.server'
 import { prisma } from '#app/utils/db.server'
 
 export const assetImageLayerDeleteService = async ({
-	userId,
 	id,
 }: {
 	userId: IUser['id']
diff --git a/app/services/canvas/layer/build/build-layer-draw-fill.service.ts b/app/services/canvas/layer/build/build-layer-draw-fill.service.ts
index 2027b52e..b687c41f 100644
--- a/app/services/canvas/layer/build/build-layer-draw-fill.service.ts
+++ b/app/services/canvas/layer/build/build-layer-draw-fill.service.ts
@@ -27,7 +27,7 @@ export const canvasBuildLayerDrawFillService = ({
 		case FillBasisTypeEnum.RANDOM:
 			return colorRandomHex()
 		case FillBasisTypeEnum.PALETTE_SELECTED:
-			return palette[0].attributes.value
+			return palette[0]!.attributes.value
 		case FillBasisTypeEnum.PALETTE_RANDOM:
 			return getRandomItemInArray(palette).attributes.value
 		case FillBasisTypeEnum.PALETTE_LOOP:
diff --git a/app/services/canvas/layer/build/build-layer-draw-position.pixel.service.ts b/app/services/canvas/layer/build/build-layer-draw-position.pixel.service.ts
index 47270e6b..b5b1308e 100644
--- a/app/services/canvas/layer/build/build-layer-draw-position.pixel.service.ts
+++ b/app/services/canvas/layer/build/build-layer-draw-position.pixel.service.ts
@@ -78,10 +78,11 @@ const buildPixelImageData = ({
 }
 
 // Function to build the RGB values from image data
-const buildPixelRGB = ({ data }: { data: Uint8ClampedArray }) => {
-	const r = data[0] // Red value
-	const g = data[1] // Green value
-	const b = data[2] // Blue value
+type PixelRGB = { r: number; g: number; b: number }
+const buildPixelRGB = ({ data }: { data: Uint8ClampedArray }): PixelRGB => {
+	const r = data[0] || 0 // Red value
+	const g = data[1] || 0 // Green value
+	const b = data[2] || 0 // Blue value
 	// The alpha value at index 3 is not included as we are only interested in the RGB values for color representation.
 	return { r, g, b }
 }
diff --git a/app/services/canvas/layer/build/build-layer-draw-stroke.service.ts b/app/services/canvas/layer/build/build-layer-draw-stroke.service.ts
index 40a27df9..f442ec8d 100644
--- a/app/services/canvas/layer/build/build-layer-draw-stroke.service.ts
+++ b/app/services/canvas/layer/build/build-layer-draw-stroke.service.ts
@@ -25,7 +25,7 @@ export const canvasBuildLayerDrawStrokeService = ({
 		case StrokeBasisTypeEnum.RANDOM:
 			return colorRandomHex()
 		case StrokeBasisTypeEnum.PALETTE_SELECTED:
-			return palette[0].attributes.value
+			return palette[0]!.attributes.value
 		case StrokeBasisTypeEnum.PALETTE_RANDOM:
 			return getRandomItemInArray(palette).attributes.value
 		case StrokeBasisTypeEnum.PALETTE_LOOP:
diff --git a/app/services/canvas/layer/draw/draw-layers.asset.service.ts b/app/services/canvas/layer/draw/draw-layers.asset.service.ts
index 3982a327..42d77538 100644
--- a/app/services/canvas/layer/draw/draw-layers.asset.service.ts
+++ b/app/services/canvas/layer/draw/draw-layers.asset.service.ts
@@ -15,12 +15,12 @@ export const canvasDrawLayerAssets = ({
 	const { assetImages } = assets
 
 	for (let i = 0; i < assetImages.length; i++) {
-		const image = assetImages[i]
+		const image = assetImages[i]!
 
 		// may want to draw image to get pixel data on build
 		if (timeToDraw && image.hideOnDraw) continue
 
-		const img = loadedAssets[image.id]
+		const img = loadedAssets[image.id]!
 		const { x, y, width, height } = image
 		ctx.drawImage(img, x, y, width, height)
 	}
diff --git a/app/services/canvas/layer/draw/draw-layers.service.ts b/app/services/canvas/layer/draw/draw-layers.service.ts
index f1dbec28..9eaa6bc6 100644
--- a/app/services/canvas/layer/draw/draw-layers.service.ts
+++ b/app/services/canvas/layer/draw/draw-layers.service.ts
@@ -16,7 +16,7 @@ export const canvasDrawLayersService = ({
 	loadedAssets: ILoadedAssets
 }) => {
 	for (let i = 0; i < drawLayers.length; i++) {
-		const layer = drawLayers[i]
+		const layer = drawLayers[i]!
 		canvasDrawLayerAssets({
 			ctx,
 			assets: layer.assets,
@@ -35,7 +35,7 @@ const drawLayerItems = ({
 	items: IGenerationItem[]
 }) => {
 	for (let i = 0; i < items.length; i++) {
-		const layerDrawItem = items[i]
+		const layerDrawItem = items[i]!
 		drawLayerItemService({ ctx, layerDrawItem })
 	}
 }
diff --git a/app/services/design-type/update-layout.service.ts b/app/services/design-type/update-layout.service.ts
index 3eba56b8..49686269 100644
--- a/app/services/design-type/update-layout.service.ts
+++ b/app/services/design-type/update-layout.service.ts
@@ -10,7 +10,6 @@ import {
 import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeLayoutCountService = async ({
-	userId,
 	id,
 	designId,
 	count,
@@ -40,7 +39,6 @@ export const updateDesignTypeLayoutCountService = async ({
 }
 
 export const updateDesignTypeLayoutRowsService = async ({
-	userId,
 	id,
 	designId,
 	rows,
@@ -70,7 +68,6 @@ export const updateDesignTypeLayoutRowsService = async ({
 }
 
 export const updateDesignTypeLayoutColumnsService = async ({
-	userId,
 	id,
 	designId,
 	columns,
@@ -100,7 +97,6 @@ export const updateDesignTypeLayoutColumnsService = async ({
 }
 
 export const updateDesignTypeLayoutStyleService = async ({
-	userId,
 	id,
 	designId,
 	style,
diff --git a/app/services/design-type/update-line.service.ts b/app/services/design-type/update-line.service.ts
index 458a78a5..fd2a7e51 100644
--- a/app/services/design-type/update-line.service.ts
+++ b/app/services/design-type/update-line.service.ts
@@ -9,7 +9,6 @@ import {
 import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeLineWidthService = async ({
-	userId,
 	id,
 	designId,
 	width,
@@ -39,7 +38,6 @@ export const updateDesignTypeLineWidthService = async ({
 }
 
 export const updateDesignTypeLineBasisService = async ({
-	userId,
 	id,
 	designId,
 	basis,
@@ -69,7 +67,6 @@ export const updateDesignTypeLineBasisService = async ({
 }
 
 export const updateDesignTypeLineFormatService = async ({
-	userId,
 	id,
 	designId,
 	format,
diff --git a/app/services/design-type/update-palette.service.ts b/app/services/design-type/update-palette.service.ts
index 149bef3e..3c2e10e4 100644
--- a/app/services/design-type/update-palette.service.ts
+++ b/app/services/design-type/update-palette.service.ts
@@ -7,7 +7,6 @@ import {
 import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypePaletteValueService = async ({
-	userId,
 	id,
 	designId,
 	value,
diff --git a/app/services/design-type/update-rotate.service.ts b/app/services/design-type/update-rotate.service.ts
index 434b3040..5981477f 100644
--- a/app/services/design-type/update-rotate.service.ts
+++ b/app/services/design-type/update-rotate.service.ts
@@ -8,7 +8,6 @@ import {
 import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeRotateValueService = async ({
-	userId,
 	id,
 	designId,
 	value,
@@ -38,7 +37,6 @@ export const updateDesignTypeRotateValueService = async ({
 }
 
 export const updateDesignTypeRotateBasisService = async ({
-	userId,
 	id,
 	designId,
 	basis,
diff --git a/app/services/design-type/update-size.service.ts b/app/services/design-type/update-size.service.ts
index 4b22f73c..342b5eab 100644
--- a/app/services/design-type/update-size.service.ts
+++ b/app/services/design-type/update-size.service.ts
@@ -9,7 +9,6 @@ import {
 import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeSizeValueService = async ({
-	userId,
 	id,
 	designId,
 	value,
@@ -39,7 +38,6 @@ export const updateDesignTypeSizeValueService = async ({
 }
 
 export const updateDesignTypeSizeBasisService = async ({
-	userId,
 	id,
 	designId,
 	basis,
@@ -69,7 +67,6 @@ export const updateDesignTypeSizeBasisService = async ({
 }
 
 export const updateDesignTypeSizeFormatService = async ({
-	userId,
 	id,
 	designId,
 	format,
diff --git a/app/services/design-type/update-stroke.service.ts b/app/services/design-type/update-stroke.service.ts
index 89eb8742..8dadaa4b 100644
--- a/app/services/design-type/update-stroke.service.ts
+++ b/app/services/design-type/update-stroke.service.ts
@@ -9,7 +9,6 @@ import {
 import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeStrokeValueService = async ({
-	userId,
 	id,
 	designId,
 	value,
@@ -39,7 +38,6 @@ export const updateDesignTypeStrokeValueService = async ({
 }
 
 export const updateDesignTypeStrokeBasisService = async ({
-	userId,
 	id,
 	designId,
 	basis,
@@ -69,7 +67,6 @@ export const updateDesignTypeStrokeBasisService = async ({
 }
 
 export const updateDesignTypeStrokeStyleService = async ({
-	userId,
 	id,
 	designId,
 	style,
diff --git a/app/utils/array.utils.ts b/app/utils/array.utils.ts
index 7c3f24ca..9f97bb67 100644
--- a/app/utils/array.utils.ts
+++ b/app/utils/array.utils.ts
@@ -4,7 +4,7 @@ import { randomIndex } from './random.utils'
 
 // If the index is out of bounds, it wraps around the array.
 export const getCircularItemInArray = <T>(array: T[], index: number): T => {
-	return array[index % array.length]
+	return array[index % array.length] as T
 }
 
 // Function to get an item from an array in a reverse circular manner.
@@ -13,9 +13,9 @@ export const getReverseCircularItemInArray = <T>(
 	array: T[],
 	index: number,
 ): T => {
-	return array[array.length - 1 - (index % array.length)]
+	return array[array.length - 1 - (index % array.length)] as T
 }
 
 export const getRandomItemInArray = <T>(array: T[]): T => {
-	return array[randomIndex(array)]
+	return array[randomIndex(array)] as T
 }
diff --git a/app/utils/conform-utils.ts b/app/utils/conform-utils.ts
index 60bfa44a..2b94491a 100644
--- a/app/utils/conform-utils.ts
+++ b/app/utils/conform-utils.ts
@@ -59,7 +59,7 @@ export async function parseEntitySubmission({
 }) {
 	return await parse(formData, {
 		schema: schema.superRefine(async (data, ctx) => {
-			strategy.validateFormDataEntity({ userId, data, ctx })
+			void strategy.validateFormDataEntity({ userId, data, ctx })
 		}),
 		async: true,
 	})
@@ -105,7 +105,7 @@ export async function parseEntityImageSubmission({
 	return await parse(formData, {
 		schema: schema
 			.superRefine(async (data, ctx) => {
-				strategy.validateFormDataEntity({ userId, data, ctx })
+				void strategy.validateFormDataEntity({ userId, data, ctx })
 			})
 			.transform(transformAssetImageData),
 		async: true,
diff --git a/app/utils/db.server.ts b/app/utils/db.server.ts
index 6d6f3ac6..f0219f9b 100644
--- a/app/utils/db.server.ts
+++ b/app/utils/db.server.ts
@@ -56,7 +56,7 @@ export const prisma = remember('prisma', () => {
 		],
 	})
 	// $on prevents the ability to use prisma extensions
-	client.$on('query', async e => {
+	client.$on('query', async (e) => {
 		if (e.duration < logThreshold) return
 		const color =
 			e.duration < logThreshold * 1.1
@@ -71,6 +71,6 @@ export const prisma = remember('prisma', () => {
 		const dur = chalk[color](`${e.duration}ms`)
 		console.info(`prisma:query - ${dur} - ${e.query}`)
 	})
-	client.$connect()
+	void client.$connect()
 	return client
 })
diff --git a/app/utils/providers/github.server.ts b/app/utils/providers/github.server.ts
index f24709c0..fd7e9385 100644
--- a/app/utils/providers/github.server.ts
+++ b/app/utils/providers/github.server.ts
@@ -25,14 +25,14 @@ export class GitHubProvider implements AuthProvider {
 	getAuthStrategy() {
 		return new GitHubStrategy(
 			{
-				clientID: process.env.GITHUB_CLIENT_ID,
+				clientId: process.env.GITHUB_CLIENT_ID,
 				clientSecret: process.env.GITHUB_CLIENT_SECRET,
-				callbackURL: '/auth/github/callback',
+				redirectURI: '/auth/github/callback',
 			},
 			async ({ profile }) => {
-				const email = profile.emails[0].value.trim().toLowerCase()
+				const email = profile.emails[0]!.value.trim().toLowerCase()
 				const username = profile.displayName
-				const imageUrl = profile.photos[0].value
+				const imageUrl = profile.photos[0]!.value
 				return {
 					email,
 					id: profile.id,
@@ -55,7 +55,7 @@ export class GitHubProvider implements AuthProvider {
 			ttl: 1000 * 60,
 			swr: 1000 * 60 * 60 * 24 * 7,
 			async getFreshValue(context) {
-				await new Promise(r => setTimeout(r, 3000))
+				await new Promise((r) => setTimeout(r, 3000))
 				const response = await fetch(
 					`https://api.github.com/user/${providerId}`,
 					{ headers: { Authorization: `token ${process.env.GITHUB_TOKEN}` } },
diff --git a/app/utils/typescript-helpers.ts b/app/utils/typescript-helpers.ts
index 1bd4da47..36d85721 100644
--- a/app/utils/typescript-helpers.ts
+++ b/app/utils/typescript-helpers.ts
@@ -73,7 +73,7 @@ export const initializeEnumItemsMap = <
 
 	// Iterate over the enum values and initialize the map with empty arrays
 	const enumValues = Object.values(enumObj)
-	enumValues.forEach(value => {
+	enumValues.forEach((value) => {
 		itemsMap[value as EnumValue] = []
 	})
 
diff --git a/dev/model-file-structure/entity._._utils.ts b/dev/model-file-structure/entity._._utils.ts
new file mode 100644
index 00000000..88e2df38
--- /dev/null
+++ b/dev/model-file-structure/entity._._utils.ts
@@ -0,0 +1,16 @@
+import {
+	type IExampleEntity,
+	type IExampleEntityData,
+} from './entity._._definitions'
+
+export const getExampleEntityData = ({
+	exampleEntity,
+}: {
+	exampleEntity: IExampleEntity
+}): IExampleEntityData => {
+	return {
+		name: exampleEntity.name,
+		description: exampleEntity.description,
+		visible: exampleEntity.visible,
+	}
+}
diff --git a/dev/model-file-structure/entity._.get.db.server.ts b/dev/model-file-structure/entity._.get.db.server.ts
index 3cb9daeb..9e6dea3a 100644
--- a/dev/model-file-structure/entity._.get.db.server.ts
+++ b/dev/model-file-structure/entity._.get.db.server.ts
@@ -1,17 +1,29 @@
 import { invariant } from '@epic-web/invariant'
-import { z } from 'zod'
+import { type z } from 'zod'
 import {
 	type IExampleEntity,
 	type IExampleEntityWithChildren,
 } from './entity._._definitions'
 
-export type queryExampleEntityWhereArgsType = z.infer<typeof whereArgs>
-const whereArgs = z.object({
-	id: z.string().optional(),
-	name: z.string().optional(),
-	ownerId: z.string().optional(),
-	exampleEntityId: z.string().optional(),
-})
+const exampleEntityRecord = {
+	id: '1',
+	name: 'Example Entity',
+	description: 'Example description',
+	visible: true,
+	createdAt: new Date(),
+	updatedAt: new Date(),
+	ownerId: '1',
+	exampleEntityId: '1',
+} as IExampleEntity
+
+export type queryExampleEntityWhereArgsType = z.infer<
+	z.ZodObject<{
+		id: z.ZodOptional<z.ZodString>
+		name: z.ZodOptional<z.ZodString>
+		ownerId: z.ZodOptional<z.ZodString>
+		exampleEntityId: z.ZodOptional<z.ZodString>
+	}>
+>
 
 // TODO: Add schemas for each type of query and parse with zod
 // aka if by id that should be present, if by slug that should be present
@@ -46,20 +58,10 @@ export const getExampleEntities = ({
 	where: queryExampleEntityWhereArgsType
 }): Promise<IExampleEntity[]> => {
 	validateQueryWhereArgsPresent(where)
-	// return prisma.exampleEntity.findMany({
+	// return prisma.exampleEntityRecord.findMany({
 	// 	where,
 	// })
-	return Promise.resolve([
-		{
-			id: '1',
-			name: 'Example Entity',
-			description: 'Example description',
-			createdAt: new Date(),
-			updatedAt: new Date(),
-			ownerId: '1',
-			exampleEntityId: '1',
-		},
-	])
+	return Promise.resolve([exampleEntityRecord])
 }
 
 export const getExampleEntity = ({
@@ -68,19 +70,10 @@ export const getExampleEntity = ({
 	where: queryExampleEntityWhereArgsType
 }): Promise<IExampleEntity | null> => {
 	validateQueryWhereArgsPresent(where)
-	// return prisma.exampleEntity.findFirst({
+	// return prisma.exampleEntityRecord.findFirst({
 	// 	where,
 	// })
-	return Promise.resolve({
-		id: '1',
-		name: 'Example Entity',
-		description: 'Example description',
-		visible: true,
-		createdAt: new Date(),
-		updatedAt: new Date(),
-		ownerId: '1',
-		exampleEntityId: '1',
-	})
+	return Promise.resolve(exampleEntityRecord)
 }
 
 export const verifyExampleEntity = async ({
@@ -89,12 +82,12 @@ export const verifyExampleEntity = async ({
 	where: queryExampleEntityWhereArgsType
 }): Promise<IExampleEntity | null> => {
 	validateQueryWhereArgsPresent(where)
-	// const artworkVersion = await prisma.exampleEntity.findFirst({
+	// const artworkVersion = await prisma.exampleEntityRecord.findFirst({
 	// 	where,
 	// })
-	const exampleEntity = await getExampleEntity({ where })
-	invariant(exampleEntity, 'Example Entity not found')
-	return exampleEntity
+	const exampleEntityRecord = await getExampleEntity({ where })
+	invariant(exampleEntityRecord, 'Example Entity not found')
+	return exampleEntityRecord
 }
 
 export const getExampleEntityWithChildren = async ({
@@ -108,14 +101,7 @@ export const getExampleEntityWithChildren = async ({
 	// 	include: artworkVersionChildren,
 	// })
 	const exampleEntityWithChildren = {
-		id: '1',
-		name: 'Example Entity',
-		description: 'Example description',
-		visible: true,
-		createdAt: new Date(),
-		updatedAt: new Date(),
-		ownerId: '1',
-		exampleEntityId: '1',
+		...exampleEntityRecord,
 		children: [
 			{
 				id: '1',
diff --git a/dev/model-file-structure/entity.child.clone.form.tsx b/dev/model-file-structure/entity.child.clone.form.tsx
index 2321b3ad..6c80fbc8 100644
--- a/dev/model-file-structure/entity.child.clone.form.tsx
+++ b/dev/model-file-structure/entity.child.clone.form.tsx
@@ -67,7 +67,7 @@ export const CloneExampleEntityExampleChildForm = memo(
 			},
 		]
 
-		const handleSuccessfulSubmission = (data: any) => {
+		const handleSuccessfulSubmission = () => {
 			// do something
 		}
 
diff --git a/dev/model-file-structure/entity.children.clone.service.ts b/dev/model-file-structure/entity.children.clone.service.ts
index 85de0de5..f3158d2f 100644
--- a/dev/model-file-structure/entity.children.clone.service.ts
+++ b/dev/model-file-structure/entity.children.clone.service.ts
@@ -1,11 +1,10 @@
-import { LinkedListNodeTypeEnum } from '#app/models/__shared/linked-list.definitions'
-import { connectNodes } from '#app/models/__shared/linked-list.node.update.server'
 import { type IUser } from '#app/models/user/user.server'
 import { getOptionalZodErrorMessage } from '#app/utils/misc'
 import {
 	type IExampleEntity,
 	type IExampleEntityWithChildren,
 } from './entity._._definitions'
+import { getExampleEntityData } from './entity._._utils'
 import { type IExampleEntitiesClonedResponse } from './entity._.clone.definitions'
 import { createExampleEntity } from './entity._.create.db.server'
 import { ExampleEntityExampleChildSchema } from './entity.child._schema'
@@ -19,8 +18,8 @@ export const cloneChildrenToExampleEntityService = async ({
 	children,
 }: IExampleEntityChildrenCloneSubmission): Promise<IExampleEntitiesClonedResponse> => {
 	try {
-		// Step 2: Prepare children create data
-		const exampleEntityCloneDataList = prepareExampleEntityCloneDataList({
+		// Step 2: Prepare children create data list
+		const cloneDataList = prepareCloneDataList({
 			userId,
 			exampleEntityId,
 			children,
@@ -28,7 +27,7 @@ export const cloneChildrenToExampleEntityService = async ({
 
 		// Step 3: Create cloned children in order
 		const cloneExampleEntityChildrenPromises = prepareClonePromises({
-			exampleEntityCloneDataList,
+			cloneDataList,
 		})
 		const clonedExampleEntityChildren = await Promise.all(
 			cloneExampleEntityChildrenPromises,
@@ -37,17 +36,18 @@ export const cloneChildrenToExampleEntityService = async ({
 		// After clone:
 		// Potential Step: Prepare children update promises
 		// e.g. re-link the cloned children
-		// const updateClonedExampleEntityChildrenPromises = prepareExampleEntityChildrenLinkedListPromises({
-		// 	clonedExampleEntityChildren,
+		// const updateClonedPromises = connectUnlinkedNodes({
+		// 	items: clonedExampleEntityChildren,
+		// 	type: LinkedListNodeTypeEnum.ARTWORK_VERSION,
 		// })
-		// await prisma.$transaction(updateClonedExampleEntityChildrenPromises)
+		// await Promise.all(updateClonedPromises)
 
 		// Potential Step: clone childrens' children recursively
-		// await cloneChildrenChildrenToClonedChildren({
-		// 	userId,
-		// 	children,
-		// 	clonedExampleEntityChildren,
-		// })
+		await cloneChildrenChildrenToClonedChildren({
+			userId,
+			children,
+			clonedExampleEntityChildren,
+		})
 
 		return { success: true }
 	} catch (error) {
@@ -58,29 +58,15 @@ export const cloneChildrenToExampleEntityService = async ({
 	}
 }
 
-const prepareExampleEntityCloneData = ({
-	userId,
-	child,
-	exampleEntityId,
+const validateCloneData = ({
+	cloneData,
 }: {
-	userId: IUser['id']
-	exampleEntityId: IExampleEntity['id']
-	child: IExampleEntity
-}): IExampleEntityExampleChildCreateData => {
-	// Step 1: build the child data
-	const { name, description, visible } = child
-	const exampleEntityData = {
-		name,
-		description,
-		visible,
-		ownerId: userId,
-		exampleEntityId,
-	}
-	// Step 2: validate the children data with the schema
-	return ExampleEntityExampleChildSchema.parse(exampleEntityData)
+	cloneData: IExampleEntityExampleChildCreateData
+}) => {
+	return ExampleEntityExampleChildSchema.parse(cloneData)
 }
 
-const prepareExampleEntityCloneDataList = ({
+const prepareCloneDataList = ({
 	userId,
 	exampleEntityId,
 	children,
@@ -89,49 +75,25 @@ const prepareExampleEntityCloneDataList = ({
 	exampleEntityId: IExampleEntity['id']
 	children: IExampleEntity[]
 }): IExampleEntityExampleChildCreateData[] => {
-	return children.map(child =>
-		prepareExampleEntityCloneData({
-			userId,
-			child,
-			exampleEntityId,
+	return children.map((child) =>
+		validateCloneData({
+			cloneData: {
+				...getExampleEntityData({
+					exampleEntity: child,
+				}),
+				ownerId: userId,
+				exampleEntityId,
+			},
 		}),
 	)
 }
 
 const prepareClonePromises = ({
-	exampleEntityCloneDataList,
+	cloneDataList,
 }: {
-	exampleEntityCloneDataList: IExampleEntityExampleChildCreateData[]
+	cloneDataList: IExampleEntityExampleChildCreateData[]
 }): Promise<IExampleEntity>[] => {
-	return exampleEntityCloneDataList.map(data => createExampleEntity({ data }))
-}
-
-const prepareExampleEntityChildrenLinkedListPromises = ({
-	clonedExampleEntityChildren,
-}: {
-	clonedExampleEntityChildren: IExampleEntity[]
-}) => {
-	const promises = []
-
-	// Step 1: first clone is the head of the linked list, no prevId
-	let prevId: string | null = null
-
-	// Step 2: iterate through the cloned children
-	for (const clonedExampleEntity of clonedExampleEntityChildren) {
-		// Step 3: connect the cloned child to the previous cloned child, if it exists
-		if (prevId) {
-			const connectExampleEntityPromise = connectNodes({
-				type: LinkedListNodeTypeEnum.EXAMPLE_ENTITY,
-				prevId,
-				nextId: clonedExampleEntity.id,
-			})
-			promises.push(...connectExampleEntityPromise)
-		}
-
-		// Step 4: update the prevId for the next iteration
-		prevId = clonedExampleEntity.id
-	}
-	return promises
+	return cloneDataList.map((data) => createExampleEntity({ data }))
 }
 
 const cloneChildrenChildrenToClonedChildren = async ({
@@ -140,13 +102,16 @@ const cloneChildrenChildrenToClonedChildren = async ({
 	clonedExampleEntityChildren,
 }: {
 	userId: IUser['id']
-	children: IExampleEntityWithChildren[]
+	children: IExampleEntity[] | IExampleEntityWithChildren[]
 	clonedExampleEntityChildren: IExampleEntity[]
 }) => {
 	// Step 1: iterate through the each child and its clone
 	for (let i = 0; i < children.length; i++) {
-		const child = children[i]
-		const clonedLayer = clonedExampleEntityChildren[i]
+		const child = children[i]!
+		const clonedLayer = clonedExampleEntityChildren[i]!
+
+		// Type guard to check if child has children
+		if (!('children' in child)) continue
 
 		// Step 2: get child's children
 		const childChildren = child.children
diff --git a/package-lock.json b/package-lock.json
index 681d3269..3f95bee8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77,7 +77,7 @@
         "reactflow": "^11.10.4",
         "remix-auth": "^3.6.0",
         "remix-auth-form": "^1.4.0",
-        "remix-auth-github": "^1.6.0",
+        "remix-auth-github": "^1.8.0",
         "remix-utils": "^7.3.0",
         "set-cookie-parser": "^2.6.0",
         "sonner": "^1.3.1",
@@ -4934,52 +4934,52 @@
       }
     },
     "node_modules/@sentry-internal/feedback": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.118.0.tgz",
-      "integrity": "sha512-IYOGRcqIqKJJpMwBBv+0JTu0FPpXnakJYvOx/XEa/SNyF5+l7b9gGEjUVWh1ok50kTLW/XPnpnXNAGQcoKHg+w==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.119.0.tgz",
+      "integrity": "sha512-om8TkAU5CQGO8nkmr7qsSBVkP+/vfeS4JgtW3sjoTK0fhj26+DljR6RlfCGWtYQdPSP6XV7atcPTjbSnsmG9FQ==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0"
+        "@sentry/core": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0"
       },
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/@sentry-internal/replay-canvas": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-7.118.0.tgz",
-      "integrity": "sha512-XxHlCClvrxmVKpiZetFYyiBaPQNiojoBGFFVgbbWBIAPc+fWeLJ2BMoQEBjn/0NA/8u8T6lErK5YQo/eIx9+XQ==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-7.119.0.tgz",
+      "integrity": "sha512-NL02VQx6ekPxtVRcsdp1bp5Tb5w6vnfBKSIfMKuDRBy5A10Uc3GSoy/c3mPyHjOxB84452A+xZSx6bliEzAnuA==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "7.118.0",
-        "@sentry/replay": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0"
+        "@sentry/core": "7.119.0",
+        "@sentry/replay": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0"
       },
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/@sentry-internal/tracing": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.118.0.tgz",
-      "integrity": "sha512-dERAshKlQLrBscHSarhHyUeGsu652bDTUN1FK0m4e3X48M3I5/s+0N880Qjpe5MprNLcINlaIgdQ9jkisvxjfw==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.119.0.tgz",
+      "integrity": "sha512-oKdFJnn+56f0DHUADlL8o9l8jTib3VDLbWQBVkjD9EprxfaCwt2m8L5ACRBdQ8hmpxCEo4I8/6traZ7qAdBUqA==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0"
+        "@sentry/core": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/babel-plugin-component-annotate": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.22.1.tgz",
-      "integrity": "sha512-rQEk8EeCIBQKivWNONllQhd/wGbfuK/WXJRM6TkjeikM3wrqJf4AmIBXoA6eg089DwBFzBaxGjjLWJNHKY440w==",
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.22.2.tgz",
+      "integrity": "sha512-6kFAHGcs0npIC4HTt4ULs8uOfEucvMI7VW4hoyk17jhRaW8CbxzxfWCfIeRbDkE8pYwnARaq83tu025Hrk2zgA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4987,33 +4987,33 @@
       }
     },
     "node_modules/@sentry/browser": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.118.0.tgz",
-      "integrity": "sha512-8onDOFV1VLEoBuqA5yaJeR3FF1JNuxr5C7p1oN3OwY724iTVqQnOLmZKZaSnHV3RkY67wKDGQkQIie14sc+42g==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.119.0.tgz",
+      "integrity": "sha512-WwmW1Y4D764kVGeKmdsNvQESZiAn9t8LmCWO0ucBksrjL2zw9gBPtOpRcO6l064sCLeSxxzCN+kIxhRm1gDFEA==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/feedback": "7.118.0",
-        "@sentry-internal/replay-canvas": "7.118.0",
-        "@sentry-internal/tracing": "7.118.0",
-        "@sentry/core": "7.118.0",
-        "@sentry/integrations": "7.118.0",
-        "@sentry/replay": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0"
+        "@sentry-internal/feedback": "7.119.0",
+        "@sentry-internal/replay-canvas": "7.119.0",
+        "@sentry-internal/tracing": "7.119.0",
+        "@sentry/core": "7.119.0",
+        "@sentry/integrations": "7.119.0",
+        "@sentry/replay": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/bundler-plugin-core": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.22.1.tgz",
-      "integrity": "sha512-RFbS57zfPvUBe4DL/pjt6BWCEyGFkk/n4gLNZQ9Cf2gRdUVW80AtAMZwrlEELrpW1D8kONy6/kvWf0leicHRMg==",
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.22.2.tgz",
+      "integrity": "sha512-TwEEW4FeEJ5Mamp4fGnktfVjzN77KAW0xFQsEPuxZtOAPG17zX/PGvdyRX/TE1jkZWhTzqUDIdgzqlNLjyEnUw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.18.5",
-        "@sentry/babel-plugin-component-annotate": "2.22.1",
+        "@sentry/babel-plugin-component-annotate": "2.22.2",
         "@sentry/cli": "^2.33.1",
         "dotenv": "^16.3.1",
         "find-up": "^5.0.0",
@@ -5272,27 +5272,27 @@
       }
     },
     "node_modules/@sentry/core": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.118.0.tgz",
-      "integrity": "sha512-ol0xBdp3/K11IMAYSQE0FMxBOOH9hMsb/rjxXWe0hfM5c72CqYWL3ol7voPci0GELJ5CZG+9ImEU1V9r6gK64g==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.119.0.tgz",
+      "integrity": "sha512-CS2kUv9rAJJEjiRat6wle3JATHypB0SyD7pt4cpX5y0dN5dZ1JrF57oLHRMnga9fxRivydHz7tMTuBhSSwhzjw==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0"
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/integrations": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.118.0.tgz",
-      "integrity": "sha512-C2rR4NvIMjokF8jP5qzSf1o2zxDx7IeYnr8u15Kb2+HdZtX559owALR0hfgwnfeElqMhGlJBaKUWZ48lXJMzCQ==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.119.0.tgz",
+      "integrity": "sha512-OHShvtsRW0A+ZL/ZbMnMqDEtJddPasndjq+1aQXw40mN+zeP7At/V1yPZyFaURy86iX7Ucxw5BtmzuNy7hLyTA==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0",
+        "@sentry/core": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0",
         "localforage": "^1.8.1"
       },
       "engines": {
@@ -5300,16 +5300,16 @@
       }
     },
     "node_modules/@sentry/node": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.118.0.tgz",
-      "integrity": "sha512-79N63DvYKkNPqzmc0cjO+vMZ/nU7+CbE3K3COQNiV7gk58+666G9mRZQJuZVOVebatq5wM5UR0G4LPkwD+J84g==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.119.0.tgz",
+      "integrity": "sha512-9PFzN8xS6U0oZCflpVxS2SSIsHkCaj7qYBlsvHj4CTGWfao9ImwrU6+smy4qoG6oxwPfoVb5pOOMb4WpWOvXcQ==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/tracing": "7.118.0",
-        "@sentry/core": "7.118.0",
-        "@sentry/integrations": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0"
+        "@sentry-internal/tracing": "7.119.0",
+        "@sentry/core": "7.119.0",
+        "@sentry/integrations": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0"
       },
       "engines": {
         "node": ">=8"
@@ -5336,15 +5336,15 @@
       }
     },
     "node_modules/@sentry/react": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-7.118.0.tgz",
-      "integrity": "sha512-oEYe5TGk8S7YzPsFqDf4xDHjfzs35/QFE+dou3S2d24OYpso8Tq4C5f1VzYmnOOyy85T7JNicYLSo0n0NSJvQg==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-7.119.0.tgz",
+      "integrity": "sha512-cf8Cei+qdSA26gx+IMAuc/k44PeBImNzIpXi3930SLhUe44ypT5OZ/44L6xTODHZzTIyMSJPduf59vT2+eW9yg==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/browser": "7.118.0",
-        "@sentry/core": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0",
+        "@sentry/browser": "7.119.0",
+        "@sentry/core": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0",
         "hoist-non-react-statics": "^3.3.2"
       },
       "engines": {
@@ -5355,18 +5355,18 @@
       }
     },
     "node_modules/@sentry/remix": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/remix/-/remix-7.118.0.tgz",
-      "integrity": "sha512-Vglkxz6r+VH/kx5eGjVtU79abbdV0tvY+p2PIaD8WBoi3QaXjYK83Fb3gIZf6ypoMcBwV8BR0lCDqYN3Auy4gw==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/remix/-/remix-7.119.0.tgz",
+      "integrity": "sha512-HfjdnIad5qhYBhdxEoZopPlLz2VD2Y7iEMXQompI9kAs5yQKPMMvOFrfzl2M4lSWo9DOtjO/CXlzm8oQj0KNDA==",
       "license": "MIT",
       "dependencies": {
         "@remix-run/router": "1.x",
         "@sentry/cli": "^2.28.0",
-        "@sentry/core": "7.118.0",
-        "@sentry/node": "7.118.0",
-        "@sentry/react": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0",
+        "@sentry/core": "7.119.0",
+        "@sentry/node": "7.119.0",
+        "@sentry/react": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0",
         "glob": "^10.3.4",
         "yargs": "^17.6.0"
       },
@@ -5383,49 +5383,49 @@
       }
     },
     "node_modules/@sentry/replay": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.118.0.tgz",
-      "integrity": "sha512-boQfCL+1L/tSZ9Huwi00+VtU+Ih1Lcg8HtxBuAsBCJR9pQgUL5jp7ECYdTeeHyCh/RJO7JqV1CEoGTgohe10mA==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.119.0.tgz",
+      "integrity": "sha512-BnNsYL+X5I4WCH6wOpY6HQtp4MgVt0NVlhLUsEyrvMUiTs0bPkDBrulsgZQBUKJsbOr3l9nHrFoNVB/0i6WNLA==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/tracing": "7.118.0",
-        "@sentry/core": "7.118.0",
-        "@sentry/types": "7.118.0",
-        "@sentry/utils": "7.118.0"
+        "@sentry-internal/tracing": "7.119.0",
+        "@sentry/core": "7.119.0",
+        "@sentry/types": "7.119.0",
+        "@sentry/utils": "7.119.0"
       },
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/@sentry/types": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.118.0.tgz",
-      "integrity": "sha512-2drqrD2+6kgeg+W/ycmiti3G4lJrV3hGjY9PpJ3bJeXrh6T2+LxKPzlgSEnKFaeQWkXdZ4eaUbtTXVebMjb5JA==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.119.0.tgz",
+      "integrity": "sha512-27qQbutDBPKGbuJHROxhIWc1i0HJaGLA90tjMu11wt0E4UNxXRX+UQl4Twu68v4EV3CPvQcEpQfgsViYcXmq+w==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/utils": {
-      "version": "7.118.0",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.118.0.tgz",
-      "integrity": "sha512-43qItc/ydxZV1Zb3Kn2M54RwL9XXFa3IAYBO8S82Qvq5YUYmU2AmJ1jgg7DabXlVSWgMA1HntwqnOV3JLaEnTQ==",
+      "version": "7.119.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.119.0.tgz",
+      "integrity": "sha512-ZwyXexWn2ZIe2bBoYnXJVPc2esCSbKpdc6+0WJa8eutXfHq3FRKg4ohkfCBpfxljQGEfP1+kfin945lA21Ka+A==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/types": "7.118.0"
+        "@sentry/types": "7.119.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/vite-plugin": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/@sentry/vite-plugin/-/vite-plugin-2.22.1.tgz",
-      "integrity": "sha512-TC+3RIcu0rnxaEPV8ZHjYlRHLx5M9eRDI2il1lFkSguTc0N89n7Tt/aDnFAwtaPG4yqPkhIMpxi7LfXx+YDJ1Q==",
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/@sentry/vite-plugin/-/vite-plugin-2.22.2.tgz",
+      "integrity": "sha512-LJSNTw75UJq77v2jCan8cRh0w1u6W30jxQsbqF7YyyhhfjPTyFUXYday9RDDe84qDEnspbZmgeTSWTvaTGsBRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@sentry/bundler-plugin-core": "2.22.1",
+        "@sentry/bundler-plugin-core": "2.22.2",
         "unplugin": "1.0.1"
       },
       "engines": {
@@ -10115,9 +10115,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.6.tgz",
-      "integrity": "sha512-jwXWsM5RPf6j9dPYzaorcBSUg6AiqocPEyMpkchkvntaH9HGfOOMZwxMJjDY/XEs3T5dM7uyH1VhRMkqUU9qVw==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.7.tgz",
+      "integrity": "sha512-6FTNWIWMxMy/ZY6799nBlPtF1DFDQ6VQJ7yyDP27SJNt5lwtQ5ufqVvHylb3fdQefvRcgA3fKcFMJi9OLwBRNw==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -20218,9 +20218,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.9",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.9.tgz",
-      "integrity": "sha512-1SEOvRr6sSdV5IDf9iC+NU4dhwdqzF4zKKq3sAbasUWHEM6lsMhX+eNN5gkPx1BvLFEnZQEUFbXnGj8Qlp83Pg==",
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
+      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
diff --git a/package.json b/package.json
index 6d220d27..ed8a92b7 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "sideEffects": false,
   "type": "module",
   "imports": {
-    "#*": "./*"
+    "#*": "./*",
+    "#tests/*": "./tests/*"
   },
   "scripts": {
     "build": "run-s build:*",
@@ -121,7 +122,7 @@
     "reactflow": "^11.10.4",
     "remix-auth": "^3.6.0",
     "remix-auth-form": "^1.4.0",
-    "remix-auth-github": "^1.6.0",
+    "remix-auth-github": "^1.8.0",
     "remix-utils": "^7.3.0",
     "set-cookie-parser": "^2.6.0",
     "sonner": "^1.3.1",
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 80afb63c..91f6c5a1 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -11,6 +11,12 @@ import {
 } from '#tests/db-utils.ts'
 import { insertGitHubUser } from '#tests/mocks/github.ts'
 
+// we're ok to import from the test directory in this file
+/*
+eslint
+	no-restricted-imports: "off",
+*/
+
 async function seed() {
 	console.log('🌱 Seeding...')
 	console.time(`🌱 Database has been seeded`)
@@ -100,16 +106,18 @@ async function seed() {
 							images: {
 								create: Array.from({
 									length: faker.number.int({ min: 1, max: 3 }),
-								}).map(() => {
-									const imgNumber = faker.number.int({ min: 0, max: 9 })
-									return noteImages[imgNumber]
-								}),
+								})
+									.map(() => {
+										const imgNumber = faker.number.int({ min: 0, max: 9 })
+										return noteImages[imgNumber]
+									})
+									.filter((img) => img !== undefined), // Filter out undefined values
 							},
 						})),
 					},
 				},
 			})
-			.catch(e => {
+			.catch((e) => {
 				console.error('Error creating a user:', e)
 				return null
 			})
@@ -214,7 +222,7 @@ async function seed() {
 						id: '260366b1',
 						title: 'Not bears',
 						content:
-							"Although you may have heard people call them koala 'bears', these awesome animals aren’t bears at all – they are in fact marsupials. A group of mammals, most marsupials have pouches where their newborns develop.",
+							"Although you may have heard people call them koala 'bears', these awesome animals aren't bears at all– they are in fact marsupials. A group of mammals, most marsupials have pouches where their newborns develop.",
 					},
 					{
 						id: 'bb79cf45',
@@ -303,7 +311,7 @@ async function seed() {
 }
 
 seed()
-	.catch(e => {
+	.catch((e) => {
 		console.error(e)
 		process.exit(1)
 	})
diff --git a/tests/e2e/onboarding.test.ts b/tests/e2e/onboarding.test.ts
index 2ba2045f..00d38792 100644
--- a/tests/e2e/onboarding.test.ts
+++ b/tests/e2e/onboarding.test.ts
@@ -33,7 +33,7 @@ const test = base.extend<{
 	},
 })
 
-test('onboarding not allowed', async ({ page, login }) => {
+test('onboarding not allowed', async ({ page }) => {
 	await page.goto('/')
 
 	// no login link