shadcn-phlex 0.1.0

data/js/controllers/command_controller.js

@@ -0,0 +1,171 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Command palette (cmdk-style)
+// Cmd+K to open, search/filter, keyboard navigation, grouping
+export default class extends Controller {
+  static targets = ["dialog", "overlay", "input", "list", "group", "item", "empty"]
+  static values = {
+    open: { type: Boolean, default: false },
+    shortcut: { type: String, default: "k" },
+  }
+
+  connect() {
+    this._onGlobalKeydown = this._handleGlobalKeydown.bind(this)
+    this._onKeydown = this._handleKeydown.bind(this)
+
+    this._allItems = this.itemTargets.map((el) => ({
+      element: el,
+      label: el.textContent.trim().toLowerCase(),
+      value: el.dataset.value || "",
+      group: el.closest('[data-slot="command-group"]'),
+    }))
+
+    this._hideTimeouts = []
+    document.addEventListener("keydown", this._onGlobalKeydown)
+    this._syncState()
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+    document.removeEventListener("keydown", this._onGlobalKeydown)
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+
+  toggle() { this.openValue = !this.openValue }
+  show() { this.openValue = true }
+  hide() { this.openValue = false }
+
+  filter(event) {
+    const query = event.currentTarget.value.toLowerCase()
+    let totalVisible = 0
+
+    // Track visible items per group
+    const groupCounts = new Map()
+
+    this._allItems.forEach(({ element, label, group }) => {
+      const match = !query || label.includes(query)
+      element.hidden = !match
+      if (match) {
+        totalVisible++
+        if (group) {
+          groupCounts.set(group, (groupCounts.get(group) || 0) + 1)
+        }
+      }
+    })
+
+    // Hide groups with no visible items
+    this.groupTargets.forEach((group) => {
+      group.hidden = (groupCounts.get(group) || 0) === 0
+    })
+
+    // Show/hide empty state
+    this.emptyTargets.forEach((el) => {
+      el.hidden = totalVisible > 0
+    })
+  }
+
+  selectItem(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled) return
+
+    this.dispatch("select", { detail: { value: item.dataset.value } })
+
+    // Execute callback if specified
+    const callback = item.dataset.commandCallback
+    if (callback && window[callback]) {
+      window[callback]()
+    }
+
+    this.hide()
+  }
+
+  clickOverlay(event) {
+    if (event.target === event.currentTarget) this.hide()
+  }
+
+  openValueChanged() { this._syncState() }
+
+  _syncState() {
+    if (!this._hideTimeouts) return
+    if (this.openValue) {
+      this._open()
+    } else {
+      this._close()
+    }
+  }
+
+  _open() {
+    this.dialogTargets.forEach((el) => { el.dataset.state = "open"; el.hidden = false })
+    this.overlayTargets.forEach((el) => { el.dataset.state = "open"; el.hidden = false })
+
+    document.body.style.overflow = "hidden"
+    document.addEventListener("keydown", this._onKeydown)
+
+    requestAnimationFrame(() => {
+      if (this.hasInputTarget) {
+        this.inputTarget.value = ""
+        this.inputTarget.focus()
+      }
+      // Reset filter
+      this._allItems.forEach(({ element }) => { element.hidden = false })
+      this.groupTargets.forEach((g) => { g.hidden = false })
+      this.emptyTargets.forEach((el) => { el.hidden = true })
+    })
+  }
+
+  _close() {
+    this.dialogTargets.forEach((el) => {
+      el.dataset.state = "closed"
+      this._hideTimeouts.push(setTimeout(() => { if (el.dataset.state === "closed") el.hidden = true }, 200))
+    })
+    this.overlayTargets.forEach((el) => {
+      el.dataset.state = "closed"
+      this._hideTimeouts.push(setTimeout(() => { if (el.dataset.state === "closed") el.hidden = true }, 200))
+    })
+
+    document.body.style.overflow = ""
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+
+  _handleGlobalKeydown(event) {
+    if ((event.metaKey || event.ctrlKey) && event.key === this.shortcutValue) {
+      event.preventDefault()
+      this.toggle()
+    }
+  }
+
+  _handleKeydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.hide()
+      return
+    }
+
+    const items = this._getVisibleItems()
+    const current = items.indexOf(document.activeElement)
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        if (current < items.length - 1) items[current + 1].focus()
+        else if (items.length > 0) items[0].focus()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        if (current > 0) items[current - 1].focus()
+        else if (this.hasInputTarget) this.inputTarget.focus()
+        break
+      case "Enter":
+        if (document.activeElement?.dataset.slot === "command-item") {
+          event.preventDefault()
+          document.activeElement.click()
+        }
+        break
+    }
+  }
+
+  _getVisibleItems() {
+    return this.itemTargets.filter((el) => !el.hidden && !el.dataset.disabled)
+  }
+}

