jigsaw_engine 0.4.0

data/db/migrate/20260510000001_refactor_templates_to_layout_and_slot_templates.rb

@@ -0,0 +1,104 @@
+class RefactorTemplatesToLayoutAndSlotTemplates < ActiveRecord::Migration[8.0]
+  def change
+    # --- Merge template_layouts into templates (becoming layout_templates) ---
+
+    # Add grid config columns directly to jigsaw_templates
+    add_column :jigsaw_templates, :config, :jsonb, null: false, default: {}
+    add_column :jigsaw_templates, :compiled_css, :text
+    add_column :jigsaw_templates, :compiled_digest, :string
+
+    # Copy data from template_layouts into templates
+    reversible do |dir|
+      dir.up do
+        execute <<~SQL
+          UPDATE jigsaw_templates
+          SET config = tl.config,
+              compiled_css = tl.compiled_css,
+              compiled_digest = tl.compiled_digest
+          FROM jigsaw_template_layouts tl
+          WHERE tl.template_id = jigsaw_templates.id
+        SQL
+      end
+    end
+
+    # Drop template_slots first (depends on template_layouts)
+    drop_table :jigsaw_template_slots do |t|
+      t.references :template_layout, null: false, foreign_key: { to_table: :jigsaw_template_layouts }
+      t.string :area_name, null: false
+      t.integer :position, null: false, default: 0
+      t.jsonb :config, default: {}
+      t.jsonb :shares, default: []
+      t.text :data_source
+      t.text :data_compiled_source
+      t.string :data_compiled_digest
+      t.text :render_source
+      t.text :render_compiled_source
+      t.string :render_compiled_digest
+      t.string :render_language, null: false, default: "javascript"
+      t.timestamps
+    end
+
+    # Drop template_layouts (merged into templates)
+    drop_table :jigsaw_template_layouts do |t|
+      t.references :template, null: false, foreign_key: { to_table: :jigsaw_templates }
+      t.jsonb :config, null: false, default: {}
+      t.text :compiled_css
+      t.string :compiled_digest
+      t.timestamps
+    end
+
+    # Rename jigsaw_templates -> jigsaw_layout_templates
+    rename_table :jigsaw_templates, :jigsaw_layout_templates
+
+    # --- Rename FK on layouts ---
+    # Remove old FK and index, rename column, re-add
+    remove_foreign_key :jigsaw_layouts, column: :template_id
+    remove_index :jigsaw_layouts, :template_id if index_exists?(:jigsaw_layouts, :template_id)
+    rename_column :jigsaw_layouts, :template_id, :layout_template_id
+    add_foreign_key :jigsaw_layouts, :jigsaw_layout_templates, column: :layout_template_id
+    add_index :jigsaw_layouts, :layout_template_id
+
+    # --- Create slot_templates ---
+    create_table :jigsaw_slot_templates do |t|
+      t.string :name, null: false
+      t.text :description
+      t.string :thumbnail
+      t.jsonb :config, default: {}
+      t.jsonb :shares, default: []
+      t.text :data_source
+      t.text :data_compiled_source
+      t.string :data_compiled_digest
+      t.text :render_source
+      t.text :render_compiled_source
+      t.string :render_compiled_digest
+      t.string :render_language, null: false, default: "javascript"
+
+      t.timestamps
+    end
+
+    add_index :jigsaw_slot_templates, :name, unique: true
+
+    # --- Add slot_template_id FK to slots ---
+    add_reference :jigsaw_slots, :slot_template, foreign_key: { to_table: :jigsaw_slot_templates }, null: true
+
+    # --- acts-as-taggable-on tables ---
+    create_table :tags do |t|
+      t.string :name
+      t.timestamps
+    end
+    add_index :tags, :name, unique: true
+
+    create_table :taggings do |t|
+      t.references :tag, foreign_key: true
+      t.references :taggable, polymorphic: true
+      t.references :tagger, polymorphic: true
+      t.string :context, limit: 128
+
+      t.timestamps
+    end
+
+    add_index :taggings, [:taggable_type, :taggable_id, :context], name: "taggings_taggable_context_idx"
+    add_index :taggings, [:tag_id, :taggable_id, :taggable_type, :context, :tagger_id, :tagger_type],
+              unique: true, name: "taggings_idx"
+  end
+end

