plum-cms 0.1.2 → 0.2.1

data/app/javascript/controllers/plum/blueprint_controller.js

@@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["fields", "input"]
+  static values = { types: Array, nestedTypes: Array, applyFieldsetUrl: String }
 
   connect() {
     this.syncFieldConfigVisibility()
@@ -12,26 +13,17 @@ export default class extends Controller {
     event.preventDefault()
 
     const fieldHtml = `
-      <div class="grid grid-cols-1 gap-4 p-4 bg-gray-50 rounded-lg sm:grid-cols-2 lg:grid-cols-5" data-plum--blueprint-target="field">
+      <div class="plum-blueprint-field" data-plum--blueprint-target="field">
+        <div class="plum-blueprint-field-header col-span-full">
+          <p class="plum-blueprint-field-title" data-field-summary>Untitled field<span class="plum-blueprint-field-type">text</span></p>
+          <button type="button" data-action="plum--blueprint#removeField" class="text-sm font-medium text-red-600 hover:text-red-700">Remove</button>
+        </div>
         <input type="text" placeholder="handle" data-field="handle"
                data-action="input->plum--blueprint#inputChanged"
                class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 font-mono text-sm">
         <select data-field="type" data-action="change->plum--blueprint#inputChanged"
                 class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 text-sm">
-          <option value="text">Text</option>
-          <option value="textarea">Textarea</option>
-          <option value="rich_text">Rich Text</option>
-          <option value="number">Number</option>
-          <option value="boolean">Boolean</option>
-          <option value="date">Date</option>
-          <option value="select">Select</option>
-          <option value="checkboxes">Checkboxes</option>
-          <option value="color">Color</option>
-          <option value="url">URL</option>
-          <option value="taxonomy">Taxonomy</option>
-          <option value="image">Image</option>
-          <option value="relationship">Relationship</option>
-          <option value="blocks">Blocks</option>
+          ${this.typesValue.map(type => `<option value="${type.handle}">${type.label}</option>`).join("")}
         </select>
         <input type="text" placeholder="Label" data-field="label"
                data-action="input->plum--blueprint#inputChanged"
@@ -39,17 +31,27 @@ export default class extends Controller {
         <input type="text" placeholder="Related type handle" data-field="content_type" data-field-config="relationship"
                data-action="input->plum--blueprint#inputChanged"
                class="hidden px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 font-mono text-sm">
+        <label class="hidden flex items-center gap-2 text-sm text-gray-700" data-field-config="relationship"><input type="checkbox" data-field="multiple" data-action="change->plum--blueprint#inputChanged"> Allow multiple entries</label>
         <input type="text" placeholder="Taxonomy handle" data-field="taxonomy" data-field-config="taxonomy"
                data-action="input->plum--blueprint#inputChanged"
                class="hidden px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 font-mono text-sm">
-        <input type="text" placeholder="Option 1, Option 2, Option 3" data-field="options" data-field-config="select checkboxes"
+        <textarea rows="4" placeholder="Published | published&#10;Draft | draft" data-field="options" data-field-config="select radio button_group checkboxes"
                data-action="input->plum--blueprint#inputChanged"
-               class="hidden px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 text-sm">
-        <button type="button" data-action="plum--blueprint#removeField" class="justify-self-start text-red-500 hover:text-red-700">
-          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
-        </button>
+               class="hidden col-span-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 font-mono text-sm"></textarea>
+        ${this.nestedEditorHtml()}
+        ${this.typeConstraintsHtml()}
+        <div class="col-span-full grid gap-3 border-t border-gray-200 pt-3 sm:grid-cols-3">
+          <input type="text" placeholder="Instructions" data-field="instructions" data-action="input->plum--blueprint#inputChanged"
+                 class="px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm">
+          <input type="text" placeholder="Placeholder" data-field="placeholder" data-action="input->plum--blueprint#inputChanged"
+                 class="px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm">
+          <input type="text" placeholder="Default value" data-field="default" data-action="input->plum--blueprint#inputChanged"
+                 class="px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm">
+          <label class="flex items-center gap-2 text-sm text-gray-700">
+            <input type="checkbox" data-field="required" data-action="change->plum--blueprint#inputChanged"> Required
+          </label>
+        </div>
+        ${this.presentationHtml()}
       </div>
     `
 
@@ -65,6 +67,63 @@ export default class extends Controller {
     this.updateHiddenField()
   }
 
+  async applyFieldset(event) {
+    event.preventDefault()
+    const picker = this.element.querySelector("[data-fieldset-picker]")
+    const status = this.element.querySelector("[data-fieldset-status]")
+    if (!picker?.value || !this.hasApplyFieldsetUrlValue) return
+
+    event.currentTarget.disabled = true
+    if (status) {
+      status.textContent = "Inserting…"
+      status.className = "text-sm text-gray-600"
+    }
+    try {
+      const response = await fetch(this.applyFieldsetUrlValue, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.content || ""
+        },
+        body: JSON.stringify({ fieldset_id: picker.value })
+      })
+      const payload = await response.json()
+      if (!response.ok) throw new Error(payload.error || "Could not insert fieldset")
+      window.location.assign(payload.redirect_url)
+    } catch (error) {
+      event.currentTarget.disabled = false
+      if (status) {
+        status.textContent = error.message
+        status.className = "text-sm text-red-600"
+      }
+    }
+  }
+
+  addNestedField(event) {
+    event.preventDefault()
+    const editor = event.currentTarget.closest("[data-nested-editor]")
+    editor.querySelector("[data-nested-fields]").insertAdjacentHTML("beforeend", this.nestedFieldHtml())
+    this.updateHiddenField()
+  }
+
+  removeNestedField(event) {
+    event.preventDefault()
+    event.currentTarget.closest("[data-nested-field]").remove()
+    this.updateHiddenField()
+  }
+
+  moveNestedField(event) {
+    event.preventDefault()
+    const row = event.currentTarget.closest("[data-nested-field]")
+    const direction = Number(event.currentTarget.dataset.direction)
+    const sibling = direction < 0 ? row.previousElementSibling : row.nextElementSibling
+    if (!sibling) return
+    if (direction < 0) row.parentElement.insertBefore(row, sibling)
+    else row.parentElement.insertBefore(sibling, row)
+    this.updateHiddenField()
+  }
+
   updateHiddenField() {
     const fields = []
     const fieldElements = this.fieldsTarget.querySelectorAll('[data-plum--blueprint-target="field"]')
@@ -78,6 +137,21 @@ export default class extends Controller {
       if (handle) {
         const field = { handle, type, label }
 
+        ;["instructions", "placeholder", "default", "number_kind", "step", "unit", "date_mode", "min_items", "max_items", "width"].forEach(key => {
+          const value = fieldEl.querySelector(`[data-field="${key}"]`)?.value?.trim()
+          if (value) field[key] = value
+        })
+        if (fieldEl.querySelector('[data-field="required"]')?.checked) field.required = true
+        if (type === "relationship" && fieldEl.querySelector('[data-field="multiple"]')?.checked) field.multiple = true
+        if (type === "list" && fieldEl.querySelector('[data-field="unique"]')?.checked) field.unique = true
+        if (type === "number" || type === "date") {
+          const constraints = fieldEl.querySelector(`[data-field-config="${type}"]`)
+          ;["min", "max"].forEach(key => {
+            const value = constraints?.querySelector(`[data-field="${key}"]`)?.value.trim()
+            if (value) field[key] = value
+          })
+        }
+
         if (type === "relationship" && contentType) {
           field.content_type = contentType
         }
@@ -88,8 +162,24 @@ export default class extends Controller {
         }
 
         const optionsVal = fieldEl.querySelector('[data-field="options"]')?.value?.trim()
-        if ((type === "select" || type === "checkboxes") && optionsVal) {
-          field.options = optionsVal.split(",").map(o => o.trim()).filter(Boolean)
+        if (["select", "radio", "button_group", "checkboxes"].includes(type) && optionsVal) {
+          field.options = optionsVal.split("\n").map(line => {
+            const [label, ...valueParts] = line.split("|")
+            const value = valueParts.join("|").trim()
+            return value ? { label: label.trim(), value } : label.trim()
+          }).filter(option => typeof option === "string" ? option : option.label && option.value)
+        }
+
+        const conditionField = fieldEl.querySelector('[data-field="condition_field"]')?.value.trim()
+        const conditionOperator = fieldEl.querySelector('[data-field="condition_operator"]')?.value
+        const conditionValue = fieldEl.querySelector('[data-field="condition_value"]')?.value.trim()
+        if (conditionField && conditionOperator) {
+          field.condition = { field: conditionField, operator: conditionOperator }
+          if (conditionValue) field.condition.value = conditionValue
+        }
+
+        if (type === "group" || type === "repeater") {
+          field.fields = this.readNestedFields(fieldEl)
         }
 
         fields.push(field)
@@ -99,6 +189,82 @@ export default class extends Controller {
     this.inputTarget.value = JSON.stringify({ fields })
   }
 
+  readNestedFields(fieldEl) {
+    return Array.from(fieldEl.querySelectorAll("[data-nested-field]")).filter(row => {
+      return row.querySelector('[data-nested="handle"]')?.value.trim()
+    }).map(row => {
+      const handle = row.querySelector('[data-nested="handle"]').value.trim()
+      const field = {
+        handle,
+        type: row.querySelector('[data-nested="type"]').value,
+        label: row.querySelector('[data-nested="label"]').value.trim() || handle.replaceAll("_", " ")
+      }
+      ;["instructions", "placeholder", "default"].forEach(key => {
+        const value = row.querySelector(`[data-nested="${key}"]`)?.value.trim()
+        if (value) field[key] = value
+      })
+      if (row.querySelector('[data-nested="required"]')?.checked) field.required = true
+      return field
+    })
+  }
+
+  nestedEditorHtml() {
+    return `<div class="hidden col-span-full space-y-3 rounded-md border border-gray-200 bg-white p-3" data-field-config="group repeater" data-nested-editor>
+      <div class="flex items-center justify-between"><p class="text-sm font-medium text-gray-700">Nested fields</p>
+      <button type="button" data-action="plum--blueprint#addNestedField" class="text-sm font-medium text-purple-600 hover:text-purple-700">+ Add nested field</button></div>
+      <div class="space-y-3" data-nested-fields></div>
+    </div>`
+  }
+
+  typeConstraintsHtml() {
+    return `<div class="hidden col-span-full grid gap-3 rounded-md border border-gray-200 bg-white p-3 sm:grid-cols-4" data-field-config="number">
+      <select data-field="number_kind" data-action="change->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm"><option value="decimal">Decimal</option><option value="integer">Integer</option></select>
+      <input type="number" placeholder="Minimum" data-field="min" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <input type="number" placeholder="Maximum" data-field="max" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <input type="number" placeholder="Step" data-field="step" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <input type="text" placeholder="Unit (optional)" data-field="unit" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+    </div>
+    <div class="hidden col-span-full grid gap-3 rounded-md border border-gray-200 bg-white p-3 sm:grid-cols-3" data-field-config="date">
+      <select data-field="date_mode" data-action="change->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm"><option value="date">Date</option><option value="time">Time</option><option value="datetime">Date and time</option></select>
+      <input type="text" placeholder="Earliest value" data-field="min" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <input type="text" placeholder="Latest value" data-field="max" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+    </div>
+    <div class="hidden col-span-full grid gap-3 rounded-md border border-gray-200 bg-white p-3 sm:grid-cols-3" data-field-config="list repeater images relationship" data-multiple-only>
+      <input type="number" min="0" placeholder="Minimum items" data-field="min_items" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <input type="number" min="0" placeholder="Maximum items" data-field="max_items" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <label class="flex items-center gap-2 text-sm text-gray-700" data-field-config="list"><input type="checkbox" data-field="unique" data-action="change->plum--blueprint#inputChanged"> Unique values</label>
+    </div>`
+  }
+
+  presentationHtml() {
+    return `<div class="col-span-full grid gap-3 rounded-md border border-gray-200 bg-white p-3 sm:grid-cols-4">
+      <select data-field="width" data-action="change->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+        <option value="12">Full width</option><option value="9">Three quarters</option><option value="8">Two thirds</option><option value="6">Half width</option><option value="4">One third</option><option value="3">Quarter width</option>
+      </select>
+      <input type="text" placeholder="Show when field…" data-field="condition_field" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 font-mono text-sm">
+      <select data-field="condition_operator" data-action="change->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+        <option value="">No condition</option><option value="equals">Equals</option><option value="not_equals">Does not equal</option><option value="contains">Contains</option><option value="empty">Is empty</option><option value="not_empty">Is not empty</option>
+      </select>
+      <input type="text" placeholder="Value" data-field="condition_value" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+    </div>`
+  }
+
+  nestedFieldHtml() {
+    const options = this.nestedTypesValue.map(type => `<option value="${type.handle}">${type.label}</option>`).join("")
+    return `<div class="grid gap-2 rounded-md border border-gray-200 bg-gray-50 p-3 sm:grid-cols-3" data-nested-field>
+      <input type="text" placeholder="handle" data-nested="handle" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 font-mono text-sm">
+      <select data-nested="type" data-action="change->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">${options}</select>
+      <input type="text" placeholder="Label" data-nested="label" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <input type="text" placeholder="Instructions" data-nested="instructions" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <input type="text" placeholder="Placeholder" data-nested="placeholder" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <input type="text" placeholder="Default value" data-nested="default" data-action="input->plum--blueprint#inputChanged" class="rounded-md border border-gray-300 px-3 py-2 text-sm">
+      <label class="flex items-center gap-2 text-sm text-gray-700"><input type="checkbox" data-nested="required" data-action="change->plum--blueprint#inputChanged"> Required</label>
+      <div class="flex gap-3"><button type="button" data-direction="-1" data-action="plum--blueprint#moveNestedField" class="text-sm text-gray-600">↑ Up</button>
+      <button type="button" data-direction="1" data-action="plum--blueprint#moveNestedField" class="text-sm text-gray-600">↓ Down</button>
+      <button type="button" data-action="plum--blueprint#removeNestedField" class="text-sm font-medium text-red-600">Remove</button></div>
+    </div>`
+  }
+
   inputChanged(event) {
     const fieldEl = event.target.closest('[data-plum--blueprint-target="field"]')
     if (fieldEl) this.syncFieldConfigVisibility(fieldEl)
@@ -111,9 +277,20 @@ export default class extends Controller {
 
     fieldElements.forEach(fieldEl => {
       const type = fieldEl.querySelector('[data-field="type"]')?.value
+      const label = fieldEl.querySelector('[data-field="label"]')?.value.trim()
+      const handle = fieldEl.querySelector('[data-field="handle"]')?.value.trim()
+      const summary = fieldEl.querySelector("[data-field-summary]")
+      if (summary) {
+        summary.replaceChildren(document.createTextNode(label || handle || "Untitled field"))
+        const typeLabel = document.createElement("span")
+        typeLabel.className = "plum-blueprint-field-type"
+        typeLabel.textContent = type || "text"
+        summary.append(typeLabel)
+      }
       fieldEl.querySelectorAll('[data-field-config]').forEach(configEl => {
         const configTypes = configEl.dataset.fieldConfig.split(" ")
-        configEl.classList.toggle("hidden", !configTypes.includes(type))
+        const multipleAllowed = !configEl.hasAttribute("data-multiple-only") || type !== "relationship" || fieldEl.querySelector('[data-field="multiple"]')?.checked
+        configEl.classList.toggle("hidden", !configTypes.includes(type) || !multipleAllowed)
       })
     })
   }

data/app/javascript/controllers/plum/conditional_fields_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.refresh = this.refresh.bind(this)
+    this.element.addEventListener("input", this.refresh)
+    this.element.addEventListener("change", this.refresh)
+    this.refresh()
+  }
+
+  disconnect() {
+    this.element.removeEventListener("input", this.refresh)
+    this.element.removeEventListener("change", this.refresh)
+  }
+
+  refresh() {
+    this.element.querySelectorAll("[data-field-condition]").forEach(field => {
+      const condition = JSON.parse(field.dataset.fieldCondition || "{}")
+      const values = this.valuesFor(condition.field)
+      const expected = String(condition.value ?? "")
+      let visible = true
+
+      if (condition.operator === "equals") visible = values.includes(expected)
+      if (condition.operator === "not_equals") visible = !values.includes(expected)
+      if (condition.operator === "contains") visible = values.some(value => value.includes(expected))
+      if (condition.operator === "empty") visible = values.length === 0 || values.every(value => !value)
+      if (condition.operator === "not_empty") visible = values.some(Boolean)
+
+      field.classList.toggle("hidden", !visible)
+      field.querySelectorAll("input, select, textarea, button").forEach(input => {
+        if (input.type !== "hidden") input.disabled = !visible
+      })
+    })
+  }
+
+  valuesFor(handle) {
+    if (!handle) return []
+    const selector = `[name="entry[data][${CSS.escape(handle)}]"], [name="entry[data][${CSS.escape(handle)}][]"]`
+    return Array.from(this.element.querySelectorAll(selector)).filter(input => {
+      return !["checkbox", "radio"].includes(input.type) || input.checked
+    }).map(input => input.value)
+  }
+}

data/app/javascript/controllers/plum/focal_point_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["preview", "x", "y", "label"]
+
+  connect() {
+    this.refresh()
+  }
+
+  refresh() {
+    const x = this.xTarget.value
+    const y = this.yTarget.value
+    if (this.hasPreviewTarget) this.previewTarget.style.objectPosition = `${x}% ${y}%`
+    if (this.hasLabelTarget) this.labelTarget.textContent = `${x}% × ${y}%`
+  }
+}

data/app/javascript/controllers/plum/structured_field_controller.js

@@ -0,0 +1,133 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "rows", "empty", "add"]
+  static values = { type: String, fields: Array, minItems: Number, maxItems: Number }
+
+  connect() {
+    this.value = this.read()
+    this.render()
+  }
+
+  add(event) {
+    event.preventDefault()
+    if (this.hasMaxItemsValue && this.value.length >= this.maxItemsValue) return
+    this.value.push(this.typeValue === "list" ? "" : {})
+    this.render()
+  }
+
+  remove(event) {
+    event.preventDefault()
+    if (this.hasMinItemsValue && this.value.length <= this.minItemsValue) return
+    this.value.splice(Number(event.currentTarget.dataset.index), 1)
+    this.render()
+  }
+
+  move(event) {
+    event.preventDefault()
+    const index = Number(event.currentTarget.dataset.index)
+    const target = index + Number(event.currentTarget.dataset.direction)
+    if (target < 0 || target >= this.value.length) return
+    const [row] = this.value.splice(index, 1)
+    this.value.splice(target, 0, row)
+    this.render()
+  }
+
+  changed(event) {
+    const index = Number(event.currentTarget.dataset.index)
+    const field = event.currentTarget.dataset.field
+    const value = event.currentTarget.type === "checkbox" ? event.currentTarget.checked : event.currentTarget.value
+    if (this.typeValue === "list") this.value[index] = value
+    else this.value[index][field] = value
+    this.serialize()
+  }
+
+  read() {
+    try {
+      const parsed = JSON.parse(this.inputTarget.value || (this.typeValue === "group" ? "{}" : "[]"))
+      if (this.typeValue === "group") return [parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {}]
+      return Array.isArray(parsed) ? parsed : []
+    } catch (_error) {
+      return this.typeValue === "group" ? [{}] : []
+    }
+  }
+
+  serialize() {
+    this.inputTarget.value = JSON.stringify(this.typeValue === "group" ? (this.value[0] || {}) : this.value)
+  }
+
+  render() {
+    this.rowsTarget.innerHTML = ""
+    this.value.forEach((row, index) => this.rowsTarget.appendChild(this.row(row, index)))
+    if (this.hasEmptyTarget) this.emptyTarget.classList.toggle("hidden", this.value.length > 0)
+    if (this.hasAddTarget) this.addTarget.disabled = this.hasMaxItemsValue && this.value.length >= this.maxItemsValue
+    this.serialize()
+  }
+
+  row(row, index) {
+    const wrapper = document.createElement("div")
+    wrapper.className = "space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-4"
+
+    const fields = this.typeValue === "list" ? [{ handle: "value", label: "Value", type: "text" }] : this.fieldsValue
+    fields.forEach(field => wrapper.appendChild(this.control(field, row, index)))
+
+    if (this.typeValue !== "group") {
+      const controls = document.createElement("div")
+      controls.className = "flex items-center gap-3"
+      controls.appendChild(this.actionButton("↑ Up", "move", index, { direction: -1, disabled: index === 0 }))
+      controls.appendChild(this.actionButton("↓ Down", "move", index, { direction: 1, disabled: index === this.value.length - 1 }))
+      const remove = document.createElement("button")
+      remove.type = "button"
+      remove.textContent = "Remove"
+      remove.dataset.index = index
+      remove.dataset.action = "plum--structured-field#remove"
+      remove.disabled = this.hasMinItemsValue && this.value.length <= this.minItemsValue
+      remove.className = "text-sm font-medium text-red-600 hover:text-red-700 disabled:opacity-30"
+      controls.appendChild(remove)
+      wrapper.appendChild(controls)
+    }
+    return wrapper
+  }
+
+  actionButton(label, action, index, options = {}) {
+    const button = document.createElement("button")
+    button.type = "button"
+    button.textContent = label
+    button.dataset.index = index
+    button.dataset.action = `plum--structured-field#${action}`
+    if (options.direction) button.dataset.direction = options.direction
+    button.disabled = options.disabled || false
+    button.className = "text-sm text-gray-600 hover:text-gray-900 disabled:opacity-30"
+    return button
+  }
+
+  control(field, row, index) {
+    const label = document.createElement("label")
+    label.className = "block space-y-1"
+    const caption = document.createElement("span")
+    caption.className = "block text-xs font-medium text-gray-600"
+    caption.textContent = field.label || field.handle
+    label.appendChild(caption)
+    if (field.instructions) {
+      const instructions = document.createElement("span")
+      instructions.className = "block text-xs text-gray-500"
+      instructions.textContent = field.instructions
+      label.appendChild(instructions)
+    }
+
+    const input = field.type === "textarea" ? document.createElement("textarea") : document.createElement("input")
+    if (field.type !== "textarea") input.type = field.type === "boolean" ? "checkbox" : (field.type === "number" ? "number" : field.type === "date" ? "date" : "text")
+    const stored = this.typeValue === "list" ? row : row?.[field.handle]
+    const value = stored === undefined || stored === null ? field.default : stored
+    if (input.type === "checkbox") input.checked = value === true || value === "true"
+    else input.value = value ?? ""
+    if (input.type !== "checkbox") input.className = "block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm"
+    if (field.placeholder) input.placeholder = field.placeholder
+    input.required = field.required === true || field.required === "true"
+    input.dataset.index = index
+    input.dataset.field = field.handle
+    input.dataset.action = "input->plum--structured-field#changed change->plum--structured-field#changed"
+    label.appendChild(input)
+    return label
+  }
+}