data/js/controllers/context_menu_controller.js

@@ -0,0 +1,132 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix ContextMenu behavior
+// Right-click to open, same keyboard navigation as DropdownMenu
+export default class extends Controller {
+  static targets = ["trigger", "content", "item"]
+  static values = {
+    open: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this._onClickOutside = this._handleClickOutside.bind(this)
+    this._onKeydown = this._handleKeydown.bind(this)
+    this._onContextMenu = this._handleContextMenu.bind(this)
+    this._hideTimeouts = []
+
+    this.triggerTargets.forEach((el) => {
+      el.addEventListener("contextmenu", this._onContextMenu)
+    })
+
+    this._syncState()
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+    this._removeListeners()
+    this.triggerTargets.forEach((el) => {
+      el.removeEventListener("contextmenu", this._onContextMenu)
+    })
+  }
+
+  hide() { this.openValue = false }
+
+  openValueChanged() { this._syncState() }
+
+  selectItem(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled) return
+    this.dispatch("select", { detail: { value: item.dataset.value } })
+    this.hide()
+  }
+
+  _handleContextMenu(event) {
+    event.preventDefault()
+    this._mouseX = event.clientX
+    this._mouseY = event.clientY
+    this.openValue = true
+  }
+
+  _syncState() {
+    if (!this._hideTimeouts) return
+    const state = this.openValue ? "open" : "closed"
+
+    this.contentTargets.forEach((el) => {
+      el.dataset.state = state
+      if (this.openValue) {
+        el.hidden = false
+        this._positionAt(el, this._mouseX || 0, this._mouseY || 0)
+        requestAnimationFrame(() => {
+          const firstItem = el.querySelector('[data-slot*="menu-item"]:not([data-disabled])')
+          firstItem?.focus()
+        })
+      } else {
+        this._hideTimeouts.push(setTimeout(() => { if (el.dataset.state === "closed") el.hidden = true }, 200))
+      }
+    })
+
+    if (this.openValue) {
+      document.addEventListener("click", this._onClickOutside, true)
+      document.addEventListener("keydown", this._onKeydown)
+    } else {
+      this._removeListeners()
+    }
+  }
+
+  _positionAt(content, x, y) {
+    content.style.position = "fixed"
+    content.style.zIndex = "50"
+    content.style.top = `${y}px`
+    content.style.left = `${x}px`
+
+    // Adjust if overflowing
+    requestAnimationFrame(() => {
+      const rect = content.getBoundingClientRect()
+      if (rect.right > window.innerWidth) {
+        content.style.left = `${x - rect.width}px`
+      }
+      if (rect.bottom > window.innerHeight) {
+        content.style.top = `${y - rect.height}px`
+      }
+    })
+  }
+
+  _handleClickOutside(event) {
+    if (!this.contentTargets.some((el) => el.contains(event.target))) {
+      this.hide()
+    }
+  }
+
+  _handleKeydown(event) {
+    if (event.key === "Escape") { event.preventDefault(); this.hide(); return }
+
+    const items = this._getItems()
+    const current = items.indexOf(document.activeElement)
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      items[(current + 1) % items.length]?.focus()
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault()
+      items[(current - 1 + items.length) % items.length]?.focus()
+    } else if (event.key === "Enter" || event.key === " ") {
+      if (document.activeElement?.matches('[data-slot*="menu-item"]')) {
+        event.preventDefault()
+        document.activeElement.click()
+      }
+    }
+  }
+
+  _getItems() {
+    if (!this.hasContentTarget) return []
+    return Array.from(this.contentTarget.querySelectorAll(
+      '[data-slot*="menu-item"]:not([data-disabled])'
+    )).filter((el) => !el.closest("[hidden]"))
+  }
+
+  _removeListeners() {
+    document.removeEventListener("click", this._onClickOutside, true)
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+}

