rails-active-ui 0.1.0

data/app/javascript/transition.min.js

@@ -0,0 +1,11 @@
+/*
+ * # Fomantic UI - 2.9.4
+ * https://github.com/fomantic/Fomantic-UI
+ * https://fomantic-ui.com/
+ *
+ * Copyright 2026 Contributors
+ * Released under the MIT license
+ * https://opensource.org/licenses/MIT
+ *
+ */
+!function(h,n){"use strict";n=void 0!==n&&n.Math===Math?n:globalThis,h.fn.transition=function(...n){const o=h(this);let r=Date.now(),s=[];const p=n,g=n[0],v=n.slice(1);let b="string"==typeof g,y;return o.each(function(i){const l=h(this),d=this;let c,u,e,m,t,n,a;const f={initialize:function(){c=f.get.settings(...p),m=c.className,e=c.error,t=c.metadata,a="."+c.namespace,n="module-"+c.namespace,u=l.data(n)||f,!1===(b=b&&f.invoke(g))&&(f.verbose("Converted arguments into settings object",c),c.interval?f.delay(c.interval):f.animate(),f.instantiate())},instantiate:function(){f.verbose("Storing instance of module",f),u=f,l.data(n,u)},destroy:function(){f.verbose("Destroying previous module for",d),l.removeData(n)},refresh:function(){f.verbose("Refreshing display type on next animation"),delete f.displayType},forceRepaint:function(){f.verbose("Forcing element repaint");var n=l.parent(),e=l.next();0===e.length?l.detach().appendTo(n):l.detach().insertBefore(e)},repaint:function(){f.verbose("Repainting element");d.offsetWidth},delay:function(n=c.interval){let e=f.get.animationDirection();e=e||(f.can.transition()?f.get.direction():"static");n="auto"===c.reverse&&e===m.outward||!0===c.reverse?(o.length-i)*n:i*n;f.debug("Delaying animation by",n),setTimeout(function(){f.animate()},n)},animate:function(n=c){if(c=n,f.debug("Preparing animation",c.animation),f.is.animating()){if(c.queue)return!c.allowRepeats&&f.has.direction()&&f.is.occurring()&&!0!==f.queuing?f.debug("Animation is currently occurring, preventing queueing same animation",c.animation):f.queue(c.animation),!1;if(!c.allowRepeats&&f.is.occurring())return f.debug("Animation is already occurring, will not execute repeated animation",c.animation),!1;f.debug("New animation started, completing previous early",c.animation),u.complete()}f.can.animate()?f.set.animating(c.animation):f.error(e.noAnimation,c.animation,d)},reset:function(){f.debug("Resetting animation to beginning conditions"),f.remove.animationCallbacks(),f.restore.conditions(),f.remove.animating()},queue:function(n){f.debug("Queueing animation of",n),f.queuing=!0,l.one("animationend.queue"+a,function(){f.queuing=!1,f.repaint(),f.animate.call(this,c)})},complete:function(n){n&&n.target===d&&n.stopPropagation(),f.debug("Animation complete",c.animation),f.remove.completeCallback(),f.remove.failSafe(),f.is.looping()||(f.is.outward()?(f.verbose("Animation is outward, hiding element"),f.restore.conditions(),f.hide()):f.is.inward()?(f.verbose("Animation is inward, showing element"),f.restore.conditions(),f.show()):(f.verbose("Static animation completed"),f.restore.conditions(),c.onComplete.call(d)))},force:{visible:function(){var n=l.attr("style"),n=f.get.userStyle(n),e=f.get.displayType(),n=n+"display: "+e+" !important;",i=l[0].style.display;return!e||"none"===i&&c.skipInlineHidden||l[0].tagName.match(/(script|link|style)/i)?(f.remove.transition(),!1):(f.verbose("Overriding default display to show element",e),l.attr("style",n),!0)},hidden:function(){var n=l.attr("style"),n=void 0===n||""===n;"none"===l.css("display")||f.is.hidden()?n&&l.removeAttr("style"):(f.verbose("Overriding default display to hide element"),l.css("display","none"))}},has:{direction:function(n){let i=!1;return"string"==typeof(n=n||c.animation)&&(n=n.split(" "),h.each(n,function(n,e){e!==m.inward&&e!==m.outward||(i=!0)})),i},inlineDisplay:function(){const n=l.attr("style")||"";return Array.isArray(n.match(/display.*?;/,""))}},set:{animating:function(n){f.remove.completeCallback(),n=n||c.animation;n=f.get.animationClass(n);f.save.animation(n),f.force.visible()&&(f.remove.hidden(),f.remove.direction(),f.start.animation(n))},duration:function(n=c.duration){!(n="number"==typeof n?n+"ms":n)&&0!==n||(f.verbose("Setting animation duration",n),l.css({"animation-duration":n}))},direction:function(n=f.get.direction()){n===m.inward?f.set.inward():f.set.outward()},looping:function(){f.debug("Transition set to loop"),l.addClass(m.looping)},hidden:function(){l.addClass(m.transition).addClass(m.hidden)},inward:function(){f.debug("Setting direction to inward"),l.removeClass(m.outward).addClass(m.inward)},outward:function(){f.debug("Setting direction to outward"),l.removeClass(m.inward).addClass(m.outward)},visible:function(){l.addClass(m.transition).addClass(m.visible)}},start:{animation:function(n=f.get.animationClass()){f.debug("Starting tween",n),l.addClass(n).one("animationend.complete"+a,f.complete),c.useFailSafe&&f.add.failSafe(),f.set.duration(c.duration),c.onStart.call(d)}},save:{animation:function(n){f.cache||(f.cache={}),f.cache.animation=n},displayType:function(n){"none"!==n&&l.data(t.displayType,n)},transitionExists:function(n,e){h.fn.transition.exists[n]=e,f.verbose("Saving existence of transition",n,e)}},restore:{conditions:function(){var n=f.get.currentAnimation();n&&(l.removeClass(n),f.verbose("Removing animation class",f.cache)),f.remove.duration()}},add:{failSafe:function(){var n=f.get.duration();f.timer=setTimeout(function(){l.triggerHandler("animationend")},n+c.failSafeDelay),f.verbose("Adding fail safe timer",f.timer)}},remove:{animating:function(){l.removeClass(m.animating)},animationCallbacks:function(){f.remove.queueCallback(),f.remove.completeCallback()},queueCallback:function(){l.off(".queue"+a)},completeCallback:function(){l.off(".complete"+a)},display:function(){l.css("display","")},direction:function(){l.removeClass(m.inward).removeClass(m.outward)},duration:function(){l.css("animation-duration","")},failSafe:function(){f.verbose("Removing fail safe timer",f.timer),f.timer&&clearTimeout(f.timer)},hidden:function(){l.removeClass(m.hidden)},visible:function(){l.removeClass(m.visible)},looping:function(){f.debug("Transitions are no longer looping"),f.is.looping()&&(f.reset(),l.removeClass(m.looping))},transition:function(){l.removeClass(m.transition).removeClass(m.visible).removeClass(m.hidden)}},get:{settings:function(n,e,i){return"object"==typeof n?h.extend(!0,{},h.fn.transition.settings,n):"function"==typeof i?h.extend({},h.fn.transition.settings,{animation:n,onComplete:i,duration:e}):"string"==typeof e||"number"==typeof e?h.extend({},h.fn.transition.settings,{animation:n,duration:e}):"object"==typeof e?h.extend({},h.fn.transition.settings,e,{animation:n}):"function"==typeof e?h.extend({},h.fn.transition.settings,{animation:n,onComplete:e}):h.extend({},h.fn.transition.settings,{animation:n})},animationClass:function(n=c.animation){var e=f.can.transition()&&!f.has.direction()?f.get.direction()+" ":"";return m.animating+" "+m.transition+" "+e+n},currentAnimation:function(){return!(!f.cache||void 0===f.cache.animation)&&f.cache.animation},currentDirection:function(){return f.is.inward()?m.inward:m.outward},direction:function(){return f.is.hidden()||!f.is.visible()?m.inward:m.outward},animationDirection:function(n=c.animation){let i;return"string"==typeof n&&(n=n.split(" "),h.each(n,function(n,e){e===m.inward?i=m.inward:e===m.outward&&(i=m.outward)})),i||!1},duration:function(n=c.duration){return"string"==typeof(n=!1===n?l.css("animation-duration")||0:n)?n.includes("ms")?Number.parseFloat(n):1e3*Number.parseFloat(n):n},displayType:function(n=!0){return c.displayType||(n&&void 0===l.data(t.displayType)&&(""===(n=l.css("display"))||"none"===n?f.can.transition(!0):f.save.displayType(n)),l.data(t.displayType))},userStyle:function(n){return(n=n||l.attr("style")||"").replace(/display.*?;/,"")},transitionExists:function(n){return h.fn.transition.exists[n]}},can:{transition:function(n){var e,i,t=c.animation,a=f.get.transitionExists(t);let o=f.get.displayType(!1),r,s;if(void 0===a||n){if(f.verbose("Determining whether animation exists"),n=l.attr("class"),e=l.prop("tagName"),e=(r=h("<"+e+" />").addClass(n).insertAfter(l)).addClass(t).removeClass(m.inward).removeClass(m.outward).addClass(m.animating).addClass(m.transition).css("animationName"),r.detach().insertAfter(l),i=r.addClass(m.inward).css("animationName"),o||(r.detach().insertAfter(l),o=r.attr("class",n).removeAttr("style").removeClass(m.hidden).removeClass(m.visible).show().css("display"),f.verbose("Determining final display state",o),f.save.displayType(o)),r.remove(),e!==i)f.debug("Direction exists for animation",t),s=!0;else{if("none"===e||!e)return void f.debug("No animation defined in css",t);f.debug("Static animation found",t,o),s=!1}f.save.transitionExists(t,s)}return void 0!==a?a:s},animate:function(){return void 0!==f.can.transition()}},is:{animating:function(){return l.hasClass(m.animating)},inward:function(){return l.hasClass(m.inward)},outward:function(){return l.hasClass(m.outward)},looping:function(){return l.hasClass(m.looping)},occurring:function(n=c.animation){return n="."+n.replace(" ","."),0<l.filter(n).length},visible:function(){return l.is(":visible")},hidden:function(){return"hidden"===l.css("visibility")},supported:function(){return!0}},hide:function(){if(!1===c.onHide.call(d))return f.verbose("Hide callback returned false cancelling hide"),!1;f.verbose("Hiding element"),f.is.animating()&&f.reset(),d.blur(),f.remove.display(),f.remove.visible(),c.onBeforeHide.call(d,f.hideNow)},hideNow:function(){f.set.hidden(),f.force.hidden(),c.onHidden.call(d),c.onComplete.call(d)},show:function(n){f.force.visible()&&!1!==c.onShow.call(d)&&(f.verbose("Showing element",n),f.remove.hidden(),c.onBeforeShow.call(d,f.showNow))},showNow:function(){f.set.visible(),c.onVisible.call(d),c.onComplete.call(d)},toggle:function(){f.is.visible()?f.hide():f.show()},stop:function(){f.debug("Stopping current animation"),l.triggerHandler("animationend")},stopAll:function(){f.debug("Stopping all animation"),f.remove.queueCallback(),l.triggerHandler("animationend")},clear:{queue:function(){f.debug("Clearing animation queue"),f.remove.queueCallback()}},enable:function(){f.verbose("Starting animation"),l.removeClass(m.disabled)},disable:function(){f.debug("Stopping animation"),l.addClass(m.disabled)},setting:function(n,e){if(f.debug("Changing setting",n,e),h.isPlainObject(n))h.extend(!0,c,n);else{if(void 0===e)return c[n];h.isPlainObject(c[n])?h.extend(!0,c[n],e):c[n]=e}},internal:function(n,e){if(h.isPlainObject(n))h.extend(!0,f,n);else{if(void 0===e)return f[n];f[n]=e}},debug:function(...n){!c.silent&&c.debug&&(c.performance?f.performance.log(n):(f.debug=Function.prototype.bind.call(console.info,console,c.name+":"),f.debug.apply(console,n)))},verbose:function(...n){!c.silent&&c.verbose&&c.debug&&(c.performance?f.performance.log(n):(f.verbose=Function.prototype.bind.call(console.info,console,c.name+":"),f.verbose.apply(console,n)))},error:function(...n){c.silent||(f.error=Function.prototype.bind.call(console.error,console,c.name+":"),f.error.apply(console,n))},performance:{log:function(n){var e,i;c.performance&&(i=(e=Date.now())-(r||e),r=e,s.push({Name:n[0],Arguments:n.slice(1),Element:d,"Execution Time":i})),clearTimeout(f.performance.timer),f.performance.timer=setTimeout(function(){f.performance.display()},500)},display:function(){let n=c.name+":",i=0;r=!1,clearTimeout(f.performance.timer),h.each(s,function(n,e){i+=e["Execution Time"]}),n+=" "+i+"ms",1<o.length&&(n+=" ("+o.length+")"),0<s.length&&(console.groupCollapsed(n),console.table(s),console.groupEnd()),s=[]}},invoke:function(t,n=v,e=d){let a=u,o,r,i;var s;return"string"==typeof t&&void 0!==a&&(t=t.split(/[ .]/),o=t.length-1,h.each(t,function(n,e){var i=n!==o?e+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(h.isPlainObject(a[i])&&n!==o)a=a[i];else{if(void 0!==a[i])return r=a[i],!1;{if(!h.isPlainObject(a[e])||n===o)return void 0!==a[e]&&(r=a[e]),!1;a=a[e]}}})),"function"==typeof(s=r)&&"number"!=typeof s.nodeType?i=r.apply(e,n):void 0!==r&&(i=r),Array.isArray(y)?y.push(i):void 0!==y?y=[y,i]:void 0!==i&&(y=i),void 0!==r&&r}};f.initialize()}),void 0!==y?y:this},h.fn.transition.exists={},h.fn.transition.settings={name:"Transition",silent:!1,debug:!1,verbose:!1,performance:!0,namespace:"transition",interval:0,reverse:"auto",onStart:function(){},onComplete:function(){},onShow:function(){},onBeforeShow:function(n){n.call(this)},onVisible:function(){},onHide:function(){},onHidden:function(){},onBeforeHide:function(n){n.call(this)},useFailSafe:!0,failSafeDelay:100,allowRepeats:!1,displayType:!1,animation:"fade",duration:!1,queue:!0,skipInlineHidden:!1,metadata:{displayType:"display"},className:{animating:"animating",disabled:"disabled",hidden:"hidden",inward:"in",loading:"loading",looping:"looping",outward:"out",transition:"transition",visible:"visible"},error:{noAnimation:"Element is no longer attached to DOM. Unable to animate.  Use silent setting to suppress this warning in production."}}}(jQuery,window,document);