data/db/seeds/01_pages.rb

@@ -0,0 +1,69 @@
+module Jigsaw
+  HOLY_GRAIL_CONFIG = {
+    "type"        => "grid",
+    "areas"       => [
+      ["header", "header", "header"],
+      ["left",   "main",   "right"],
+      ["footer", "footer", "footer"]
+    ],
+    "columns"     => ["120px", "4fr", "1fr"],
+    "rows"        => ["80px", "1fr", "60px"],
+    "gridWidth"   => "100%",
+    "gridHeight"  => "100%",
+    "rowGap"      => 8,
+    "colGap"      => 8,
+    "rowGapUnit"  => "px",
+    "colGapUnit"  => "px"
+  }.freeze
+
+  SIMPLE_CONFIG = {
+    "type"        => "grid",
+    "areas"       => [["main"]],
+    "columns"     => ["1fr"],
+    "rows"        => ["1fr"],
+    "gridWidth"   => "100%",
+    "gridHeight"  => "100%",
+    "rowGap"      => 0,
+    "colGap"      => 0,
+    "rowGapUnit"  => "px",
+    "colGapUnit"  => "px"
+  }.freeze
+
+  TWO_COL_CONFIG = {
+    "type"        => "grid",
+    "areas"       => [
+      ["header", "header"],
+      ["sidebar", "content"],
+      ["footer", "footer"]
+    ],
+    "columns"     => ["240px", "1fr"],
+    "rows"        => ["80px", "1fr", "60px"],
+    "gridWidth"   => "100%",
+    "gridHeight"  => "100%",
+    "rowGap"      => 12,
+    "colGap"      => 12,
+    "rowGapUnit"  => "px",
+    "colGapUnit"  => "px"
+  }.freeze
+
+  PAGE_DATA = [
+    { title: "Home",       path: "home",       config: HOLY_GRAIL_CONFIG },
+    { title: "About",      path: "about",      config: TWO_COL_CONFIG },
+    { title: "Blog",       path: "blog",       config: TWO_COL_CONFIG },
+    { title: "Contact",    path: "contact",    config: SIMPLE_CONFIG }
+  ]
+
+  PAGE_DATA.each do |attrs|
+    page = Page.find_or_initialize_by(path: attrs[:path])
+    page.title = attrs[:title]
+    page.save!
+
+    layout = page.layout || page.build_layout
+    layout.name = "#{page.title} Layout"
+    layout.config = attrs[:config]
+    layout.save!
+    layout.sync_slots
+  end
+
+  puts "[seeds] Pages: #{Page.count}, Layouts: #{Layout.count}, Slots: #{Slot.count}"
+end

data/db/seeds/02_main_menu_slot.rb

@@ -0,0 +1,15 @@
+module Jigsaw
+  SEEDS = Engine.root.join("app/javascript/seeds")
+
+  home = Page.find_by!(path: "home")
+  slot = home.layout.slots.find_by!(area_name: "header")
+
+  slot.update!(
+    render_language: "jsx",
+    config: JSON.parse(SEEDS.join("main-menu/config.json").read),
+    data_source: SEEDS.join("main-menu/data.js").read,
+    render_source: SEEDS.join("main-menu/render.jsx").read,
+  )
+
+  puts "[seeds] Main menu slot updated: ##{slot.id} (#{slot.area_name})"
+end

data/db/seeds/03_webcontainer_ide.rb

