jigsaw_engine 0.4.0

data/app/models/jigsaw/slot.rb

@@ -0,0 +1,109 @@
+module Jigsaw
+  class Slot < ApplicationRecord
+    belongs_to :layout
+    belongs_to :slot_template, optional: true
+
+    def self.slot_list_scope
+      :layout
+    end
+
+    def self.slot_uniqueness_scope
+      :layout_id
+    end
+
+    include SlotCompilable
+
+    # --- Template Linking ---
+
+    def effective_data_source
+      if linked_to_template? && slot_template
+        slot_template.data_source
+      else
+        data_source
+      end
+    end
+
+    def effective_data_compiled_source
+      if linked_to_template? && slot_template
+        slot_template.data_compiled_source
+      else
+        data_compiled_source
+      end
+    end
+
+    def effective_data_compiled_digest
+      if linked_to_template? && slot_template
+        slot_template.data_compiled_digest
+      else
+        data_compiled_digest
+      end
+    end
+
+    def effective_render_source
+      if linked_to_template? && slot_template
+        slot_template.render_source
+      else
+        render_source
+      end
+    end
+
+    def effective_render_compiled_source
+      if linked_to_template? && slot_template
+        slot_template.render_compiled_source
+      else
+        render_compiled_source
+      end
+    end
+
+    def effective_render_compiled_digest
+      if linked_to_template? && slot_template
+        slot_template.render_compiled_digest
+      else
+        render_compiled_digest
+      end
+    end
+
+    def effective_config
+      if linked_to_template? && slot_template
+        slot_template.config
+      else
+        config
+      end
+    end
+
+    def effective_shares
+      if linked_to_template? && slot_template
+        slot_template.shares
+      else
+        shares
+      end
+    end
+
+    def effective_render_language
+      if linked_to_template? && slot_template
+        slot_template.render_language
+      else
+        render_language
+      end
+    end
+
+    def unlink_from_template!
+      return unless linked_to_template? && slot_template
+
+      self.data_source = slot_template.data_source
+      self.render_source = slot_template.render_source
+      self.render_language = slot_template.render_language
+      self.config = slot_template.config.deep_dup
+      self.shares = slot_template.shares.deep_dup
+      self.linked_to_template = false
+      self.slot_template = nil
+      save!
+    end
+
+    def link_to_template!(tmpl)
+      self.slot_template = tmpl
+      self.linked_to_template = true
+      save!
+    end
+  end
+end

data/app/models/jigsaw/slot_template.rb

@@ -0,0 +1,29 @@
+module Jigsaw
+  class SlotTemplate < ApplicationRecord
+    acts_as_taggable_on :tags
+
+    has_many :slots, foreign_key: :slot_template_id, dependent: :nullify
+
+    validates :name, presence: true, uniqueness: true
+
+    before_save :compile_sources
+
+    private
+
+      def compile_sources
+        if data_source_changed? && data_source.present?
+          self.data_compiled_source = data_source
+          self.data_compiled_digest = Digest::SHA256.hexdigest(data_source)
+        end
+
+        if render_source_changed? && render_source.present?
+          if render_language == "jsx"
+            self.render_compiled_source = JsxCompiler.compile(render_source)
+          else
+            self.render_compiled_source = render_source
+          end
+          self.render_compiled_digest = Digest::SHA256.hexdigest(render_source)
+        end
+      end
+  end
+end

data/app/views/jigsaw/dashboard/index.html.ruby

@@ -0,0 +1,23 @@
+Container {
+  Header(size: :h1) { text "Jigsaw Engine" }
+
+  Wrapper(html_class: "ui cards") {
+    Card(href: pages_path, link: true) { |c|
+      c.header { "Pages" }
+      c.description { "Build and manage pages, layouts, and slot content" }
+      nil
+    }
+
+    Card(href: layout_templates_path, link: true) { |c|
+      c.header { "Layout Templates" }
+      c.description { "Reusable grid layout structures" }
+      nil
+    }
+
+    Card(href: slot_templates_path, link: true) { |c|
+      c.header { "Slot Templates" }
+      c.description { "Reusable slot content blocks with tags" }
+      nil
+    }
+  }
+}

data/app/views/jigsaw/layout_templates/_form.html.ruby