data/app/javascript/ui/controllers/fui_accordion_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Accordion — collapsible content panels.
+// Bridges: $.fn.accordion
+//
+// Usage:
+//   <div class="ui accordion" data-controller="fui-accordion">
+//     <div class="title"><i class="dropdown icon"></i> Section</div>
+//     <div class="content"><p>Panel content</p></div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    exclusive:   { type: Boolean, default: true },
+    collapsible: { type: Boolean, default: true },
+    duration:    { type: Number, default: 350 },
+  }
+
+  connect() {
+    $(this.element).accordion(this._options())
+  }
+
+  disconnect() {
+    $(this.element).accordion("destroy")
+  }
+
+  open(index)  { $(this.element).accordion("open", index) }
+  close(index) { $(this.element).accordion("close", index) }
+  toggle(index){ $(this.element).accordion("toggle", index) }
+
+  // -- Private --
+
+  _options() {
+    return {
+      exclusive:   this.exclusiveValue,
+      collapsible: this.collapsibleValue,
+      duration:    this.durationValue,
+      onOpening: () => { this.dispatch("opening") },
+      onOpen:    () => { this.dispatch("open") },
+      onClosing: () => { this.dispatch("closing") },
+      onClose:   () => { this.dispatch("close") },
+      onChange:   () => { this.dispatch("change") },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_api_controller.js

@@ -0,0 +1,80 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI API — AJAX request management with state toggling.
+// Bridges: $.fn.api
+//
+// Usage:
+//   <button data-controller="fui-api"
+//           data-fui-api-url-value="/api/items"
+//           data-fui-api-method-value="get"
+//           data-action="click->fui-api#query">
+//     Load Items
+//   </button>
+//
+export default class extends Controller {
+  static values = {
+    url:             { type: String, default: "" },
+    method:          { type: String, default: "get" },
+    dataType:        { type: String, default: "json" },
+    serializeForm:   { type: Boolean, default: false },
+    cache:           { type: Boolean, default: false },
+    loadingDuration: { type: Number, default: 0 },
+    errorDuration:   { type: Number, default: 2000 },
+    throttle:        { type: Number, default: 0 },
+    on:              { type: String, default: "" },
+  }
+
+  connect() {
+    // Only auto-initialize if 'on' is set (e.g., "click", "now").
+    // Otherwise, API is triggered via the query() action.
+    if (this.onValue) {
+      $(this.element).api(this._options())
+    }
+  }
+
+  disconnect() {
+    $(this.element).api("destroy")
+  }
+
+  query() {
+    $(this.element).api(this._options()).api("query")
+  }
+
+  abort() {
+    $(this.element).api("abort")
+  }
+
+  // -- Private --
+
+  _options() {
+    const opts = {
+      url:             this.urlValue,
+      method:          this.methodValue,
+      dataType:        this.dataTypeValue,
+      serializeForm:   this.serializeFormValue,
+      cache:           this.cacheValue,
+      loadingDuration: this.loadingDurationValue,
+      errorDuration:   this.errorDurationValue,
+      throttle:        this.throttleValue,
+      onSuccess: (response) => {
+        this.dispatch("success", { detail: { response } })
+      },
+      onFailure: (response) => {
+        this.dispatch("failure", { detail: { response } })
+      },
+      onComplete: (response) => {
+        this.dispatch("complete", { detail: { response } })
+      },
+      onAbort: () => {
+        this.dispatch("abort")
+      },
+      onError: (errorMessage) => {
+        this.dispatch("error", { detail: { error: errorMessage } })
+      },
+    }
+
+    if (this.onValue) opts.on = this.onValue
+
+    return opts
+  }
+}

data/app/javascript/ui/controllers/fui_calendar_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Calendar — date/time picker popup.
+// Bridges: $.fn.calendar
+//
+// Usage:
+//   <div class="ui calendar" data-controller="fui-calendar"
+//        data-fui-calendar-type-value="date">
+//     <div class="ui input left icon">
+//       <i class="calendar icon"></i>
+//       <input type="text" placeholder="Date">
+//     </div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    type:         { type: String, default: "date" },
+    closable:     { type: Boolean, default: true },
+    monthFirst:   { type: Boolean, default: true },
+    firstDayOfWeek: { type: Number, default: 0 },
+    today:        { type: Boolean, default: false },
+    formatInput:  { type: Boolean, default: true },
+    minDate:      { type: String, default: "" },
+    maxDate:      { type: String, default: "" },
+  }
+
+  connect() {
+    $(this.element).calendar(this._options())
+  }
+
+  disconnect() {
+    $(this.element).calendar("destroy")
+  }
+
+  show()   { $(this.element).calendar("popup", "show") }
+  hide()   { $(this.element).calendar("popup", "hide") }
+  toggle() { $(this.element).calendar("popup", "toggle") }
+  clear()  { $(this.element).calendar("clear") }
+  focus()  { $(this.element).calendar("focus") }
+
+  getDate()    { return $(this.element).calendar("get date") }
+  setDate(d)   { $(this.element).calendar("set date", d) }
+
+  // -- Private --
+
+  _options() {
+    const opts = {
+      type:           this.typeValue,
+      closable:       this.closableValue,
+      monthFirst:     this.monthFirstValue,
+      firstDayOfWeek: this.firstDayOfWeekValue,
+      today:          this.todayValue,
+      formatInput:    this.formatInputValue,
+      onChange: (date, text) => {
+        this.dispatch("change", { detail: { date, text } })
+      },
+      onShow: () => { this.dispatch("show") },
+      onHide: () => { this.dispatch("hide") },
+    }
+
+    if (this.minDateValue) opts.minDate = new Date(this.minDateValue)
+    if (this.maxDateValue) opts.maxDate = new Date(this.maxDateValue)
+
+    return opts
+  }
+}

