jigsaw_engine 0.4.0

data/app/javascript/seeds/ide-terminal/render.jsx

@@ -0,0 +1,247 @@
+import React, { useEffect, useRef, useState } from "react"
+import { createRoot } from "react-dom/client"
+import { Terminal as TerminalIcon, Trash2, ArrowDown } from "lucide-react"
+
+function TerminalPanel() {
+  const terminalRef = useRef(null)
+  const xtermRef = useRef(null)
+  const fitAddonRef = useRef(null)
+  const [showScrollButton, setShowScrollButton] = useState(false)
+
+  useEffect(() => {
+    if (!terminalRef.current || xtermRef.current) return
+
+    Promise.all([
+      import("xterm"),
+      import("xterm-addon-fit"),
+      import("xterm-addon-web-links"),
+    ]).then(([xtermMod, fitMod, webLinksMod]) => {
+      const { Terminal } = xtermMod
+      const { FitAddon } = fitMod
+      const { WebLinksAddon } = webLinksMod
+
+      // Load xterm CSS
+      if (!document.getElementById("xterm-css")) {
+        const link = document.createElement("link")
+        link.id = "xterm-css"
+        link.rel = "stylesheet"
+        link.href = "https://esm.sh/xterm@5/css/xterm.css"
+        document.head.appendChild(link)
+      }
+
+      const xterm = new Terminal({
+        cursorBlink: true,
+        cursorStyle: "block",
+        fontSize: 14,
+        fontFamily: '"Cascadia Code", Menlo, Monaco, "Courier New", monospace',
+        theme: {
+          background: "#0a0a0a",
+          foreground: "#d4d4d4",
+          cursor: "#00ff00",
+          cursorAccent: "#000000",
+          selectionBackground: "#3a3d41",
+          black: "#000000",
+          red: "#cd3131",
+          green: "#0dbc79",
+          yellow: "#e5e510",
+          blue: "#2472c8",
+          magenta: "#bc3fbc",
+          cyan: "#11a8cd",
+          white: "#e5e5e5",
+          brightBlack: "#666666",
+          brightRed: "#f14c4c",
+          brightGreen: "#23d18b",
+          brightYellow: "#f5f543",
+          brightBlue: "#3b8eea",
+          brightMagenta: "#d670d6",
+          brightCyan: "#29b8db",
+          brightWhite: "#ffffff",
+        },
+        scrollback: 10000,
+        convertEol: true,
+        allowProposedApi: true,
+      })
+
+      const fitAddon = new FitAddon()
+      const webLinksAddon = new WebLinksAddon()
+
+      xterm.loadAddon(fitAddon)
+      xterm.loadAddon(webLinksAddon)
+      xterm.open(terminalRef.current)
+
+      xtermRef.current = xterm
+      fitAddonRef.current = fitAddon
+
+      // Register globally so other slots can write to terminal
+      window.__wcTermWrite = (data) => xterm.write(data)
+
+      // Delay fit to ensure container size is correct
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          try { fitAddon.fit() } catch (e) { console.warn("Fit failed:", e) }
+        })
+      })
+
+      // Watch scroll position
+      let scrollTimeout
+      xterm.onScroll(() => {
+        clearTimeout(scrollTimeout)
+        scrollTimeout = setTimeout(() => {
+          try {
+            const buffer = xterm.buffer.active
+            if (buffer) {
+              const isAtBottom = buffer.viewportY >= buffer.baseY + buffer.cursorY - xterm.rows
+              setShowScrollButton(!isAtBottom)
+            }
+          } catch (e) {}
+        }, 100)
+      })
+
+      // Welcome banner
+      setTimeout(() => {
+        xterm.writeln("\x1b[1;36m\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\x1b[0m")
+        xterm.writeln("\x1b[1;36m\u2551   WebContainer IDE Terminal          \u2551\x1b[0m")
+        xterm.writeln("\x1b[1;36m\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\x1b[0m")
+        xterm.writeln("")
+
+        let currentLine = ""
+        let isProcessRunning = false
+
+        const writePrompt = () => {
+          xterm.write("\x1b[1;32m\u279c\x1b[0m \x1b[1;36m~\x1b[0m ")
+        }
+
+        writePrompt()
+
+        xterm.onData((data) => {
+          if (isProcessRunning) return
+
+          const code = data.charCodeAt(0)
+
+          if (code === 13) {
+            // Enter
+            const command = currentLine.trim()
+            currentLine = ""
+            xterm.write("\r\n")
+
+            if (command) {
+              isProcessRunning = true
+              ;(async () => {
+                try {
+                  const container = window.__wc
+                  if (!container) {
+                    xterm.writeln("\x1b[1;31m\u2716 WebContainer not ready\x1b[0m")
+                    return
+                  }
+                  const parts = command.split(" ")
+                  const cmd = parts[0]
+                  const args = parts.slice(1)
+
+                  const process = await container.spawn(cmd, args)
+
+                  process.output.pipeTo(
+                    new WritableStream({
+                      write(chunk) {
+                        xterm.write(chunk)
+                      },
+                    })
+                  )
+
+                  await process.exit
+                } catch (error) {
+                  xterm.writeln("\x1b[1;31m\u2716 Error: " + error + "\x1b[0m")
+                } finally {
+                  isProcessRunning = false
+                  writePrompt()
+                }
+              })()
+            } else {
+              writePrompt()
+            }
+          } else if (code === 127) {
+            // Backspace
+            if (currentLine.length > 0) {
+              currentLine = currentLine.slice(0, -1)
+              xterm.write("\b \b")
+            }
+          } else if (code === 3) {
+            // Ctrl+C
+            if (isProcessRunning) {
+              xterm.write("^C\r\n")
+              isProcessRunning = false
+              writePrompt()
+            } else {
+              xterm.write("^C\r\n")
+              currentLine = ""
+              writePrompt()
+            }
+          } else if (code >= 32 && code <= 126) {
+            // Printable chars
+            currentLine += data
+            xterm.write(data)
+          }
+        })
+      }, 100)
+
+      // Responsive resize
+      const resizeObserver = new ResizeObserver(() => {
+        try { fitAddon.fit() } catch (e) {}
+      })
+      resizeObserver.observe(terminalRef.current)
+    })
+  }, [])
+
+  const handleClear = () => {
+    if (xtermRef.current) {
+      xtermRef.current.clear()
+      xtermRef.current.writeln("\x1b[1;32m\u2713 Terminal cleared\x1b[0m")
+      xtermRef.current.write("\r\n\x1b[1;32m\u279c\x1b[0m \x1b[1;36m~\x1b[0m ")
+    }
+  }
+
+  const scrollToBottom = () => {
+    if (xtermRef.current) {
+      xtermRef.current.scrollToBottom()
+      setShowScrollButton(false)
+    }
+  }
+
+  return (
+    <div className="tw-h-full tw-flex tw-flex-col tw-bg-black tw-relative">
+      <div className="tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-bg-gray-900 tw-border-b tw-border-gray-700">
+        <div className="tw-flex tw-items-center tw-gap-2">
+          <TerminalIcon size={16} className="tw-text-green-400" />
+          <h3 className="tw-text-sm tw-font-semibold tw-text-gray-300">TERMINAL</h3>
+          <span className="tw-text-xs tw-text-gray-500">Buffer: 10k lines</span>
+        </div>
+        <button
+          onClick={handleClear}
+          className="tw-p-1 hover:tw-bg-gray-800 tw-rounded tw-transition-colors"
+          title="Clear terminal"
+        >
+          <Trash2 size={14} className="tw-text-gray-400 hover:tw-text-gray-200" />
+        </button>
+      </div>
+      <div
+        ref={terminalRef}
+        className="tw-flex-1 tw-overflow-hidden"
+        style={{ backgroundColor: "#0a0a0a", padding: "12px" }}
+      />
+      {showScrollButton && (
+        <button
+          onClick={scrollToBottom}
+          className="tw-absolute tw-bottom-6 tw-right-6 tw-p-2.5 tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-rounded-full tw-shadow-lg tw-transition-all hover:tw-scale-110"
+          title="Scroll to bottom"
+        >
+          <ArrowDown size={18} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default function(data) {
+  console.log("[terminal] render called", data)
+  if (!this._root) this._root = createRoot(this.element)
+  this._root.render(<TerminalPanel />)
+}

data/app/javascript/seeds/main-menu/config.json

@@ -0,0 +1,9 @@
+{
+  "brand": "Jigsaw",
+  "links": [
+    { "label": "Home", "href": "/" },
+    { "label": "About", "href": "/about" },
+    { "label": "Blog", "href": "/blog" },
+    { "label": "Contact", "href": "/contact" }
+  ]
+}

data/app/javascript/seeds/main-menu/data.js

@@ -0,0 +1,6 @@
+export default function(shared, config) {
+  return {
+    brand: config.brand || "Jigsaw",
+    links: config.links || []
+  }
+}

data/app/javascript/seeds/main-menu/render.jsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+import { createRoot } from "react-dom/client"
+import { Menu, X } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
+import { cn } from "@/lib/utils"
+
+function NavLink({ href, children, className }) {
+  return (
+    <a
+      href={href}
+      className={cn(
+        "tw-text-sm tw-font-medium tw-text-muted-foreground tw-transition-colors hover:tw-text-foreground",
+        className
+      )}
+    >
+      {children}
+    </a>
+  )
+}
+
+function MobileNav({ links, brand }) {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="lg:tw-hidden">
+          <Menu className="tw-size-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <SheetTitle className="tw-sr-only">Navigation Menu</SheetTitle>
+        <nav className="tw-flex tw-flex-col tw-gap-4 tw-pt-4">
+          <span className="tw-text-lg tw-font-bold">{brand}</span>
+          {links.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              className="tw-text-sm tw-font-medium tw-text-muted-foreground hover:tw-text-foreground"
+              onClick={() => setOpen(false)}
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export default function(data) {
+  const root = createRoot(this.element)
+  root.render(
+    <header className="tw-sticky tw-top-0 tw-z-50 tw-w-full tw-border-b tw-bg-background/95 tw-backdrop-blur supports-[backdrop-filter]:tw-bg-background/60">
+      <div className="tw-container tw-flex tw-h-14 tw-items-center tw-px-4 md:tw-px-6">
+        <MobileNav links={data.links} brand={data.brand} />
+        <a href="/" className="tw-mr-6 tw-flex tw-items-center tw-space-x-2 tw-font-bold">
+          {data.brand}
+        </a>
+        <nav className="tw-hidden lg:tw-flex tw-items-center tw-gap-6">
+          {data.links.map((link) => (
+            <NavLink key={link.href} href={link.href}>
+              {link.label}
+            </NavLink>
+          ))}
+        </nav>
+      </div>
+    </header>
+  )
+}

data/app/models/concerns/jigsaw/grid_configurable.rb

@@ -0,0 +1,89 @@
+module Jigsaw
+  module GridConfigurable
+    extend ActiveSupport::Concern
+
+    SCHEMA_PATH = File.expand_path("../../jigsaw/schemas/layout_config.json", __dir__)
+    SCHEMA = JSONSchemer.schema(Pathname.new(SCHEMA_PATH))
+
+    included do
+      store_accessor(
+        :config,
+        :gridWidth,
+        :gridHeight,
+        :rowGap,
+        :colGap,
+        :rowGapUnit,
+        :colGapUnit,
+      )
+
+      validates :config, presence: true, unless: :skip_config_validation?
+      validate :config_valid_per_schema, unless: :skip_config_validation?
+
+      before_save :compile_css
+    end
+
+    # Override in models that support template linking
+    def skip_config_validation?
+      false
+    end
+
+    def config=(val)
+      val = JSON.parse(val) if val.is_a?(String)
+      super(val)
+    end
+
+    def rowGap=(val)
+      super(val.to_i)
+    end
+
+    def colGap=(val)
+      super(val.to_i)
+    end
+
+    def unique_area_names
+      if config["areas"].is_a?(Array)
+        config["areas"].flatten.uniq.reject { |s| s == "." }
+      else
+        []
+      end
+    end
+
+    def sync_slots
+      if config["areas"].is_a?(Array)
+        current_names = unique_area_names
+        existing = slots.reload.index_by(&:area_name)
+
+        obsolete = existing.reject { |name, _| current_names.include?(name) }
+        obsolete.values.each(&:destroy!)
+        obsolete.keys.each { |name| existing.delete(name) }
+
+        current_names.each do |name|
+          unless existing.key?(name)
+            existing[name] = slots.create!(area_name: name)
+          end
+        end
+
+        current_names.each_with_index do |name, position|
+          slot = existing[name]
+          slot.update_column(:position, position) if slot.position != position
+        end
+      end
+    end
+
+    private
+
+      def config_valid_per_schema
+        unless config.blank?
+          SCHEMA.validate(config).each do |error|
+            errors.add(:config, JSONSchemer::Errors.pretty(error))
+          end
+        end
+      end
+
+      def compile_css
+        generator = GridLayoutGenerator.new(config, id || SecureRandom.hex(4))
+        self.compiled_css = generator.call
+        self.compiled_digest = Digest::SHA256.hexdigest(compiled_css)
+      end
+  end
+end

data/app/models/concerns/jigsaw/slot_compilable.rb

@@ -0,0 +1,69 @@
+module Jigsaw
+  module SlotCompilable
+    extend ActiveSupport::Concern
+
+    included do
+      acts_as_list scope: slot_list_scope
+
+      validates :area_name, presence: true, uniqueness: { scope: slot_uniqueness_scope }
+
+      after_initialize :set_default_sources
+      before_save :normalize_config, :compile_sources
+    end
+
+    private
+
+      def normalize_config
+        self.config = {} if config.nil?
+        if config.is_a?(String)
+          parsed = begin
+            JSON.parse(config)
+          rescue JSON::ParserError
+            {}
+          end
+          self.config = parsed
+        end
+      end
+
+      def set_default_sources
+        return if respond_to?(:linked_to_template?) && linked_to_template?
+
+        if data_source.blank?
+          self.data_source = <<~JS
+            export default function(shared, config) {
+              return { title: config.title || "Slot" }
+            }
+          JS
+        end
+
+        if render_source.blank?
+          self.render_source = <<~JS
+            export default function(data) {
+              this.element.innerHTML = `
+                <div style="padding: 1em; border: 1px dashed #ccc; border-radius: 4px; text-align: center; color: #666;">
+                  <strong>${data.title}</strong>
+                  <p style="margin: 0.5em 0 0; font-size: 0.85em;">Click edit to configure</p>
+                </div>
+              `
+            }
+          JS
+        end
+      end
+
+      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/models/jigsaw/application_record.rb

@@ -0,0 +1,5 @@
+module Jigsaw
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/jigsaw/layout.rb

@@ -0,0 +1,61 @@
+module Jigsaw
+  class Layout < ApplicationRecord
+    include GridConfigurable
+
+    belongs_to :page
+    belongs_to :layout_template, optional: true
+    has_many :slots, -> { order(:position) }, dependent: :destroy
+
+    validates :name, presence: true, uniqueness: true
+
+    def skip_config_validation?
+      linked_to_template?
+    end
+
+    # --- Template Linking ---
+
+    def effective_config
+      if linked_to_template? && layout_template
+        layout_template.config
+      else
+        config
+      end
+    end
+
+    def effective_compiled_css
+      if linked_to_template? && layout_template
+        layout_template.compiled_css
+      else
+        compiled_css
+      end
+    end
+
+    def unlink_from_template!
+      return unless linked_to_template? && layout_template
+
+      # Copy template's grid config locally
+      self.config = layout_template.config.deep_dup
+      self.linked_to_template = false
+      self.layout_template = nil
+      save!
+    end
+
+    def link_to_template!(tmpl)
+      self.layout_template = tmpl
+      self.linked_to_template = true
+      save!
+    end
+
+    private
+
+      # Override compile_css from concern to use effective_config
+      def compile_css
+        cfg = effective_config
+        return if cfg.blank?
+
+        generator = GridLayoutGenerator.new(cfg, id || SecureRandom.hex(4))
+        self.compiled_css = generator.call
+        self.compiled_digest = Digest::SHA256.hexdigest(compiled_css)
+      end
+  end
+end

data/app/models/jigsaw/layout_template.rb

@@ -0,0 +1,16 @@
+module Jigsaw
+  class LayoutTemplate < ApplicationRecord
+    include GridConfigurable
+
+    has_many :layouts, foreign_key: :layout_template_id, dependent: :nullify
+
+    validates :name, presence: true, uniqueness: true
+
+    # LayoutTemplate doesn't have child slots — it just defines the grid structure.
+    # We provide a `slots` method stub so GridConfigurable's sync_slots doesn't blow up
+    # if called, but it's not used on this model.
+    def slots
+      Slot.none
+    end
+  end
+end

data/app/models/jigsaw/page.rb

@@ -0,0 +1,35 @@
+module Jigsaw
+  class Page < ApplicationRecord
+    has_one :layout, dependent: :destroy
+
+    accepts_nested_attributes_for :layout, update_only: true
+
+    before_validation :normalize_path
+
+    validates :path, presence: true, uniqueness: true
+    validates :title, presence: true
+
+    after_save    :reload_application_routes, if: :saved_change_to_path?
+    after_destroy :reload_application_routes
+
+    after_save :sync_layout_slots, if: :layout
+
+    private
+
+      def normalize_path
+        return if path.nil?
+        self.path = path.to_s.strip.delete_prefix("/")
+      end
+
+      def sync_layout_slots
+        layout.sync_slots if layout&.saved_change_to_config?
+      end
+
+      def reload_application_routes
+        return unless defined?(Rails) && Rails.application
+        Rails.application.reload_routes!
+      rescue StandardError => e
+        Rails.logger.warn("[jigsaw] failed to reload routes: #{e.class}: #{e.message}") if defined?(Rails.logger)
+      end
+  end
+end

data/app/models/jigsaw/schemas/layout_config.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Layout Config",
+  "description": "Configuration for CSS Grid layouts",
+  "$ref": "#/$defs/gridConfig",
+  "$defs": {
+    "trackUnit": {
+      "type": "string",
+      "enum": ["fr", "px", "auto", "rem", "%", "min-content", "max-content"]
+    },
+    "gapUnit": {
+      "type": "string",
+      "enum": ["px", "rem", "%"]
+    },
+    "gridConfig": {
+      "type": "object",
+      "properties": {
+        "type": { "const": "grid" },
+        "areas": {
+          "type": "array",
+          "items": {
+            "type": "array",
+            "items": { "type": "string" }
+          },
+          "description": "2D array of area names (grid-template-areas). Use '.' for empty cells."
+        },
+        "columns": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "Array of CSS track-size strings for grid-template-columns"
+        },
+        "rows": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "Array of CSS track-size strings for grid-template-rows"
+        },
+        "gridWidth": {
+          "type": "string",
+          "description": "Container width CSS value"
+        },
+        "gridHeight": {
+          "type": "string",
+          "description": "Container height CSS value"
+        },
+        "rowGap": { "type": "number", "minimum": 0 },
+        "rowGapUnit": { "$ref": "#/$defs/gapUnit" },
+        "colGap": { "type": "number", "minimum": 0 },
+        "colGapUnit": { "$ref": "#/$defs/gapUnit" }
+      },
+      "required": ["type", "areas", "columns", "rows"],
+      "additionalProperties": false
+    }
+  }
+}