@@ -0,0 +1,51 @@
+module Jigsaw
+  SEEDS = Engine.root.join("app/javascript/seeds") unless defined?(SEEDS)
+
+  IDE_CONFIG = {
+    "type"    => "grid",
+    "areas"   => [
+      ["filetree", "editor",   "preview"],
+      ["filetree", "terminal", "preview"]
+    ],
+    "columns" => ["220px", "1fr", "1fr"],
+    "rows"    => ["1fr", "250px"],
+    "gridWidth"  => "100vw",
+    "gridHeight" => "100vh",
+    "rowGap" => 0, "colGap" => 0,
+    "rowGapUnit" => "px", "colGapUnit" => "px"
+  }.freeze
+
+  page = Page.find_or_initialize_by(path: "ide")
+  page.title = "WebContainer IDE"
+  page.save!
+
+  layout = page.layout || page.build_layout
+  layout.name = "IDE Layout"
+  layout.config = IDE_CONFIG
+  layout.save!
+  layout.sync_slots
+
+  SLOT_MAP = {
+    "filetree" => "ide-file-tree",
+    "editor"   => "ide-editor",
+    "terminal" => "ide-terminal",
+    "preview"  => "ide-preview",
+  }.freeze
+
+  SLOT_MAP.each do |area, seed_dir|
+    config_data = JSON.parse(SEEDS.join("#{seed_dir}/config.json").read)
+    shares = config_data.delete("shares") || []
+
+    layout.slots.find_by!(area_name: area).update!(
+      render_language: "jsx",
+      shares: shares,
+      config: config_data,
+      data_source: SEEDS.join("#{seed_dir}/data.js").read,
+      render_source: SEEDS.join("#{seed_dir}/render.jsx").read,
+    )
+
+    puts "[seeds] #{area} slot updated"
+  end
+
+  puts "[seeds] WebContainer IDE page created"
+end

data/db/seeds.rb

@@ -0,0 +1,120 @@
+# Jigsaw Engine Seeds
+#
+# Seeds the database with SlotTemplate records from the
+# app/javascript/seeds/ directory structure.
+#
+# Each leaf directory containing config.json, data.js, and render.jsx
+# becomes a SlotTemplate record. Tags are derived from the path segments.
+#
+# Usage:
+#   bin/rails db:seed
+#   # or load directly:
+#   load Jigsaw::Engine.root.join("db/seeds.rb")
+
+module Jigsaw
+  class SeedLoader
+    SEEDS_PATH = Engine.root.join("app/javascript/seeds")
+
+    def call
+      puts "[jigsaw] Seeding slot templates from #{SEEDS_PATH}..."
+
+      count = 0
+      seed_dirs.each do |dir|
+        seed_slot_template(dir)
+        count += 1
+      end
+
+      puts "[jigsaw] Seeded #{count} slot templates."
+    end
+
+    private
+
+      def seed_dirs
+        Dir.glob(SEEDS_PATH.join("**/config.json")).map { |f| File.dirname(f) }.sort
+      end
+
+      def seed_slot_template(dir)
+        relative_path = Pathname.new(dir).relative_path_from(SEEDS_PATH).to_s
+        name = humanize_path(relative_path)
+        tags = derive_tags(relative_path)
+
+        config_json = File.read(File.join(dir, "config.json"))
+        data_js = File.read(File.join(dir, "data.js"))
+        render_file = Dir.glob(File.join(dir, "render.*")).first
+        render_source = render_file ? File.read(render_file) : ""
+        render_language = render_file&.end_with?(".jsx") ? "jsx" : "javascript"
+
+        config = begin
+          JSON.parse(config_json)
+        rescue JSON::ParserError
+          {}
+        end
+
+        # Extract shares from config if present (it's a slot-level concept)
+        shares = config.delete("shares") || []
+
+        st = SlotTemplate.find_or_initialize_by(name: name)
+        st.assign_attributes(
+          data_source: data_js,
+          render_source: render_source,
+          render_language: render_language,
+          config: config,
+          shares: shares
+        )
+        st.tag_list = tags.join(", ")
+        st.save!
+
+        print "."
+      rescue => e
+        puts "\n[jigsaw] ERROR seeding #{dir}: #{e.message}"
+      end
+
+      def humanize_path(relative_path)
+        # "blocks/marketing/hero-section-1" -> "Marketing / Hero Section 1"
+        # "ide-editor" -> "IDE Editor"
+        # "examples/blog-cards-2" -> "Examples / Blog Cards 2"
+        segments = relative_path.split("/")
+        segments.map { |s| humanize_segment(s) }.join(" / ")
+      end
+
+      def humanize_segment(segment)
+        segment
+          .gsub("-", " ")
+          .gsub(/\b(ui|ide|css|html|js|jsx)\b/i) { |m| m.upcase }
+          .split(" ")
+          .map(&:capitalize)
+          .join(" ")
+      end
+
+      def derive_tags(relative_path)
+        # "blocks/marketing/hero-section-1" -> ["blocks", "marketing", "hero-section"]
+        # "blocks/ecommerce/product-list-3" -> ["blocks", "ecommerce", "product-list"]
+        # "ide-editor" -> ["ide"]
+        # "examples/chat-bubbles-4" -> ["examples", "chat-bubbles"]
+        segments = relative_path.split("/")
+        tags = []
+
+        segments.each_with_index do |segment, i|
+          if i == segments.length - 1
+            # Last segment: strip trailing variant number
+            tag = strip_variant_number(segment)
+          else
+            tag = segment
+          end
+          tags << tag unless tag.blank?
+        end
+
+        tags.uniq
+      end
+
+      def strip_variant_number(segment)
+        # "hero-section-1" -> "hero-section"
+        # "charts-20" -> "charts"
+        # "ide-editor" -> "ide-editor" (no trailing number after last hyphen? keep as-is)
+        # "authentication-forms-3" -> "authentication-forms"
+        segment.sub(/-\d+\z/, "")
+      end
+  end
+end
+
+Jigsaw::SeedLoader.new.call