data/js/controllers/dark_mode_controller.js

@@ -0,0 +1,106 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Dark mode controller for Shadcn Phlex
+//
+// Usage:
+//   <div data-controller="shadcn--dark-mode"
+//        data-shadcn--dark-mode-mode-value="system">
+//     <button data-action="click->shadcn--dark-mode#toggle">Toggle</button>
+//   </div>
+//
+// Values:
+//   mode: "light" | "dark" | "system" (default: "system")
+//
+// Actions:
+//   toggle()    - Cycles: light → dark → system
+//   setLight()  - Force light mode
+//   setDark()   - Force dark mode
+//   setSystem() - Follow OS preference
+
+export default class extends Controller {
+  static values = {
+    mode: { type: String, default: "system" }
+  }
+
+  connect() {
+    this._connected = false
+
+    // Listen for OS preference changes
+    this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    this._onMediaChange = this._handleMediaChange.bind(this)
+    this._mediaQuery.addEventListener("change", this._onMediaChange)
+
+    // Read stored preference — set AFTER listeners are ready
+    const stored = localStorage.getItem("theme")
+    if (stored && ["light", "dark", "system"].includes(stored)) {
+      this.modeValue = stored
+    }
+
+    this._connected = true
+    this._apply()
+  }
+
+  disconnect() {
+    if (this._mediaQuery) {
+      this._mediaQuery.removeEventListener("change", this._onMediaChange)
+    }
+  }
+
+  modeValueChanged() {
+    // Only apply after connect has finished to avoid overwriting localStorage
+    // from the default value race
+    if (this._connected) {
+      this._apply()
+    }
+  }
+
+  // ── Actions ──────────────────────────────────────────────
+
+  toggle() {
+    const cycle = { light: "dark", dark: "system", system: "light" }
+    this.modeValue = cycle[this.modeValue] || "system"
+  }
+
+  setLight() {
+    this.modeValue = "light"
+  }
+
+  setDark() {
+    this.modeValue = "dark"
+  }
+
+  setSystem() {
+    this.modeValue = "system"
+  }
+
+  // ── Private ──────────────────────────────────────────────
+
+  _apply() {
+    const isDark = this._shouldBeDark()
+
+    document.documentElement.classList.toggle("dark", isDark)
+
+    // Persist preference
+    localStorage.setItem("theme", this.modeValue)
+
+    // Dispatch custom event
+    document.dispatchEvent(
+      new CustomEvent("theme:change", {
+        detail: { mode: this.modeValue, dark: isDark }
+      })
+    )
+  }
+
+  _shouldBeDark() {
+    if (this.modeValue === "dark") return true
+    if (this.modeValue === "light") return false
+    // system
+    return this._mediaQuery?.matches ?? false
+  }
+
+  _handleMediaChange() {
+    if (this.modeValue === "system") {
+      this._apply()
+    }
+  }
+}

data/js/controllers/dialog_controller.js

