nti_receipt_builder 0.1.0

data/app/controllers/concerns/nti_receipt_builder/templates_controller.rb

@@ -0,0 +1,170 @@
+# frozen_string_literal: true
+
+module NtiReceiptBuilder
+  # The builder's actions, for inclusion in a host controller that owns routing,
+  # authorization and tenancy.
+  #
+  #   class Partner::ReceiptTemplatesController < PartnerController
+  #     include NtiReceiptBuilder::TemplatesController
+  #
+  #     private
+  #
+  #     def receipt_owner = current_account
+  #   end
+  #
+  # Every query runs through `receipt_owner`, so the tenant boundary stays visible in host
+  # code rather than in a configured lambda. Hosts may override any action or navigation
+  # hook — a method defined in the including class wins over the one mixed in here.
+  module TemplatesController
+    extend ActiveSupport::Concern
+
+    VIEW_PREFIX = 'nti_receipt_builder/templates'
+
+    included do
+      before_action :find_receipt_template,
+                    only: %i[edit update destroy preview render_preview print set_default]
+    end
+
+    # Append the gem's view prefix so bare `render :edit` resolves to the engine's templates.
+    # The host's own prefixes stay first, so dropping a receipt_templates/edit.html.erb into the
+    # host shadows the gem's copy without any configuration.
+    def _prefixes
+      @_prefixes ||= super + [VIEW_PREFIX]
+    end
+
+    def new
+      @receipt_template = receipt_templates.new(default_template_attributes)
+    end
+
+    def create
+      form = TemplateForm.new(receipt_template_params)
+
+      unless form.valid?
+        @errors = form.errors.full_messages
+        @receipt_template = receipt_templates.new(default_template_attributes)
+        return render_create_failure
+      end
+
+      @receipt_template = receipt_templates.new(form.attributes)
+
+      if @receipt_template.save
+        redirect_to after_create_path(@receipt_template),
+                    notice: 'Receipt template created! Now build your layout.'
+      else
+        @errors = @receipt_template.errors.full_messages
+        render_create_failure
+      end
+    end
+
+    def edit; end
+
+    def update
+      form = TemplateForm.new(receipt_template_params)
+
+      if form.valid?
+        persist_update(form)
+      else
+        @errors = form.errors.full_messages
+      end
+
+      render :update, status: @errors.empty? ? :ok : :unprocessable_content
+    end
+
+    def destroy
+      @receipt_template.destroy
+      redirect_to after_destroy_path, notice: 'Receipt template deleted!'
+    end
+
+    def preview
+      @render_result = Renderer.new(template: @receipt_template).call
+    end
+
+    def render_preview
+      form = TemplateForm.new(receipt_template_params)
+
+      @draft = @receipt_template.dup
+      @draft.assign_attributes(form.attributes.except(:lock_version))
+
+      if !form.valid?
+        @render_result = nil
+        @draft_errors = form.errors.full_messages
+      elsif @draft.valid?
+        @render_result = Renderer.new(template: @draft).call
+        @draft_errors = []
+      else
+        @render_result = nil
+        @draft_errors = @draft.errors.full_messages
+      end
+    end
+
+    def print
+      @render_result = Renderer.new(template: @receipt_template).call
+
+      render :print, layout: false
+    end
+
+    def set_default
+      SetDefault.new(template: @receipt_template).call
+
+      redirect_to after_set_default_path, notice: 'Default receipt template updated!'
+    end
+
+    private
+
+    # Hosts MUST implement this. Every query is scoped through it, which is what keeps a
+    # multi-tenant host from leaking templates across tenants.
+    def receipt_owner
+      raise NotImplementedError, "#{self.class.name} must define #receipt_owner"
+    end
+
+    def receipt_templates
+      NtiReceiptBuilder.template_class.where(owner: receipt_owner)
+    end
+
+    def find_receipt_template
+      @receipt_template = receipt_templates.find_by(id: params[:id])
+
+      redirect_to after_destroy_path, alert: 'Receipt template not found' unless @receipt_template
+    end
+
+    # The new-template form submits as a Turbo Stream, which patches the error region in place;
+    # a plain HTML submit re-renders the whole form. Both carry @errors.
+    def render_create_failure
+      respond_to do |format|
+        format.turbo_stream { render :create, status: :unprocessable_content }
+        format.html { render :new, status: :unprocessable_content }
+      end
+    end
+
+    def persist_update(form)
+      @receipt_template.assign_attributes(form.attributes)
+      @errors = @receipt_template.save ? [] : @receipt_template.errors.full_messages
+      @receipt_template.reload if @errors.empty?
+    rescue ActiveRecord::StaleObjectError
+      @errors = ['Someone else has already saved changes to this template. Please reload and try again.']
+    end
+
+    def receipt_template_params
+      params.expect(
+        receipt_template: %i[
+          name paper_size_key paper_width_mm paper_height_mm orientation
+          height_mode margin_top_mm margin_right_mm margin_bottom_mm
+          margin_left_mm layout lock_version
+        ]
+      ).to_h.symbolize_keys
+    end
+
+    def default_template_attributes
+      {
+        paper_size_key: 'roll_80mm', paper_width_mm: 80.0, paper_height_mm: 200.0,
+        orientation: 'portrait', height_mode: 'content',
+        margin_top_mm: 2, margin_right_mm: 2, margin_bottom_mm: 2, margin_left_mm: 2
+      }
+    end
+
+    # Overridable navigation hooks — hosts with named routes should override these.
+    def after_create_path(template) = url_for(action: :edit, id: template.id)
+    def after_destroy_path = url_for(action: :index)
+    def after_set_default_path = url_for(action: :index)
+  end
+end

