From 34b3c45b0c542ce33fa4877d2ac4355c23363245 Mon Sep 17 00:00:00 2001
From: Adriano Caloiaro <code@adriano.fyi>
Date: Thu, 27 Mar 2025 13:14:25 -0600
Subject: [PATCH] feat: tweak toast placement

---
 ui/builder/builder_templ.txt      | 82 ------------------------------
 ui/collector/collector_templ.txt  | 24 ---------
 ui/common.templ                   |  2 +-
 ui/common_templ.go                |  2 +-
 ui/common_templ.txt               | 84 -------------------------------
 ui/errors_templ.txt               |  3 --
 ui/fields/fields_templ.txt        | 46 -----------------
 ui/fields/single_choice_templ.txt | 28 -----------
 ui/selector/selector_templ.txt    | 25 ---------
 ui/trigger_rebuild_templ.txt      |  1 -
 10 files changed, 2 insertions(+), 295 deletions(-)
 delete mode 100644 ui/builder/builder_templ.txt
 delete mode 100644 ui/collector/collector_templ.txt
 delete mode 100644 ui/common_templ.txt
 delete mode 100644 ui/errors_templ.txt
 delete mode 100644 ui/fields/fields_templ.txt
 delete mode 100644 ui/fields/single_choice_templ.txt
 delete mode 100644 ui/selector/selector_templ.txt
 delete mode 100644 ui/trigger_rebuild_templ.txt

