flowengine-rails 0.1.0

data/app/assets/stylesheets/flow_engine/application.css

@@ -0,0 +1,569 @@
+/* FlowEngine — Adaptive Theme System
+ *
+ * Every visual token is a CSS custom property. Override at the .fe-container
+ * level or higher to reshape the wizard for any host theme.
+ *
+ *   .my-dark-theme .fe-container {
+ *     --fe-bg: #1c1c1e;
+ *     --fe-fg: #f5f5f7;
+ *     --fe-accent: #6ee7b7;
+ *   }
+ */
+
+/* ------------------------------------------------------------------ */
+/*  Design Tokens                                                      */
+/* ------------------------------------------------------------------ */
+
+.fe-container {
+  /* Surface & text */
+  --fe-bg: #ffffff;
+  --fe-fg: #1d1d1f;
+  --fe-fg-secondary: #6e6e73;
+  --fe-fg-tertiary: #aeaeb2;
+
+  /* Accent — a single hue drives the whole palette */
+  --fe-accent: #0071e3;
+  --fe-accent-hover: #0077ed;
+  --fe-accent-subtle: color-mix(in srgb, var(--fe-accent) 8%, transparent);
+  --fe-accent-ring: color-mix(in srgb, var(--fe-accent) 20%, transparent);
+
+  /* Surfaces */
+  --fe-surface: #f5f5f7;
+  --fe-surface-hover: #e8e8ed;
+  --fe-surface-raised: #ffffff;
+  --fe-border: #d2d2d7;
+  --fe-border-light: #e5e5ea;
+
+  /* Feedback */
+  --fe-success: #248a3d;
+  --fe-success-bg: #dafbe8;
+  --fe-error: #d70015;
+  --fe-error-bg: #ffe5e7;
+
+  /* Typography */
+  --fe-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --fe-font-display: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --fe-font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", monospace;
+  --fe-line-height: 1.55;
+
+  /* Spacing scale (4px base) */
+  --fe-space-xs: 0.25rem;
+  --fe-space-sm: 0.5rem;
+  --fe-space-md: 1rem;
+  --fe-space-lg: 1.5rem;
+  --fe-space-xl: 2rem;
+  --fe-space-2xl: 3rem;
+
+  /* Shape */
+  --fe-radius-sm: 6px;
+  --fe-radius-md: 10px;
+  --fe-radius-lg: 14px;
+  --fe-radius-full: 9999px;
+
+  /* Shadows */
+  --fe-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --fe-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --fe-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  --fe-shadow-focus: 0 0 0 3px var(--fe-accent-ring);
+
+  /* Transitions */
+  --fe-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --fe-duration-fast: 120ms;
+  --fe-duration: 200ms;
+  --fe-duration-slow: 400ms;
+
+  /* Layout */
+  --fe-max-width: 680px;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Container                                                          */
+/* ------------------------------------------------------------------ */
+
+.fe-container {
+  max-width: var(--fe-max-width);
+  margin: 0 auto;
+  padding: var(--fe-space-xl) var(--fe-space-lg);
+  font-family: var(--fe-font-body);
+  font-size: 1rem;
+  color: var(--fe-fg);
+  line-height: var(--fe-line-height);
+  background: var(--fe-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Flash Messages                                                     */
+/* ------------------------------------------------------------------ */
+
+.fe-flash {
+  padding: var(--fe-space-sm) var(--fe-space-md);
+  margin-bottom: var(--fe-space-md);
+  border-radius: var(--fe-radius-sm);
+  font-size: 0.875rem;
+  font-weight: 500;
+  animation: fe-slide-in var(--fe-duration) var(--fe-ease) both;
+}
+.fe-flash--notice {
+  background: var(--fe-success-bg);
+  color: var(--fe-success);
+}
+.fe-flash--alert {
+  background: var(--fe-error-bg);
+  color: var(--fe-error);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Progress Bar                                                       */
+/* ------------------------------------------------------------------ */
+
+.fe-progress {
+  background: var(--fe-surface);
+  border-radius: var(--fe-radius-full);
+  height: 6px;
+  position: relative;
+  margin-bottom: var(--fe-space-2xl);
+  overflow: hidden;
+}
+.fe-progress__bar {
+  background: var(--fe-accent);
+  height: 100%;
+  border-radius: var(--fe-radius-full);
+  transition: width var(--fe-duration-slow) var(--fe-ease);
+  min-width: 0;
+  position: relative;
+}
+.fe-progress__bar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    transparent 100%
+  );
+  animation: fe-shimmer 2s ease-in-out infinite;
+}
+.fe-progress__text {
+  display: block;
+  margin-top: var(--fe-space-xs);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--fe-fg-tertiary);
+  text-align: right;
+  letter-spacing: 0.02em;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Step                                                               */
+/* ------------------------------------------------------------------ */
+
+.fe-step {
+  margin-bottom: var(--fe-space-xl);
+  animation: fe-fade-up var(--fe-duration-slow) var(--fe-ease) both;
+}
+
+.fe-step__question {
+  font-family: var(--fe-font-display);
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0 0 var(--fe-space-lg);
+  color: var(--fe-fg);
+  letter-spacing: -0.01em;
+}
+
+.fe-step__actions {
+  margin-top: var(--fe-space-xl);
+  display: flex;
+  align-items: center;
+  gap: var(--fe-space-sm);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Form Fields                                                        */
+/* ------------------------------------------------------------------ */
+
+.fe-field {
+  margin-bottom: var(--fe-space-md);
+}
+
+/* Radio & Checkbox — card-style selectors */
+.fe-checkbox,
+.fe-radio {
+  display: flex;
+  align-items: center;
+  gap: var(--fe-space-sm);
+  padding: var(--fe-space-sm) var(--fe-space-md);
+  margin-bottom: var(--fe-space-xs);
+  cursor: pointer;
+  font-size: 0.9375rem;
+  border-radius: var(--fe-radius-sm);
+  border: 1px solid var(--fe-border-light);
+  background: var(--fe-surface-raised);
+  transition:
+    border-color var(--fe-duration-fast) var(--fe-ease),
+    background var(--fe-duration-fast) var(--fe-ease),
+    box-shadow var(--fe-duration-fast) var(--fe-ease);
+}
+.fe-checkbox:hover,
+.fe-radio:hover {
+  border-color: var(--fe-border);
+  background: var(--fe-surface);
+}
+.fe-checkbox:has(input:checked),
+.fe-radio:has(input:checked) {
+  border-color: var(--fe-accent);
+  background: var(--fe-accent-subtle);
+}
+.fe-checkbox input,
+.fe-radio input {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--fe-accent);
+  flex-shrink: 0;
+}
+
+/* Matrix rows */
+.fe-matrix-row {
+  display: flex;
+  align-items: center;
+  gap: var(--fe-space-md);
+  padding: var(--fe-space-sm) 0;
+}
+.fe-matrix-row__label {
+  min-width: 160px;
+  font-weight: 500;
+  font-size: 0.9375rem;
+  color: var(--fe-fg);
+}
+
+/* Text inputs */
+.fe-input {
+  display: block;
+  width: 100%;
+  padding: var(--fe-space-sm) 0.75rem;
+  font-size: 0.9375rem;
+  font-family: var(--fe-font-body);
+  line-height: 1.5;
+  color: var(--fe-fg);
+  border: 1px solid var(--fe-border);
+  border-radius: var(--fe-radius-sm);
+  background: var(--fe-surface-raised);
+  box-sizing: border-box;
+  transition:
+    border-color var(--fe-duration-fast) var(--fe-ease),
+    box-shadow var(--fe-duration-fast) var(--fe-ease);
+}
+.fe-input::placeholder {
+  color: var(--fe-fg-tertiary);
+}
+.fe-input:focus {
+  outline: none;
+  border-color: var(--fe-accent);
+  box-shadow: var(--fe-shadow-focus);
+}
+.fe-input--number {
+  width: 120px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Textarea — full-width, generous height */
+.fe-input--textarea {
+  width: 100%;
+  min-height: 160px;
+  resize: vertical;
+  font-family: var(--fe-font-body);
+  line-height: 1.6;
+  padding: 0.75rem;
+  box-sizing: border-box;
+}
+.fe-input--code {
+  font-family: var(--fe-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  tab-size: 2;
+}
+
+.fe-label {
+  display: block;
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: var(--fe-space-xs);
+  color: var(--fe-fg);
+  letter-spacing: 0.01em;
+}
+
+.fe-form-group {
+  margin-bottom: var(--fe-space-md);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Buttons                                                            */
+/* ------------------------------------------------------------------ */
+
+.fe-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fe-space-xs);
+  padding: 0.625rem 1.375rem;
+  font-family: var(--fe-font-body);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1;
+  border: 1px solid var(--fe-border);
+  border-radius: var(--fe-radius-sm);
+  background: var(--fe-surface-raised);
+  color: var(--fe-fg);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background var(--fe-duration-fast) var(--fe-ease),
+    border-color var(--fe-duration-fast) var(--fe-ease),
+    box-shadow var(--fe-duration-fast) var(--fe-ease),
+    transform var(--fe-duration-fast) var(--fe-ease);
+}
+.fe-btn:hover {
+  background: var(--fe-surface);
+  border-color: var(--fe-border);
+}
+.fe-btn:active {
+  transform: scale(0.98);
+}
+
+.fe-btn--primary {
+  background: var(--fe-accent);
+  color: #fff;
+  border-color: var(--fe-accent);
+}
+.fe-btn--primary:hover {
+  background: var(--fe-accent-hover);
+  border-color: var(--fe-accent-hover);
+  box-shadow: var(--fe-shadow-md);
+}
+.fe-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tables                                                             */
+/* ------------------------------------------------------------------ */
+
+.fe-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--fe-space-md) 0;
+  font-size: 0.9375rem;
+}
+.fe-table th,
+.fe-table td {
+  text-align: left;
+  padding: var(--fe-space-sm) 0.75rem;
+  border-bottom: 1px solid var(--fe-border-light);
+}
+.fe-table th {
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--fe-fg-secondary);
+  background: transparent;
+}
+.fe-table tr:hover td {
+  background: var(--fe-accent-subtle);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Code Blocks                                                        */
+/* ------------------------------------------------------------------ */
+
+.fe-code {
+  background: var(--fe-surface);
+  border: 1px solid var(--fe-border-light);
+  border-radius: var(--fe-radius-md);
+  padding: var(--fe-space-md);
+  overflow-x: auto;
+  font-family: var(--fe-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Errors                                                             */
+/* ------------------------------------------------------------------ */
+
+.fe-errors {
+  background: var(--fe-error-bg);
+  border: 1px solid color-mix(in srgb, var(--fe-error) 20%, transparent);
+  border-radius: var(--fe-radius-md);
+  padding: var(--fe-space-md);
+  margin-bottom: var(--fe-space-md);
+  color: var(--fe-error);
+  animation: fe-shake var(--fe-duration-slow) var(--fe-ease);
+}
+.fe-errors h3 {
+  margin: 0 0 var(--fe-space-sm);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.fe-errors ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.875rem;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Definition Cards                                                   */
+/* ------------------------------------------------------------------ */
+
+.fe-definition-card {
+  border: 1px solid var(--fe-border-light);
+  border-radius: var(--fe-radius-md);
+  padding: var(--fe-space-md) var(--fe-space-lg);
+  margin-bottom: var(--fe-space-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--fe-surface-raised);
+  box-shadow: var(--fe-shadow-sm);
+  transition:
+    box-shadow var(--fe-duration) var(--fe-ease),
+    border-color var(--fe-duration) var(--fe-ease);
+}
+.fe-definition-card:hover {
+  box-shadow: var(--fe-shadow-md);
+  border-color: var(--fe-border);
+}
+.fe-definition-card h2 {
+  margin: 0;
+  font-family: var(--fe-font-display);
+  font-size: 1.0625rem;
+  font-weight: 600;
+}
+.fe-definition-card small {
+  color: var(--fe-fg-tertiary);
+  font-weight: 400;
+  font-size: 0.8125rem;
+}
+
+.fe-definition-group {
+  margin-bottom: var(--fe-space-xl);
+}
+.fe-definition-group h2 {
+  font-family: var(--fe-font-display);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fe-fg-secondary);
+  border-bottom: 1px solid var(--fe-border-light);
+  padding-bottom: var(--fe-space-sm);
+  margin-bottom: var(--fe-space-md);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Completed View                                                     */
+/* ------------------------------------------------------------------ */
+
+.fe-completed {
+  text-align: center;
+  animation: fe-fade-up var(--fe-duration-slow) var(--fe-ease) both;
+}
+.fe-completed h1 {
+  font-family: var(--fe-font-display);
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--fe-success);
+  letter-spacing: -0.02em;
+}
+.fe-completed__summary {
+  text-align: left;
+  margin-top: var(--fe-space-xl);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Display & Hints                                                    */
+/* ------------------------------------------------------------------ */
+
+.fe-display-text {
+  font-size: 0.9375rem;
+  color: var(--fe-fg-secondary);
+  line-height: 1.6;
+}
+.fe-field__hint {
+  font-size: 0.8125rem;
+  color: var(--fe-fg-tertiary);
+  font-style: normal;
+  margin-top: var(--fe-space-xs);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mermaid                                                            */
+/* ------------------------------------------------------------------ */
+
+.fe-mermaid {
+  margin: var(--fe-space-md) 0;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Animations                                                         */
+/* ------------------------------------------------------------------ */
+
+@keyframes fe-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fe-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fe-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(200%); }
+}
+
+@keyframes fe-shake {
+  0%, 100% { transform: translateX(0); }
+  15% { transform: translateX(-4px); }
+  30% { transform: translateX(3px); }
+  45% { transform: translateX(-2px); }
+  60% { transform: translateX(1px); }
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .fe-step,
+  .fe-completed,
+  .fe-flash,
+  .fe-errors {
+    animation: none;
+  }
+  .fe-progress__bar::after {
+    animation: none;
+  }
+  .fe-progress__bar {
+    transition: none;
+  }
+}

data/app/controllers/flow_engine/admin/definitions_controller.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module FlowEngine
+  module Admin
+    class DefinitionsController < ApplicationController
+      before_action :authenticate_admin!
+      before_action :set_definition, only: %i[show edit update destroy activate deactivate mermaid]
+
+      def index
+        @definitions = FlowEngine::FlowDefinition.order(:name, version: :desc)
+        @grouped = @definitions.group_by(&:name)
+      end
+
+      def show; end
+
+      def new
+        @definition = FlowEngine::FlowDefinition.new
+      end
+
+      def create
+        @definition = FlowEngine::FlowDefinition.new(definition_params)
+
+        if @definition.save
+          redirect_to admin_definition_path(@definition), notice: "Definition created."
+        else
+          render :new, status: :unprocessable_entity
+        end
+      end
+
+      def edit
+        return unless @definition.readonly?
+
+        redirect_to admin_definition_path(@definition),
+                    alert: "Cannot edit definition with existing sessions. Create a new version instead."
+        nil
+      end
+
+      def update
+        if @definition.readonly?
+          redirect_to admin_definition_path(@definition),
+                      alert: "Cannot edit definition with existing sessions."
+          return
+        end
+
+        if @definition.update(definition_params)
+          FlowEngine::Rails::DslLoader.clear_cache!
+          redirect_to admin_definition_path(@definition), notice: "Definition updated."
+        else
+          render :edit, status: :unprocessable_entity
+        end
+      end
+
+      def destroy
+        if @definition.flow_sessions.exists?
+          redirect_to admin_definitions_path, alert: "Cannot delete definition with existing sessions."
+          return
+        end
+
+        @definition.destroy!
+        redirect_to admin_definitions_path, notice: "Definition deleted."
+      end
+
+      def activate
+        @definition.activate!
+        redirect_to admin_definition_path(@definition), notice: "Definition activated."
+      end
+
+      def deactivate
+        @definition.deactivate!
+        redirect_to admin_definition_path(@definition), notice: "Definition deactivated."
+      end
+
+      def mermaid
+        @diagram = @definition.mermaid_diagram
+      end
+
+      private
+
+      def set_definition
+        @definition = FlowEngine::FlowDefinition.find(params[:id])
+      end
+
+      def definition_params
+        params.expect(definition: %i[name dsl])
+      end
+
+      def authenticate_admin!
+        method_name = FlowEngine::Rails.configuration.admin_authentication_method
+        return unless method_name
+
+        send(method_name)
+      end
+    end
+  end
+end

data/app/controllers/flow_engine/application_controller.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module FlowEngine
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+
+    before_action :detect_embed_mode
+    before_action :set_cors_headers, if: :embed_mode?
+
+    helper_method :embed_mode?
+
+    private
+
+    def detect_embed_mode
+      @embed_mode = params[:embed] == "true"
+    end
+
+    def embed_mode?
+      @embed_mode
+    end
+
+    def set_cors_headers
+      allowed_origins = FlowEngine::Rails.configuration.embed_allowed_origins
+      origin = request.headers["Origin"]
+
+      return unless origin && (allowed_origins.include?("*") || allowed_origins.include?(origin))
+
+      response.headers["Access-Control-Allow-Origin"] = origin
+      response.headers["Access-Control-Allow-Methods"] = "GET, POST, PATCH"
+      response.headers["Access-Control-Allow-Headers"] = "Content-Type"
+    end
+
+    def current_layout
+      if embed_mode?
+        FlowEngine::Rails.configuration.embed_layout
+      else
+        FlowEngine::Rails.configuration.default_layout
+      end
+    end
+  end
+end