data/app/helpers/nti_receipt_builder/render_helper.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module NtiReceiptBuilder
+  # View helpers for the shared render partials. These are rendered from more than one host
+  # controller — the designer's preview/print and a printed receipt — so they live here rather
+  # than in a controller-scoped helper.
+  module RenderHelper
+    # The paper element's inline size: fixed to the declared dimensions, except in "content"
+    # height mode where it grows to fit whatever the renderer computed so nothing gets clipped.
+    def paper_style(receipt_template, render_result)
+      height_mm = if receipt_template.content_layout?
+                    [receipt_template.paper_height_mm.to_f,
+                     render_result.content_height_mm + receipt_template.margin_bottom_mm.to_f].max
+                  else
+                    receipt_template.paper_height_mm.to_f
+                  end
+
+      "width: #{receipt_template.paper_width_mm.to_f}mm; height: #{height_mm}mm;"
+    end
+  end
+end

data/app/models/nti_receipt_builder/template.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module NtiReceiptBuilder
+  # A receipt template: paper geometry plus a jsonb layout of positioned elements.
+  #
+  # Hosts may subclass this to attach their own concerns — audit trail, archivable status,
+  # tenancy — and point `config.template_class` at the subclass so the gem's own queries
+  # return host instances. `inheritance_column = nil` keeps the subclass sharing this table
+  # with no STI type condition and no `type` column to maintain.
+  class Template < ActiveRecord::Base
+    self.table_name = 'nti_receipt_templates'
+    self.inheritance_column = nil
+
+    belongs_to :owner, polymorphic: true
+
+    ORIENTATIONS = %w[portrait landscape].freeze
+    HEIGHT_MODES = %w[fixed content].freeze
+
+    MIN_PAPER_DIMENSION_MM = 10.0
+    MAX_PAPER_DIMENSION_MM = 1000.0
+    MIN_MARGIN_MM = 0.0
+    MAX_MARGIN_MM = 100.0
+
+    PAPER_PRESETS = {
+      'roll_58mm' => { label: '58mm Roll', width_mm: 58.0, height_mm: 297.0, orientation: 'portrait' },
+      'roll_80mm' => { label: '80mm Roll', width_mm: 80.0, height_mm: 297.0, orientation: 'portrait' },
+      'a4' => { label: 'A4', width_mm: 210.0, height_mm: 297.0, orientation: 'portrait' },
+      'letter' => { label: 'Letter', width_mm: 215.9, height_mm: 279.4, orientation: 'portrait' },
+      'custom' => { label: 'Custom', width_mm: 80.0, height_mm: 200.0, orientation: 'portrait' }
+    }.freeze
+
+    validates :name, presence: true, length: { maximum: 120 }
+    validates :paper_size_key, presence: true, inclusion: { in: PAPER_PRESETS.keys }
+    validates :orientation, presence: true, inclusion: { in: ORIENTATIONS }
+    validates :height_mode, presence: true, inclusion: { in: HEIGHT_MODES }
+    validates :paper_width_mm, :paper_height_mm,
+              presence: true,
+              numericality: { greater_than_or_equal_to: MIN_PAPER_DIMENSION_MM,
+                              less_than_or_equal_to: MAX_PAPER_DIMENSION_MM }
+    validates :margin_top_mm, :margin_right_mm, :margin_bottom_mm, :margin_left_mm,
+              presence: true,
+              numericality: { greater_than_or_equal_to: MIN_MARGIN_MM,
+                              less_than_or_equal_to: MAX_MARGIN_MM }
+    validate :margins_fit_within_paper
+    validate :layout_structure
+
+    def content_layout? = height_mode == 'content'
+
+    private
+
+    def margins_fit_within_paper
+      return if paper_width_mm.blank? || paper_height_mm.blank?
+
+      if margin_left_mm.to_f + margin_right_mm.to_f >= paper_width_mm.to_f
+        errors.add(:base, 'Left and right margins together exceed the paper width')
+      end
+
+      return if content_layout?
+      return if margin_top_mm.to_f + margin_bottom_mm.to_f < paper_height_mm.to_f
+
+      errors.add(:base, 'Top and bottom margins together exceed the paper height')
+    end
+
+    def layout_structure
+      return if layout.blank?
+
+      LayoutValidator.new(
+        layout: layout,
+        paper_width_mm: paper_width_mm.to_f,
+        paper_height_mm: paper_height_mm.to_f,
+        margin_top_mm: margin_top_mm.to_f,
+        margin_right_mm: margin_right_mm.to_f,
+        margin_bottom_mm: margin_bottom_mm.to_f,
+        margin_left_mm: margin_left_mm.to_f,
+        height_mode: height_mode
+      ).call.each { |message| errors.add(:layout, message) }
+    end
+  end
+end