data/app/javascript/ui/controllers/fui_checkbox_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Checkbox — checkboxes, radios, toggles, sliders.
+// Bridges: $.fn.checkbox
+//
+// Usage:
+//   <div class="ui checkbox" data-controller="fui-checkbox">
+//     <input type="checkbox">
+//     <label>Accept terms</label>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    uncheckable:    { type: Boolean, default: true },
+    fireOnInit:     { type: Boolean, default: false },
+    enableEnterKey: { type: Boolean, default: true },
+  }
+
+  connect() {
+    $(this.element).checkbox(this._options())
+  }
+
+  disconnect() {
+    $(this.element).checkbox("destroy")
+  }
+
+  toggle()    { $(this.element).checkbox("toggle") }
+  check()     { $(this.element).checkbox("check") }
+  uncheck()   { $(this.element).checkbox("uncheck") }
+  enable()    { $(this.element).checkbox("enable") }
+  disable()   { $(this.element).checkbox("disable") }
+  isChecked() { return $(this.element).checkbox("is checked") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      uncheckable:    this.uncheckableValue,
+      fireOnInit:     this.fireOnInitValue,
+      enableEnterKey: this.enableEnterKeyValue,
+      onChecked:   () => { this.dispatch("checked") },
+      onUnchecked: () => { this.dispatch("unchecked") },
+      onChange:     () => { this.dispatch("change") },
+      onEnable:    () => { this.dispatch("enable") },
+      onDisable:   () => { this.dispatch("disable") },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_dimmer_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Dimmer — page/element overlay.
+// Bridges: $.fn.dimmer
+//
+// Usage:
+//   <div class="dimmable" data-controller="fui-dimmer">
+//     <div class="ui dimmer">
+//       <div class="content">Dimmed content</div>
+//     </div>
+//     <p>Page content</p>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    closable:   { type: Boolean, default: true },
+    on:         { type: String, default: "" },
+    transition: { type: String, default: "fade" },
+  }
+
+  connect() {
+    $(this.element).dimmer(this._options())
+  }
+
+  disconnect() {
+    $(this.element).dimmer("destroy")
+  }
+
+  show()   { $(this.element).dimmer("show") }
+  hide()   { $(this.element).dimmer("hide") }
+  toggle() { $(this.element).dimmer("toggle") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      closable:   this.closableValue,
+      on:         this.onValue || false,
+      transition: this.transitionValue,
+      onShow:   () => { this.dispatch("show") },
+      onHide:   () => { this.dispatch("hide") },
+      onChange: () => { this.dispatch("change") },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_dropdown_controller.js

@@ -0,0 +1,68 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Dropdown — selection dropdowns with search support.
+// Bridges: $.fn.dropdown
+//
+// Usage:
+//   <div class="ui selection dropdown" data-controller="fui-dropdown">
+//     <input type="hidden" name="field">
+//     <div class="default text">Select...</div>
+//     <i class="dropdown icon"></i>
+//     <div class="menu">
+//       <div class="item" data-value="1">Option 1</div>
+//       <div class="item" data-value="2">Option 2</div>
+//     </div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    clearable:      { type: Boolean, default: false },
+    placeholder:    { type: String, default: "" },
+    forceSelection: { type: Boolean, default: false },
+    fullTextSearch:  { type: Boolean, default: false },
+    duration:       { type: Number, default: 200 },
+    allowAdditions: { type: Boolean, default: false },
+  }
+
+  connect() {
+    $(this.element).dropdown(this._options())
+  }
+
+  disconnect() {
+    $(this.element).dropdown("destroy")
+  }
+
+  show()   { $(this.element).dropdown("show") }
+  hide()   { $(this.element).dropdown("hide") }
+  toggle() { $(this.element).dropdown("toggle") }
+  clear()  { $(this.element).dropdown("clear") }
+  refresh(){ $(this.element).dropdown("refresh") }
+
+  getValue()    { return $(this.element).dropdown("get value") }
+  getText()     { return $(this.element).dropdown("get text") }
+  setValue(val) { $(this.element).dropdown("set selected", val) }
+
+  // -- Private --
+
+  _options() {
+    return {
+      clearable:      this.clearableValue,
+      placeholder:    this.placeholderValue || false,
+      forceSelection: this.forceSelectionValue,
+      fullTextSearch:  this.fullTextSearchValue,
+      duration:       this.durationValue,
+      allowAdditions: this.allowAdditionsValue,
+      onChange: (value, text, $choice) => {
+        this.dispatch("change", { detail: { value, text } })
+      },
+      onShow:   () => { this.dispatch("show") },
+      onHide:   () => { this.dispatch("hide") },
+      onAdd:    (addedValue, addedText, $addedChoice) => {
+        this.dispatch("add", { detail: { value: addedValue, text: addedText } })
+      },
+      onRemove: (removedValue, removedText, $removedChoice) => {
+        this.dispatch("remove", { detail: { value: removedValue, text: removedText } })
+      },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_embed_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Embed — embedded video/iframe with placeholder.
+// Bridges: $.fn.embed
+//
+// Usage:
+//   <div class="ui embed" data-controller="fui-embed"
+//        data-source="youtube" data-id="dQw4w9WgXcQ">
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    source:   { type: String, default: "" },
+    id:       { type: String, default: "" },
+    url:      { type: String, default: "" },
+    autoplay: { type: Boolean, default: true },
+    color:    { type: String, default: "#444" },
+    hd:       { type: Boolean, default: true },
+  }
+
+  connect() {
+    $(this.element).embed(this._options())
+  }
+
+  disconnect() {
+    $(this.element).embed("destroy")
+  }
+
+  show()  { $(this.element).embed("show") }
+  reset() { $(this.element).embed("reset") }
+
+  // -- Private --
+
+  _options() {
+    const opts = {
+      autoplay: this.autoplayValue,
+      color:    this.colorValue,
+      hd:       this.hdValue,
+      onCreate: (url) => { this.dispatch("create", { detail: { url } }) },
+      onDisplay: ()   => { this.dispatch("display") },
+    }
+
+    if (this.sourceValue) opts.source = this.sourceValue
+    if (this.idValue)     opts.id = this.idValue
+    if (this.urlValue)    opts.url = this.urlValue
+
+    return opts
+  }
+}

