hotwirebits 0.1.0

data/app/javascript/controllers/hotwirebits/index.js

@@ -0,0 +1,216 @@
+// HotwireBits Stimulus controllers index
+// Import this file in your app/javascript/controllers/index.js
+
+import { application } from "../application"
+
+// HotwireBits controllers — original
+import RbAccordionController from "./rb_accordion_controller"
+import RbAlertController from "./rb_alert_controller"
+import RbBannerController from "./rb_banner_controller"
+import RbBurgerController from "./rb_burger_controller"
+import RbCalendarController from "./rb_calendar_controller"
+import RbCarouselController from "./rb_carousel_controller"
+import RbClipboardController from "./rb_clipboard_controller"
+import RbCollapsibleController from "./rb_collapsible_controller"
+import RbComboboxController from "./rb_combobox_controller"
+import RbCookieConsentController from "./rb_cookie_consent_controller"
+import RbCountdownController from "./rb_countdown_controller"
+import RbDatepickerController from "./rb_datepicker_controller"
+import RbDialogController from "./rb_dialog_controller"
+import RbDrawerController from "./rb_drawer_controller"
+import RbDropdownController from "./rb_dropdown_controller"
+import RbFeedbackController from "./rb_feedback_controller"
+import RbHighlightController from "./rb_highlight_controller"
+import RbKanbanController from "./rb_kanban_controller"
+import RbMarqueeController from "./rb_marquee_controller"
+import RbMenubarController from "./rb_menubar_controller"
+import RbMultiselectController from "./rb_multiselect_controller"
+import RbOtpController from "./rb_otp_controller"
+import RbPasswordController from "./rb_password_controller"
+import RbPopoverController from "./rb_popover_controller"
+import RbRatingController from "./rb_rating_controller"
+import RbResizableController from "./rb_resizable_controller"
+import RbSearchController from "./rb_search_controller"
+import RbSheetController from "./rb_sheet_controller"
+import RbSidebarController from "./rb_sidebar_controller"
+import RbSpeedDialController from "./rb_speed_dial_controller"
+import RbSpoilerController from "./rb_spoiler_controller"
+import RbStepsController from "./rb_steps_controller"
+import RbSwapController from "./rb_swap_controller"
+import RbSwitchController from "./rb_switch_controller"
+import RbTabsController from "./rb_tabs_controller"
+import RbTagsController from "./rb_tags_controller"
+import RbThemeController from "./rb_theme_controller"
+import RbToastController from "./rb_toast_controller"
+import RbToggleController from "./rb_toggle_controller"
+import RbTreeController from "./rb_tree_controller"
+
+// HotwireBits controllers — missing from original set
+import RbBadgeController from "./rb_badge_controller"
+import RbPaginatorController from "./rb_paginator_controller"
+import RbToggleButtonController from "./rb_toggle_button_controller"
+import RbToggleButtonGroupController from "./rb_toggle_button_group_controller"
+
+// HotwireBits controllers — new stubs
+import RbActivityFeedController from "./rb_activity_feed_controller"
+import RbAiChatController from "./rb_ai_chat_controller"
+import RbAngleSliderController from "./rb_angle_slider_controller"
+import RbAnimatedNumberController from "./rb_animated_number_controller"
+import RbAutocompleteController from "./rb_autocomplete_controller"
+import RbCodeHighlightController from "./rb_code_highlight_controller"
+import RbColorInputController from "./rb_color_input_controller"
+import RbColorPickerController from "./rb_color_picker_controller"
+import RbCommandBarController from "./rb_command_bar_controller"
+import RbCompareController from "./rb_compare_controller"
+import RbConfirmDialogController from "./rb_confirm_dialog_controller"
+import RbConfirmPopupController from "./rb_confirm_popup_controller"
+import RbContextMenuController from "./rb_context_menu_controller"
+import RbCookieSettingsController from "./rb_cookie_settings_controller"
+import RbDataViewController from "./rb_data_view_controller"
+import RbDateRangeController from "./rb_date_range_controller"
+import RbDragDropController from "./rb_drag_drop_controller"
+import RbFileBrowserController from "./rb_file_browser_controller"
+import RbHover3dController from "./rb_hover_3d_controller"
+import RbHoverCardController from "./rb_hover_card_controller"
+import RbHoverGalleryController from "./rb_hover_gallery_controller"
+import RbImageController from "./rb_image_controller"
+import RbImageCompareController from "./rb_image_compare_controller"
+import RbImageZoomController from "./rb_image_zoom_controller"
+import RbInlineEditController from "./rb_inline_edit_controller"
+import RbInplaceController from "./rb_inplace_controller"
+import RbInputNumberController from "./rb_input_number_controller"
+import RbJsonInputController from "./rb_json_input_controller"
+import RbKnobController from "./rb_knob_controller"
+import RbLightboxController from "./rb_lightbox_controller"
+import RbLikeController from "./rb_like_controller"
+import RbListboxController from "./rb_listbox_controller"
+import RbMonthPickerController from "./rb_month_picker_controller"
+import RbMonthPickerInputController from "./rb_month_picker_input_controller"
+import RbNavMenuController from "./rb_nav_menu_controller"
+import RbNewsletterController from "./rb_newsletter_controller"
+import RbNotificationController from "./rb_notification_controller"
+import RbPanelController from "./rb_panel_controller"
+import RbPasswordStrengthController from "./rb_password_strength_controller"
+import RbPasswordToggleController from "./rb_password_toggle_controller"
+import RbPortalController from "./rb_portal_controller"
+import RbQuickviewController from "./rb_quickview_controller"
+import RbRangeSliderController from "./rb_range_slider_controller"
+import RbRichTextEditorController from "./rb_rich_text_editor_controller"
+import RbSignatureController from "./rb_signature_controller"
+import RbSplitterController from "./rb_splitter_controller"
+import RbStepperFormController from "./rb_stepper_form_controller"
+import RbTagInputController from "./rb_tag_input_controller"
+import RbThemeSelectorController from "./rb_theme_selector_controller"
+import RbTimePickerController from "./rb_time_picker_controller"
+import RbTooltipController from "./rb_tooltip_controller"
+import RbTwoFactorController from "./rb_two_factor_controller"
+import RbValidatorController from "./rb_validator_controller"
+import RbVoiceRecorderController from "./rb_voice_recorder_controller"
+import RbTextRotateController from "./rb_text_rotate_controller"
+
+// Register all controllers — original
+application.register("hw-accordion", RbAccordionController)
+application.register("hw-alert", RbAlertController)
+application.register("hw-banner", RbBannerController)
+application.register("hw-burger", RbBurgerController)
+application.register("hw-calendar", RbCalendarController)
+application.register("hw-carousel", RbCarouselController)
+application.register("hw-clipboard", RbClipboardController)
+application.register("hw-collapsible", RbCollapsibleController)
+application.register("hw-combobox", RbComboboxController)
+application.register("hw-cookie-consent", RbCookieConsentController)
+application.register("hw-countdown", RbCountdownController)
+application.register("hw-datepicker", RbDatepickerController)
+application.register("hw-dialog", RbDialogController)
+application.register("hw-drawer", RbDrawerController)
+application.register("hw-dropdown", RbDropdownController)
+application.register("hw-feedback", RbFeedbackController)
+application.register("hw-highlight", RbHighlightController)
+application.register("hw-kanban", RbKanbanController)
+application.register("hw-marquee", RbMarqueeController)
+application.register("hw-menubar", RbMenubarController)
+application.register("hw-multiselect", RbMultiselectController)
+application.register("hw-otp", RbOtpController)
+application.register("hw-password", RbPasswordController)
+application.register("hw-popover", RbPopoverController)
+application.register("hw-rating", RbRatingController)
+application.register("hw-resizable", RbResizableController)
+application.register("hw-search", RbSearchController)
+application.register("hw-sheet", RbSheetController)
+application.register("hw-sidebar", RbSidebarController)
+application.register("hw-speed-dial", RbSpeedDialController)
+application.register("hw-spoiler", RbSpoilerController)
+application.register("hw-steps", RbStepsController)
+application.register("hw-swap", RbSwapController)
+application.register("hw-switch", RbSwitchController)
+application.register("hw-tabs", RbTabsController)
+application.register("hw-tags", RbTagsController)
+application.register("hw-theme", RbThemeController)
+application.register("hw-toast", RbToastController)
+application.register("hw-toggle", RbToggleController)
+application.register("hw-tree", RbTreeController)
+
+// Register all controllers — missing from original set
+application.register("hw-badge", RbBadgeController)
+application.register("hw-paginator", RbPaginatorController)
+application.register("hw-toggle-button", RbToggleButtonController)
+application.register("hw-toggle-group", RbToggleButtonGroupController)
+
+// Register all controllers — new stubs
+application.register("hw-activity-feed", RbActivityFeedController)
+application.register("hw-ai-chat", RbAiChatController)
+application.register("hw-angle-slider", RbAngleSliderController)
+application.register("hw-animated-number", RbAnimatedNumberController)
+application.register("hw-autocomplete", RbAutocompleteController)
+application.register("hw-code-highlight", RbCodeHighlightController)
+application.register("hw-color-input", RbColorInputController)
+application.register("hw-color-picker", RbColorPickerController)
+application.register("hw-command-bar", RbCommandBarController)
+application.register("hw-compare", RbCompareController)
+application.register("hw-confirm-dialog", RbConfirmDialogController)
+application.register("hw-confirm-popup", RbConfirmPopupController)
+application.register("hw-context-menu", RbContextMenuController)
+application.register("hw-cookie-settings", RbCookieSettingsController)
+application.register("hw-data-view", RbDataViewController)
+application.register("hw-date-range", RbDateRangeController)
+application.register("hw-drag-drop", RbDragDropController)
+application.register("hw-file-browser", RbFileBrowserController)
+application.register("hw-hover-3d", RbHover3dController)
+application.register("hw-hover-card", RbHoverCardController)
+application.register("hw-hover-gallery", RbHoverGalleryController)
+application.register("hw-image", RbImageController)
+application.register("hw-image-compare", RbImageCompareController)
+application.register("hw-image-zoom", RbImageZoomController)
+application.register("hw-inline-edit", RbInlineEditController)
+application.register("hw-inplace", RbInplaceController)
+application.register("hw-input-number", RbInputNumberController)
+application.register("hw-json-input", RbJsonInputController)
+application.register("hw-knob", RbKnobController)
+application.register("hw-lightbox", RbLightboxController)
+application.register("hw-like", RbLikeController)
+application.register("hw-listbox", RbListboxController)
+application.register("hw-month-picker", RbMonthPickerController)
+application.register("hw-month-picker-input", RbMonthPickerInputController)
+application.register("hw-nav-menu", RbNavMenuController)
+application.register("hw-newsletter", RbNewsletterController)
+application.register("hw-notification", RbNotificationController)
+application.register("hw-panel", RbPanelController)
+application.register("hw-password-strength", RbPasswordStrengthController)
+application.register("hw-password-toggle", RbPasswordToggleController)
+application.register("hw-portal", RbPortalController)
+application.register("hw-quickview", RbQuickviewController)
+application.register("hw-range-slider", RbRangeSliderController)
+application.register("hw-rich-text-editor", RbRichTextEditorController)
+application.register("hw-signature", RbSignatureController)
+application.register("hw-splitter", RbSplitterController)
+application.register("hw-stepper-form", RbStepperFormController)
+application.register("hw-tag-input", RbTagInputController)
+application.register("hw-theme-selector", RbThemeSelectorController)
+application.register("hw-time-picker", RbTimePickerController)
+application.register("hw-tooltip", RbTooltipController)
+application.register("hw-two-factor", RbTwoFactorController)
+application.register("hw-validator", RbValidatorController)
+application.register("hw-voice-recorder", RbVoiceRecorderController)
+application.register("hw-text-rotate", RbTextRotateController)
+
+export default application