data/app/views/nti_receipt_builder/render/_order_lines_element.html.erb

@@ -0,0 +1,36 @@
+<div class="nrb-receipt-element nrb-receipt-order-lines"
+    style="position: absolute; left: <%= presenter.x_mm %>mm; top: <%= presenter.y_mm %>mm; width: <%= presenter.width_mm %>mm; z-index: <%= presenter.z_index %>; font-size: <%= presenter.font_size_pt %>pt;">
+  <table class="nrb-receipt-order-lines-table" style="line-height: <%= presenter.text_line_height_mm %>mm;">
+    <colgroup>
+      <% presenter.columns.each do |column| %>
+        <col style="width: <%= presenter.column_width_pct(column) %>%;">
+      <% end %>
+    </colgroup>
+
+    <% if presenter.show_header? %>
+      <thead>
+        <tr class="nrb-receipt-order-lines-header">
+          <% presenter.columns.each do |column| %>
+            <th style="text-align: <%= column['align'] %>; padding-bottom: <%= presenter.row_spacing_mm %>mm;"><%= column['label'] %></th>
+          <% end %>
+        </tr>
+      </thead>
+    <% end %>
+
+    <tbody>
+      <% if presenter.empty? %>
+        <tr class="nrb-receipt-order-lines-empty">
+          <td colspan="<%= [presenter.columns.size, 1].max %>" class="text-secondary" style="padding-bottom: <%= presenter.row_spacing_mm %>mm;">No line items</td>
+        </tr>
+      <% else %>
+        <% presenter.rows.each do |row| %>
+          <tr>
+            <% presenter.columns.each do |column| %>
+              <td style="text-align: <%= column['align'] %>; padding-bottom: <%= presenter.row_spacing_mm %>mm;"><%= row[column['key']] %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/nti_receipt_builder/render/_overflow_banner.html.erb

@@ -0,0 +1,5 @@
+<div class="alert alert-warning nrb-receipt-overflow-banner" role="alert">
+  <span class="material-symbols-outlined pe-1">warning</span>
+  This layout's content exceeds the paper height and may be cut off when printed.
+  Consider switching to "Grows with content" height mode or repositioning elements.
+</div>

data/app/views/nti_receipt_builder/render/_paper.html.erb