data/app/javascript/ui/controllers/fui_flyout_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Flyout — slide-out panel from screen edge.
+// Bridges: $.fn.flyout
+//
+// Usage:
+//   <div class="ui right flyout" data-controller="fui-flyout">
+//     <i class="close icon"></i>
+//     <div class="header">Title</div>
+//     <div class="content">Content here</div>
+//     <div class="actions">
+//       <button class="ui approve button">OK</button>
+//       <button class="ui deny button">Cancel</button>
+//     </div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    closable:          { type: Boolean, default: true },
+    dimPage:           { type: Boolean, default: true },
+    keyboardShortcuts: { type: Boolean, default: true },
+  }
+
+  connect() {
+    $(this.element).flyout(this._options())
+  }
+
+  disconnect() {
+    $(this.element).flyout("destroy")
+  }
+
+  show()   { $(this.element).flyout("show") }
+  hide()   { $(this.element).flyout("hide") }
+  toggle() { $(this.element).flyout("toggle") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      closable:          this.closableValue,
+      dimPage:           this.dimPageValue,
+      keyboardShortcuts: this.keyboardShortcutsValue,
+      onShow:    () => { this.dispatch("show") },
+      onHide:    () => { this.dispatch("hide") },
+      onApprove: () => { this.dispatch("approve") },
+      onDeny:    () => { this.dispatch("deny") },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_form_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Form — client-side validation with inline error display.
+// Bridges: $.fn.form
+//
+// Usage:
+//   <form class="ui form" data-controller="fui-form"
+//         data-fui-form-inline-value="true">
+//     <div class="field">
+//       <label>Email</label>
+//       <input type="email" name="email">
+//     </div>
+//     <div class="ui error message"></div>
+//   </form>
+//
+export default class extends Controller {
+  static values = {
+    inline:            { type: Boolean, default: false },
+    on:                { type: String, default: "submit" },
+    keyboardShortcuts: { type: Boolean, default: true },
+    revalidate:        { type: Boolean, default: true },
+    rules:             { type: String, default: "" },
+  }
+
+  connect() {
+    const opts = this._options()
+
+    if (this.rulesValue) {
+      try { opts.fields = JSON.parse(this.rulesValue) }
+      catch (e) { /* invalid JSON, skip */ }
+    }
+
+    $(this.element).form(opts)
+  }
+
+  disconnect() {
+    $(this.element).form("destroy")
+  }
+
+  validate()  { return $(this.element).form("validate form") }
+  reset()     { $(this.element).form("reset") }
+  clear()     { $(this.element).form("clear") }
+  isValid()   { return $(this.element).form("is valid") }
+  getValues() { return $(this.element).form("get values") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      inline:            this.inlineValue,
+      on:                this.onValue,
+      keyboardShortcuts: this.keyboardShortcutsValue,
+      revalidate:        this.revalidateValue,
+      onSuccess: () => {
+        this.dispatch("success")
+      },
+      onFailure: (formErrors, fields) => {
+        this.dispatch("failure", { detail: { errors: formErrors, fields } })
+      },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_modal_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Modal — dialog windows with dimmer.
+// Bridges: $.fn.modal
+//
+// Usage:
+//   <div class="ui modal" data-controller="fui-modal">
+//     <i class="close icon"></i>
+//     <div class="header">Modal Title</div>
+//     <div class="content">Content here</div>
+//     <div class="actions">
+//       <button class="ui approve button">OK</button>
+//       <button class="ui deny button">Cancel</button>
+//     </div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    closable:          { type: Boolean, default: true },
+    dimmerSettings:    { type: Boolean, default: true },
+    blurring:          { type: Boolean, default: false },
+    keyboardShortcuts: { type: Boolean, default: true },
+    duration:          { type: Number, default: 500 },
+    transition:        { type: String, default: "scale" },
+    autofocus:         { type: Boolean, default: true },
+    allowMultiple:     { type: Boolean, default: false },
+  }
+
+  connect() {
+    $(this.element).modal(this._options())
+  }
+
+  disconnect() {
+    $(this.element).modal("destroy")
+  }
+
+  show()   { $(this.element).modal("show") }
+  hide()   { $(this.element).modal("hide") }
+  toggle() { $(this.element).modal("toggle") }
+  refresh(){ $(this.element).modal("refresh") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      closable:          this.closableValue,
+      blurring:          this.blurringValue,
+      keyboardShortcuts: this.keyboardShortcutsValue,
+      duration:          this.durationValue,
+      transition:        this.transitionValue,
+      autofocus:         this.autofocusValue,
+      allowMultiple:     this.allowMultipleValue,
+      onShow:    () => { this.dispatch("show") },
+      onVisible: () => { this.dispatch("visible") },
+      onHide:    () => { this.dispatch("hide") },
+      onHidden:  () => { this.dispatch("hidden") },
+      onApprove: () => { this.dispatch("approve") },
+      onDeny:    () => { this.dispatch("deny") },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_nag_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Nag — persistent dismissible notification bar.
+// Bridges: $.fn.nag
+//
+// Usage:
+//   <div class="ui nag" data-controller="fui-nag"
+//        data-fui-nag-key-value="cookie-notice">
+//     <span class="title">We use cookies.</span>
+//     <i class="close icon"></i>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    key:           { type: String, default: "nag" },
+    value:         { type: String, default: "dismiss" },
+    storageMethod: { type: String, default: "localstorage" },
+    expires:       { type: Number, default: 30 },
+    displayTime:   { type: Number, default: 0 },
+    persist:       { type: Boolean, default: false },
+  }
+
+  connect() {
+    $(this.element).nag(this._options())
+  }
+
+  disconnect() {
+    $(this.element).nag("destroy")
+  }
+
+  show()    { $(this.element).nag("show") }
+  hide()    { $(this.element).nag("hide") }
+  dismiss() { $(this.element).nag("dismiss") }
+  clear()   { $(this.element).nag("clear") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      key:           this.keyValue,
+      value:         this.valueValue,
+      storageMethod: this.storageMethodValue,
+      expires:       this.expiresValue,
+      displayTime:   this.displayTimeValue,
+      persist:       this.persistValue,
+      onShow:    () => { this.dispatch("show") },
+      onVisible: () => { this.dispatch("visible") },
+      onHide:    () => { this.dispatch("hide") },
+      onHidden:  () => { this.dispatch("hidden") },
+    }
+  }
+}