tina4ruby 0.5.2 → 3.0.0

data/lib/tina4/sql_translation.rb

@@ -0,0 +1,295 @@
+# frozen_string_literal: true
+
+require "digest"
+
+module Tina4
+  # Cross-engine SQL translator.
+  #
+  # Each database adapter calls the rules it needs. Rules are composable
+  # and stateless -- just string transforms.
+  #
+  # Also includes query caching with TTL support.
+  #
+  # Usage:
+  #   translated = Tina4::SQLTranslator.limit_to_rows("SELECT * FROM users LIMIT 10 OFFSET 5")
+  #   # => "SELECT * FROM users ROWS 6 TO 15"
+  #
+  class SQLTranslator
+    class << self
+      # Convert LIMIT/OFFSET to Firebird ROWS...TO syntax.
+      #
+      # LIMIT 10 OFFSET 5  =>  ROWS 6 TO 15
+      # LIMIT 10           =>  ROWS 1 TO 10
+      #
+      # @param sql [String]
+      # @return [String]
+      def limit_to_rows(sql)
+        # Try LIMIT X OFFSET Y first
+        if (m = sql.match(/\bLIMIT\s+(\d+)\s+OFFSET\s+(\d+)\s*$/i))
+          limit = m[1].to_i
+          offset = m[2].to_i
+          start_row = offset + 1
+          end_row = offset + limit
+          return sql[0...m.begin(0)] + "ROWS #{start_row} TO #{end_row}"
+        end
+
+        # Then try LIMIT X only
+        if (m = sql.match(/\bLIMIT\s+(\d+)\s*$/i))
+          limit = m[1].to_i
+          return sql[0...m.begin(0)] + "ROWS 1 TO #{limit}"
+        end
+
+        sql
+      end
+
+      # Convert LIMIT to MSSQL TOP syntax.
+      #
+      # SELECT ... LIMIT 10  =>  SELECT TOP 10 ...
+      # OFFSET queries are left unchanged (not supported by TOP).
+      #
+      # @param sql [String]
+      # @return [String]
+      def limit_to_top(sql)
+        if (m = sql.match(/\bLIMIT\s+(\d+)\s*$/i)) && !sql.match?(/\bOFFSET\b/i)
+          limit = m[1].to_i
+          body = sql[0...m.begin(0)].strip
+          return body.sub(/^(SELECT)\b/i, "\\1 TOP #{limit}")
+        end
+
+        sql
+      end
+
+      # Convert || concatenation to CONCAT() for MySQL/MSSQL.
+      #
+      # 'a' || 'b' || 'c'  =>  CONCAT('a', 'b', 'c')
+      #
+      # @param sql [String]
+      # @return [String]
+      def concat_pipes_to_func(sql)
+        return sql unless sql.include?("||")
+
+        parts = sql.split("||")
+        if parts.length > 1
+          "CONCAT(#{parts.map(&:strip).join(', ')})"
+        else
+          sql
+        end
+      end
+
+      # Convert TRUE/FALSE to 1/0 for engines without boolean type.
+      #
+      # @param sql [String]
+      # @return [String]
+      def boolean_to_int(sql)
+        sql.gsub(/\bTRUE\b/i, "1").gsub(/\bFALSE\b/i, "0")
+      end
+
+      # Convert ILIKE to LOWER() LIKE LOWER() for engines without ILIKE.
+      #
+      # @param sql [String]
+      # @return [String]
+      def ilike_to_like(sql)
+        sql.gsub(/(\S+)\s+ILIKE\s+(\S+)/i) do
+          col = ::Regexp.last_match(1).strip
+          val = ::Regexp.last_match(2).strip
+          "LOWER(#{col}) LIKE LOWER(#{val})"
+        end
+      end
+
+      # Translate AUTOINCREMENT across engines in DDL.
+      #
+      # @param sql [String]
+      # @param engine [String] one of: mysql, postgresql, mssql, firebird, sqlite
+      # @return [String]
+      def auto_increment_syntax(sql, engine)
+        case engine
+        when "mysql"
+          sql.gsub("AUTOINCREMENT", "AUTO_INCREMENT")
+        when "postgresql"
+          sql.gsub(/INTEGER\s+PRIMARY\s+KEY\s+AUTOINCREMENT/i, "SERIAL PRIMARY KEY")
+        when "mssql"
+          sql.gsub(/AUTOINCREMENT/i, "IDENTITY(1,1)")
+        when "firebird"
+          sql.gsub(/\s*AUTOINCREMENT\b/i, "")
+        else
+          sql
+        end
+      end
+
+      # Convert ? placeholders to engine-specific style.
+      #
+      # ?  =>  %s       (MySQL, PostgreSQL)
+      # ?  =>  :1, :2   (Oracle, Firebird)
+      #
+      # @param sql [String]
+      # @param style [String] target placeholder style: "%s" or ":"
+      # @return [String]
+      def placeholder_style(sql, style)
+        case style
+        when "%s"
+          sql.gsub("?", "%s")
+        when ":"
+          count = 0
+          sql.chars.map do |ch|
+            if ch == "?"
+              count += 1
+              ":#{count}"
+            else
+              ch
+            end
+          end.join
+        else
+          sql
+        end
+      end
+
+      # Generate a cache key for a query and its parameters.
+      #
+      # @param sql [String]
+      # @param params [Array, nil]
+      # @return [String]
+      def query_key(sql, params = nil)
+        raw = params ? "#{sql}|#{params.inspect}" : sql
+        "query:#{Digest::SHA256.hexdigest(raw)}"
+      end
+    end
+  end
+
+  # In-memory cache with TTL support for query results.
+  #
+  # Usage:
+  #   cache = Tina4::QueryCache.new(default_ttl: 60, max_size: 1000)
+  #   cache.set("key", "value", ttl: 30)
+  #   cache.get("key")  # => "value"
+  #
+  class QueryCache
+    CacheEntry = Struct.new(:value, :expires_at, :tags)
+
+    # @param default_ttl [Integer] default TTL in seconds (default: 300)
+    # @param max_size [Integer] maximum number of cache entries (default: 1000)
+    def initialize(default_ttl: 300, max_size: 1000)
+      @default_ttl = default_ttl
+      @max_size = max_size
+      @store = {}
+      @mutex = Mutex.new
+    end
+
+    # Store a value with optional TTL and tags.
+    #
+    # @param key [String]
+    # @param value [Object]
+    # @param ttl [Integer, nil] TTL in seconds (nil uses default)
+    # @param tags [Array<String>] optional tags for grouped invalidation
+    def set(key, value, ttl: nil, tags: [])
+      ttl ||= @default_ttl
+      expires_at = Time.now.to_f + ttl
+
+      @mutex.synchronize do
+        # Evict oldest if at capacity
+        if @store.size >= @max_size && !@store.key?(key)
+          oldest_key = @store.keys.first
+          @store.delete(oldest_key)
+        end
+        @store[key] = CacheEntry.new(value, expires_at, tags)
+      end
+    end
+
+    # Retrieve a cached value. Returns nil if expired or missing.
+    #
+    # @param key [String]
+    # @param default [Object] value to return if key is missing
+    # @return [Object, nil]
+    def get(key, default = nil)
+      @mutex.synchronize do
+        entry = @store[key]
+        return default unless entry
+
+        if Time.now.to_f > entry.expires_at
+          @store.delete(key)
+          return default
+        end
+
+        entry.value
+      end
+    end
+
+    # Check if a key exists and is not expired.
+    #
+    # @param key [String]
+    # @return [Boolean]
+    def has?(key)
+      @mutex.synchronize do
+        entry = @store[key]
+        return false unless entry
+
+        if Time.now.to_f > entry.expires_at
+          @store.delete(key)
+          return false
+        end
+
+        true
+      end
+    end
+
+    # Delete a key from the cache.
+    #
+    # @param key [String]
+    # @return [Boolean] true if the key was present
+    def delete(key)
+      @mutex.synchronize do
+        !@store.delete(key).nil?
+      end
+    end
+
+    # Clear all entries from the cache.
+    def clear
+      @mutex.synchronize { @store.clear }
+    end
+
+    # Clear all entries with a given tag.
+    #
+    # @param tag [String]
+    # @return [Integer] number of entries removed
+    def clear_tag(tag)
+      @mutex.synchronize do
+        keys_to_remove = @store.select { |_k, v| v.tags.include?(tag) }.keys
+        keys_to_remove.each { |k| @store.delete(k) }
+        keys_to_remove.size
+      end
+    end
+
+    # Remove all expired entries.
+    #
+    # @return [Integer] number of entries removed
+    def sweep
+      @mutex.synchronize do
+        now = Time.now.to_f
+        keys_to_remove = @store.select { |_k, v| now > v.expires_at }.keys
+        keys_to_remove.each { |k| @store.delete(k) }
+        keys_to_remove.size
+      end
+    end
+
+    # Fetch from cache, or compute and store.
+    #
+    # @param key [String]
+    # @param ttl [Integer] TTL in seconds
+    # @param block [Proc] factory to compute the value if not cached
+    # @return [Object]
+    def remember(key, ttl, &block)
+      cached = get(key)
+      return cached unless cached.nil?
+
+      value = block.call
+      set(key, value, ttl: ttl)
+      value
+    end
+
+    # Current number of entries in the cache.
+    #
+    # @return [Integer]
+    def size
+      @mutex.synchronize { @store.size }
+    end
+  end
+end