@@ -0,0 +1,12 @@
+<div class="nrb-receipt-paper-render" style="<%= paper_style(receipt_template, render_result) %>">
+  <% render_result.elements.each do |presenter| %>
+    <% case presenter.type %>
+    <% when 'variable' %>
+      <%= render 'nti_receipt_builder/render/variable_element', presenter: presenter %>
+    <% when 'text' %>
+      <%= render 'nti_receipt_builder/render/text_element', presenter: presenter %>
+    <% when 'order_lines' %>
+      <%= render 'nti_receipt_builder/render/order_lines_element', presenter: presenter %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/nti_receipt_builder/render/_text_element.html.erb

@@ -0,0 +1 @@
+<div class="nrb-receipt-element" style="<%= presenter.css_style %>"><%= presenter.display_text %></div>

data/app/views/nti_receipt_builder/render/_variable_element.html.erb

@@ -0,0 +1 @@
+<div class="nrb-receipt-element" style="<%= presenter.css_style %>"><%= presenter.display_text %></div>

data/app/views/nti_receipt_builder/templates/_canvas.html.erb

@@ -0,0 +1,33 @@
+<div id="receipt-canvas-panel" class="nrb-receipt-panel nrb-receipt-panel--canvas"
+    data-controller="nrb-canvas"
+    data-nrb-canvas-width-mm-value="<%= @receipt_template.paper_width_mm %>"
+    data-nrb-canvas-height-mm-value="<%= @receipt_template.paper_height_mm %>"
+    data-nrb-canvas-height-mode-value="<%= @receipt_template.height_mode %>"
+    data-nrb-canvas-margin-top-mm-value="<%= @receipt_template.margin_top_mm %>"
+    data-nrb-canvas-margin-right-mm-value="<%= @receipt_template.margin_right_mm %>"
+    data-nrb-canvas-margin-bottom-mm-value="<%= @receipt_template.margin_bottom_mm %>"
+    data-nrb-canvas-margin-left-mm-value="<%= @receipt_template.margin_left_mm %>"
+    data-nrb-canvas-grid-mm-value="2"
+    data-nrb-canvas-variable-labels-value="<%= NtiReceiptBuilder.variables_class.labels.to_json %>">
+  <div class="nrb-receipt-toolbar">
+    <h3 class="card-title mb-0">Canvas</h3>
+    <div class="nrb-receipt-zoom">
+      <span class="material-symbols-outlined">zoom_out</span>
+      <input type="range" min="0.5" max="2" step="0.1" value="1"
+          data-nrb-canvas-target="zoomRange"
+          data-action="input->nrb-canvas#zoomChanged">
+      <span class="material-symbols-outlined">zoom_in</span>
+      <span class="nrb-receipt-zoom-label" data-nrb-canvas-target="zoomLabel">100%</span>
+    </div>
+  </div>
+
+  <div class="nrb-receipt-viewport" data-nrb-canvas-target="viewport"
+      data-action="pointerdown->nrb-canvas#paperClicked">
+    <div class="nrb-receipt-paper" data-nrb-canvas-target="paper">
+      <div class="nrb-receipt-paper-margins" data-nrb-canvas-target="marginGuides"></div>
+      <div class="nrb-receipt-paper-elements" data-nrb-canvas-target="elementsLayer"></div>
+    </div>
+  </div>
+
+  <p class="text-secondary nrb-receipt-hint" data-nrb-builder-target="elementCount">0 elements</p>
+</div>

data/app/views/nti_receipt_builder/templates/_elements_panel.html.erb