@@ -0,0 +1,69 @@
+Form(model: @layout_template, id: "layout-template-form") {
+
+  Wrapper(class: "sidebar-field") {
+    Label(:name) { "Name" }
+    Wrapper(class: "sidebar-input-row") {
+      TextField(:name)
+    }
+  }
+
+  Wrapper(class: "sidebar-field") {
+    Label(:description) { "Description" }
+    Wrapper(class: "sidebar-input-row") {
+      TextArea(:description, rows: 2)
+    }
+  }
+
+  text hidden_field_tag(
+    "layout_template[config]",
+    @layout_template.config.to_json,
+    id: "configHidden",
+    data: { "layout-editor-target": "configHidden" }
+  )
+
+  Wrapper(class: "sidebar-field") {
+    Label(:gridWidth) { "Width" }
+    Wrapper(class: "sidebar-input-row") {
+      TextField(:gridWidth, id: "gridWidth")
+    }
+  }
+
+  Wrapper(class: "sidebar-field") {
+    Label(:gridHeight) { "Height" }
+    Wrapper(class: "sidebar-input-row") {
+      TextField(:gridHeight, id: "gridHeight")
+    }
+  }
+
+  Wrapper(class: "sidebar-field") {
+    Label(:rowGap) { "Row Gap" }
+    Wrapper(class: "sidebar-input-row") {
+      NumberField(:rowGap, id: "rowGap", min: 0, step: 1)
+      Button(
+        type: "button",
+        id: "rowGapUnit",
+        class: "unit-btn",
+        data: {
+          action: "click->layout-editor#cycleUnit",
+          units: "px,rem,%"
+        }
+      ) { @layout_template.rowGapUnit || "px" }
+    }
+  }
+
+  Wrapper(class: "sidebar-field") {
+    Label(:colGap) { "Column Gap" }
+    Wrapper(class: "sidebar-input-row") {
+      NumberField(:colGap, id: "colGap", min: 0, step: 1)
+      Button(
+        type: "button",
+        id: "colGapUnit",
+        class: "unit-btn",
+        data: {
+          action: "click->layout-editor#cycleUnit",
+          units: "px,rem,%"
+        }
+      ) { @layout_template.colGapUnit || "px" }
+    }
+  }
+}

data/app/views/jigsaw/layout_templates/edit.html.ruby

@@ -0,0 +1,72 @@
+StylesheetLink("jigsaw/layout_editor.css")
+
+Wrapper(
+  data: {
+    controller: "layout-editor",
+    "layout-editor-slots-by-area-value": "{}",
+    "layout-editor-slot-edit-paths-value": "{}"
+  }
+) {
+
+  Menu(attached: "top") {
+    BackButton(href: layout_templates_path, icon: "arrow left")
+
+    SubMenu(position: "right") {
+      MenuItem {
+        Button(
+          type: "button",
+          icon: "sidebar",
+          size: "tiny",
+          data: { action: "click->layout-editor#togglePanel" }
+        ) { "Panel" }
+      }
+      MenuItem {
+        ButtonTo(
+          url: layout_template_path(@layout_template),
+          method: :delete,
+          color: "red",
+          size: "tiny",
+          confirm: "Delete this layout template?",
+          icon: "trash"
+        ) { "Delete" }
+      }
+      MenuItem {
+        Button(
+          type: "submit",
+          form: "layout-template-form",
+          color: "green",
+          size: "tiny"
+        ) { "Save" }
+      }
+    }
+  }
+
+  Wrapper(class: "editor-page") {
+    Wrapper(
+      class: "editor-center",
+      data: { "layout-editor-target": "preview" }
+    )
+
+    Wrapper(
+      class: "editor-output",
+      data: {
+        "layout-editor-target": "panel",
+        action: "input->layout-editor#rebuild"
+      }
+    ) {
+
+      Partial("form")
+
+      Wrapper(html_class: "panel-divider")
+
+      Header(size: 5) { "CSS" }
+      Pre(data: { "layout-editor-target": "cssOutput" }, class: "code-output")
+
+      Header(size: 5) { "HTML" }
+      Pre(data: { "layout-editor-target": "htmlOutput" }, class: "code-output")
+
+      Header(size: 5) { "JSON" }
+      Pre(data: { "layout-editor-target": "jsonOutput" }, class: "code-output")
+    }
+  }
+}

data/app/views/jigsaw/layout_templates/index.html.ruby