data/lib/tina4/template.rb

@@ -33,16 +33,18 @@ module Tina4
         end
       end
 
-      def render_error(code)
+      def render_error(code, data = {})
         error_dirs = TEMPLATE_DIRS.map { |d| File.join(Dir.pwd, d, "errors") }
         error_dirs << File.join(File.dirname(__FILE__), "templates", "errors")
 
+        context = { "code" => code }.merge(data.transform_keys(&:to_s))
+
         error_dirs.each do |dir|
           %w[.twig .html .erb].each do |ext|
             path = File.join(dir, "#{code}#{ext}")
             if File.exist?(path)
               content = File.read(path)
-              return TwigEngine.new({ "code" => code }, dir).render(content)
+              return TwigEngine.new(context, dir).render(content)
             end
           end
         end
@@ -66,10 +68,38 @@ module Tina4
       def default_error_html(code)
         messages = { 403 => "Forbidden", 404 => "Not Found", 500 => "Internal Server Error" }
         msg = messages[code] || "Error"
-        "<!DOCTYPE html><html><head><title>#{code} #{msg}</title></head>" \
-        "<body style='font-family:sans-serif;text-align:center;padding:50px;'>" \
-        "<h1>#{code}</h1><p>#{msg}</p><hr>" \
-        "<p style='color:#999;'>Tina4 Ruby v#{Tina4::VERSION}</p></body></html>"
+        colors = { 403 => "#f59e0b", 404 => "#3b82f6", 500 => "#ef4444" }
+        color = colors[code] || "#ef4444"
+        <<~HTML
+          <!DOCTYPE html>
+          <html lang="en">
+          <head>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <title>#{code} — #{msg}</title>
+          <style>
+          * { box-sizing: border-box; margin: 0; padding: 0; }
+          body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+          .error-card { background: #1e293b; border: 1px solid #334155; border-radius: 1rem; padding: 3rem; text-align: center; max-width: 520px; width: 90%; }
+          .error-code { font-size: 8rem; font-weight: 900; color: #{color}; opacity: 0.6; line-height: 1; margin-bottom: 0.5rem; }
+          .error-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
+          .error-msg { color: #94a3b8; font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.5; }
+          .error-home { display: inline-block; padding: 0.6rem 2rem; background: #3b82f6; color: #fff; text-decoration: none; border-radius: 0.5rem; font-size: 0.9rem; font-weight: 600; }
+          .error-home:hover { opacity: 0.9; }
+          .logo { font-size: 1.5rem; margin-bottom: 1rem; opacity: 0.5; }
+          </style>
+          </head>
+          <body>
+          <div class="error-card">
+              <div class="logo">T4</div>
+              <div class="error-code">#{code}</div>
+              <div class="error-title">#{msg}</div>
+              <div class="error-msg">Something went wrong while processing your request.</div>
+              <a href="/" class="error-home">Go Home</a>
+          </div>
+          </body>
+          </html>
+        HTML
       end
     end
 

data/lib/tina4/templates/base.twig

@@ -19,8 +19,8 @@
   <footer class="container mt-4 py-3 text-center text-muted border-top">
     <p>Powered by Tina4 Ruby v{{ tina4_version }}</p>
   </footer>
-  <script src="/js/tina4.js"></script>
-  <script src="/js/tina4helper.js"></script>
+  <script src="/js/tina4.min.js"></script>
+  <script src="/js/frond.min.js"></script>
   {% block scripts %}{% endblock %}
 </body>
 </html>

data/lib/tina4/templates/errors/302.twig

@@ -0,0 +1,14 @@
+{% extends "errors/base.twig" %}
+{% block title %}Redirecting…{% endblock %}
+{% block meta %}<meta http-equiv="refresh" content="0;url={{ redirect_url }}">{% endblock %}
+{% block extra_styles %}
+.spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 1rem; }
+@keyframes spin { to { transform: rotate(360deg); } }
+{% endblock %}
+{% block content %}
+    <div class="spinner"></div>
+    <div class="error-title">Redirecting…</div>
+    <div class="error-msg">You are being redirected to a new location.</div>
+    <div class="error-path" style="color:var(--primary)">{{ redirect_url }}</div>
+    <a href="{{ redirect_url }}" class="error-home">Click here if not redirected</a>
+{% endblock %}

data/lib/tina4/templates/errors/401.twig

@@ -0,0 +1,9 @@
+{% extends "errors/base.twig" %}
+{% block title %}401 — Unauthorized{% endblock %}
+{% block content %}
+    <div class="error-code" style="color:var(--danger)">401</div>
+    <div class="error-title">Unauthorized</div>
+    <div class="error-msg">You need to sign in to access this resource.</div>
+    <div class="error-path" style="color:var(--danger)">{{ path }}</div>
+    <a href="/" class="error-home">Go Home</a>
+{% endblock %}

data/lib/tina4/templates/errors/403.twig

@@ -1,22 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>403 Forbidden</title>
-  <style>
-    body { font-family: -apple-system, sans-serif; text-align: center; padding: 80px 20px; background: #f8f9fa; }
-    h1 { font-size: 6rem; color: #dc3545; margin: 0; }
-    p { font-size: 1.2rem; color: #6c757d; }
-    a { color: #0d6efd; text-decoration: none; }
-    .container { max-width: 600px; margin: 0 auto; }
-  </style>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>403 — Forbidden</title>
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+.error-card { background: #1e293b; border: 1px solid #334155; border-radius: 1rem; padding: 3rem; text-align: center; max-width: 520px; width: 90%; }
+.error-code { font-size: 8rem; font-weight: 900; color: #f59e0b; opacity: 0.6; line-height: 1; margin-bottom: 0.5rem; }
+.error-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
+.error-msg { color: #94a3b8; font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.5; }
+.error-path { font-family: 'SF Mono', monospace; background: #0f172a; color: #f59e0b; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.85rem; word-break: break-all; margin-bottom: 1.5rem; display: inline-block; }
+.error-home { display: inline-block; padding: 0.6rem 2rem; background: #3b82f6; color: #fff; text-decoration: none; border-radius: 0.5rem; font-size: 0.9rem; font-weight: 600; }
+.error-home:hover { opacity: 0.9; }
+</style>
 </head>
 <body>
-  <div class="container">
-    <h1>403</h1>
-    <p>Forbidden. You do not have permission to access this resource.</p>
-    <p><a href="/">Go Home</a></p>
-  </div>
+<div class="error-card">
+    <div class="error-code">403</div>
+    <div class="error-title">Forbidden</div>
+    <div class="error-msg">You don't have permission to access this resource.</div>
+    <div class="error-path">{{ path }}</div>
+    <br>
+    <a href="/" class="error-home">Go Home</a>
+</div>
 </body>
 </html>

data/lib/tina4/templates/errors/404.twig

@@ -1,22 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>404 Not Found</title>
-  <style>
-    body { font-family: -apple-system, sans-serif; text-align: center; padding: 80px 20px; background: #f8f9fa; }
-    h1 { font-size: 6rem; color: #ffc107; margin: 0; }
-    p { font-size: 1.2rem; color: #6c757d; }
-    a { color: #0d6efd; text-decoration: none; }
-    .container { max-width: 600px; margin: 0 auto; }
-  </style>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>404 — Not Found</title>
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+.error-card { background: #1e293b; border: 1px solid #334155; border-radius: 1rem; padding: 3rem; text-align: center; max-width: 520px; width: 90%; }
+.error-code { font-size: 8rem; font-weight: 900; color: #3b82f6; opacity: 0.6; line-height: 1; margin-bottom: 0.5rem; }
+.error-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
+.error-msg { color: #94a3b8; font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.5; }
+.error-path { font-family: 'SF Mono', monospace; background: #0f172a; color: #3b82f6; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.85rem; word-break: break-all; margin-bottom: 1.5rem; display: inline-block; }
+.error-home { display: inline-block; padding: 0.6rem 2rem; background: #3b82f6; color: #fff; text-decoration: none; border-radius: 0.5rem; font-size: 0.9rem; font-weight: 600; }
+.error-home:hover { opacity: 0.9; }
+</style>
 </head>
 <body>
-  <div class="container">
-    <h1>404</h1>
-    <p>Page not found. The requested resource could not be located.</p>
-    <p><a href="/">Go Home</a></p>
-  </div>
+<div class="error-card">
+    <div class="error-code">404</div>
+    <div class="error-title">Page Not Found</div>
+    <div class="error-msg">The page you're looking for doesn't exist or has been moved. Check the URL and try again.</div>
+    <div class="error-path">{{ path }}</div>
+    <br>
+    <a href="/" class="error-home">Go Home</a>
+</div>
 </body>
 </html>

data/lib/tina4/templates/errors/500.twig

@@ -1,22 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>500 Internal Server Error</title>
-  <style>
-    body { font-family: -apple-system, sans-serif; text-align: center; padding: 80px 20px; background: #f8f9fa; }
-    h1 { font-size: 6rem; color: #dc3545; margin: 0; }
-    p { font-size: 1.2rem; color: #6c757d; }
-    a { color: #0d6efd; text-decoration: none; }
-    .container { max-width: 600px; margin: 0 auto; }
-  </style>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>500 — Server Error</title>
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+.error-card { background: #1e293b; border: 1px solid #334155; border-radius: 1rem; padding: 3rem; text-align: left; max-width: 700px; width: 90%; }
+.error-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
+.error-code { font-size: 3rem; font-weight: 900; color: #ef4444; opacity: 0.7; }
+.error-title { font-size: 1.3rem; font-weight: 700; }
+.error-msg { color: #94a3b8; font-size: 0.95rem; margin-bottom: 1.5rem; line-height: 1.5; }
+.error-trace { background: #0f172a; border: 1px solid #334155; border-radius: 0.5rem; padding: 1rem; font-family: 'SF Mono', monospace; font-size: 0.8rem; line-height: 1.5; overflow-x: auto; max-height: 400px; overflow-y: auto; white-space: pre-wrap; color: #ef4444; margin-bottom: 1.5rem; }
+.error-footer { display: flex; justify-content: space-between; align-items: center; }
+.error-hint { color: #64748b; font-size: 0.75rem; }
+.error-id { color: #64748b; font-family: 'SF Mono', monospace; font-size: 0.75rem; }
+.error-home { display: inline-block; padding: 0.5rem 1.5rem; background: #3b82f6; color: #fff; text-decoration: none; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; }
+.error-home:hover { opacity: 0.9; }
+</style>
 </head>
 <body>
-  <div class="container">
-    <h1>500</h1>
-    <p>Internal Server Error. Something went wrong on our end.</p>
-    <p><a href="/">Go Home</a></p>
-  </div>
+<div class="error-card">
+    <div class="error-header">
+        <div class="error-code">500</div>
+        <div class="error-title">Server Error</div>
+    </div>
+    <div class="error-msg">Something went wrong while processing your request.</div>
+    <pre class="error-trace">{{ error_message }}</pre>
+    <div class="error-footer">
+        <span class="error-hint">Fix the error and save to auto-reload</span>
+        <span class="error-id">{{ request_id }}</span>
+        <a href="/" class="error-home">Go Home</a>
+    </div>
+</div>
 </body>
 </html>

data/lib/tina4/templates/errors/502.twig

@@ -0,0 +1,9 @@
+{% extends "errors/base.twig" %}
+{% block title %}502 — Bad Gateway{% endblock %}
+{% block content %}
+    <div class="error-code" style="color:var(--danger)">502</div>
+    <div class="error-title">Bad Gateway</div>
+    <div class="error-msg">The upstream server returned an invalid response.</div>
+    <div class="error-path" style="color:var(--danger)">{{ path }}</div>
+    <a href="/" class="error-home">Go Home</a>
+{% endblock %}

data/lib/tina4/templates/errors/503.twig

@@ -0,0 +1,12 @@
+{% extends "errors/base.twig" %}
+{% block title %}503 — Service Unavailable{% endblock %}
+{% block extra_styles %}
+.error-code { color: var(--warn); }
+{% endblock %}
+{% block content %}
+    <div class="error-code" style="color:var(--warn)">503</div>
+    <div class="error-title">Service Unavailable</div>
+    <div class="error-msg">The server is temporarily unavailable. Please try again shortly.</div>
+    <div class="error-path" style="color:var(--warn)">{{ path }}</div>
+    <a href="/" class="error-home">Go Home</a>
+{% endblock %}

data/lib/tina4/templates/errors/base.twig

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% block meta %}{% endblock %}
+<title>{% block title %}Error{% endblock %}</title>
+<style>
+:root {
+    --bg: #0f172a; --surface: #1e293b; --border: #334155;
+    --text: #e2e8f0; --muted: #94a3b8; --primary: #3b82f6;
+    --success: #22c55e; --danger: #ef4444; --warn: #f59e0b; --info: #06b6d4;
+    --radius: 1rem; --mono: 'SF Mono', ui-monospace, monospace;
+    --font: system-ui, -apple-system, sans-serif;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+.error-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 3rem; text-align: center; max-width: 480px; width: 90%; }
+.error-code { font-size: 5rem; font-weight: 800; opacity: 0.3; line-height: 1; }
+.error-title { font-size: 1.5rem; font-weight: 600; margin: 0.5rem 0; }
+.error-msg { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
+.error-path { font-family: var(--mono); background: var(--bg); padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.85rem; word-break: break-all; }
+.error-home { display: inline-block; margin-top: 1.5rem; padding: 0.5rem 1.5rem; background: var(--primary); color: #fff; text-decoration: none; border-radius: 0.5rem; font-size: 0.85rem; }
+.error-home:hover { opacity: 0.9; }
+.logo { width: 3rem; height: 3rem; margin-bottom: 1rem; opacity: 0.5; }
+{% block extra_styles %}{% endblock %}
+</style>
+</head>
+<body>
+{% block body %}
+<div class="error-card">
+    <img src="/images/logo.svg" class="logo" alt="Tina4">
+    {% block content %}{% endblock %}
+</div>
+{% endblock %}
+</body>
+</html>

data/lib/tina4/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Tina4
-  VERSION = "0.5.2"
+  VERSION = "3.0.0"
 end