appflare 0.2.44 → 0.2.46

package/cli/schema-compiler.ts

@@ -936,17 +936,17 @@ function emitDrizzleSchema(
 		}
 	}
 
-	const enumColumns = new Map<string, ColumnDefinition>();
-	for (const table of Object.values(definition.tables)) {
+	const enumColumns = new Map<string, { column: ColumnDefinition; tableName: string; fieldName: string }>();
+	for (const [tableName, table] of Object.entries(definition.tables)) {
 		for (const [fieldName, column] of Object.entries(table.columns)) {
 			if (
 				column.type === "enum" &&
 				column.enumValues &&
 				column.enumValues.length > 0
 			) {
-				const key = column.enumRef ?? `${fieldName}`;
+				const key = column.enumRef ?? `${tableName}_${fieldName}`;
 				if (!enumColumns.has(key)) {
-					enumColumns.set(key, column);
+					enumColumns.set(key, { column, tableName, fieldName });
 				}
 			}
 		}
@@ -954,9 +954,9 @@ function emitDrizzleSchema(
 
 	const enumTypeLines: string[] = [];
 	const enumCustomTypeLines: string[] = [];
-	for (const [key, column] of enumColumns.entries()) {
+	for (const [key, info] of enumColumns.entries()) {
 		const typeName = toPascalCase(key);
-		const valuesStr = column.enumValues!.map((v) => `"${v}"`).join(" | ");
+		const valuesStr = info.column.enumValues!.map((v) => `"${v}"`).join(" | ");
 		enumTypeLines.push(`export type ${typeName} = ${valuesStr};`);
 		enumCustomTypeLines.push(
 			`export const ${typeName}Column = t.customType<{ data: ${typeName}; dataNotNull: ${typeName} }>({ dataType: () => "text" });`,
@@ -978,7 +978,7 @@ function emitDrizzleSchema(
 				column.enumValues &&
 				column.enumValues.length > 0
 			) {
-				const enumKey = column.enumRef ?? fieldName;
+				const enumKey = column.enumRef ?? `${tableName}_${fieldName}`;
 				const typeName = toPascalCase(enumKey);
 				const resolvedSqlName = column.sqlName ?? toSnakeCase(fieldName);
 				const needsExplicitName = resolvedSqlName !== fieldName;

package/cli/templates/dashboard/builders/functions/render-page/request-panel.ts

@@ -1,9 +1,47 @@
-import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
+import { DiscoveredArgField, DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
 
-function renderArgInputType(type: string): string {
-	if (type === "boolean") return "checkbox";
-	if (type === "number") return "number";
-	return "text";
+const fieldInputClass =
+	"input input-xs input-bordered font-mono flex-1 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200";
+
+function renderObjectFieldInputs(fields: DiscoveredArgField[]): string {
+	return fields
+		.map((f) => {
+			const badge =
+				f.type !== "unknown"
+					? `<span class="badge badge-xs badge-ghost font-mono opacity-25 ml-1">${f.type}</span>`
+					: "";
+
+			if (f.type === "boolean") {
+				return `
+				<div class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						data-obj-key="${f.name}"
+						data-obj-field-type="boolean"
+						class="checkbox checkbox-xs checkbox-primary shrink-0"
+						${f.defaultValue === "true" ? "checked" : ""}
+					/>
+					<span class="text-[10px] font-mono opacity-50">${f.name}${badge}</span>
+				</div>`;
+			}
+
+			const inputType =
+				f.type === "number" ? "number" : f.type === "date" ? "datetime-local" : "text";
+
+			return `
+			<div class="flex items-center gap-2">
+				<span class="text-[10px] font-mono opacity-50 w-20 shrink-0 truncate" title="${f.name}">${f.name}${badge}</span>
+				<input
+					type="${inputType}"
+					data-obj-key="${f.name}"
+					data-obj-field-type="${f.type}"
+					placeholder="${f.defaultValue ?? ""}"
+					value="${f.defaultValue ?? ""}"
+					class="${fieldInputClass}"
+				/>
+			</div>`;
+		})
+		.join("\n");
 }
 
 function renderArgRows(h: DiscoveredHandlerOperation): string {
@@ -14,17 +52,26 @@ function renderArgRows(h: DiscoveredHandlerOperation): string {
 		`;
 	}
 
+	const inputClass =
+		"input input-sm input-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200";
+
 	return fields
 		.map((field) => {
-			const inputType = renderArgInputType(field.type);
-			const isCheckbox = inputType === "checkbox";
 			const label = `${field.name}${field.optional ? "" : " *"}`;
 			const badge =
 				field.type !== "unknown"
 					? `<span class="badge badge-xs badge-ghost font-mono opacity-40 ml-1">${field.type}</span>`
 					: "";
+			const optionalAlt = field.optional
+				? '<span class="label-text-alt text-[10px] opacity-30 italic">optional</span>'
+				: "";
+			const labelRow = `
+				<label class="label py-0.5">
+					<span class="label-text text-[11px] font-mono font-semibold">${label}${badge}</span>
+					${optionalAlt}
+				</label>`;
 
-			if (isCheckbox) {
+			if (field.type === "boolean") {
 				return `
 				<div class="flex items-center gap-3 py-1">
 					<input
@@ -36,27 +83,80 @@ function renderArgRows(h: DiscoveredHandlerOperation): string {
 					/>
 					<span class="text-sm font-mono opacity-70">${field.name}${badge}</span>
 					${field.optional ? '<span class="text-[10px] opacity-30 italic ml-auto">optional</span>' : ""}
-				</div>
-			`;
+				</div>`;
+			}
+
+			if (field.type === "object") {
+				if (field.fields && field.fields.length > 0) {
+					return `
+					<div class="form-control">
+						${labelRow}
+						<div
+							data-arg-key="${field.name}"
+							data-arg-type="object"
+							class="border border-base-200 rounded-xl p-3 bg-base-200/20 flex flex-col gap-2"
+						>
+							${renderObjectFieldInputs(field.fields)}
+						</div>
+					</div>`;
+				}
+				// Fallback when schema isn't statically known
+				return `
+				<div class="form-control">
+					${labelRow}
+					<textarea
+						data-arg-key="${field.name}"
+						data-arg-type="object"
+						placeholder="{}"
+						rows="4"
+						class="textarea textarea-sm textarea-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200 resize-y text-xs"
+						${!field.optional ? "required" : ""}
+					>${field.defaultValue ?? ""}</textarea>
+				</div>`;
 			}
 
+			if (field.type === "array") {
+				const itemType = field.itemType ?? "string";
+				const itemFieldsJson = JSON.stringify(
+					(field.itemFields ?? []).map((f) => ({ name: f.name, type: f.type })),
+				);
+				return `
+				<div class="form-control">
+					${labelRow}
+					<div
+						data-arg-key="${field.name}"
+						data-arg-type="array"
+						data-item-type="${itemType}"
+						data-item-fields='${itemFieldsJson}'
+						class="flex flex-col gap-2"
+					></div>
+					<button
+						type="button"
+						onclick="addArrayItem('${field.name}')"
+						class="btn btn-xs btn-ghost gap-1 mt-1 self-start opacity-50 hover:opacity-100"
+					>
+						<iconify-icon icon="solar:add-circle-linear" width="12" height="12"></iconify-icon>
+						Add item
+					</button>
+				</div>`;
+			}
+
+			const inputType =
+				field.type === "number" ? "number" : field.type === "date" ? "datetime-local" : "text";
+
 			return `
 			<div class="form-control">
-				<label class="label py-0.5">
-					<span class="label-text text-[11px] font-mono font-semibold">${label}${badge}</span>
-					${field.optional ? '<span class="label-text-alt text-[10px] opacity-30 italic">optional</span>' : ""}
-				</label>
+				${labelRow}
 				<input
 					type="${inputType}"
 					placeholder="${field.defaultValue ?? ""}"
 					data-arg-key="${field.name}"
 					data-arg-type="${field.type}"
 					value="${field.defaultValue ?? ""}"
-					class="input input-sm input-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
+					class="${inputClass}"
 					${!field.optional ? "required" : ""}
 				/>
-			</div>
-		`;
+			</div>`;
 		})
 		.join("\n");
 }

package/cli/templates/dashboard/builders/functions/render-page/scripts.ts

@@ -74,6 +74,29 @@ export function renderScripts(h: DiscoveredHandlerOperation): string {
 				container.appendChild(row);
 			};
 
+			// ── Field-level value helpers ──────────────────────────────────────────────
+			function getFieldValue(el) {
+				var type = el.getAttribute('data-obj-field-type') || 'string';
+				if (type === 'boolean') return el.checked;
+				if (type === 'number') {
+					var raw = el.value.trim();
+					return raw === '' ? undefined : Number(raw);
+				}
+				var v = el.value.trim();
+				return v === '' ? undefined : v;
+			}
+
+			function collectObjectRow(container) {
+				var obj = {};
+				container.querySelectorAll('[data-obj-key]').forEach(function(f) {
+					var k = f.getAttribute('data-obj-key');
+					if (!k) return;
+					var v = getFieldValue(f);
+					if (v !== undefined) obj[k] = v;
+				});
+				return Object.keys(obj).length ? obj : undefined;
+			}
+
 			// ── Collect args from server-rendered inputs ───────────────────────────────
 			function collectArgs() {
 				var result = {};
@@ -87,6 +110,36 @@ export function renderScripts(h: DiscoveredHandlerOperation): string {
 					} else if (type === 'number') {
 						var raw = el.value.trim();
 						value = raw === '' ? undefined : Number(raw);
+					} else if (type === 'object') {
+						if (el.tagName === 'TEXTAREA') {
+							// Fallback JSON textarea
+							var raw = el.value.trim();
+							if (!raw) return;
+							try { value = JSON.parse(raw); } catch(e) { value = raw; }
+						} else {
+							// Structured field inputs
+							value = collectObjectRow(el);
+						}
+					} else if (type === 'array') {
+						var itemType = el.getAttribute('data-item-type') || 'string';
+						if (itemType === 'object') {
+							var rows = el.querySelectorAll('.array-item-row');
+							var arr = Array.from(rows).map(function(row) {
+								return collectObjectRow(row);
+							}).filter(Boolean);
+							value = arr.length ? arr : undefined;
+						} else {
+							var items = el.querySelectorAll('.array-item-input');
+							var arr = Array.from(items).map(function(inp) {
+								var ft = inp.getAttribute('data-obj-field-type') || 'string';
+								if (ft === 'number') {
+									var raw = inp.value.trim();
+									return raw === '' ? undefined : Number(raw);
+								}
+								return inp.value.trim() || undefined;
+							}).filter(function(v) { return v !== undefined; });
+							value = arr.length ? arr : undefined;
+						}
 					} else {
 						value = el.value;
 					}
@@ -97,6 +150,102 @@ export function renderScripts(h: DiscoveredHandlerOperation): string {
 				return result;
 			}
 
+			// ── Array / object item helpers ────────────────────────────────────────────
+			function makeFieldInput(field) {
+				if (field.type === 'boolean') {
+					var cb = document.createElement('input');
+					cb.type = 'checkbox';
+					cb.className = 'checkbox checkbox-xs checkbox-primary shrink-0';
+					cb.setAttribute('data-obj-key', field.name);
+					cb.setAttribute('data-obj-field-type', 'boolean');
+					return cb;
+				}
+				var inputType = field.type === 'number' ? 'number'
+				              : field.type === 'date'   ? 'datetime-local'
+				              : 'text';
+				var inp = document.createElement('input');
+				inp.type = inputType;
+				inp.placeholder = field.name;
+				inp.className = 'input input-xs input-bordered font-mono flex-1 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200';
+				inp.setAttribute('data-obj-key', field.name);
+				inp.setAttribute('data-obj-field-type', field.type);
+				return inp;
+			}
+
+			window.addArrayItem = function(key) {
+				var container = document.querySelector('[data-arg-key="' + key + '"][data-arg-type="array"]');
+				if (!container) return;
+				var itemType = container.getAttribute('data-item-type') || 'string';
+
+				if (itemType === 'object') {
+					var fieldsJson = container.getAttribute('data-item-fields') || '[]';
+					var itemFields;
+					try { itemFields = JSON.parse(fieldsJson); } catch(e) { itemFields = []; }
+
+					var rowCount = container.querySelectorAll('.array-item-row').length + 1;
+
+					var row = document.createElement('div');
+					row.className = 'array-item-row border border-base-200 rounded-xl p-3 bg-base-200/20 flex flex-col gap-2';
+
+					var header = document.createElement('div');
+					header.className = 'flex items-center justify-between';
+
+					var lbl = document.createElement('span');
+					lbl.className = 'text-[10px] font-mono opacity-30';
+					lbl.textContent = 'Item ' + rowCount;
+
+					var removeBtn = document.createElement('button');
+					removeBtn.type = 'button';
+					removeBtn.className = 'btn btn-xs btn-ghost text-error opacity-40 hover:opacity-100 px-1.5';
+					removeBtn.innerHTML = '<iconify-icon icon="solar:close-circle-linear" width="14" height="14"></iconify-icon>';
+					removeBtn.onclick = function() { row.remove(); };
+
+					header.appendChild(lbl);
+					header.appendChild(removeBtn);
+					row.appendChild(header);
+
+					itemFields.forEach(function(field) {
+						var fieldRow = document.createElement('div');
+						fieldRow.className = 'flex items-center gap-2';
+
+						var fieldLbl = document.createElement('span');
+						fieldLbl.className = 'text-[10px] font-mono opacity-50 w-20 shrink-0 truncate';
+						fieldLbl.title = field.name;
+						fieldLbl.textContent = field.name;
+
+						fieldRow.appendChild(fieldLbl);
+						fieldRow.appendChild(makeFieldInput(field));
+						row.appendChild(fieldRow);
+					});
+
+					container.appendChild(row);
+				} else {
+					var inputType = itemType === 'number' ? 'number'
+					              : itemType === 'date'   ? 'datetime-local'
+					              : 'text';
+
+					var row = document.createElement('div');
+					row.className = 'flex items-center gap-2';
+
+					var inp = document.createElement('input');
+					inp.type = inputType;
+					inp.className = 'array-item-input input input-xs input-bordered font-mono flex-1 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200';
+					inp.placeholder = 'value';
+					inp.setAttribute('data-obj-field-type', itemType);
+
+					var removeBtn = document.createElement('button');
+					removeBtn.type = 'button';
+					removeBtn.className = 'btn btn-xs btn-ghost text-error opacity-40 hover:opacity-100 px-1.5';
+					removeBtn.innerHTML = '<iconify-icon icon="solar:close-circle-linear" width="14" height="14"></iconify-icon>';
+					removeBtn.onclick = function() { row.remove(); };
+
+					row.appendChild(inp);
+					row.appendChild(removeBtn);
+					container.appendChild(row);
+					inp.focus();
+				}
+			};
+
 			function collectHeaders() {
 				var result = {};
 				document.querySelectorAll('#headers-rows [data-hdr-key]').forEach(function(keyEl) {

package/cli/utils/handler-discovery.ts

@@ -13,9 +13,15 @@ export type HandlerKind =
 
 export type DiscoveredArgField = {
 	name: string;
-	type: "string" | "number" | "boolean" | "unknown";
+	type: "string" | "number" | "boolean" | "date" | "object" | "array" | "unknown";
 	optional: boolean;
 	defaultValue?: string;
+	/** Populated when type === "object": schema of the object's properties */
+	fields?: DiscoveredArgField[];
+	/** Populated when type === "array": element type */
+	itemType?: "string" | "number" | "boolean" | "date" | "object" | "unknown";
+	/** Populated when type === "array" and itemType === "object": element object schema */
+	itemFields?: DiscoveredArgField[];
 };
 
 export type DiscoveredHandlerOperation = {
@@ -83,6 +89,9 @@ function readZodArgField(
 	let optional = false;
 	let defaultValue: string | undefined;
 	let baseType: DiscoveredArgField["type"] = "unknown";
+	let fields: DiscoveredArgField[] | undefined;
+	let itemType: DiscoveredArgField["itemType"] | undefined;
+	let itemFields: DiscoveredArgField[] | undefined;
 
 	// Walk the call chain: z.string().optional().default("x")
 	// Each iteration processes one layer (e.g. .default, .optional, .string)
@@ -120,13 +129,39 @@ function readZodArgField(
 		} else if (prop === "boolean") {
 			baseType = "boolean";
 			break;
+		} else if (prop === "date") {
+			baseType = "date";
+			break;
+		} else if (prop === "object") {
+			baseType = "object";
+			const objArg = node.arguments[0];
+			if (objArg && ts.isObjectLiteralExpression(objArg)) {
+				fields = [];
+				for (const property of objArg.properties) {
+					if (ts.isPropertyAssignment(property) && ts.isIdentifier(property.name)) {
+						fields.push(readZodArgField(property.initializer, property.name.text));
+					}
+				}
+			}
+			break;
+		} else if (prop === "array") {
+			baseType = "array";
+			const itemArg = node.arguments[0];
+			if (itemArg) {
+				const itemField = readZodArgField(itemArg, "");
+				itemType = itemField.type === "array" ? "unknown" : itemField.type;
+				if (itemField.type === "object") {
+					itemFields = itemField.fields;
+				}
+			}
+			break;
 		} else {
 			// unknown modifier (.min, .max, .trim, etc.) — keep walking inward
 			node = expr.expression;
 		}
 	}
 
-	return { name, type: baseType, optional, defaultValue };
+	return { name, type: baseType, optional, defaultValue, fields, itemType, itemFields };
 }
 
 function readArgsFields(