@@ -0,0 +1,48 @@
+Menu(attached: "top") {
+  BackButton(href: root_path, icon: "arrow left")
+  MenuItem(header: true) { text "Layout Templates" }
+
+  SubMenu(position: "right") {
+    MenuItem(href: new_layout_template_path, icon: "plus") { text "New Layout Template" }
+  }
+}
+
+Container(style: "padding: 1rem;") {
+  Header(size: :h2, dividing: true) { "Layout Templates" }
+
+  if @layout_templates.empty?
+    Message(info: true) {
+      text "No layout templates yet. "
+      LinkTo(href: new_layout_template_path) { text "Create your first layout template" }
+      text "."
+    }
+  else
+    Table() { |c|
+      c.header {
+        TableRow {
+          TableCell(heading: true) { "Name" }
+          TableCell(heading: true) { "Description" }
+          TableCell(heading: true) { "Actions" }
+        }
+      }
+
+      @layout_templates.each do |lt|
+        TableRow {
+          TableCell {
+            LinkTo(href: edit_layout_template_path(lt)) { text lt.name }
+          }
+
+          TableCell {
+            text lt.description || "—"
+          }
+
+          TableCell {
+            LinkTo(href: edit_layout_template_path(lt), css_class: "ui mini blue button") { "Edit" }
+            ButtonTo(url: layout_template_path(lt), method: :delete, color: "red mini",
+                     confirm: "Delete this layout template?") { text "Delete" }
+          }
+        }
+      end
+    }
+  end
+}

data/app/views/jigsaw/layout_templates/new.html.ruby

@@ -0,0 +1,19 @@
+Menu(attached: "top") {
+  BackButton(href: layout_templates_path, icon: "arrow left")
+  MenuItem(header: true) { text "New Layout Template" }
+}
+
+Container(style: "padding: 1rem; max-width: 600px;") {
+  Header(size: :h2, dividing: true) { text "Create a Layout Template" }
+
+  Form(model: @layout_template, url: layout_templates_path, method: :post) {
+    TextField(:name, required: true, placeholder: "My Layout Template", field: true)
+    TextArea(:description, placeholder: "Optional description", field: true)
+    TextField(:thumbnail, placeholder: "URL or path to thumbnail (optional)", field: true)
+
+    Wrapper(style: "margin-top: 1rem;") {
+      Submit("Create", color: "green")
+      LinkTo(href: layout_templates_path, css_class: "ui button") { text "Cancel" }
+    }
+  }
+}

data/app/views/jigsaw/pages/_form.html.ruby

@@ -0,0 +1,75 @@
+Form(model: @page, id: "page-form") {
+
+  Wrapper(class: "sidebar-field") {
+    Label(:title) { "Title" }
+    Wrapper(class: "sidebar-input-row") {
+      TextField(:title)
+    }
+  }
+
+  Wrapper(class: "sidebar-field") {
+    Label(:path) { "Path" }
+    Wrapper(class: "sidebar-input-row") {
+      TextField(:path)
+    }
+  }
+
+  text hidden_field_tag("page[layout_attributes][id]", @layout.id)
+  text hidden_field_tag(
+    "page[layout_attributes][config]",
+    @layout.config.to_json,
+    id: "configHidden",
+    data: { "layout-editor-target": "configHidden" }
+  )
+
+  FieldsFor(:layout) { |f|
+    previous_form_builder = @_form_builder
+    @_form_builder = f
+
+    Wrapper(class: "sidebar-field") {
+      Label(:gridWidth) { "Width" }
+      Wrapper(class: "sidebar-input-row") {
+        TextField(:gridWidth, id: "gridWidth")
+      }
+    }
+
+    Wrapper(class: "sidebar-field") {
+      Label(:gridHeight) { "Height" }
+      Wrapper(class: "sidebar-input-row") {
+        TextField(:gridHeight, id: "gridHeight")
+      }
+    }
+
+    Wrapper(class: "sidebar-field") {
+      Label(:rowGap) { "Row Gap" }
+      Wrapper(class: "sidebar-input-row") {
+        NumberField(:rowGap, id: "rowGap", min: 0, step: 1)
+        Button(
+          type: "button",
+          id: "rowGapUnit",
+          class: "unit-btn",
+          data: {
+            action: "click->layout-editor#cycleUnit",
+            units: "px,rem,%"
+          }
+        ) { @layout.rowGapUnit || "px" }
+      }
+    }
+
+    Wrapper(class: "sidebar-field") {
+      Label(:colGap) { "Column Gap" }
+      Wrapper(class: "sidebar-input-row") {
+        NumberField(:colGap, id: "colGap", min: 0, step: 1)
+        Button(
+          type: "button",
+          id: "colGapUnit",
+          class: "unit-btn",
+          data: {
+            action: "click->layout-editor#cycleUnit",
+            units: "px,rem,%"
+          }
+        ) { @layout.colGapUnit || "px" }
+      }
+    }
+  }
+}

