m9sh 0.2.1 → 0.2.2

data/app/javascript/controllers/color_customizer_controller.js

@@ -0,0 +1,569 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [
+    "swatch", "colorValue", "selectedSwatch", "selectedName", "selectedValue",
+    "sliders", "lightnessSlider", "chromaSlider", "hueSlider",
+    "lightnessValue", "chromaValue", "hueValue",
+    "configPreview", "applyButton"
+  ]
+
+  static values = { theme: String }
+
+  connect() {
+    this.selectedColor = null
+    this.customColors = this.loadCustomColors()
+    this.exportFormat = "tailwind"
+
+    // Apply saved custom colors
+    this.applyCustomColors()
+
+    // Load current color values
+    this.loadColorValues()
+
+    // Generate initial config
+    this.generateConfig()
+
+    // Show apply button initially for tailwind format
+    if (this.hasApplyButtonTarget && this.exportFormat === "tailwind") {
+      this.applyButtonTarget.classList.remove('hidden')
+    }
+  }
+
+  loadColorValues() {
+    // Get computed styles for all color swatches
+    this.swatchTargets.forEach(swatch => {
+      const colorName = swatch.dataset.color
+      const computedStyle = getComputedStyle(document.documentElement)
+      const colorValue = computedStyle.getPropertyValue(`--color-${colorName}`).trim()
+
+      // Find the corresponding value display
+      const valueDisplay = this.colorValueTargets.find(el => el.dataset.color === colorName)
+      if (valueDisplay) {
+        valueDisplay.textContent = colorValue || "undefined"
+      }
+    })
+  }
+
+  closeAllPopovers() {
+    // Find all popover controllers within this element
+    const popovers = this.element.querySelectorAll('[data-controller*="m9sh--popover"]')
+    popovers.forEach(popoverEl => {
+      const controller = this.application.getControllerForElementAndIdentifier(popoverEl, 'm9sh--popover')
+      if (controller && controller.isOpen) {
+        controller.close()
+      }
+    })
+  }
+
+  selectColor(event) {
+    const colorName = event.params.color
+    this.selectedColor = colorName
+
+    // Close all other popovers first
+    this.closeAllPopovers()
+
+    // Find the popover that contains this color
+    const popover = event.currentTarget.closest('[data-controller*="m9sh--popover"]')
+    if (!popover) return
+
+    // Wait for popover to be visible before accessing its content
+    setTimeout(() => {
+      // Find targets within this specific popover
+      const popoverContent = popover.querySelector('[data-m9sh--popover-target="content"]')
+      if (!popoverContent) return
+
+      const selectedValueEl = popoverContent.querySelector('[data-color-customizer-target="selectedValue"]')
+      const lightnessSliderEl = popoverContent.querySelector('[data-color-customizer-target="lightnessSlider"]')
+      const chromaSliderEl = popoverContent.querySelector('[data-color-customizer-target="chromaSlider"]')
+      const hueSliderEl = popoverContent.querySelector('[data-color-customizer-target="hueSlider"]')
+      const lightnessValueEl = popoverContent.querySelector('[data-color-customizer-target="lightnessValue"]')
+      const chromaValueEl = popoverContent.querySelector('[data-color-customizer-target="chromaValue"]')
+      const hueValueEl = popoverContent.querySelector('[data-color-customizer-target="hueValue"]')
+
+      // Get current color value
+      const computedStyle = getComputedStyle(document.documentElement)
+      const colorValue = computedStyle.getPropertyValue(`--color-${colorName}`).trim()
+
+      // Update the value display in this popover
+      if (selectedValueEl) {
+        selectedValueEl.textContent = colorValue
+      }
+
+      // Parse OKLCH values and update sliders
+      if (colorValue && colorValue.startsWith('oklch')) {
+        const values = this.parseOklch(colorValue)
+        if (values) {
+          this.updateSlidersInPopover(values, lightnessSliderEl, chromaSliderEl, hueSliderEl, lightnessValueEl, chromaValueEl, hueValueEl)
+        }
+      }
+    }, 100)
+  }
+
+  parseOklch(oklchString) {
+    // Parse oklch(0.55 0.20 260) format
+    const match = oklchString.match(/oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*[\d.]+)?\)/)
+    if (match) {
+      return {
+        lightness: parseFloat(match[1]) * 100, // Convert to percentage
+        chroma: parseFloat(match[2]) * 100, // Convert to percentage (0-0.4 → 0-40)
+        hue: parseFloat(match[3])
+      }
+    }
+    return null
+  }
+
+  updateSliders(values) {
+    // Update slider values
+    const lightnessSlider = this.lightnessSliderTarget.querySelector('[data-controller="m9sh--slider"]')
+    const chromaSlider = this.chromaSliderTarget.querySelector('[data-controller="m9sh--slider"]')
+    const hueSlider = this.hueSliderTarget.querySelector('[data-controller="m9sh--slider"]')
+
+    if (lightnessSlider) {
+      const controller = this.application.getControllerForElementAndIdentifier(lightnessSlider, 'm9sh--slider')
+      if (controller) controller.setValue(values.lightness)
+    }
+
+    if (chromaSlider) {
+      const controller = this.application.getControllerForElementAndIdentifier(chromaSlider, 'm9sh--slider')
+      if (controller) controller.setValue(values.chroma)
+    }
+
+    if (hueSlider) {
+      const controller = this.application.getControllerForElementAndIdentifier(hueSlider, 'm9sh--slider')
+      if (controller) controller.setValue(values.hue)
+    }
+
+    // Update value displays
+    this.lightnessValueTarget.textContent = values.lightness.toFixed(0)
+    this.chromaValueTarget.textContent = values.chroma.toFixed(0)
+    this.hueValueTarget.textContent = values.hue.toFixed(0)
+  }
+
+  updateSlidersInPopover(values, lightnessSliderEl, chromaSliderEl, hueSliderEl, lightnessValueEl, chromaValueEl, hueValueEl) {
+    // Update slider values in the specific popover
+    if (lightnessSliderEl) {
+      const lightnessSlider = lightnessSliderEl.querySelector('[data-controller="m9sh--slider"]')
+      if (lightnessSlider) {
+        const controller = this.application.getControllerForElementAndIdentifier(lightnessSlider, 'm9sh--slider')
+        if (controller) controller.valueValue = values.lightness
+      }
+    }
+
+    if (chromaSliderEl) {
+      const chromaSlider = chromaSliderEl.querySelector('[data-controller="m9sh--slider"]')
+      if (chromaSlider) {
+        const controller = this.application.getControllerForElementAndIdentifier(chromaSlider, 'm9sh--slider')
+        if (controller) controller.valueValue = values.chroma
+      }
+    }
+
+    if (hueSliderEl) {
+      const hueSlider = hueSliderEl.querySelector('[data-controller="m9sh--slider"]')
+      if (hueSlider) {
+        const controller = this.application.getControllerForElementAndIdentifier(hueSlider, 'm9sh--slider')
+        if (controller) controller.valueValue = values.hue
+      }
+    }
+
+    // Update value displays
+    if (lightnessValueEl) lightnessValueEl.textContent = values.lightness.toFixed(0)
+    if (chromaValueEl) chromaValueEl.textContent = values.chroma.toFixed(0)
+    if (hueValueEl) hueValueEl.textContent = values.hue.toFixed(0)
+  }
+
+  adjustColor(event) {
+    if (!this.selectedColor) return
+
+    // Find the popover containing the slider
+    const popover = event.currentTarget.closest('[data-controller*="m9sh--popover"]')
+    if (!popover) return
+
+    const popoverContent = popover.querySelector('[data-m9sh--popover-target="content"]')
+    if (!popoverContent) return
+
+    const lightnessSliderEl = popoverContent.querySelector('[data-color-customizer-target="lightnessSlider"]')
+    const chromaSliderEl = popoverContent.querySelector('[data-color-customizer-target="chromaSlider"]')
+    const hueSliderEl = popoverContent.querySelector('[data-color-customizer-target="hueSlider"]')
+    const selectedValueEl = popoverContent.querySelector('[data-color-customizer-target="selectedValue"]')
+    const lightnessValueEl = popoverContent.querySelector('[data-color-customizer-target="lightnessValue"]')
+    const chromaValueEl = popoverContent.querySelector('[data-color-customizer-target="chromaValue"]')
+    const hueValueEl = popoverContent.querySelector('[data-color-customizer-target="hueValue"]')
+
+    // Get current slider values
+    const lightness = this.getSliderValue(lightnessSliderEl) / 100
+    const chroma = this.getSliderValue(chromaSliderEl) / 100
+    const hue = this.getSliderValue(hueSliderEl)
+
+    // Create new OKLCH value
+    const newColor = `oklch(${lightness.toFixed(2)} ${chroma.toFixed(2)} ${hue})`
+
+    // Preview the change
+    this.previewColorChange(this.selectedColor, newColor)
+
+    // Auto-save to localStorage
+    if (!this.customColors[this.themeValue]) {
+      this.customColors[this.themeValue] = {}
+    }
+    this.customColors[this.themeValue][this.selectedColor] = newColor
+    this.saveCustomColors()
+
+    // Regenerate config
+    this.generateConfig()
+
+    // Update value display in popover
+    if (selectedValueEl) {
+      selectedValueEl.textContent = newColor
+    }
+
+    // Update value displays
+    if (lightnessValueEl) lightnessValueEl.textContent = (lightness * 100).toFixed(0)
+    if (chromaValueEl) chromaValueEl.textContent = (chroma * 100).toFixed(0)
+    if (hueValueEl) hueValueEl.textContent = hue.toFixed(0)
+  }
+
+  getSliderValue(sliderContainer) {
+    if (!sliderContainer) return 0
+
+    const slider = sliderContainer.querySelector('[data-controller="m9sh--slider"]')
+    if (slider) {
+      const controller = this.application.getControllerForElementAndIdentifier(slider, 'm9sh--slider')
+      if (controller) {
+        return controller.valueValue
+      }
+    }
+    return 0
+  }
+
+  previewColorChange(colorName, colorValue) {
+    // Apply to document for live preview
+    document.documentElement.style.setProperty(`--color-${colorName}`, colorValue)
+
+    // Update swatch displays
+    const swatch = this.swatchTargets.find(s => s.dataset.color === colorName)
+    if (swatch) {
+      swatch.style.backgroundColor = colorValue
+    }
+
+    const valueDisplay = this.colorValueTargets.find(el => el.dataset.color === colorName)
+    if (valueDisplay) {
+      valueDisplay.textContent = colorValue
+    }
+  }
+
+  applyColor() {
+    if (!this.selectedColor) return
+
+    // Get current value
+    const computedStyle = getComputedStyle(document.documentElement)
+    const colorValue = computedStyle.getPropertyValue(`--color-${this.selectedColor}`).trim()
+
+    // Save to custom colors
+    if (!this.customColors[this.themeValue]) {
+      this.customColors[this.themeValue] = {}
+    }
+    this.customColors[this.themeValue][this.selectedColor] = colorValue
+
+    // Save to localStorage
+    this.saveCustomColors()
+
+    // Regenerate config
+    this.generateConfig()
+
+    // Show success feedback
+    this.showToast("Color applied successfully")
+  }
+
+  resetColor(event) {
+    if (!this.selectedColor) return
+
+    // Remove custom color
+    if (this.customColors[this.themeValue]) {
+      delete this.customColors[this.themeValue][this.selectedColor]
+    }
+
+    // Remove the custom property to revert to default
+    document.documentElement.style.removeProperty(`--color-${this.selectedColor}`)
+
+    // Save changes
+    this.saveCustomColors()
+
+    // Reload color values
+    this.loadColorValues()
+
+    // Regenerate config
+    this.generateConfig()
+
+    // Update sliders in the open popover
+    const popover = event.currentTarget.closest('[data-controller*="m9sh--popover"]')
+    if (popover) {
+      const popoverContent = popover.querySelector('[data-m9sh--popover-target="content"]')
+      if (popoverContent) {
+        const selectedValueEl = popoverContent.querySelector('[data-color-customizer-target="selectedValue"]')
+        const lightnessSliderEl = popoverContent.querySelector('[data-color-customizer-target="lightnessSlider"]')
+        const chromaSliderEl = popoverContent.querySelector('[data-color-customizer-target="chromaSlider"]')
+        const hueSliderEl = popoverContent.querySelector('[data-color-customizer-target="hueSlider"]')
+        const lightnessValueEl = popoverContent.querySelector('[data-color-customizer-target="lightnessValue"]')
+        const chromaValueEl = popoverContent.querySelector('[data-color-customizer-target="chromaValue"]')
+        const hueValueEl = popoverContent.querySelector('[data-color-customizer-target="hueValue"]')
+
+        // Get the default color value
+        const computedStyle = getComputedStyle(document.documentElement)
+        const defaultColor = computedStyle.getPropertyValue(`--color-${this.selectedColor}`).trim()
+
+        // Update value display
+        if (selectedValueEl) {
+          selectedValueEl.textContent = defaultColor
+        }
+
+        // Parse and update sliders
+        if (defaultColor && defaultColor.startsWith('oklch')) {
+          const values = this.parseOklch(defaultColor)
+          if (values) {
+            this.updateSlidersInPopover(values, lightnessSliderEl, chromaSliderEl, hueSliderEl, lightnessValueEl, chromaValueEl, hueValueEl)
+          }
+        }
+      }
+    }
+
+    // Show feedback
+    this.showToast("Color reset to default")
+  }
+
+  resetAll() {
+    // Clear all custom colors for this theme
+    delete this.customColors[this.themeValue]
+
+    // Remove all custom properties
+    const colorNames = this.swatchTargets.map(s => s.dataset.color)
+    colorNames.forEach(color => {
+      document.documentElement.style.removeProperty(`--color-${color}`)
+    })
+
+    // Save changes
+    this.saveCustomColors()
+
+    // Reload color values
+    this.loadColorValues()
+
+    // Regenerate config
+    this.generateConfig()
+
+    // Show feedback
+    this.showToast("All colors reset to defaults")
+  }
+
+  setExportFormat(event) {
+    this.exportFormat = event.params.format
+    this.generateConfig()
+
+    // Show/hide apply button based on format
+    if (this.hasApplyButtonTarget) {
+      if (this.exportFormat === "tailwind") {
+        this.applyButtonTarget.classList.remove('hidden')
+      } else {
+        this.applyButtonTarget.classList.add('hidden')
+      }
+    }
+
+    // Update button styles
+    event.currentTarget.parentElement.querySelectorAll('button').forEach(btn => {
+      btn.classList.remove('bg-primary', 'text-primary-foreground')
+      btn.classList.add('bg-background')
+    })
+    event.currentTarget.classList.add('bg-primary', 'text-primary-foreground')
+    event.currentTarget.classList.remove('bg-background')
+  }
+
+  generateConfig() {
+    const colors = this.getAllColors()
+    let config = ""
+
+    switch (this.exportFormat) {
+      case "tailwind":
+        config = this.generateTailwindConfig(colors)
+        break
+      case "css":
+        config = this.generateCSSConfig(colors)
+        break
+      case "json":
+        config = this.generateJSONConfig(colors)
+        break
+    }
+
+    this.configPreviewTarget.value = config
+  }
+
+  getAllColors() {
+    const colors = {}
+    const computedStyle = getComputedStyle(document.documentElement)
+
+    this.swatchTargets.forEach(swatch => {
+      const colorName = swatch.dataset.color
+      const colorValue = computedStyle.getPropertyValue(`--color-${colorName}`).trim()
+      if (colorValue) {
+        colors[colorName] = colorValue
+      }
+    })
+
+    return colors
+  }
+
+  generateTailwindConfig(colors) {
+    let config = `/* Tailwind CSS v4 Theme Configuration */\n`
+    config += `/* ${this.themeValue.charAt(0).toUpperCase() + this.themeValue.slice(1)} Theme */\n\n`
+    config += `@theme {\n`
+
+    Object.entries(colors).forEach(([name, value]) => {
+      config += `    --color-${name}: ${value};\n`
+    })
+
+    config += `}`
+
+    return config
+  }
+
+  generateCSSConfig(colors) {
+    let config = `/* CSS Custom Properties */\n`
+    config += `/* ${this.themeValue.charAt(0).toUpperCase() + this.themeValue.slice(1)} Theme */\n\n`
+
+    // Light mode
+    config += `[data-theme="${this.themeValue}"] {\n`
+    Object.entries(colors).forEach(([name, value]) => {
+      if (!name.includes('dark')) {
+        config += `    --color-${name}: ${value};\n`
+      }
+    })
+    config += `}\n\n`
+
+    // Dark mode if applicable
+    const hasDarkColors = Object.keys(colors).some(name => name.includes('dark'))
+    if (hasDarkColors || document.documentElement.classList.contains('dark')) {
+      config += `[data-theme="${this.themeValue}"].dark {\n`
+      Object.entries(colors).forEach(([name, value]) => {
+        config += `    --color-${name}: ${value};\n`
+      })
+      config += `}`
+    }
+
+    return config
+  }
+
+  generateJSONConfig(colors) {
+    const config = {
+      theme: this.themeValue,
+      colors: colors,
+      format: "oklch",
+      generated: new Date().toISOString()
+    }
+
+    return JSON.stringify(config, null, 2)
+  }
+
+  async copyConfig() {
+    const config = this.configPreviewTarget.value
+
+    try {
+      await navigator.clipboard.writeText(config)
+      this.showToast("Configuration copied to clipboard!")
+    } catch (err) {
+      this.showToast("Failed to copy configuration", "error")
+    }
+  }
+
+  downloadConfig() {
+    const config = this.configPreviewTarget.value
+    const filename = `${this.themeValue}-theme.${this.getFileExtension()}`
+
+    const blob = new Blob([config], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+
+    this.showToast(`Downloaded ${filename}`)
+  }
+
+  getFileExtension() {
+    switch (this.exportFormat) {
+      case "tailwind":
+      case "css":
+        return "css"
+      case "json":
+        return "json"
+      default:
+        return "txt"
+    }
+  }
+
+  loadCustomColors() {
+    const stored = localStorage.getItem('m9sh-custom-colors')
+    return stored ? JSON.parse(stored) : {}
+  }
+
+  applyCustomColors() {
+    if (!this.customColors[this.themeValue]) return
+
+    // Apply all saved custom colors for this theme
+    Object.entries(this.customColors[this.themeValue]).forEach(([colorName, colorValue]) => {
+      document.documentElement.style.setProperty(`--color-${colorName}`, colorValue)
+    })
+  }
+
+  saveCustomColors() {
+    localStorage.setItem('m9sh-custom-colors', JSON.stringify(this.customColors))
+  }
+
+  applyConfigChanges() {
+    const config = this.configPreviewTarget.value
+
+    try {
+      let colors = {}
+
+      // Parse based on current export format
+      if (this.exportFormat === "json") {
+        const parsed = JSON.parse(config)
+        colors = parsed.colors || {}
+      } else if (this.exportFormat === "tailwind" || this.exportFormat === "css") {
+        // Parse CSS custom properties
+        const matches = config.matchAll(/--color-([^:]+):\s*([^;]+);/g)
+        for (const match of matches) {
+          colors[match[1].trim()] = match[2].trim()
+        }
+      }
+
+      // Apply colors to UI
+      Object.entries(colors).forEach(([name, value]) => {
+        document.documentElement.style.setProperty(`--color-${name}`, value)
+
+        // Update custom colors storage
+        if (!this.customColors[this.themeValue]) {
+          this.customColors[this.themeValue] = {}
+        }
+        this.customColors[this.themeValue][name] = value
+      })
+
+      // Save to localStorage
+      this.saveCustomColors()
+
+      // Reload color values to update displays
+      this.loadColorValues()
+
+      this.showToast("Configuration applied successfully!")
+    } catch (err) {
+      console.error("Failed to parse config:", err)
+      this.showToast("Failed to parse configuration. Please check the format.", "error")
+    }
+  }
+
+  showToast(message, type = "success") {
+    // Dispatch custom event for toast notification
+    const event = new CustomEvent('m9sh:toast', {
+      detail: { message, type },
+      bubbles: true
+    })
+    this.element.dispatchEvent(event)
+  }
+}