data/app/javascript/controllers/hotwirebits/rb_accordion_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+  static values = { open: { type: Boolean, default: false } }
+
+  toggle() {
+    this.openValue = !this.openValue
+    this.contentTarget.classList.toggle("hidden", !this.openValue)
+    this.trigger?.setAttribute("aria-expanded", this.openValue.toString())
+  }
+
+  get trigger() {
+    return this.element.querySelector('[data-action~="hw-accordion#toggle"]')
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_activity_feed_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["list"]
+
+  load() { this.dispatch("load") }
+
+  append(event) {
+    if (this.hasListTarget) this.listTarget.insertAdjacentHTML("afterbegin", event.detail.html)
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_ai_chat_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["messages", "input"]
+  static values = { endpoint: { type: String, default: "" } }
+
+  send() {
+    if (!this.hasInputTarget) return
+    const msg = this.inputTarget.value.trim()
+    if (!msg) return
+    this.inputTarget.value = ""
+    this.dispatch("send", { detail: { message: msg } })
+  }
+
+  appendMessage(event) {
+    if (this.hasMessagesTarget) {
+      this.messagesTarget.insertAdjacentHTML("beforeend", event.detail.html)
+      this.messagesTarget.scrollTop = this.messagesTarget.scrollHeight
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_alert_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { animation: { type: String, default: "fade" } }
+
+  connect() {
+    this._onAnimationEnd = this._onAnimationEnd.bind(this)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("animationend", this._onAnimationEnd)
+  }
+
+  dismiss() {
+    this.element.classList.add(`animate-${this.animationValue}-out`)
+    this.element.addEventListener("animationend", this._onAnimationEnd)
+  }
+
+  _onAnimationEnd() {
+    this.element.classList.add("hidden")
+    this.element.removeEventListener("animationend", this._onAnimationEnd)
+    this.dispatch("dismissed")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_angle_slider_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["track", "input"]
+  static values = { min: { type: Number, default: 0 }, max: { type: Number, default: 360 }, value: { type: Number, default: 0 } }
+
+  input(event) {
+    this.valueValue = parseFloat(event.target.value)
+    this.dispatch("change", { detail: { value: this.valueValue } })
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_animated_number_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_autocomplete_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "dropdown", "hidden"]
+  static values = { minLength: { type: Number, default: 1 } }
+
+  connect() {
+    this._onOutsideClick = (e) => { if (!this.element.contains(e.target)) this.close() }
+    document.addEventListener("click", this._onOutsideClick)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._onOutsideClick)
+  }
+
+  search() {
+    const q = this.inputTarget.value.trim()
+    if (q.length < this.minLengthValue) { this.close(); return }
+    this.open()
+    this.dispatch("search", { detail: { query: q } })
+  }
+
+  open() { if (this.hasDropdownTarget) this.dropdownTarget.classList.remove("hidden") }
+  close() { if (this.hasDropdownTarget) this.dropdownTarget.classList.add("hidden") }
+
+  select(event) {
+    const { value } = event.currentTarget.dataset
+    const label = event.currentTarget.textContent.trim()
+    this.inputTarget.value = label
+    if (this.hasHiddenTarget) this.hiddenTarget.value = value
+    this.close()
+    this.dispatch("select", { detail: { value, label } })
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_badge_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  dismiss() {
+    this.element.classList.add("hidden")
+    this.dispatch("dismiss")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_banner_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { key: { type: String, default: "banner_dismissed" } }
+
+  connect() {
+    this._onAnimationEnd = this._onAnimationEnd.bind(this)
+    if (localStorage.getItem(this.keyValue) === "true") {
+      this.element.classList.add("hidden")
+    }
+  }
+
+  disconnect() {
+    this.element.removeEventListener("animationend", this._onAnimationEnd)
+  }
+
+  dismiss() {
+    this.element.classList.add("animate-slide-up-out")
+    this.element.addEventListener("animationend", this._onAnimationEnd)
+  }
+
+  _onAnimationEnd() {
+    this.element.classList.add("hidden")
+    localStorage.setItem(this.keyValue, "true")
+    this.element.removeEventListener("animationend", this._onAnimationEnd)
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_burger_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["line1", "line2", "line3"]
+  static values = { open: { type: Boolean, default: false } }
+
+  toggle() {
+    this.openValue = !this.openValue
+    this.render()
+    this.dispatch("change", { detail: { open: this.openValue } })
+  }
+
+  render() {
+    this.element.setAttribute("aria-expanded", this.openValue.toString())
+    this.element.classList.toggle("is-open", this.openValue)
+    this.element.classList.toggle("is-closed", !this.openValue)
+  }
+
+  handleKeydown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault()
+      this.toggle()
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_calendar_controller.js

@@ -0,0 +1,85 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["month", "year", "grid", "prevMonth", "nextMonth", "selected"]
+  static values = {
+    date: { type: String, default: "" },
+    month: { type: Number },
+    year: { type: Number }
+  }
+
+  connect() {
+    const now = new Date()
+    this.monthValue = this.monthValue ?? now.getMonth()
+    this.yearValue = this.yearValue ?? now.getFullYear()
+    this.selectedDate = this.dateValue ? new Date(this.dateValue) : null
+    this.render()
+  }
+
+  prevMonth() {
+    this.monthValue--
+    if (this.monthValue < 0) {
+      this.monthValue = 11
+      this.yearValue--
+    }
+    this.render()
+  }
+
+  nextMonth() {
+    this.monthValue++
+    if (this.monthValue > 11) {
+      this.monthValue = 0
+      this.yearValue++
+    }
+    this.render()
+  }
+
+  selectDate(event) {
+    const day = parseInt(event.currentTarget.dataset.day, 10)
+    this.selectedDate = new Date(this.yearValue, this.monthValue, day)
+    this.render()
+    this.dispatch("select", {
+      detail: {
+        date: this.selectedDate.toISOString().split("T")[0],
+        day: this.selectedDate.getDate(),
+        month: this.selectedDate.getMonth(),
+        year: this.selectedDate.getFullYear()
+      }
+    })
+  }
+
+  render() {
+    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+    if (this.hasMonthTarget) this.monthTarget.textContent = months[this.monthValue]
+    if (this.hasYearTarget) this.yearTarget.textContent = this.yearValue
+    if (!this.hasGridTarget) return
+
+    this.gridTarget.innerHTML = ""
+    const firstDay = new Date(this.yearValue, this.monthValue, 1).getDay()
+    const daysInMonth = new Date(this.yearValue, this.monthValue + 1, 0).getDate()
+    const today = new Date()
+
+    for (let i = 0; i < firstDay; i++) {
+      const empty = document.createElement("div")
+      empty.className = "calendar-day empty"
+      this.gridTarget.appendChild(empty)
+    }
+
+    for (let d = 1; d <= daysInMonth; d++) {
+      const cell = document.createElement("button")
+      cell.type = "button"
+      cell.className = "calendar-day"
+      cell.dataset.day = d
+      cell.textContent = d
+
+      const isToday = today.getDate() === d && today.getMonth() === this.monthValue && today.getFullYear() === this.yearValue
+      const isSelected = this.selectedDate && this.selectedDate.getDate() === d && this.selectedDate.getMonth() === this.monthValue && this.selectedDate.getFullYear() === this.yearValue
+
+      cell.classList.toggle("is-today", isToday)
+      cell.classList.toggle("is-selected", isSelected)
+      cell.setAttribute("aria-selected", isSelected.toString())
+      cell.setAttribute("data-action", "click->hw-calendar#selectDate")
+      this.gridTarget.appendChild(cell)
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_carousel_controller.js

@@ -0,0 +1,74 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["track", "slide", "prev", "next", "dots", "dot"]
+  static values = {
+    index: { type: Number, default: 0 },
+    autoplay: { type: Boolean, default: false },
+    interval: { type: Number, default: 5000 },
+    loop: { type: Boolean, default: true }
+  }
+
+  connect() {
+    if (this.autoplayValue) this.startAutoplay()
+    this.render()
+  }
+
+  disconnect() {
+    this.stopAutoplay()
+  }
+
+  next() {
+    const max = this.slideTargets.length - 1
+    if (this.indexValue < max) {
+      this.indexValue++
+    } else if (this.loopValue) {
+      this.indexValue = 0
+    }
+    this.render()
+  }
+
+  prev() {
+    if (this.indexValue > 0) {
+      this.indexValue--
+    } else if (this.loopValue) {
+      this.indexValue = this.slideTargets.length - 1
+    }
+    this.render()
+  }
+
+  goTo(event) {
+    const index = parseInt(event.currentTarget.dataset.index || event.params.index, 10)
+    this.indexValue = index
+    this.render()
+  }
+
+  render() {
+    this.slideTargets.forEach((slide, i) => {
+      slide.classList.toggle("hidden", i !== this.indexValue)
+      slide.setAttribute("aria-hidden", (i !== this.indexValue).toString())
+    })
+    this.dotTargets.forEach((dot, i) => {
+      dot.classList.toggle("active", i === this.indexValue)
+      dot.setAttribute("aria-selected", (i === this.indexValue).toString())
+    })
+    if (this.hasPrevTarget) this.prevTarget.disabled = !this.loopValue && this.indexValue === 0
+    if (this.hasNextTarget) this.nextTarget.disabled = !this.loopValue && this.indexValue === this.slideTargets.length - 1
+  }
+
+  startAutoplay() {
+    this.intervalId = setInterval(() => this.next(), this.intervalValue)
+  }
+
+  stopAutoplay() {
+    if (this.intervalId) clearInterval(this.intervalId)
+  }
+
+  pauseAutoplay() {
+    this.stopAutoplay()
+  }
+
+  resumeAutoplay() {
+    if (this.autoplayValue) this.startAutoplay()
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_clipboard_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["source", "feedback"]
+  static values = { text: { type: String, default: "" } }
+
+  async copy() {
+    const text = this.textValue || (this.hasSourceTarget ? this.sourceTarget.textContent : "")
+
+    try {
+      await navigator.clipboard.writeText(text)
+      this.showFeedback("Copied!")
+      this.dispatch("copy", { detail: { text } })
+    } catch {
+      this.fallbackCopy(text)
+    }
+  }
+
+  fallbackCopy(text) {
+    const textarea = document.createElement("textarea")
+    textarea.value = text
+    textarea.style.cssText = "position:fixed;left:-9999px"
+    document.body.appendChild(textarea)
+    textarea.select()
+    try {
+      document.execCommand("copy")
+      this.showFeedback("Copied!")
+    } catch {
+      this.showFeedback("Failed to copy")
+    }
+    textarea.remove()
+  }
+
+  showFeedback(message) {
+    if (!this.hasFeedbackTarget) return
+    this.feedbackTarget.textContent = message
+    this.feedbackTarget.classList.remove("hidden")
+    setTimeout(() => {
+      this.feedbackTarget.classList.add("hidden")
+    }, 2000)
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_code_highlight_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}