@@ -0,0 +1,49 @@
+<div class="nrb-receipt-panel nrb-receipt-panel--elements">
+  <h3 class="card-title">Elements</h3>
+  <p class="text-secondary nrb-receipt-hint">
+    Drag an element onto the receipt, or click to drop it in the middle.
+  </p>
+
+  <div class="nrb-receipt-palette-group">
+    <span class="nrb-receipt-palette-label">Variables</span>
+    <div class="nrb-receipt-palette">
+      <% NtiReceiptBuilder.variables_class.scalar_keys.each do |key| %>
+        <button type="button"
+            class="nrb-receipt-palette-btn"
+            data-nrb-builder-type-param="variable"
+            data-nrb-builder-key-param="<%= key %>"
+            data-action="pointerdown->nrb-builder#startPaletteDrag">
+          <span class="material-symbols-outlined">data_object</span>
+          <%= NtiReceiptBuilder.variables_class.labels[key] %>
+        </button>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="nrb-receipt-palette-group">
+    <span class="nrb-receipt-palette-label">Blocks</span>
+    <div class="nrb-receipt-palette">
+      <button type="button"
+          class="nrb-receipt-palette-btn"
+          data-nrb-builder-type-param="text"
+          data-action="pointerdown->nrb-builder#startPaletteDrag">
+        <span class="material-symbols-outlined">text_fields</span>
+        Custom Text
+      </button>
+      <% if (collection = NtiReceiptBuilder.variables_class.collection_definition) %>
+        <button type="button"
+            class="nrb-receipt-palette-btn"
+            data-nrb-builder-type-param="order_lines"
+            data-action="pointerdown->nrb-builder#startPaletteDrag">
+          <span class="material-symbols-outlined">receipt_long</span>
+          <%= collection.label %>
+        </button>
+      <% end %>
+    </div>
+  </div>
+
+  <p class="text-secondary nrb-receipt-hint">
+    Select an element on the canvas to edit it, or press
+    <code>Delete</code> to remove it.
+  </p>
+</div>

data/app/views/nti_receipt_builder/templates/_errors.html.erb

@@ -0,0 +1,21 @@
+<div class="alert alert-danger alert-dismissible" role="alert">
+  <div class="alert-icon">
+    <!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon alert-icon icon-2">
+      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
+      <path d="M12 8v4"></path>
+      <path d="M12 16h.01"></path>
+    </svg>
+  </div>
+  <div>
+    <h4 class="alert-heading">Please review the following issue and try again:</h4>
+    <div class="alert-description">
+      <ul class="alert-list">
+        <% errors.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>

data/app/views/nti_receipt_builder/templates/_lock_version_field.html.erb

@@ -0,0 +1,2 @@
+<%= hidden_field_tag 'receipt_template[lock_version]', receipt_template.lock_version,
+    id: 'receipt_template_lock_version' %>

data/app/views/nti_receipt_builder/templates/_print_assets.html.erb

@@ -0,0 +1,15 @@
+<%#
+  Assets for the standalone print document. Both helpers are guarded so a host without
+  propshaft or importmap still renders a correct receipt — it just loses auto-print.
+
+  To control this precisely, shadow the partial from your own controller's view directory,
+  e.g. app/views/partner/receipt_templates/_print_assets.html.erb. Host prefixes are searched
+  before the gem's, so your copy wins with no configuration.
+%>
+<% sheets = Array(NtiReceiptBuilder.config.print_stylesheet).compact %>
+<% if sheets.any? && respond_to?(:stylesheet_link_tag) %>
+  <%= stylesheet_link_tag(*sheets) %>
+<% end %>
+<% if respond_to?(:javascript_importmap_tags) %>
+  <%= javascript_importmap_tags %>
+<% end %>

data/app/views/nti_receipt_builder/templates/_properties_panel.html.erb

@@ -0,0 +1,8 @@
+<div id="receipt-properties-panel" class="nrb-receipt-panel nrb-receipt-panel--properties"
+    data-controller="nrb-properties"
+    data-nrb-properties-scalar-variables-value="<%= NtiReceiptBuilder.variables_class.scalar_keys.index_with { |key| NtiReceiptBuilder.variables_class.labels[key] }.to_json %>">
+  <h3 class="card-title">Properties</h3>
+  <div data-nrb-properties-target="content">
+    <p class="text-secondary nrb-receipt-hint">Select an element on the canvas to edit its properties.</p>
+  </div>
+</div>

data/app/views/nti_receipt_builder/templates/_settings_panel.html.erb