@@ -0,0 +1,205 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Dialog behavior
+// Focus trap, scroll lock, escape to close, overlay click to close
+export default class extends Controller {
+  static targets = ["trigger", "overlay", "content", "close", "title", "description"]
+  static values = {
+    open: { type: Boolean, default: false },
+    modal: { type: Boolean, default: true },
+    closeOnOverlay: { type: Boolean, default: true },
+    closeOnEscape: { type: Boolean, default: true },
+  }
+
+  connect() {
+    this._onKeydown = this._handleKeydown.bind(this)
+    this._previouslyFocused = null
+    this._hideTimeouts = []
+    this._syncState()
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+    this._removeListeners()
+    this._unlockScroll()
+  }
+
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  show() {
+    this.openValue = true
+  }
+
+  hide() {
+    this.openValue = false
+  }
+
+  openValueChanged() {
+    this._syncState()
+  }
+
+  clickOverlay(event) {
+    if (this.closeOnOverlayValue && event.target === event.currentTarget) {
+      this.hide()
+    }
+  }
+
+  _syncState() {
+    if (!this._hideTimeouts) return
+    if (this.openValue) {
+      this._open()
+    } else {
+      this._close()
+    }
+  }
+
+  _open() {
+    this._previouslyFocused = document.activeElement
+
+    this.element.dataset.state = "open"
+
+    this.overlayTargets.forEach((el) => {
+      el.dataset.state = "open"
+      el.hidden = false
+    })
+
+    this.contentTargets.forEach((el) => {
+      el.dataset.state = "open"
+      el.hidden = false
+      el.setAttribute("role", "dialog")
+      el.setAttribute("aria-modal", String(this.modalValue))
+
+      // Link title/description for ARIA
+      if (this.hasTitleTarget) {
+        const titleId = this._ensureId(this.titleTarget, "dialog-title")
+        el.setAttribute("aria-labelledby", titleId)
+      }
+      if (this.hasDescriptionTarget) {
+        const descId = this._ensureId(this.descriptionTarget, "dialog-desc")
+        el.setAttribute("aria-describedby", descId)
+      }
+    })
+
+    if (this.modalValue) {
+      this._lockScroll()
+    }
+
+    document.addEventListener("keydown", this._onKeydown)
+
+    // Focus first focusable element in content
+    requestAnimationFrame(() => {
+      if (this.hasContentTarget) {
+        const focusable = this._getFocusableElements(this.contentTarget)
+        if (focusable.length > 0) {
+          focusable[0].focus()
+        }
+      }
+    })
+  }
+
+  _close() {
+    this.element.dataset.state = "closed"
+
+    this.overlayTargets.forEach((el) => {
+      el.dataset.state = "closed"
+      // Delay hiding for exit animation
+      this._hideAfterAnimation(el)
+    })
+
+    this.contentTargets.forEach((el) => {
+      el.dataset.state = "closed"
+      this._hideAfterAnimation(el)
+    })
+
+    this._removeListeners()
+    this._unlockScroll()
+
+    // Restore focus
+    if (this._previouslyFocused && this._previouslyFocused.focus) {
+      this._previouslyFocused.focus()
+      this._previouslyFocused = null
+    }
+  }
+
+  _handleKeydown(event) {
+    if (event.key === "Escape" && this.closeOnEscapeValue) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.hide()
+      return
+    }
+
+    // Focus trap
+    if (event.key === "Tab" && this.modalValue && this.hasContentTarget) {
+      const focusable = this._getFocusableElements(this.contentTarget)
+      if (focusable.length === 0) return
+
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+
+      if (event.shiftKey) {
+        if (document.activeElement === first) {
+          event.preventDefault()
+          last.focus()
+        }
+      } else {
+        if (document.activeElement === last) {
+          event.preventDefault()
+          first.focus()
+        }
+      }
+    }
+  }
+
+  _getFocusableElements(container) {
+    const selector = [
+      'a[href]', 'button:not([disabled])', 'input:not([disabled])',
+      'select:not([disabled])', 'textarea:not([disabled])',
+      '[tabindex]:not([tabindex="-1"])', '[contenteditable]'
+    ].join(", ")
+    return Array.from(container.querySelectorAll(selector)).filter(
+      (el) => !el.closest("[hidden]") && el.offsetParent !== null
+    )
+  }
+
+  _lockScroll() {
+    this._scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    document.body.style.overflow = "hidden"
+    document.body.style.paddingRight = `${this._scrollbarWidth}px`
+  }
+
+  _unlockScroll() {
+    document.body.style.overflow = ""
+    document.body.style.paddingRight = ""
+  }
+
+  _removeListeners() {
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+
+  _hideAfterAnimation(el) {
+    const onAnimEnd = () => {
+      if (el.dataset.state === "closed") {
+        el.hidden = true
+      }
+      el.removeEventListener("animationend", onAnimEnd)
+    }
+    el.addEventListener("animationend", onAnimEnd)
+    // Fallback if no animation
+    this._hideTimeouts.push(setTimeout(() => {
+      if (el.dataset.state === "closed") {
+        el.hidden = true
+      }
+    }, 300))
+  }
+
+  _ensureId(el, prefix) {
+    if (!el.id) {
+      el.id = `${prefix}-${Math.random().toString(36).slice(2, 9)}`
+    }
+    return el.id
+  }
+}