data/lib/jigsaw/engine.rb

@@ -0,0 +1,29 @@
+require "acts_as_list"
+require "acts-as-taggable-on"
+require "json_schemer"
+require "jigsaw"
+require "jigsaw/version"
+require "jigsaw/jsx_compiler"
+require "jigsaw/grid_layout_generator"
+
+module Jigsaw
+  class Engine < ::Rails::Engine
+    isolate_namespace Jigsaw
+
+    initializer "jigsaw_engine.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+      end
+    end
+
+    initializer "jigsaw_engine.assets" do |app|
+      if app.config.respond_to?(:assets) && app.config.assets.respond_to?(:paths)
+        ui_gem = Gem::Specification.find_by_name("rails-active-ui")
+        app.config.assets.paths << File.join(ui_gem.gem_dir, "app/assets")
+        app.config.assets.paths << root.join("app/assets/stylesheets")
+        app.config.assets.paths << root.join("app/javascript")
+        app.config.assets.paths << Rails.root.join("app/assets/stylesheets")
+      end
+    end
+  end
+end

data/lib/jigsaw/grid_layout_generator.rb

@@ -0,0 +1,55 @@
+module Jigsaw
+  class GridLayoutGenerator
+    def initialize(config, layout_id)
+      @config = config
+      @id = layout_id
+    end
+
+    def call
+      rules = [container_rule]
+      rules << area_rules if has_areas?
+      rules.compact.join("\n\n")
+    end
+
+    private
+
+      def selector = ".jigsaw-layout-#{@id}"
+
+      def container_rule
+        props = {
+          "width" => @config["gridWidth"] || "100%",
+          "height" => @config["gridHeight"] || "100%",
+          "display" => "grid"
+        }
+
+        props["grid-template-rows"] = @config["rows"]&.join(" ") || "1fr"
+        props["grid-template-columns"] = @config["columns"]&.join(" ") || "1fr"
+
+        if has_areas?
+          props["grid-template-areas"] = @config["areas"].map { |row| "\"#{row.join(' ')}\"" }.join("\n    ")
+        end
+
+        props["gap"] = gap_shorthand
+
+        body = props.map { |k, v| "  #{k}: #{v};" }.join("\n")
+        "#{selector} {\n#{body}\n}"
+      end
+
+      def gap_shorthand
+        row_gap = "#{@config['rowGap']}#{@config['rowGapUnit'] || 'px'}"
+        col_gap = "#{@config['colGap']}#{@config['colGapUnit'] || 'px'}"
+        row_gap == col_gap ? row_gap : "#{row_gap} #{col_gap}"
+      end
+
+      def has_areas?
+        @config["areas"].present? && @config["areas"].flatten.any? { |s| s != "." }
+      end
+
+      def area_rules
+        names = @config["areas"].flatten.uniq.reject { |s| s == "." }
+        return nil if names.empty?
+
+        names.map { |name| "#{selector} > .#{name} { grid-area: #{name}; }" }.join("\n")
+      end
+  end
+end