diff --git a/ui/builder/builder_templ.txt b/ui/builder/builder_templ.txt
deleted file mode 100644
index 1b1d538..0000000
--- a/ui/builder/builder_templ.txt
+++ /dev/null
@@ -1,82 +0,0 @@
-<section id=\"app-container h-2/3 max-h-1/3\">
-<section id=\"builder-main\" class=\"flex pt-20\"><!-- Left column -->
-<!-- Middle Column -->
-<!-- Right Column -->
-</section></section>
-<div id=\"form-builder-nav-title\" data-hx-swap-oob=\"true\" class=\"flex-grow flex justify-center\"><h3 tabindex=\"0\" class=\"rounded px-2 cursor-pointer relative font-medium py-1 text-2xl w-2/3 text-center text-gray-500 truncate form-editor-title\" style=\"height: auto;\" id=\"form-editor-title\">
-</h3></div>
-<div id=\"form-builder-nav\" data-hx-swap-oob=\"true\" class=\"fixed w-full p-2 flex gap-x-2 items-center bg-white z-30\"><div id=\"form-editor-navbar-tabs\"><div role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs tabs-boxed bg-gray-50 dark:bg-gray-800 rounded-lg p-1 h-auto grid grid-cols-2 items-center gap-x-1.5 px-2\">
-</div></div>
-<div class=\"flex items-stretch gap-x-2\"><div class=\"inline-flex items-center relative\"><a href=\"#\" class=\"text-sm p-2 hover:bg-gray-100 cursor-pointer rounded-lg text-gray-500 hover:text-gray-800 cursor-pointer\"><span class=\"iconify i-heroicons:question-mark-circle w-5 h-5\" aria-hidden=\"true\"></span></a><!----></div><div class=\"relative inline-flex\"><button type=\"button\" class=\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 aria-disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 dark:aria-disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center px-8 md:px-4 py-2\" data-hx-put=\"
-\" data-hx-trigger=\"click\" data-hx-target=\"#messages\"><!----><svg class=\"w-4 h-4 text-white inline mr-1 -mt-1\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 21V13H7V21M7 3V8H15M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg> Save Form <!----></button><!----></div></div></div>
-<div id=\"settings-main\" class=\"hidden\"><form id=\"settings-form\" data-hx-put=\"
-\" data-hx-trigger=\"
-\" data-hx-swap-oob=\"true\"><div class=\"pt-3\"><label for=\"form-name-field\" class=\"pr-1\">Form name</label>
-</div><input id=\"form-name-field\" name=\"name\" type=\"text\" class=\"w-full rounded-md\" value=\"
-\" placeholder=\"Enter a good name for your form\" autocomplete=\"off\" _=\"
-\"></form></div>
-<section id=\"builder-main-left-col\" class=\"flex flex-col gap-3 w-1/4 min-w-max h-full p-4 text-gray-800 rounded-md\">
-</section>
-<div id=\"form-fields\" class=\"active-section\">
-</div>
-<div id=\"form-fields-form\" data-hx-swap-oob=\"true\" class=\"flex flex-col gap-3 w-full\">
-<div class=\"w-full border-b pb-2\"></div><form data-hx-put=\"
-\" data-hx-trigger=\"end\" data-hx-swap=\"outerHTML\" data-hx-target=\"#form-fields-form\" data-hx-indidcator=\"#ind\"><div class=\"flex flex-col gap-1 sortable\">
-<div class=\"mx-auto w-full border-gray-300 transition-colors bg-gray-50 hover:bg-gray-100 rounded-lg sortme max-w-84 field-row\"><input name=\"order\" type=\"hidden\" value=\"
-\"><div class=\"group flex items-center gap-x-0.5 py-1.5 pr-1\"><!-- field item --><a href=\"#\" class=\"w-full\" _=\"
-\"><div class=\"flex flex-col cursor-pointer\"><div tabindex=\"0\" class=\"dark:hover:bg-gray-800 rounded px-2 relative text-gray-700 max-w-72 min-h-6\" style=\"height: auto;\"><p class=\"w-full cursor-pointer truncate\">
-</p></div></div></a> 
-<div class=\"relative inline-flex\"><button class=\"hidden rounded p-0.5 transition-colors hover:bg-nt-blue-lighter items-center px-1 justify-center md:flex text-red-500\"><div class=\"h-6 text-center text-2xl font-bold text-inherit -mt-0.5\">* </div></button></div>
-<div class=\"cursor-move\">
-</div></div></div>
-</div></form></div>
-<section id=\"builder-main-right-col\" class=\"w-1/4 h-full p-4 text-gray-800 rounded-md\"><div id=\"configure-add-field\" class=\"hidden\"><div class=\"h-12 border-b text-lg text-center uppercase\">Add field</div>
-<div class=\"group flex items-center my-1.5 pr-1\"><a href=\"#\" class=\"w-full\"><div class=\"flex flex-col\"><div tabindex=\"
-\" class=\"hover:bg-gray-50 dark:hover:bg-gray-800 rounded cursor-pointer relative truncate text-gray-700 min-w-16 min-h-6\" style=\"height: auto;\" data-hx-post=\"
-\" data-hx-trigger=\"click\" data-hx-vals=\"
-\" data-hx-swap=\"none\">
-</div></div></a></div>
-</div>
-</section>
-<form id=\"fields-form\" data-hx-put=\"
-\" data-hx-trigger=\"
-\" data-hx-swap=\"none\" data-hx-swap-oob=\"true\">
-<div id=\"
-\" class=\"hidden\"><div class=\"mx-auto w-full border-gray-300 transition-colors pb-3\">
-</div><div id=\"
-\" class=\"border-b pb-4\"><div role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs tabs-boxed bg-gray-50 dark:bg-gray-800 rounded-lg h-auto flex gap-2\">
-</div></div><!-- Form fields settings configurations -->
-<!-- Form fields logic configurations -->
-</div>
-</form>
-<div id=\"
-\" class=\"active-configurator-section\"><input name=\"
-\" type=\"hidden\" value=\"
-\"> <input name=\"
-\" type=\"hidden\" value=\"
-\"> <input name=\"
-\" type=\"hidden\" value=\"
-\">
- 
- 
- 
- 
-<div class=\"pt-9 pb-3 divide-y\"><label for=\"delete-field\" class=\"pr-1\">Danger zone</label></div>
-</div>
-<div id=\"
-\" class=\"flex flex-col gap-5 hidden\"><div><div data-hx-get=\"
-\" data-hx-trigger=\"
-\" data-hx-swap=\"innerHTML\" data-hx-target=\"
-\" data-hx-on:htmx:config-request=\"event.detail.parameters[&#39;id&#39;] = event.detail.triggeringEvent.detail.value\">
-</div></div><div>
-</div><div><div id=\"
-\">
-</div></div><div><p class=\"pb-3\">Choose action(s)</p>
-</div></div>
-<input id=\"
-\" name=\"
-\" type=\"text\" class=\"bg-gray-50\" placeholder=\"Enter a value\"
- value=\"
-\"
- _=\"
-\">
\ No newline at end of file
diff --git a/ui/collector/collector_templ.txt b/ui/collector/collector_templ.txt
deleted file mode 100644
index ca0eb64..0000000
--- a/ui/collector/collector_templ.txt
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class=\"bg-sky-100 h-full\"><section id=\"app-container\" class=\"container mx-auto\">
-</section></div>
-<section id=\"builder-main-middle-col\" class=\"w-full h-full overflow-y-scroll overscroll-auto p-4 bg-gray-50 border-y-1 max-h-9/10\"><div class=\"mockup-browser border-base-300 border overflow-visible\"><div class=\"mockup-browser-toolbar\"><div class=\"input border-base-300 border\">https://your-form-domain.com/form</div></div><div class=\"flex border-base-300 bg-sky-100 border-t px-4 py-8\">
-</div></div></section>
-<div id=\"form-viewer\"
- class=\"flex flex-col w-full mx-auto justify-top\"
- class=\"flex flex-col w-full md:w-2/3 lg:w-1/2 mx-auto justify-top py-6 lg:py-12 px-3 lg:px-0\"
- data-hx-swap-oob=\"true\"><div id=\"form-metadata\" data-data=\"
-\"></div><h1 class=\"rounded relative mb-8 font-black text-slate-700 text-2xl md:text-4xl lg:text-5xl\">
-</h1><div id=\"form-input\" hx-ext=\"response-targets\"><div id=\"errors\"></div><form _=\"on field_change(field_id, value) formValueChanged(field_id, value)\" class=\"flex flex-col gap-3\"
- data-hx-post=\"
-\" data-hx-target-400=\"#errors\"
- data-hx-disabled-elt=\"find #submit_button\" data-hx-indicator=\"#spinner\">
-<input name=\"short_code\" type=\"hidden\" value=\"
-\"> 
-<div class=\"py-3\"></div><button id=\"submit_button\" class=\"btn bg-primary-500 hover:bg-primary-400 cursor-pointer justify-center uppercase disabled:bg-gray-200 disabled:cursor-not-allowed\"
- disabled
->Submit <img id=\"spinner\" class=\"htmx-indicator\" src=\"
-\"></button></form></div>
-<div id=\"collector_footer\" class=\"pt-6 text-center\">
-</div>
-</div>
-<div class=\"bg-sky-100 h-screen\"><section id=\"app-container\" class=\"container mx-auto\"><p class=\"text-4xl pt-9\">Thank you!</p></section></div>
-<p class=\"underline\"></p>
\ No newline at end of file
diff --git a/ui/common.templ b/ui/common.templ
index 3cde6a6..58ba7a9 100644
--- a/ui/common.templ
+++ b/ui/common.templ
@@ -36,7 +36,7 @@ type ToastArgs struct {
 // Toast shows a toast message on screen
 templ Toast(arg ToastArgs) {
 	<div
-		class="toast toast-top toast-center pt-12 z-50 opacity-0"
+		class="toast toast-top toast-right pt-12 z-50 opacity-0"
 		_="on intersection(intersecting) transition my opacity from 0 to 1 over 500 milliseconds
 		then wait 3s
 		then transition my opacity from 1 to 0 over 500 milliseconds"
diff --git a/ui/common_templ.go b/ui/common_templ.go
index b37cd6a..ed509ad 100644
--- a/ui/common_templ.go
+++ b/ui/common_templ.go
@@ -63,7 +63,7 @@ func Toast(arg ToastArgs) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"toast toast-top toast-center pt-12 z-50 opacity-0\" _=\"on intersection(intersecting) transition my opacity from 0 to 1 over 500 milliseconds\n\t\tthen wait 3s\n\t\tthen transition my opacity from 1 to 0 over 500 milliseconds\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"toast toast-top toast-right pt-12 z-50 opacity-0\" _=\"on intersection(intersecting) transition my opacity from 0 to 1 over 500 milliseconds\n\t\tthen wait 3s\n\t\tthen transition my opacity from 1 to 0 over 500 milliseconds\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/ui/common_templ.txt b/ui/common_templ.txt
deleted file mode 100644
index eb43796..0000000
--- a/ui/common_templ.txt
+++ /dev/null
@@ -1,84 +0,0 @@
-<div class=\"toast toast-top toast-center pt-12 z-50 opacity-0\" _=\"on intersection(intersecting) transition my opacity from 0 to 1 over 500 milliseconds\n\t\tthen wait 3s\n\t\tthen transition my opacity from 1 to 0 over 500 milliseconds\">
-<div class=\"card rounded-md bg-base-100 shadow-lg p-2 text-white bg-primary-400\" _=\"on click add .hidden to #messages\"><span>
-</span></div>
-<div class=\"card rounded-md bg-base-100 shadow-lg p-2 text-white bg-orange-400\" _=\"on click add .hidden to #messages\"><span>
-</span></div>
-<div class=\"card rounded-md bg-base-100 shadow-lg p-2 text-white bg-red-400\" _=\"on click add .hidden to #messages\"><span>
-</span></div>
-</div>
-<svg data-src=\"
-\" class=\"h-5 w-5\"></svg>
-<button
- class=\"
-\">
-</button>
-<div
- class=\"
-\">
-</div>
-<label class=\"fieldset-label\"><input id=\"
-\" name=\"
-\" type=\"checkbox\"
- checked=\"checked\"
- required
- class=\"checkbox\"
- _=\"
-\"
-> <span class=\"pl-3\">
-</span> 
-<div class=\"tooltip tooltip-left px-3\" data-tip=\"
-\"><svg data-src=\"https://unpkg.com/heroicons/20/solid/question-mark-circle.svg\" class=\"inline-block h-5 w-5 text-success\"></svg></div>
-</label>
-<label class=\"
-\"><span class=\"inline-flex h-full group-[.label-group]:min-w-48 bg-primary-100 items-center rounded-tl-lg rounded-tr-lg px-3\">
-</span>
-</label>
-<label class=\"
-\"><span class=\"inline-flex h-full w-full group-[.label-group]:min-w-48 bg-primary-100 rounded-tr-lg rounded-tl-lg items-center px-3\">
- 
-<span class=\"badge badge-info bg-slate-100 mx-3\">Optional</span>
-</span><div class=\"flex items-center\"><input class=\"bg-slate-100 w-full border-0 rounded-br-lg rounded-bl-lg\" type=\"text\" name=\"
-\"
- id=\"
-\"
- placeholder=\"
-\"
- value=\"
-\"
- required
- class=\"border-0\"
- _=\"
-\"
-></div>
-<div class=\"tooltip tooltip-left px-3 py-3\" data-tip=\"
-\"><svg data-src=\"https://unpkg.com/heroicons/20/solid/question-mark-circle.svg\" class=\"inline-block h-5 w-5 text-success\"></svg></div>
-</label>
-<fieldset class=\"fieldset flex flex-col gap-2 p-4 bg-base-100 border border-base-300 rounded-box w-full\"><legend class=\"fieldset-legend\">
-</legend>
-</fieldset>
-<head><title>
-</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
-<link href=\"
-\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"
-\" nonce=\"
-\"><script type=\"text/javascript\" src=\"
-\" nonce=\"
-\"></script> <script type=\"text/javascript\" src=\"
-\" nonce=\"
-\"></script> <script type=\"text/javascript\" src=\"
-\" nonce=\"
-\"></script> <script ytpe=\"text/javascript\" src=\"
-\" nonce=\"
-\"></script> <script type=\"text/javascript\" src=\"
-\" nonce=\"
-\" async></script> <script type=\"text/javascript\" src=\"
-\" nonce=\"
-\"></script> <script type=\"text/javascript\">\n\t\t\t\thtmx.onLoad(function(content) {\n\t\t\t\t    var sortables = content.querySelectorAll(\".sortable\");\n\t\t\t\t    for (var i = 0; i < sortables.length; i++) {\n\t\t\t\t      var sortable = sortables[i];\n\t\t\t\t      var sortableInstance = new Sortable(sortable, {\n\t\t\t\t          animation: 150,\n\t\t\t\t\t\t  draggable: \".sortme\",\n\t\t\t\t          onMove: function (evt) {\n\t\t\t\t            return evt.related.className.indexOf('htmx-indicator') === -1;\n\t\t\t\t          },\n\t\t\t\t          onEnd: function (evt) {\n\t\t\t\t            this.option(\"disabled\", true);\n\t\t\t\t          }\n\t\t\t\t      });\n\t\t\t\t      // Re-enable sorting on the `htmx:afterSwap` event\n\t\t\t\t      sortable.addEventListener(\"htmx:afterSwap\", function() {\n\t\t\t\t        sortableInstance.option(\"disabled\", false);\n\t\t\t\t      });\n\t\t\t\t    }\n\t\t\t\t})\n\n\t\t\t\t// formValueChanged handles changes to user input in form fields\n\t\t\t\tfunction formValueChanged(fieldID, newValue) {\n\t\t\t\t\tvar formMetadata = JSON.parse(document.getElementById('form-metadata').getAttribute(\"data-data\"));\n\t\t\t\t\tif (formMetadata == null) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\n\t\t\t\t\t// collect the fields that have logic monitoring the changed field \n\t\t\t\t\tvar watchingFields = Object.values(formMetadata.form.fields).filter(function(field) {\n\t\t\t\t\t\treturn field.logic != null && fieldID === field.logic.target_field_id\n\t\t\t\t\t});\n\n\t\t\t\t\t// no fields watch the one that changed\n\t\t\t\t\tif (watchingFields.length == 0) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\tvar fieldElement = document.getElementById(fieldID)\n\t\t\t\t\tfor (i in watchingFields) {\n\t\t\t\t\t\tlet watchingField = watchingFields[i]\n\t\t\t\t\t\tlet match = false\n\t\t\t\t\t\tvar watcherFieldElement = document.getElementById(watchingField.id) // the actual element watching the field\n\t\t\t\t\t\t// radio form elements such as \"single choice\" elements cannot get gotten by ID because they are\n\t\t\t\t\t\t// radio button in a form group, all sharing a \"name\" attribute, rather than having one unique id\n\t\t\t\t\t\t// like other input elements. Thus, when we cannot get a watching field by ID, we must be able to get it by\n\t\t\t\t\t\t// name.\n\t\t\t\t\t\tif (watcherFieldElement == null) {\n\t\t\t\t\t\t\tradioFormElements = document.getElementsByName(watchingField.id)\n\t\t\t\t\t\t\tif (radioFormElements.length > 0) {\n\t\t\t\t\t\t\t\twatcherFieldElement = radioFormElements[0]\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvar watcherFieldContainerID = `field-container-${watchingField.id}` // the DOM element that contains the watching field\n\t\t\t\t\t\tlogic = watchingField.logic\n\n\t\t\t\t\t\t// check whether the new value is coming from a Choices.js field, in which case the new value\n\t\t\t\t\t\t// is the array of chosen values, joined by commas, otherwise newValue is used as it was passed in\n\t\t\t\t\t\tif (fieldElement != null && fieldElement._choices != null) {\n\t\t\t\t\t\t\t// Choics.getValue() returns scalar for single selects and array for multi. Use Array.of\n\t\t\t\t\t\t\t// to treat everything it returns as an array\n\t\t\t\t\t\t\tnewValue = Array.of(fieldElement._choices.getValue(true)).join(',')\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// find if _any_ trigger values match the new value\n\t\t\t\t\t\tswitch (logic.field_comparator) {\n\t\t\t\t\t\t\tcase 'equal':\n\t\t\t\t\t\t\t\tmatch = watchingField.logic.trigger_values.every(val => newValue.localeCompare(val, 'en', {sensitivity: \"base\"}) == 0)\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'contains':\n\t\t\t\t\t\t\t\tmatch = watchingField.logic.trigger_values.some(val => newValue.toLowerCase().includes(val.toLowerCase()))\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'not':\n\t\t\t\t\t\t\t\tmatch = watchingField.logic.trigger_values.some(val => newValue.toLowerCase() !== val.toLowerCase())\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Most actions are likely to be performed upon the containing element, such as show/hide/require.\n\t\t\t\t\t\t// This may of course change or be expanded, but for now, only the watcher field container is relevant\n\t\t\t\t\t\t// to applying actions.\n\t\t\t\t\t\tlet el = document.getElementById(watcherFieldContainerID)\n\t\t\t\t\t\tlet actions = watchingField.logic.actions\n\n\t\t\t\t\t\t// we have a match, execute the action\n\t\t\t\t\t\tfor (i in actions) {\n\t\t\t\t\t\t\tswitch (actions[i]) {\n\t\t\t\t\t\t\t\tcase \"field_logic_trigger_show\":\n\t\t\t\t\t\t\t\t\tif (match) {\n\t\t\t\t\t\t\t\t\t\tel.classList.remove(\"hidden\")\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tel.classList.add(\"hidden\")\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\tcase \"field_logic_trigger_require\":\n\t\t\t\t\t\t\t\t\tif (match) {\n\t\t\t\t\t\t\t\t\t\tel.classList.remove(\"hidden\")\n\t\t\t\t\t\t\t\t\t\twatcherFieldElement.setAttribute(\"required\", \"\")\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tel.classList.add(\"hidden\")\n\t\t\t\t\t\t\t\t\t\twatcherFieldElement.removeAttribute(\"required\")\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</script>
-</head>
-<!doctype html><html lang=\"eng\">
-<body><div id=\"messages\"></div><main>
-</main>
-</body></html>
-<div id=\"
-\" data-hx-swap-oob=\"true\" class=\"flex flex-col gap-3 py-3\"><p class=\"text-red-500\">
-</p></div>
\ No newline at end of file
diff --git a/ui/errors_templ.txt b/ui/errors_templ.txt
deleted file mode 100644
index 23f922c..0000000
--- a/ui/errors_templ.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id=\"
-\" data-hx-swap-oob=\"true\" class=\"text-red-400\">
-</div>
\ No newline at end of file
diff --git a/ui/fields/fields_templ.txt b/ui/fields/fields_templ.txt
deleted file mode 100644
index bfc2776..0000000
--- a/ui/fields/fields_templ.txt
+++ /dev/null
@@ -1,46 +0,0 @@
-<span class=\"text-red-500 required-dot\">*</span>
-<label for=\"
-\" class=\"text-slate-700 text-xl pb-5\">
- 
-</label>
-<label for=\"
-\" class=\"text-slate-700 text-xl\"><div class=\"pb-5\"><span>
-</span> <span class=\"invisible group-has-[:required]:visible text-red-500 required-dot\">*</span></div>
-</label><div id=\"
-\" class=\"text-red-400\"></div>
-<div class=\"p-1 rounded-md flex items-center justify-center bg-blue-100 text-blue-900 ml-2\">
-<!-- hericons: bards-3-bottom-left --> <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12\"></path></svg>
-<!-- heroicons: chevron-up-down --> <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9\"></path></svg>
-<!-- heroicons: outline star --> <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"></path></svg>
-</div>
-<div id=\"
-\"
- class=\"group hidden\"
- class=\"group\"
-><div class=\"flex flex-col bg-sky-200 rounded-xl p-6 border-red-500 group-has-[:user-invalid]:border-2\">
-</div></div>
-<input id=\"
-\" name=\"
-\" placeholder=\"
-\" type=\"text\" autocomplete=\"off\"
- required
- _=\"
-\" class=\"flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:border-2 focus:ring-opacity-100 px-4 py-2 text-base resize-y block rounded-xl bg-sky-50\"><div hx-swap-oob=\"true\" id=\"
-\"></div>
-<textarea id=\"
-\" name=\"
-\" class=\"flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100 px-4 py-2 text-base resize-y block rounded-xl bg-sky-50\" placeholder=\"
-\" autocomplete=\"off\"
- required
- _=\"
-\" rows=\"3\"></textarea><div id=\"
-\" class=\"text-red-400\"></div>
-<div class=\"flex gap-3\">
-<label class=\"w-full cursor-pointer truncate\">
-Single-line text
-Multi-line text
-Single select
-Multi select
-Single Choice
-Single Choice (spaced)
-</label></div>
\ No newline at end of file
diff --git a/ui/fields/single_choice_templ.txt b/ui/fields/single_choice_templ.txt
deleted file mode 100644
index 3ea4cee..0000000
--- a/ui/fields/single_choice_templ.txt
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class=\"w-full\"><div class=\"join w-full\">
-<label class=\"join-item h-auto flex-grow shrink btn has-[:checked]:bg-sky-400 first:border-x-0 last:border-r-0 border-y-0 border-black bg-sky-50 py-3\"><!-- the input field is hidden with opacity, width, and height, but available for HTML validation when 'required' --><input class=\"opacity-0 w-0 h-0\" type=\"radio\" id=\"
-\" name=\"
-\" aria-label=\"
-\" value=\"
-\"
- required
- _=\"
-\"> 
-</label>
-</div>
-<div class=\"flex flex-grow w-full text-center text-gray-400\">
-<div class=\"w-full first:text-left last:text-right\">
-</div>
-</div>
-</div><div id=\"
-\" class=\"text-red-400\"></div>
-<div class=\"w-full\"><div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8\">
-<label class=\"flex gap-2 w-auto h-auto btn bg-sky-50 has-[:checked]:bg-sky-400 has-[:checked]:border-sky-500 py-3\"><span>
-</span> <span class=\"grow\"></span> <input type=\"radio\" class=\"peer opacity-0 w-0 h-0\" name=\"
-\" aria-label=\"
-\" value=\"
-\"
- required
- _=\"
-\"> <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-7 invisible peer-checked:visible bg-sky-200 rounded-full p-1\"><path fill-rule=\"evenodd\" d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\" clip-rule=\"evenodd\"></path></svg></label>
-</div></div><div id=\"
-\" class=\"text-red-400\"></div>
\ No newline at end of file
diff --git a/ui/selector/selector_templ.txt b/ui/selector/selector_templ.txt
deleted file mode 100644
index 36e3ba6..0000000
--- a/ui/selector/selector_templ.txt
+++ /dev/null
@@ -1,25 +0,0 @@
-<label for=\"
-\" class=\"
-\">
- 
-<span class=\"text-red-500 required-dot\">*</span>
-</label> 
-<select id=\"
-\" name=\"
-\"
- multiple
- required=\"true\"
- data-placeholder=\"
-\"
- _=\"
-\"
-><option></option></select><div id=\"
-\" data-args=\"
-\" _=\"
-\"></div><!-- when OptionsContent\n are present, their components render inside of this element when chosen -->
-<!-- content displayed when specific options are selected --> <div id=\"selected-content\">
-<div id=\"
-\" class=\"hidden\">
-</div>
-</div>
-<script>\n\t\t/**\n\t\t * Function to wait for predicates.\n\t\t * @param {function() : Promise.<Boolean> | function() : Boolean} predicate\n\t\t * - A function that returns or resolves a bool\n\t\t * @param {Number} [timeout] - Optional maximum waiting time in ms after rejected\n\t\t */\n\t\tfunction waitFor(predicate, timeout) {\n\t\t    return new Promise((resolve, reject) => {\n\t\t        let running = true;\n\n\t\t        const check = async () => {\n\t\t            const res = await predicate();\n\t\t            if (res) return resolve(res);\n\t\t            if (running) setTimeout(check, 100);\n\t\t        };\n\n\t\t        check();\n\n\t\t        if (!timeout) return;\n\t\t        setTimeout(() => {\n\t\t            running = false;\n\t\t            reject();\n\t\t        }, timeout);\n\t\t    });\n\t\t}\n\n\t\tasync function initializeSelect(dataElementID) {\n\t\t\t// wait 10 seconds for choices.js to load \n\t\t\ttry {\n\t\t\t\tawait waitFor(() => typeof Choices !== 'undefined', 10000);\n\t\t\t} catch {\n\t\t\t\tconsole.log(\"unable to load choices!\")\n\t\t\t}\n\n\t\t\tconst argsElement = document.getElementById(dataElementID);\n\t\t\tconst args = JSON.parse(argsElement.getAttribute('data-args'));\n\t\t\tif (args.Options != null) {\n\t\t\t\targs.Options.map((option) => {\n\t\t\t\t\tif (option.value === \"\") {\n\t\t\t\t\t\tconsole.error(`option id: (${option.id}) label: (${option.label}) should have a value! ensure every option provided to SelectorArgs has a 'Value'`)\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t\tvar searchEnabled = true\n\t\t\tif (args.SearchDisabled) {\n\t\t\t\tsearchEnabled = false\n\t\t\t}\n\n\t\t\tvar element = document.getElementById(args.ID)\n\t\t\tvar choices = new Choices(element, {\n\t\t\t\tchoices: args.Options != null ? args.Options : [],\n\t\t\t\tduplicateItemsAllowed: false,\n\t\t\t\tplaceholder: true,\n\t\t\t\tplaceholderValue: args.Placeholder,\n\t\t\t\tsearchEnabled: searchEnabled,\n\t\t\t\teditItems: args.EditItems,\n\t\t\t\tremoveItems: true,\n\t\t\t\tremoveItemButton: true,\n\t\t\t\taddChoices: true,\n\t\t\t\taddItems: true,\n\t\t\t\titemSelectText: \"\",\n\t\t\t\tshouldSort: false,\n\t\t\t});\n\t\t\telement._choices = choices;\n\t\t\n\t\t\t/**\n\t\t\t* When the user's selection(s) have changed, notify a DOM element with an event\n\t\t\t*/\n\t\t\tfunction notifySelected(event) {\n\t\t\t\tif (args.SelectionChangeEvent == \"\") {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tvar element = document.getElementById(args.ID)\n\t\t\t\tif (element == null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\telement.dispatchEvent(new CustomEvent(args.SelectionChangeEvent, {bubbles: true, detail: { id: args.ID, value: event.detail.value}}))\n\t\t\t}\n\t\t\t\n\t\t\telement.addEventListener('change', notifySelected, false);\n\t\t}\n\t</script>
\ No newline at end of file
diff --git a/ui/trigger_rebuild_templ.txt b/ui/trigger_rebuild_templ.txt
deleted file mode 100644
index e76b913..0000000
--- a/ui/trigger_rebuild_templ.txt
+++ /dev/null
@@ -1 +0,0 @@
-<div>000164</div>
\ No newline at end of file