data/app/models/plum/asset.rb

@@ -5,6 +5,7 @@ module Plum
     has_one_attached :file
 
     validates :file, presence: true
+    validates :focal_x, :focal_y, numericality: { only_integer: true, greater_than_or_equal_to: 0, less_than_or_equal_to: 100 }
     validate :file_must_be_image
 
     before_validation :normalize_folder
@@ -49,7 +50,10 @@ module Plum
         "filename" => filename,
         "content_type" => content_type.to_s,
         "byte_size" => file.attached? ? file.byte_size : nil,
-        "folder" => folder.to_s
+        "folder" => folder.to_s,
+        "focal_x" => focal_x,
+        "focal_y" => focal_y,
+        "object_position" => "#{focal_x}% #{focal_y}%"
       }
     end
 

data/app/models/plum/content_type.rb

@@ -2,13 +2,14 @@ module Plum
   class ContentType < ApplicationRecord
     include SiteScoped
 
-    FIELD_TYPES = %w[text textarea rich_text image boolean select date relationship blocks].freeze
+    FIELD_TYPES = FieldTypeRegistry.handles.freeze
 
     has_many :entries, dependent: :destroy
 
     validates :name, presence: true
     validates :handle, presence: true, uniqueness: { scope: :site_id }, format: { with: /\A[a-z][a-z0-9_]*\z/ }
     validate :route_prefix_format