data/lib/jigsaw/jsx_compiler.rb

@@ -0,0 +1,21 @@
+require "mini_racer"
+
+module Jigsaw
+  class JsxCompiler
+    def self.compile(source)
+      context = MiniRacer::Context.new
+      context.eval(babel_source)
+      context.eval(<<~JS)
+        Babel.transform(#{source.to_json}, {
+          presets: [['react', { runtime: 'automatic' }]]
+        }).code
+      JS
+    ensure
+      context&.dispose
+    end
+
+    def self.babel_source
+      @babel_source ||= File.read(Engine.root.join("vendor/javascript/babel.min.js"))
+    end
+  end
+end

data/lib/jigsaw/version.rb

@@ -0,0 +1,3 @@
+module Jigsaw
+  VERSION = "0.4.0"
+end

data/lib/jigsaw/version.rb.erb

@@ -0,0 +1,3 @@
+module Jigsaw
+  VERSION = "<%= version %>"
+end

data/lib/jigsaw.rb

@@ -0,0 +1,11 @@
+module Jigsaw
+  def self.dynamic_page_routes(mapper)
+    if ActiveRecord::Base.connection.data_source_exists?("jigsaw_pages")
+      Jigsaw::Page.where.not(path: [nil, ""]).find_each do |page|
+        mapper.get page.path, to: "jigsaw/pages#show", defaults: { path: page.path }, as: "page_#{page.id}_route"
+      end
+    end
+  rescue StandardError => e
+    Rails.logger.warn("[jigsaw] skipping dynamic page routes: #{e.class}: #{e.message}") if defined?(Rails.logger)
+  end
+end

data/lib/jigsaw_engine.rb

@@ -0,0 +1,4 @@
+require "jigsaw/engine"
+
+module Jigsaw
+end

data/lib/tasks/kube_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :jigsaw do
+#   # Task goes here
+# end

data/lib/tasks/shadcn.rake