@@ -0,0 +1,130 @@
+<div class="nrb-receipt-panel nrb-receipt-panel--settings">
+  <h3 class="card-title">Settings</h3>
+
+  <div class="form-group mb-3">
+    <%= f.label :name, 'Template Name', class: 'form-label' %>
+    <%= f.text_field :name, class: 'form-control' %>
+  </div>
+
+  <div class="form-group mb-3">
+    <%= f.label :paper_size_key, 'Paper Size', class: 'form-label' %>
+    <%= f.select :paper_size_key,
+        NtiReceiptBuilder::Template::PAPER_PRESETS.map { |key, preset| [preset[:label], key] },
+        {},
+        class: 'form-select',
+        data: {
+          nrb_builder_target: 'paperSizeSelect',
+          action: 'change->nrb-builder#paperPresetChanged'
+        } %>
+  </div>
+
+  <div class="row g-3">
+    <div class="col">
+      <div class="form-group mb-3">
+        <%= f.label :paper_width_mm, 'Width (mm)', class: 'form-label' %>
+        <%= f.number_field :paper_width_mm, step: 0.1,
+            min: NtiReceiptBuilder::Template::MIN_PAPER_DIMENSION_MM,
+            max: NtiReceiptBuilder::Template::MAX_PAPER_DIMENSION_MM,
+            class: 'form-control',
+            data: {
+              nrb_builder_target: 'widthInput',
+              action: 'input->nrb-builder#settingsChanged'
+            } %>
+      </div>
+    </div>
+    <div class="col">
+      <div class="form-group mb-3">
+        <%= f.label :paper_height_mm, 'Height (mm)', class: 'form-label' %>
+        <%= f.number_field :paper_height_mm, step: 0.1,
+            min: NtiReceiptBuilder::Template::MIN_PAPER_DIMENSION_MM,
+            max: NtiReceiptBuilder::Template::MAX_PAPER_DIMENSION_MM,
+            class: 'form-control',
+            data: {
+              nrb_builder_target: 'heightInput',
+              action: 'input->nrb-builder#settingsChanged'
+            } %>
+      </div>
+    </div>
+  </div>
+
+  <div class="row g-3">
+    <div class="col">
+      <div class="form-group mb-3">
+        <%= f.label :orientation, 'Orientation', class: 'form-label' %>
+        <%= f.select :orientation,
+            NtiReceiptBuilder::Template::ORIENTATIONS.map { |value| [value.titleize, value] },
+            {},
+            class: 'form-select',
+            data: {
+              nrb_builder_target: 'orientationSelect',
+              action: 'change->nrb-builder#settingsChanged'
+            } %>
+      </div>
+    </div>
+    <div class="col">
+      <div class="form-group mb-3">
+        <%= f.label :height_mode, 'Height Mode', class: 'form-label' %>
+        <%= f.select :height_mode,
+            [['Fixed Height', 'fixed'], ['Grows With Content', 'content']],
+            {},
+            class: 'form-select',
+            data: {
+              nrb_builder_target: 'heightModeSelect',
+              action: 'change->nrb-builder#settingsChanged'
+            } %>
+      </div>
+    </div>
+  </div>
+
+  <label class="form-label">Margins (mm)</label>
+  <div class="row g-3">
+    <div class="col-6">
+      <div class="form-group mb-3">
+        <%= f.label :margin_top_mm, 'Top', class: 'form-label' %>
+        <%= f.number_field :margin_top_mm, step: 0.1,
+            min: NtiReceiptBuilder::Template::MIN_MARGIN_MM, max: NtiReceiptBuilder::Template::MAX_MARGIN_MM,
+            class: 'form-control',
+            data: {
+              nrb_builder_target: 'marginTopInput',
+              action: 'input->nrb-builder#settingsChanged'
+            } %>
+      </div>
+    </div>
+    <div class="col-6">
+      <div class="form-group mb-3">
+        <%= f.label :margin_right_mm, 'Right', class: 'form-label' %>
+        <%= f.number_field :margin_right_mm, step: 0.1,
+            min: NtiReceiptBuilder::Template::MIN_MARGIN_MM, max: NtiReceiptBuilder::Template::MAX_MARGIN_MM,
+            class: 'form-control',
+            data: {
+              nrb_builder_target: 'marginRightInput',
+              action: 'input->nrb-builder#settingsChanged'
+            } %>
+      </div>
+    </div>
+    <div class="col-6">
+      <div class="form-group mb-3">
+        <%= f.label :margin_bottom_mm, 'Bottom', class: 'form-label' %>
+        <%= f.number_field :margin_bottom_mm, step: 0.1,
+            min: NtiReceiptBuilder::Template::MIN_MARGIN_MM, max: NtiReceiptBuilder::Template::MAX_MARGIN_MM,
+            class: 'form-control',
+            data: {
+              nrb_builder_target: 'marginBottomInput',
+              action: 'input->nrb-builder#settingsChanged'
+            } %>
+      </div>
+    </div>
+    <div class="col-6">
+      <div class="form-group mb-3">
+        <%= f.label :margin_left_mm, 'Left', class: 'form-label' %>
+        <%= f.number_field :margin_left_mm, step: 0.1,
+            min: NtiReceiptBuilder::Template::MIN_MARGIN_MM, max: NtiReceiptBuilder::Template::MAX_MARGIN_MM,
+            class: 'form-control',
+            data: {
+              nrb_builder_target: 'marginLeftInput',
+              action: 'input->nrb-builder#settingsChanged'
+            } %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/nti_receipt_builder/templates/create.turbo_stream.erb