data/app/views/jigsaw/pages/edit.html.ruby

@@ -0,0 +1,104 @@
+StylesheetLink("jigsaw/layout_editor.css")
+
+slot_id_by_area = @slots.each_with_object({}) { |s, h| h[s.area_name] = s.id }
+slot_edit_paths = @slots.each_with_object({}) { |s, h| h[s.area_name] = edit_slot_path(s) }
+
+Wrapper(
+  data: {
+    controller: "layout-editor",
+    "layout-editor-slots-by-area-value": slot_id_by_area.to_json,
+    "layout-editor-slot-edit-paths-value": slot_edit_paths.to_json
+  }
+) {
+
+  Menu(attached: "top") {
+    BackButton(href: pages_path, icon: "arrow left")
+
+    SubMenu(position: "right") {
+      if @layout&.linked_to_template?
+        MenuItem {
+          ButtonTo(
+            url: unlink_template_page_path(@page),
+            method: :post,
+            color: "orange",
+            size: "tiny",
+            confirm: "Unlink from layout template? Grid config will be copied locally.",
+            icon: "unlinkify"
+          ) { "Unlink Layout" }
+        }
+      end
+
+      MenuItem {
+        Button(
+          type: "button",
+          icon: "sidebar",
+          size: "tiny",
+          data: { action: "click->layout-editor#togglePanel" }
+        ) { "Panel" }
+      }
+      MenuItem {
+        ButtonTo(
+          url: page_path(@page),
+          method: :delete,
+          color: "red",
+          size: "tiny",
+          confirm: "Delete this page?",
+          icon: "trash"
+        ) { "Delete" }
+      }
+
+      unless @layout&.linked_to_template?
+        MenuItem {
+          Button(
+            type: "submit",
+            form: "page-form",
+            color: "green",
+            size: "tiny"
+          ) { "Save" }
+        }
+      end
+    }
+  }
+
+  if @layout&.linked_to_template?
+    Message(info: true, style: "margin: 0.5rem 1rem;") {
+      Wrapper(style: "display: flex; align-items: center; gap: 0.5em;") {
+        text tag.i(class: "linkify icon")
+        text "Layout linked to template: "
+        text tag.strong(@layout.layout_template.name)
+        text ". Grid editing is disabled."
+      }
+    }
+  end
+
+  Wrapper(class: "editor-page") {
+    Wrapper(
+      class: "editor-center",
+      data: { "layout-editor-target": "preview" }
+    )
+
+    Wrapper(
+      class: "editor-output",
+      data: {
+        "layout-editor-target": "panel",
+        action: "input->layout-editor#rebuild"
+      }
+    ) {
+
+      unless @layout&.linked_to_template?
+        Partial("form")
+
+        Wrapper(html_class: "panel-divider")
+      end
+
+      Header(size: 5) { "CSS" }
+      Pre(data: { "layout-editor-target": "cssOutput" }, class: "code-output")
+
+      Header(size: 5) { "HTML" }
+      Pre(data: { "layout-editor-target": "htmlOutput" }, class: "code-output")
+
+      Header(size: 5) { "JSON" }
+      Pre(data: { "layout-editor-target": "jsonOutput" }, class: "code-output")
+    }
+  }
+}

data/app/views/jigsaw/pages/index.html.ruby