@@ -0,0 +1,171 @@
+namespace :jigsaw do
+  namespace :shadcn do
+    desc "Install shadcn components into the engine. Usage: rake jigsaw:shadcn:install[button,dropdown-menu,sheet]"
+    task :install, [:components] => :environment do |_t, args|
+      components = args[:components]&.split(",") || []
+      components += args.extras if args.extras.any?
+
+      if components.empty?
+        puts "Usage: rake jigsaw:shadcn:install[button,dropdown-menu,sheet]"
+        abort "Error: No components specified."
+      end
+
+      engine_root = Jigsaw::Engine.root
+      components_dir = engine_root.join("app/javascript/jigsaw/components/ui")
+      importmap_path = engine_root.join("config/importmap.rb")
+
+      # Create temp project for shadcn CLI
+      require "tmpdir"
+      Dir.mktmpdir("shadcn") do |tmpdir|
+        puts "Setting up temporary shadcn project..."
+
+        # Minimal package.json
+        File.write("#{tmpdir}/package.json", <<~JSON)
+          {
+            "name": "shadcn-tmp",
+            "private": true,
+            "type": "module",
+            "dependencies": {
+              "react": "^19.0.0",
+              "react-dom": "^19.0.0"
+            }
+          }
+        JSON
+
+        # Minimal tsconfig
+        File.write("#{tmpdir}/tsconfig.json", <<~JSON)
+          {
+            "compilerOptions": {
+              "target": "ESNext",
+              "module": "ESNext",
+              "moduleResolution": "bundler",
+              "jsx": "react-jsx",
+              "baseUrl": ".",
+              "paths": { "@/*": ["./src/*"] }
+            }
+          }
+        JSON
+
+        # shadcn components.json
+        File.write("#{tmpdir}/components.json", <<~JSON)
+          {
+            "$schema": "https://ui.shadcn.com/schema.json",
+            "style": "new-york",
+            "rsc": false,
+            "tsx": true,
+            "tailwind": {
+              "config": "tailwind.config.js",
+              "css": "src/index.css",
+              "baseColor": "neutral",
+              "cssVariables": true
+            },
+            "aliases": {
+              "components": "@/components",
+              "utils": "@/lib/utils",
+              "ui": "@/components/ui",
+              "lib": "@/lib",
+              "hooks": "@/hooks"
+            },
+            "iconLibrary": "lucide"
+          }
+        JSON
+
+        # Minimal tailwind config (required by shadcn CLI)
+        File.write("#{tmpdir}/tailwind.config.js", "export default { content: ['./src/**/*.{ts,tsx}'] }\n")
+
+        # Required directories and utility file
+        FileUtils.mkdir_p("#{tmpdir}/src/lib")
+        FileUtils.mkdir_p("#{tmpdir}/src/components/ui")
+        FileUtils.mkdir_p("#{tmpdir}/src/hooks")
+
+        File.write("#{tmpdir}/src/lib/utils.ts", <<~TS)
+          import { clsx, type ClassValue } from "clsx"
+
+          export function cn(...inputs: ClassValue[]) {
+            return clsx(inputs)
+          }
+        TS
+
+        File.write("#{tmpdir}/src/index.css", "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n")
+
+        # Download components via shadcn CLI
+        puts "Downloading components: #{components.join(', ')}"
+        system("cd #{tmpdir} && npx shadcn@latest add #{components.join(' ')} --yes --overwrite", exception: true)
+
+        # Compile TSX → JS with esbuild
+        puts "\nCompiling TSX → JS..."
+        FileUtils.mkdir_p("#{tmpdir}/out")
+
+        Dir.glob("#{tmpdir}/src/components/ui/*.tsx").each do |file|
+          basename = File.basename(file, ".tsx")
+          outfile = "#{tmpdir}/out/#{basename}.js"
+
+          system(
+            "npx esbuild #{file}" \
+            " --bundle" \
+            " --format=esm" \
+            " --target=esnext" \
+            " --jsx=automatic" \
+            " --external:react" \
+            " --external:react-dom" \
+            " --external:react/jsx-runtime" \
+            " '--external:@radix-ui/*'" \
+            " --external:clsx" \
+            " --external:class-variance-authority" \
+            " --external:lucide-react" \
+            " --outfile=#{outfile}",
+            exception: true
+          )
+          puts "  Compiled: #{basename}.js"
+        end
+
+        # Compile utils
+        utils_file = "#{tmpdir}/src/lib/utils.ts"
+        if File.exist?(utils_file)
+          system(
+            "npx esbuild #{utils_file}" \
+            " --bundle" \
+            " --format=esm" \
+            " --target=esnext" \
+            " --external:clsx" \
+            " --external:tailwind-merge" \
+            " --outfile=#{tmpdir}/out/utils.js",
+            exception: true
+          )
+          puts "  Compiled: utils.js"
+        end
+
+        # Install compiled files
+        puts "\nInstalling to #{components_dir}..."
+        FileUtils.mkdir_p(components_dir)
+
+        importmap_content = File.read(importmap_path)
+
+        Dir.glob("#{tmpdir}/out/*.js").each do |file|
+          basename = File.basename(file)
+          pin_name = File.basename(file, ".js")
+
+          FileUtils.cp(file, components_dir.join(basename))
+          puts "  Installed: #{basename}"
+
+          # Add importmap pin if not present
+          pin_path = if pin_name == "utils"
+            "@/lib/utils"
+          else
+            "@/components/ui/#{pin_name}"
+          end
+
+          if importmap_content.exclude?(pin_path)
+            pin_line = "pin \"#{pin_path}\", to: \"jigsaw/components/ui/#{basename}\"\n"
+            File.open(importmap_path, "a") { |f| f.write(pin_line) }
+            puts "  Added importmap pin: #{pin_path}"
+          end
+        end
+      end
+
+      puts "\nDone! Next steps:"
+      puts "  1. Edit files in #{components_dir}/ to replace Tailwind classes with Fomantic-UI classes"
+      puts "  2. Add any missing Radix importmap pins to config/importmap.rb"
+    end
+  end
+end