@@ -0,0 +1,3 @@
+<% if @errors.any? %>
+  <%= turbo_stream.update 'errors', partial: 'nti_receipt_builder/templates/errors', locals: { errors: @errors } %>
+<% end %>

data/app/views/nti_receipt_builder/templates/edit.html.erb

@@ -0,0 +1,54 @@
+<% content_for :title, "Edit #{@receipt_template.name}" %>
+<% content_for :cardless, true %>
+
+<%= form_with model: @receipt_template, url: url_for(action: :update, id: @receipt_template.id), method: :patch,
+    scope: :receipt_template,
+    data: {
+      controller: 'nrb-builder',
+      nrb_builder_layout_value: @receipt_template.layout.to_json,
+      nrb_builder_presets_value: NtiReceiptBuilder::Template::PAPER_PRESETS.to_json,
+      nrb_builder_collection_columns_value:
+        (NtiReceiptBuilder.variables_class.collection_definition&.default_columns_config || []).to_json,
+      nrb_builder_nrb_canvas_outlet: '#receipt-canvas-panel',
+      nrb_builder_nrb_properties_outlet: '#receipt-properties-panel',
+      action: 'formdata->nrb-builder#writeLayoutToFormData ' \
+              'receipt-element:moved->nrb-builder#elementMoved ' \
+              'receipt-element:resized->nrb-builder#elementResized ' \
+              'receipt-element:selected->nrb-builder#elementSelected ' \
+              'receipt-canvas:deselect->nrb-builder#deselect ' \
+              'receipt-properties:changed->nrb-builder#propertiesChanged ' \
+              'receipt-properties:delete-requested->nrb-builder#removeSelected'
+    } do |f| %>
+
+  <div class="nrb-receipt-topbar">
+    <div>
+      <span class="nrb-receipt-topbar-name"><%= @receipt_template.name %></span>
+      <span class="text-secondary"><%= @receipt_template.paper_width_mm %>mm × <%= @receipt_template.paper_height_mm %>mm</span>
+    </div>
+    <div class="d-flex justify-content-end gap-2">
+      <%= f.button 'Live Preview', type: 'submit', class: 'btn btn-outline-secondary',
+          formaction: url_for(action: :render_preview, id: @receipt_template.id), formmethod: :post %>
+      <%= link_to url_for(action: :preview, id: @receipt_template.id),
+          class: 'btn btn-outline-secondary', target: '_blank', rel: 'noopener' do %>
+        <span class="material-symbols-outlined pe-1">visibility</span>Preview
+      <% end %>
+      <%= link_to 'Back to Templates', url_for(action: :index), class: 'btn btn-secondary' %>
+      <%= f.submit 'Save', class: 'btn btn-primary' %>
+    </div>
+  </div>
+
+  <div id="errors"></div>
+
+  <%= f.hidden_field :layout, value: @receipt_template.layout.to_json,
+      data: { nrb_builder_target: 'layoutField' } %>
+  <span id="lock_version_field"><%= render 'nti_receipt_builder/templates/lock_version_field', receipt_template: @receipt_template %></span>
+
+  <div class="nrb-receipt-builder">
+    <div class="nrb-receipt-builder-side">
+      <%= render 'nti_receipt_builder/templates/elements_panel' %>
+      <%= render 'nti_receipt_builder/templates/settings_panel', f: f %>
+    </div>
+    <%= render 'nti_receipt_builder/templates/canvas' %>
+    <%= render 'nti_receipt_builder/templates/properties_panel' %>
+  </div>
+<% end %>