+    validate :blueprint_fields_are_valid
 
     before_validation :generate_handle, on: :create
 
@@ -31,5 +32,66 @@ module Plum
 
       errors.add(:blueprint, "route prefix must contain lowercase letters, numbers, and hyphens")
     end
+
+    def blueprint_fields_are_valid
+      handles = fields.map { |field| field["handle"].to_s }
+      fields.each do |field|
+        handle = field["handle"].to_s
+        type = field["type"].to_s
+        errors.add(:blueprint, "field handle #{handle.inspect} is invalid") unless handle.match?(/\A[a-z][a-z0-9_]*\z/)
+        errors.add(:blueprint, "field #{handle.presence || '(unnamed)'} has unknown type #{type.inspect}") unless FieldTypeRegistry.include?(type)
+        validate_nested_fields(field, handle) if %w[group repeater].include?(type)
+        validate_collection_configuration(field, handle) if %w[list repeater images].include?(type) || (type == "relationship" && ActiveModel::Type::Boolean.new.cast(field["multiple"]))
+        validate_number_configuration(field, handle) if type == "number"
+        validate_presentation_configuration(field, handle, handles)
+      end
+    end
+
+    def validate_presentation_configuration(field, handle, handles)
+      width = Integer(field["width"], exception: false) if field["width"].present?
+      errors.add(:blueprint, "field #{handle} width must be between 1 and 12") if field["width"].present? && (!width || !width.between?(1, 12))
+
+      condition = field["condition"]
+      return if condition.blank?
+
+      source = condition["field"].to_s
+      operator = condition["operator"].to_s
+      errors.add(:blueprint, "field #{handle} condition references an unknown field") unless handles.include?(source) && source != handle
+      unless %w[equals not_equals contains empty not_empty].include?(operator)
+        errors.add(:blueprint, "field #{handle} condition has an invalid operator")
+      end
+    end
+
+    def validate_collection_configuration(field, handle)
+      minimum = Integer(field["min_items"], exception: false) if field["min_items"].present?
+      maximum = Integer(field["max_items"], exception: false) if field["max_items"].present?
+      errors.add(:blueprint, "field #{handle} minimum items must be zero or greater") if field["min_items"].present? && (!minimum || minimum.negative?)
+      errors.add(:blueprint, "field #{handle} maximum items must be zero or greater") if field["max_items"].present? && (!maximum || maximum.negative?)
+      errors.add(:blueprint, "field #{handle} maximum items must be at least its minimum") if minimum && maximum && maximum < minimum
+    end
+
+    def validate_number_configuration(field, handle)
+      minimum = Float(field["min"], exception: false) if field["min"].present?
+      maximum = Float(field["max"], exception: false) if field["max"].present?
+      step = Float(field["step"], exception: false) if field["step"].present?
+      errors.add(:blueprint, "field #{handle} minimum must be numeric") if field["min"].present? && !minimum
+      errors.add(:blueprint, "field #{handle} maximum must be numeric") if field["max"].present? && !maximum
+      errors.add(:blueprint, "field #{handle} step must be greater than zero") if field["step"].present? && (!step || !step.positive?)
+      errors.add(:blueprint, "field #{handle} maximum must be at least its minimum") if minimum && maximum && maximum < minimum
+    end
+
+    def validate_nested_fields(field, parent_handle)
+      nested_fields = Array(field["fields"])
+      errors.add(:blueprint, "field #{parent_handle} must define nested fields") if nested_fields.empty?
+
+      nested_fields.each do |nested|
+        nested_handle = nested["handle"].to_s
+        nested_type = nested["type"].to_s
+        errors.add(:blueprint, "field #{parent_handle} has invalid nested handle #{nested_handle.inspect}") unless nested_handle.match?(/\A[a-z][a-z0-9_]*\z/)
+        unless FieldTypeRegistry::NESTED_FIELD_TYPES.include?(nested_type)
+          errors.add(:blueprint, "field #{parent_handle}.#{nested_handle.presence || '(unnamed)'} has unsupported nested type #{nested_type.inspect}")
+        end
+      end
+    end
   end
 end