Add number inputs into the supported structures, and redesign the sheet to make it actually look good

module/handlebarHelpers/inputs/formFields.mjs

@@ -1,8 +1,9 @@
+import { numberInput } from "./numberInput.mjs";
 import { stringSet } from "./stringSet.mjs";
 
 const inputTypes = {
 	"string-set": stringSet,
-	integer: displayOnly,
+	integer: numberInput,
 	bar: displayOnly,
 	dropdown: displayOnly,
 	boolean: displayOnly,
@@ -13,10 +14,10 @@ function displayOnly(input) {
 };
 
 export function formFields(inputs, opts) {
-	let htmlString = ``;
+	const fields = [];
 	for (const input of inputs) {
 		if (inputTypes[input.type] == null) { continue };
-		htmlString += inputTypes[input.type](input, opts.data.root);
+		fields.push(inputTypes[input.type](input, opts.data.root));
 	};
-	return htmlString;
+	return fields.join(opts.hash?.joiner ?? `<hr />`);
 };

module/handlebarHelpers/inputs/numberInput.mjs

@@ -0,0 +1,35 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+const { randomID } = foundry.utils;
+
+export function numberInput(input, data) {
+	const label = localizer(input.label);
+	const id = `${data.meta.idp}-${randomID(10)}`;
+
+	if (!data.meta.editable) {
+		return `<div data-input-type="integer">
+			<span class="label">${label}</span>
+			<span class="value">${data.meta.limited ? `???` : input.value}</span>
+		</div>`;
+	};
+
+	let attrs = ``;
+	if (input.min) { attrs += ` min="${input.min}"` };
+	if (input.max) { attrs += ` max="${input.max}"` };
+	if (input.step) { attrs += `step="${input.step}"` };
+
+	return `<div data-input-type="integer">
+		<label
+			for="${id}"
+		>
+			${label}
+		</label>
+		<input
+			type="number"
+			id="${id}"
+			value="${input.value}"
+			name="${input.path}"
+			${attrs}
+		/>
+	</div>`;
+};

module/handlebarHelpers/inputs/stringSet.mjs

@@ -4,12 +4,34 @@ const { randomID } = foundry.utils;
 
 export function stringSet(input, data) {
 	const label = localizer(input.label);
+	const placeholder = localizer(input.placeholder ?? ``);
 	const id = `${data.meta.idp}-${randomID(10)}`;
 
 	if (!data.meta.editable) {
+		const tagList = input.value
+			.split(/,\s*/)
+			.filter(t => t.length > 0)
+			.map(t => {
+				return `<div class="tag">${t.trim()}</div>`;
+			});
+		let tags = tagList.join(``);
+
+		if (tagList.length === 0) {
+			tags = `---`;
+		};
+
+		if (data.meta.limited) {
+			tags = `???`;
+		};
+
 		return `<div data-input-type="string-set">
 			<span class="label">${label}</span>
-			<span>${input.value}</span>
+			<div
+				class="input-element-tags tags ${tags.length == 0 ? `empty` : ``}"
+				data-tag-count="${tagList.length}"
+			>
+				${tags}
+			</div>
 		</div>`;
 	};
 
@@ -21,6 +43,7 @@ export function stringSet(input, data) {
 		</label>
 		<string-tags
 			id="${id}"
+			placeholder="${placeholder}"
 			value="${input.value}"
 			name="${input.path}"
 		/>