@@ -0,0 +1,65 @@
+Menu(attached: "top") {
+  BackButton(href: root_path, icon: "arrow left")
+  MenuItem(header: true) { text "Pages" }
+
+  SubMenu(position: "right") {
+    MenuItem(href: new_page_path, icon: "plus") { text "New Page" }
+  }
+}
+
+Container(style: "padding: 1rem;") {
+  Header(size: :h2, dividing: true) { "Pages" }
+
+  if @pages.empty?
+    Message(info: true) {
+      text "No pages yet. "
+      LinkTo(href: new_page_path) { text "Create your first page" }
+      text "."
+    }
+  else
+    Table() { |c|
+      c.header {
+        TableRow {
+          TableCell(heading: true) { "Title" }
+          TableCell(heading: true) { "Route" }
+          TableCell(heading: true) { "Layout" }
+          TableCell(heading: true) { "Layout Template" }
+          TableCell(heading: true) { "Actions" }
+        }
+      }
+
+      @pages.each do |page|
+        TableRow {
+          TableCell {
+            LinkTo(href: edit_page_path(page)) { text page.title }
+          }
+
+          TableCell {
+            LinkTo(href: custom_page_path(page), target: "_blank") { text "/#{page.path}" }
+          }
+
+          TableCell {
+            text page.layout ? page.layout.name : "—"
+          }
+
+          TableCell {
+            if page.layout&.linked_to_template? && page.layout.layout_template
+              Wrapper(style: "display: flex; align-items: center; gap: 0.3em;") {
+                text tag.i(class: "linkify icon")
+                text page.layout.layout_template.name
+              }
+            else
+              text "—"
+            end
+          }
+
+          TableCell {
+            LinkTo(href: edit_page_path(page), css_class: "ui mini blue button") { "Edit" }
+            ButtonTo(url: page_path(page), method: :delete, color: "red mini",
+                     confirm: "Delete this page?") { text "Delete" }
+          }
+        }
+      end
+    }
+  end
+}

data/app/views/jigsaw/pages/new.html.ruby

@@ -0,0 +1,34 @@
+Menu(attached: "top") {
+  BackButton(href: pages_path, icon: "arrow left")
+  MenuItem(header: true) { text "New Page" }
+}
+
+Container(style: "padding: 1rem; max-width: 600px;") {
+  Header(size: :h2, dividing: true) { text "Create a Page" }
+
+  Form(model: @page, url: pages_path, method: :post) {
+    TextField(:title, required: true, placeholder: "My New Page", field: true)
+    TextField(:path, required: true, placeholder: "blog/hello-world",
+              hint: "URL path under /jigsaw/ (no leading slash)", field: true)
+
+    if @layout_templates.any?
+      Wrapper(class: "field") {
+        text label_tag("page_layout_template_id", "Layout Template (optional)")
+        text select_tag(
+          "page[layout_template_id]",
+          options_from_collection_for_select(@layout_templates, :id, :name),
+          include_blank: "— No template (blank layout) —",
+          class: "ui dropdown"
+        )
+        Wrapper(style: "margin-top: 0.25em; font-size: 0.85em; color: #666;") {
+          text "Selecting a layout template links this page's grid structure to the template."
+        }
+      }
+    end
+
+    Wrapper(style: "margin-top: 1rem;") {
+      Submit("Create", color: "green")
+      LinkTo(href: pages_path, css_class: "ui button") { text "Cancel" }
+    }
+  }
+}

data/app/views/jigsaw/pages/show.html.ruby

@@ -0,0 +1,28 @@
+StylesheetLink("jigsaw/grid_resize.css")
+
+Wrapper(data: { controller: "custom-page", "custom-page-page-id-value": @page.id }) {
+  Style(@layout.effective_compiled_css)
+
+  Div(
+    class: "jigsaw-layout-#{@layout.id}",
+    data: {
+      controller: "grid-resize",
+      "grid-resize-layout-id-value": @layout.id,
+      "grid-resize-areas-value": @layout.effective_config["areas"].to_json,
+    }
+  ) {
+    @slots.each do |slot|
+      slot_data = slot.effective_config["resizable"] ? { resizable: "true" } : {}
+      Div(class: slot.area_name, data: slot_data) {
+        CustomModule(
+          module_id:           slot.id,
+          edit_url:            edit_slot_path(slot),
+          data_function_url:   slot.effective_data_source.present? ? data_source_slot_path(slot, digest: slot.effective_data_compiled_digest) : "",
+          render_function_url: slot.effective_render_source.present? ? render_source_slot_path(slot, digest: slot.effective_render_compiled_digest) : "",
+          config:              slot.effective_config.to_json,
+          shares:              slot.effective_shares.to_json
+        )
+      }
+    end
+  }
+}