data/app/javascript/controllers/color_theme_controller.js

@@ -0,0 +1,120 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static themes = ["neutral", "indigo", "party", "sunset", "ocean", "forest", "cyberpunk", "thunder", "rose", "miami", "lavender", "mint", "coral", "arctic"]
+  static targets = ["dropdown", "currentTheme", "customizer"]
+
+  connect() {
+    // Initialize color theme on connect
+    this.updateColorTheme()
+    this.updateDisplay()
+    this.updateCustomizer()
+
+    // Close dropdown when clicking outside
+    this.boundCloseDropdown = this.closeDropdown.bind(this)
+    document.addEventListener('click', this.boundCloseDropdown)
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.boundCloseDropdown)
+  }
+
+  previous(event) {
+    event?.stopPropagation()
+    const currentTheme = this.getCurrentTheme()
+    const currentIndex = this.constructor.themes.indexOf(currentTheme)
+    const previousIndex = (currentIndex - 1 + this.constructor.themes.length) % this.constructor.themes.length
+    const newTheme = this.constructor.themes[previousIndex]
+
+    this.setColorTheme(newTheme)
+    this.updateDisplay()
+  }
+
+  next(event) {
+    event?.stopPropagation()
+    const currentTheme = this.getCurrentTheme()
+    const currentIndex = this.constructor.themes.indexOf(currentTheme)
+    const nextIndex = (currentIndex + 1) % this.constructor.themes.length
+    const newTheme = this.constructor.themes[nextIndex]
+
+    this.setColorTheme(newTheme)
+    this.updateDisplay()
+  }
+
+  toggleDropdown(event) {
+    event.stopPropagation()
+    if (this.hasDropdownTarget) {
+      this.dropdownTarget.classList.toggle('hidden')
+    }
+  }
+
+  closeDropdown(event) {
+    if (this.hasDropdownTarget && !this.element.contains(event.target)) {
+      this.dropdownTarget.classList.add('hidden')
+    }
+  }
+
+  selectTheme(event) {
+    event.stopPropagation()
+    const theme = event.currentTarget.dataset.theme
+    this.setColorTheme(theme)
+    this.updateDisplay()
+    this.dropdownTarget.classList.add('hidden')
+  }
+
+  updateDisplay() {
+    const currentTheme = this.getCurrentTheme()
+    if (this.hasCurrentThemeTarget) {
+      // Capitalize first letter
+      const displayName = currentTheme.charAt(0).toUpperCase() + currentTheme.slice(1)
+      this.currentThemeTarget.textContent = displayName
+    }
+  }
+
+  getCurrentTheme() {
+    return localStorage.getItem('colorTheme') || 'neutral'
+  }
+
+  setColorTheme(theme) {
+    localStorage.setItem('colorTheme', theme)
+    this.applyColorTheme(theme)
+    this.updateCustomizer()
+  }
+
+  updateColorTheme() {
+    const theme = this.getCurrentTheme()
+    this.applyColorTheme(theme)
+  }
+
+  updateCustomizer() {
+    if (this.hasCustomizerTarget) {
+      const currentTheme = this.getCurrentTheme()
+      const customizerElement = this.customizerTarget.querySelector('[data-controller="color-customizer"]')
+
+      if (customizerElement) {
+        const controller = this.application.getControllerForElementAndIdentifier(customizerElement, 'color-customizer')
+        if (controller) {
+          controller.themeValue = currentTheme
+          controller.loadColorValues()
+          controller.generateConfig()
+        }
+      }
+    }
+  }
+
+  applyColorTheme(theme) {
+    const html = document.documentElement
+
+    // Remove all theme data attributes
+    this.constructor.themes.forEach(t => {
+      if (t !== 'neutral') {
+        html.removeAttribute('data-theme')
+      }
+    })
+
+    // Apply new theme (neutral has no data attribute)
+    if (theme !== 'neutral') {
+      html.setAttribute('data-theme', theme)
+    }
+  }
+}